style: update UI components with consistent spacing & borders (#857)

Standardize spacing units, button styles, border colors, and typography across multiple components. Replace pixel values with Tailwind classes, update button styles to use btn classes, and normalize border/shadow styles for better visual consistency.

frontend/src/components/application_spaces/ApplicationSpaceDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto page-responsive-width">
       <repo-header
         :private="applicationSpace.private"

frontend/src/components/collections/CollectionsDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto"
+    class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto"
   >
     <div class="mx-auto page-responsive-width">
       <repo-header

frontend/src/components/community/DiscussionCards.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-[16px]">
     <div class="flex justify-between">
-        <div @click="showDetail?showDetail=!showDetail:changeFlag('new')" class="px-[16px] py-[5px] border bg-gray-25 rounded-xs hover:bg-gray-100 text-gray-500 text-sm leading-[22px] cursor-pointer ">
+        <div @click="showDetail?showDetail=!showDetail:changeFlag('new')" class="btn btn-secondary-gray btn-sm w-fit ">
           {{ showDetail? $t('community.discussion.back'):$t('community.discussion.new') }}
         </div>
         <!-- <div class="hover:bg-gray-100 cursor-pointer flex items-center gap-[8px] px-[16px] py-[5px] rounded-xs text-gray-500 text-sm leading-[22px]">

frontend/src/components/community/EmptyCommunity.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="py-[60px] border border-gray-200 bg-gray-25 flex flex-col justify-center gap-[24px]">
+  <div class="py-[60px] border border-gray-200 bg-gray-25 flex flex-col justify-center gap-6 rounded-md">
     <div class="flex justify-center">
       <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path opacity="0.12" d="M12 17.5997C12 16.1062 12 15.3595 12.2906 14.789C12.5463 14.2873 12.9543 13.8793 13.456 13.6237C14.0265 13.333 14.7732 13.333 16.2667 13.333H25.0667C26.5601 13.333 27.3069 13.333 27.8773 13.6237C28.3791 13.8793 28.787 14.2873 29.0427 14.789C29.3333 15.3595 29.3333 16.1062 29.3333 17.5997V27.1512C29.3333 28.4757 27.747 29.1555 26.7879 28.2421C25.8541 27.3528 24.6141 26.8568 23.3247 26.8568H16.2667C14.7732 26.8568 14.0265 26.8568 13.456 26.5662C12.9543 26.3105 12.5463 25.9026 12.2906 25.4008C12 24.8304 12 24.0836 12 22.5902V17.5997Z" fill="#4D6AD6"/><path d="M12 18.667H9.66663C9.3371 18.667 9.17233 18.667 9.01189 18.6799C8.36734 18.7319 7.74499 18.9393 7.19818 19.2845C7.06206 19.3704 6.93025 19.4693 6.66663 19.667V19.667C5.98472 20.1784 5.64377 20.4341 5.38373 20.534C4.2864 20.9555 3.06397 20.3443 2.74275 19.2135C2.66663 18.9456 2.66663 18.5194 2.66663 17.667V9.06699C2.66663 6.82678 2.66663 5.70668 3.1026 4.85103C3.48609 4.09838 4.09802 3.48646 4.85066 3.10297C5.70631 2.66699 6.82642 2.66699 9.06663 2.66699H17.6C19.8402 2.66699 20.9603 2.66699 21.8159 3.10297C22.5686 3.48646 23.1805 4.09838 23.564 4.85103C24 5.70668 24 6.82678 24 9.06699V9.33366V10.0003M26.7878 28.2427V28.2427C27.747 29.1562 29.3333 28.4763 29.3333 27.1518V17.6003C29.3333 16.1069 29.3333 15.3601 29.0426 14.7897C28.787 14.2879 28.379 13.88 27.8773 13.6243C27.3068 13.3337 26.5601 13.3337 25.0666 13.3337H16.2666C14.7732 13.3337 14.0264 13.3337 13.456 13.6243C12.9542 13.88 12.5463 14.2879 12.2906 14.7897C12 15.3601 12 16.1069 12 17.6003V22.5908C12 24.0843 12 24.831 12.2906 25.4014C12.5463 25.9032 12.9542 26.3112 13.456 26.5668C14.0264 26.8575 14.7732 26.8575 16.2666 26.8575H23.3246C24.6141 26.8575 25.8541 27.3535 26.7878 28.2427Z" stroke="#4D6AD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
     </div>
-    <div class="flex justify-center text-xl text-gray-700 leading-[28px] font-semibold">{{ $t('community.empty.welcome') }}</div>
-    <div class="flex justify-center text-sm text-gray-700 leading-[22px]">
+    <div class="flex justify-center text-xl text-gray-700 leading-8 font-semibold">{{ $t('community.empty.welcome') }}</div>
+    <div class="flex justify-center text-sm text-gray-700 leading-6">
       <span class="max-w-[320px] text-center">
         {{ $t('community.empty.desc') }}
       </span>

frontend/src/components/endpoints/EndpointDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto page-responsive-width">
       <repo-header
         :private="endpoint.private"

frontend/src/components/finetune/FinetuneDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto page-responsive-width">
       <repo-header
         :name="finetune.deploy_name"

frontend/src/components/models/ModelSettings.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="my-8 md:my-0 md:border-none px-8 py-6">
+    class="my-8 md:my-0 md:border-none py-6">
     <!-- 展示英文名 -->
     <div class="flex xl:flex-col gap-8">
       <div class="w-[380px] sm:w-full flex flex-col">

frontend/src/components/shared/RepoDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="repo"
-    class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto border-b border-gray-200"
+    class="w-full bg-gray-25 border-b border-gray-100 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto"
   >
     <div class="mx-auto page-responsive-width">
       <repo-header

frontend/src/components/shared/RepoSummary.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex md:px-5 md:flex-col-reverse min-h-[calc(100vh-341px)]">
-    <div class="max-w-[60%] sm:max-w-[100%] pt-4 pb-10 pr-5 sm:pr-0 break-words flex-1 border-t border-gray-200 md:border-t-0">
+    <div class="max-w-[60%] sm:max-w-[100%] py-8 pr-6 sm:pr-0 break-words flex-1 md:border-t-0">
       <el-skeleton v-if="loading" class="mt-4" :rows="5" animated />
       <markdown-viewer
         :content="readmeContent"
@@ -10,7 +10,7 @@
       </markdown-viewer>
     </div>
     <div class="w-[40%] sm:w-[100%] border-l border-gray-200 md:border-l-0 md:border-b md:w-full md:pl-0">
-      <div class="p-[16px]">
+      <div class="pl-6 py-8">
         <div class="text-gray-500 text-base font-medium leading-[22px] md:pl-0">{{ $t('all.downloadCount') }}</div>
         <div class="text-gray-700 text-base font-semibold leading-6 mt-1 md:pl-0">{{ downloadCount }}</div>
       </div>

frontend/src/components/shared/TabContainer.vue

@@ -137,25 +137,29 @@
   /* 修改选项卡中的文字大小 */
   .el-tabs__item {
     font-size: 16px;
-    font-weight: 500;
+    font-weight: 400;
   }
 
   .el-tabs__item.is-top {
     color: #667085;
-    font-weight: 500;
+    font-weight: 400;
   }
 
   .el-tabs {
     color: #667085;
   }
 
   .el-tabs__nav-wrap:after {
-    height: 1px;
+    height: 0px;
   }
 
   .el-tabs__nav-scroll {
     @media screen and (max-width: 768px) {
       padding-left: 20px;
     }
   }
+
+  .el-tabs__content {
+    border: none;
+  }
 </style>

frontend/src/components/tags/TagSidebar.vue

@@ -1,34 +1,34 @@
 <template>
   <div class="flex bg-white flex-col pt-[32px] pb-[60px]">
-    <div class="flex">
-      <span v-show="type !== 'code' && type !== 'space'" class="mr-[4px] py-[8px] px-[12px] text-sm text-gray-500 cursor-pointer hover:bg-gray-50"
+    <div class="flex gap-1">
+      <span v-show="type !== 'code' && type !== 'space'" class="mr-1 py-2 px-3 rounded-sm text-sm font-medium text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="Task"
-            :class="activeNavItem === 'Task' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'Task' ? 'py-2 px-3 text-gray-700 text-sm font-medium bg-gray-50' : ''"
             @click="changeActiveItem"
       >
         {{ $t('all.tasks') }}
       </span>
       <span v-show="type === 'model'"
-            class="mr-[4px] py-[8px] px-[12px] text-sm text-gray-500 cursor-pointer hover:bg-gray-50"
+            class="mr-1 py-2 px-3 rounded-sm text-sm font-medium text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="Framework"
-            :class="activeNavItem === 'Framework' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'Framework' ? 'py-2 px-3 text-gray-700 text-sm font-medium bg-gray-50' : ''"
             @click="changeActiveItem"
       >
       {{ $t('all.framework') }}
       </span>
 
       <span v-show="type === 'model' || type === 'dataset'"
-            class="mr-[4px] py-[8px] px-[12px] text-sm text-gray-500 cursor-pointer hover:bg-gray-50"
+            class="mr-1 py-2 px-3 rounded-sm text-sm font-medium text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="Language"
-            :class="activeNavItem === 'Language' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'Language' ? 'py-2 px-3 text-gray-700 text-sm font-medium bg-gray-50' : ''"
             @click="changeActiveItem"
       >
       {{ $t('all.languages') }}
       </span>
 
-      <span class="mr-[4px] py-[8px] px-[12px] text-sm text-gray-500 cursor-pointer hover:bg-gray-50"
+      <span class="mr-1 py-2 px-3 rounded-sm text-sm font-medium text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="License"
-            :class="activeNavItem === 'License' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'License' ? 'py-2 px-3 text-gray-700 text-sm font-medium bg-gray-50' : ''"
             @click="changeActiveItem"
       >
       License
@@ -95,15 +95,15 @@
       <div v-show="showLanguage">
         <el-input
           v-model="LanguageTagFilterInput"
-          class="mt-[28px] mb-[16px]"
+          class="mt-7 mb-4"
           size="large"
           :placeholder="$t('all.filterTags')"
           :prefix-icon="Search"
           @input = "filterLanguageTags"
         />
         <div class="flex gap-[8px] flex-wrap">
           <span v-for="languageTag in theLanguageTags"
-                class="text-sm text-gray-700 px-[8px] py-[4px] rounded-xs cursor-pointer flex items-center gap-[4px]"
+                class="text-sm text-gray-700 px-2 py-1 rounded-xs cursor-pointer flex items-center gap-1"
                 :data-tag_name="languageTag.name"
                 :style="setLanguageTagColor(languageTag.name)"
                 @click="setActiveLanguageTag(languageTag.name)"
@@ -117,13 +117,13 @@
       <div v-show="showLicense">
         <el-input
           v-model="licenseTagFilterInput"
-          class="mt-[28px] mb-[16px]"
+          class="mt-7 mb-4"
           size="large"
           :placeholder="$t('all.filterTags')"
           :prefix-icon="Search"
           @input = "filterLicenseTags"
         />
-        <div class="flex gap-[8px] flex-wrap">
+        <div class="flex gap-1 flex-wrap">
           <span v-for="licenseTag in theLicenseTags" class="text-sm text-gray-700 px-[8px] py-[3px] rounded-sm cursor-pointer flex items-center gap-[4px] border border-gray-200"
                 :data-tag_name="licenseTag.name"
                 :style="setLicenseTagColor(licenseTag.name)"

frontend/src/components/user_settings/AccessTokenSettings.vue

@@ -34,11 +34,11 @@
           </div>
         </div>
         <div class="my-[16px]">
-          <el-button
+          <button
             type="default"
             @click="confirmRefreshAccessToken"
-            class="h-[30px] mb-[16px]"
-            >{{ $t('accessToken.refresh') }}</el-button
+            class="btn btn-secondary-gray btn-md"
+            >{{ $t('accessToken.refresh') }}</button
           >
         </div>
       </div>

frontend/src/components/user_settings/Profile.vue

@@ -5,50 +5,50 @@
       <el-avatar :size="160" :src="isCurrentUser ? userStore.avatar : avatar"></el-avatar>
     </div>
     <!-- nickname -->
-    <div class="text-2xl leading-[32px] font-semibold">
+    <div class="text-2xl leading-8 font-semibold">
       {{ isCurrentUser ? userStore.nickname : nickname }}
     </div>
     <!-- name -->
-    <div class="text-md text-gray-500 max-w-[max-content] leading-[24px] mb-[16px]">
+    <div class="text-md text-gray-500 max-w-[max-content] leading-6 mb-4">
       @{{ isCurrentUser ? userStore.username : username }}
     </div>
     <!-- profile settings -->
     <div v-if="isCurrentUser" class="flex xl:flex-col md:flex-row gap-3">
-      <a href="/settings/profile" class="px-[12px] py-[5px] lg:w-[200px] md:w-auto text-center border border-gray-200 rounded-xs text-sm leading-[22px] font-medium hover:bg-gray-200 hover:text-gray-700">
+      <a href="/settings/profile" class="btn btn-secondary-gray btn-md">
         {{ $t('profile.accountSetting')}}
       </a>
     </div>
     <!-- roles -->
-    <div v-if="isCurrentUser ? userStore.roles : userRoles" class="mt-[16px] text-gray-500 text-md leading-[24px] flex items-center gap-[8px]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2.66663 12.533C2.66663 10.7657 4.09931 9.33301 5.86663 9.33301H10.1333C11.9006 9.33301 13.3333 10.7657 13.3333 12.533V12.533C13.3333 13.7112 12.3782 14.6663 11.2 14.6663H4.79996C3.62175 14.6663 2.66663 13.7112 2.66663 12.533V12.533Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.6666 3.99967C10.6666 5.47243 9.47272 6.66634 7.99996 6.66634C6.5272 6.66634 5.33329 5.47243 5.33329 3.99967C5.33329 2.52692 6.5272 1.33301 7.99996 1.33301C9.47272 1.33301 10.6666 2.52692 10.6666 3.99967Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    <div v-if="isCurrentUser ? userStore.roles : userRoles" class="mt-4 text-gray-500 text-md leading-6 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2.66663 12.533C2.66663 10.7657 4.09931 9.33301 5.86663 9.33301H10.1333C11.9006 9.33301 13.3333 10.7657 13.3333 12.533V12.533C13.3333 13.7112 12.3782 14.6663 11.2 14.6663H4.79996C3.62175 14.6663 2.66663 13.7112 2.66663 12.533V12.533Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.6666 3.99967C10.6666 5.47243 9.47272 6.66634 7.99996 6.66634C6.5272 6.66634 5.33329 5.47243 5.33329 3.99967C5.33329 2.52692 6.5272 1.33301 7.99996 1.33301C9.47272 1.33301 10.6666 2.52692 10.6666 3.99967Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></svg>
       {{ isCurrentUser ? userStore.roles.join(',') : userRoles.join(', ') }}
     </div>
     <!-- phone -->
     <div v-if="hasPhone"
-         class="mt-[16px] text-gray-500 text-md leading-[24px] flex items-center gap-[8px]">
+         class="mt-[16px] text-gray-500 text-md leading-4 flex items-center gap-2">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8.00004 3.99967H8.00671M6.66671 12.6663H9.33337M8.33337 3.99967C8.33337 4.18377 8.18414 4.33301 8.00004 4.33301C7.81595 4.33301 7.66671 4.18377 7.66671 3.99967C7.66671 3.81558 7.81595 3.66634 8.00004 3.66634C8.18414 3.66634 8.33337 3.81558 8.33337 3.99967ZM7.60004 14.6663H8.40004C9.89351 14.6663 10.6403 14.6663 11.2107 14.3757C11.7124 14.12 12.1204 13.7121 12.3761 13.2103C12.6667 12.6399 12.6667 11.8931 12.6667 10.3997V5.59967C12.6667 4.1062 12.6667 3.35946 12.3761 2.78903C12.1204 2.28727 11.7124 1.87932 11.2107 1.62366C10.6403 1.33301 9.89351 1.33301 8.40004 1.33301H7.60004C6.10657 1.33301 5.35983 1.33301 4.7894 1.62366C4.28763 1.87932 3.87969 2.28727 3.62402 2.78903C3.33337 3.35946 3.33337 4.1062 3.33337 5.59967V10.3997C3.33337 11.8931 3.33337 12.6399 3.62402 13.2103C3.87969 13.7121 4.28763 14.12 4.7894 14.3757C5.35983 14.6663 6.10657 14.6663 7.60004 14.6663Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></svg>
       {{ isCurrentUser ? userStore.phone : phone }}
     </div>
     <!-- email -->
     <div v-if="hasEmail"
-         class="mt-[16px] text-gray-500 text-md leading-[24px] flex items-center gap-[8px]">
+         class="mt-[16px] text-gray-500 text-md leading-6 flex items-center gap-[8px]">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M12 5.33333L11.3334 5.77778L10.9584 6.02773C9.88925 6.74053 9.35466 7.09692 8.77684 7.23539C8.2662 7.35776 7.73388 7.35776 7.22325 7.23539C6.64543 7.09692 6.11083 6.74053 5.04164 6.02773L4.66671 5.77778L4.00004 5.33333M6.6667 14H9.33337C11.2002 14 12.1336 14 12.8467 13.6367C13.4739 13.3171 13.9838 12.8072 14.3034 12.18C14.6667 11.4669 14.6667 10.5335 14.6667 8.66667V7.33333C14.6667 5.46649 14.6667 4.53307 14.3034 3.82003C13.9838 3.19282 13.4739 2.68289 12.8467 2.36331C12.1336 2 11.2002 2 9.33338 2H6.66671C4.79987 2 3.86644 2 3.15341 2.36331C2.5262 2.68289 2.01626 3.19282 1.69669 3.82003C1.33337 4.53307 1.33337 5.46649 1.33337 7.33333V8.66667C1.33337 10.5335 1.33337 11.4669 1.69669 12.18C2.01626 12.8072 2.5262 13.3171 3.15341 13.6367C3.86644 14 4.79986 14 6.6667 14Z" stroke="#2F384C" stroke-linecap="round"/></svg>
       <div class="w-[90%] overflow-hidden text-ellipsis">{{ isCurrentUser ? userStore.email : email }}</div>
     </div>
     <!-- last login time -->
     <div v-if="hasLastLoginTime"
-         class="mt-[16px] text-gray-500 text-md leading-[24px] flex items-center gap-[8px]">
+         class="mt-4 text-gray-500 text-md leading-6 flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(#clip0_1405_18826)"><path d="M1.33337 7.99967C1.33337 11.3134 4.00004 14.6663 8.00004 14.6663C12 14.6663 14.6667 11.9997 14.6667 7.99967C14.6667 3.99967 12 1.33301 8.00004 1.33301C4.00004 1.33301 1.33337 4.66634 1.33337 4.66634M1.33337 4.66634V1.99967M1.33337 4.66634H3.66671M8.00004 5.33301V7.99967L10 9.33301" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_1405_18826"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>
       {{ isCurrentUser ? userStore.lastLoginTime : theLastLoginTime }}
     </div>
     <!-- organization -->
-    <div class="my-[16px] mt-[36px]">
-      <div class="text-xl leading-[32px] font-semibold mb-[8px]">
+    <div class="my-4 mt-10">
+      <div class="text-xl leading-8 font-semibold mb-2">
         {{ $t('profile.organization')}}
       </div>
-      <div v-if="hasOrg" class="flex gap-[10px] flex-wrap mt-[16px]">
+      <div v-if="hasOrg" class="flex gap-2 flex-wrap mt-4">
         <p v-for="org in (isCurrentUser ? userStore.orgs : userOrgs)">
           <a :href="`/organizations/${org.path}`">
-            <img :src="org.logo ? org.logo : '/images/default_org.png'" class="rounded-[50%] h-[40px] w-[40px]" />
+            <img :src="org.logo ? org.logo : '/images/default_org.png'" class="rounded-[50%] h-10 w-10" />
           </a>
         </p>
       </div>

frontend/src/components/user_settings/ProfileEdit.vue

@@ -25,12 +25,12 @@
           @change="uploadAvatar" />
         <div
           @click="uploadImage"
-          class="text-sm border border-gray-200 px-[20px] py-[9px] leading-[22px] text-center rounded-md text-white cursor-pointer bg-brand-600">
+          class="btn btn-primary btn-sm">
           {{ $t('profile.edit.uploadAvatar') }}
         </div>
         <div
           @click="removeImage"
-          class="text-sm border border-gray-200 px-[20px] py-[9px] leading-[22px] text-center rounded-md text-gray-500 cursor-pointer bg-white">
+          class="btn btn-secondary-gray btn-sm">
           {{ $t('profile.edit.removeAvatar') }}
         </div>
       </div>
@@ -135,7 +135,7 @@
     </div>
     <div
       @click="confirmUpdateProfile"
-      class="w-[111px] text-sm border border-gray-200 px-[16px] py-[5px] leading-[22px] text-center rounded-md text-white cursor-pointer bg-brand-600">
+      class="btn btn-primary btn-md w-fit">
       {{ $t('all.save') }}
     </div>
   </div>

frontend/src/components/user_settings/SshKeySettings.vue

@@ -11,7 +11,7 @@
       <h3 class="text-gray-700 text-xl font-[600]">SSH Keys</h3>
       <button
         @click="centerDialogVisible = true"
-        class="rounded-xs border bg-white py-[5px] px-[16px] text-gray-500 text-sm font-[500] mt-[32px] w-[160px]"
+        class="btn btn-secondary-gray btn-md w-fit"
       >
         {{ $t('sshKey.addSshKey') }}
       </button>