Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style(ui): standardize tag styles and typography across components #808

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

style(ui): standardize tag styles and typography across components #808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/endpoints/EndpointPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
{{ $t('endpoints.detail.parameters') }}
</p>
<div class="flex items-center gap-[8px] w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] text-gray-500 text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
<div v-if="private" class="border border-gray-300 bg-white px-3 py-[2px] text-center text-xs text-gray-700 font-medium rounded">
<div v-if="private" class="border border-gray-300 bg-white px-2 py-[3px] text-center text-xs font-normal text-gray-700 rounded-sm">
{{ $t("all.private") }}
</div>
<div class="flex gap-[4px]">
Expand Down
22 changes: 11 additions & 11 deletions frontend/src/components/shared/HeaderTags.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<!-- Task -->
<div
v-if="taskTags.length"
class="text-gray-700 text-sm text-medium"
class="text-gray-700 text-sm font-regular"
>
{{ $t('all.tasks') }}:
</div>
Expand All @@ -21,14 +21,14 @@
<!-- Framework -->
<div
v-if="frameworkTags.length"
class="text-sm text-gray-500"
class="text-sm font-regular text-gray-700"
>
{{ $t('all.framework') }}:
</div>
<a
v-for="tag in theFrameworkTags.theTags"
:href="`/${prefix}?tag=${tag.name}&tag_type=Framework`"
class="text-gray-700"
class="text-sm text-gray-700 px-2 py-1 rounded-sm cursor-pointer flex items-center border border-gray-300 gap-1"
>
<PyTorch v-if="tag.name.toLowerCase() === 'pytorch'" />
<TensorFlow v-if="tag.name.toLowerCase() === 'tensorflow'" />
Expand All @@ -48,15 +48,15 @@
<!-- Language -->
<div
v-if="languageTags.length"
class="flex items-center text-sm text-gray-500"
class="flex items-center text-sm font-regular text-gray-700"
>
{{ $t('all.languages') }}:
</div>
<a
v-for="tag in theLanguageTags.theTags"
:href="`/${prefix}?tag=${tag.label}&tag_type=Language`"
:style="`color: ${tag.color}`"
class="text-sm text-success-700 px-[8px] py-[4px] rounded-sm cursor-pointer flex items-center gap-1 bg-success-25"
class="text-sm text-success-700 px-2 py-1 rounded-sm cursor-pointer flex items-center gap-1 bg-success-25"
>
<SvgIcon name="language_tag" />
{{ locale === 'zh' ? tag.show_name || tag.name : tag.name }}
Expand All @@ -70,13 +70,13 @@
<!-- industryTags -->
<div
v-if="industryTags.length"
class="text-sm text-gray-500"
class="text-sm font-regular text-gray-700"
>
{{ $t('all.industry') }}:
</div>
<div
v-for="tag in theIndustryTags.theTags"
class="text-sm text-gray-700 px-[8px] py-[4px] rounded-sm flex items-center border gap-1"
class="text-sm text-gray-700 px-2 py-1 rounded-sm cursor-pointer flex items-center border border-gray-300 gap-1"
>
{{ locale === 'zh' ? tag.show_name || tag.name : tag.name }}
</div>
Expand All @@ -89,13 +89,13 @@
<!-- Other -->
<div
v-if="otherTags.length"
class="text-sm text-gray-500"
class="text-sm font-regular text-gray-700"
>
{{ $t('all.others') }}:
</div>
<div
v-for="tag in theOtherTags.theTags"
class="bg-white text-sm text-gray-700 px-[8px] py-[4px] rounded-sm flex items-center border gap-1"
class="bg-white text-sm font-regular text-gray-700 px-2 py-1 rounded-sm cursor-pointer flex items-center border border-gray-300 gap-1"
>
{{ tag.name }}
</div>
Expand All @@ -108,14 +108,14 @@
<!-- License -->
<div
v-if="licenseTags.length"
class="text-sm text-gray-500"
class="text-sm font-regular text-gray-700"
>
License:
</div>
<a
v-for="tag in theLicenseTags.theTags"
:href="`/${prefix}?tag=${tag.name}&tag_type=License`"
class="text-sm text-gray-500 px-[8px] py-[3px] rounded-sm cursor-pointer flex items-center border border-gray-300 gap-1"
class="text-sm font-regular text-gray-700 px-2 py-1 rounded-sm cursor-pointer flex items-center border border-gray-300 gap-1"
>
<SvgIcon name="repo_header_license_icon" />
License:
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/shared/RepoHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
}}</span>
<div
v-if="repoDetailStore.isPrivate"
class="border border-gray-300 bg-white px-3 py-[2px] text-center text-xs text-gray-700 font-medium rounded"
class="border border-gray-300 bg-white px-2 py-[3px] text-center text-xs font-normal text-gray-700 rounded-sm"
>
{{ $t('all.private') }}
</div>
<div
class="flex cursor-pointer gap-[4px] border border-gray-200 pl-3 pr-1 py-[2px] text-center text-xs text-gray-500 font-medium rounded-sm hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
class="flex cursor-pointer gap-1 border border-gray-300 bg-white px-2 pr-1 py-[3px] text-center text-xs text-gray-700 font-normal rounded-sm hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
:class="userLiked === true ? 'text-gray-400 border-gray-200' : ''"
@click="clickLike"
>
Expand All @@ -56,7 +56,7 @@
}}</span>
<div
v-if="repoDetailStore.isPrivate"
class="border border-gray-300 bg-white px-3 py-[2px] text-center text-xs text-gray-700 font-medium rounded"
class="border border-gray-300 bg-white px-2 py-[3px] text-center text-xs font-normal text-gray-700 rounded-sm"
>
{{ $t('all.private') }}
</div>
Expand Down Expand Up @@ -103,12 +103,12 @@
}}</span>
<div
v-if="repoDetailStore.isPrivate"
class="border border-gray-300 bg-white px-3 py-[2px] text-center text-xs text-gray-700 font-medium rounded"
class="border border-gray-300 bg-white px-2 py-[3px] text-center text-xs font-normal text-gray-700 rounded-sm"
>
{{ $t('all.private') }}
</div>
<div
class="flex cursor-pointer gap-[4px] border border-gray-200 pl-3 pr-1 py-[2px] text-center text-xs text-gray-500 font-medium rounded-sm hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
class="flex cursor-pointer gap-1 border border-gray-300 bg-white px-2 pr-1 py-[3px] text-center text-xs text-gray-700 font-normal rounded-sm hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
:class="userLiked === true ? 'text-gray-400 border-gray-200' : ''"
@click="clickLike"
>
Expand Down
Loading