add border radius and replace all radius with new token (#734)

* add border radius and replace all radius with new token * add border radius in tailwind config and replace all rounded code * Add border-radius to all input, select, and textarea elements.
OpenCSGs · Oct 24, 2024 · b07b4c9 · b07b4c9
1 parent 4f97265
commit b07b4c9
Show file tree

Hide file tree

Showing 93 changed files with 222 additions and 192 deletions.
diff --git a/frontend/src/assets/stylesheets/element-plus/_variables.css b/frontend/src/assets/stylesheets/element-plus/_variables.css
@@ -76,6 +76,19 @@
   --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
   --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
 
-  --el-border-radius-base: 8px;
+/* add border-radius variable */
+  --border-radius-none: 0px;
+  --border-radius-xxs: 2px;
+  --border-radius-xs: 4px;
+  --border-radius-sm: 6px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 10px;
+  --border-radius-xl: 12px;
+  --border-radius-2xl: 16px;
+  --border-radius-3xl: 20px;
+  --border-radius-4xl: 24px;
+  --border-radius-full: 9999px;
+
+  --el-border-radius-base: var(--border-radius-md);
   --el-color-primary: var(--Brand-600);
 }
diff --git a/frontend/src/assets/stylesheets/element-plus/button.css b/frontend/src/assets/stylesheets/element-plus/button.css
@@ -348,7 +348,7 @@
   /* 默认尺寸（可以认为是 md 尺寸） */
   padding: 10px 16px;
   font-size: 14px;
-  border-radius: 10px;
+  border-radius: var(--border-radius-lg);
 }
 
 /* sm size button */
@@ -361,7 +361,7 @@
 .btn-link-color.btn-sm {
   padding: 8px 14px;
   font-size: 12px;
-  border-radius: 8px;
+  border-radius: var(--border-radius-md);
 }
 
 /* lg size button */
@@ -374,7 +374,7 @@
 .btn-link-color.btn-lg {
   padding: 10px 18px;
   font-size: 16px;
-  border-radius: 8px;
+  border-radius: var(--border-radius-md);
 }
 
 /* xl size button */
@@ -387,7 +387,7 @@
 .btn-link-color.btn-xl {
   padding: 12px 20px;
   font-size: 16px;
-  border-radius: 8px;
+  border-radius: var(--border-radius-md);
 }
 
 /* 2xl size button */
@@ -400,5 +400,5 @@
 .btn-link-color.btn-2xl {
   padding: 16px 24px;
   font-size: 18px;
-  border-radius: 8px;
+  border-radius: var(--border-radius-md);
 }
diff --git a/frontend/src/assets/stylesheets/element-plus/input.css b/frontend/src/assets/stylesheets/element-plus/input.css
@@ -2,6 +2,7 @@
   /* 所有的input 添加 */
   .el-textarea__inner, .el-input__wrapper, .el-select__wrapper {
     border: 1px solid transparent;
+    border-radius: var(--border-radius-md);-radius: var(--border-radius-md);
   }
 
   /* default focus style */

diff --git a/frontend/src/assets/stylesheets/element-plus/menu.css b/frontend/src/assets/stylesheets/element-plus/menu.css
@@ -14,7 +14,7 @@
     font-weight: var(--el-menu-item-font-weight);
   };
   .el-menu--popup {
-    border-radius: 12px;
+    border-radius: var(--border-radius-xl);
     padding: 12px 0;
   };
   .el-popper.is-light {

diff --git a/frontend/src/assets/stylesheets/markdown.css b/frontend/src/assets/stylesheets/markdown.css
@@ -201,7 +201,7 @@
   width: max-content;
   max-width: 100%;
   overflow: auto;
-  border-radius: 8px;
+  border-radius: var(--border-radius-md);
   border: 0.5px solid #D0D5DD;
 }
 
@@ -296,7 +296,7 @@
   background-color: #F2F4F7;
   border: solid 1px rgba(175,184,193,0.2);
   border-bottom-color: rgba(175,184,193,0.2);
-  border-radius: 4px;
+  border-radius: var(--border-radius-xs);
   box-shadow: inset 0 -1px 0 rgba(175,184,193,0.2);
 }
 
@@ -758,7 +758,7 @@
   font-size: 85%;
   white-space: break-spaces;
   background-color: #F2F4F7;
-  border-radius: 4px;
+  border-radius: var(--border-radius-xs);
   font-family: 'IBM Plex Mono', monospace;
 }
 
@@ -805,7 +805,7 @@
   line-height: 1.5;
   color: #344054;
   background-color: #F9FAFB;
-  border-radius: 4px;
+  border-radius: var(--border-radius-xs);
   font-family: 'IBM Plex Mono', monospace;
 }
 
@@ -886,7 +886,7 @@
   pointer-events: none;
   content: "";
   border: 2px solid #3250BD;
-  border-radius: 6px;
+  border-radius: var(--border-radius-sm);
 }
 
 .markdown-body .footnotes li:target {

diff --git a/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue b/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue
@@ -350,7 +350,7 @@
   }
 
   .active-tab {
-    border-radius: 6px;
+    border-radius: var(--border-radius-sm);
     background: #E5E7EB;
     padding: 6px;
   }

diff --git a/frontend/src/components/application_spaces/ApplicationSpaceItem.vue b/frontend/src/components/application_spaces/ApplicationSpaceItem.vue
@@ -36,7 +36,7 @@
     >
       <img
         :src="coverImageUrl"
-        class="w-full h-[144px] object-cover rounded cursor-pointer hover:opacity-50"
+        class="w-full h-[144px] object-cover rounded-sm cursor-pointer hover:opacity-50"
       />
     </div>
     <div v-if="!isCollection">

diff --git a/frontend/src/components/application_spaces/ApplicationSpaceSettings.vue b/frontend/src/components/application_spaces/ApplicationSpaceSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="deployFailed"
-    class="flex gap-[8px] mt-[32px] mb-[24px] p-[16px] border border-gray-300 rounded-[12px] shadow-xs">
+    class="flex gap-[8px] mt-[32px] mb-[24px] p-[16px] border border-gray-300 rounded-xl shadow-xs">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="20"
@@ -41,7 +41,7 @@
   </div>
 
   <div
-    class="border border-gray-200 rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
+    class="border border-gray-200 rounded-md my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
     <!-- cloud resource -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
@@ -137,7 +137,7 @@
           {{ $t('application_spaces.namespaceName') }}
         </p>
         <div
-          class="w-[512px] sm:w-full rounded-[8px] bg-gray-50 px-[14px] py-[10px] border">
+          class="w-[512px] sm:w-full rounded-md bg-gray-50 px-[14px] py-[10px] border">
           {{ applicationSpacePath }}
         </div>
       </div>
@@ -315,7 +315,7 @@
           <div
             id="confirmDelete"
             @click="clickDelete"
-            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
+            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-md"
             :class="
               delDesc === applicationSpacePath
                 ? 'bg-error-600 text-white cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-error-600 hover:text-white'

diff --git a/frontend/src/components/application_spaces/BuildStatus.vue b/frontend/src/components/application_spaces/BuildStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center gap-[6px] border border-brand-200 bg-brand-50 rounded-[6px] py-[2px] px-[8px]">
+  <div class="flex items-center gap-[6px] border border-brand-200 bg-brand-50 rounded-sm py-[2px] px-[8px]">
     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
       <circle cx="4" cy="4" r="3" fill="#4D6AD6"/>
     </svg>

diff --git a/frontend/src/components/application_spaces/ErrorStatus.vue b/frontend/src/components/application_spaces/ErrorStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center gap-[6px] border border-error-200 bg-error-50] rounded-[6px] py-[2px] px-[8px]">
+  <div class="flex items-center gap-[6px] border border-error-200 bg-error-50] rounded-sm py-[2px] px-[8px]">
     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
       <circle cx="4" cy="4" r="3" fill="#F04438"/>
     </svg>

diff --git a/frontend/src/components/application_spaces/GradioInitializeGuide.vue b/frontend/src/components/application_spaces/GradioInitializeGuide.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sm:px-[20px]">
-    <div class="flex gap-[8px] mt-[32px] p-[16px] border border-gray-300 rounded-[12px] shadow-xs">
+    <div class="flex gap-[8px] mt-[32px] p-[16px] border border-gray-300 rounded-xl shadow-xs">
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <g clip-path="url(#clip0_8790_36855)">
           <path d="M6.24984 9.99984L8.74984 12.4998L13.7498 7.49984M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z" stroke="#079455" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
@@ -51,7 +51,7 @@
     <h3 class="my-[24px] text-gray-600 font-[500]">3. {{ $t('application_spaces.gradioGuide.submitTitle') }}</h3>
     <markdown-viewer :content="pushCodeMarkdown"></markdown-viewer>
     <p class="text-gray-500 text-[16px] font-[400] my-[24px]">{{ $t('application_spaces.gradioGuide.successNotes') }}</p>
-    <div class="text-[16px] text-gray-500 border border-gray-300 rounded-[8px] shadow-xs py-[12px] px-[14px] mb-[32px]">
+    <div class="text-[16px] text-gray-500 border border-gray-300 rounded-md shadow-xs py-[12px] px-[14px] mb-[32px]">
       <div>
         <h3 class="text-gray-900"> {{ $t('application_spaces.gradioGuide.dependencyNotesTitle') }} </h3>
         <p>{{ $t('application_spaces.gradioGuide.dependencyNotes1') }}</p>
@@ -138,7 +138,7 @@
 
 <style scoped>
   .active-tab {
-    border-radius: 6px;
+    border-radius: var(--border-radius-sm);
     background: var(--Gray-50, #F9FAFB);
   }
 </style>
diff --git a/frontend/src/components/application_spaces/NewApplicationSpace.vue b/frontend/src/components/application_spaces/NewApplicationSpace.vue
@@ -186,7 +186,7 @@
             class="!grid grid-cols-4 w-full gap-[24px]"
           >
             <el-radio
-              class="rounded-[8px] !border-[2px] !h-[120px] flex justify-center"
+              class="rounded-md !border-[2px] !h-[120px] flex justify-center"
               label="gradio"
               size="large"
               border
@@ -198,7 +198,7 @@
               <p class="font-semibold text-[16px]">Gradio</p>
             </el-radio>
             <el-radio
-              class="rounded-[8px] !border-[2px] !h-[120px] flex justify-center"
+              class="rounded-md !border-[2px] !h-[120px] flex justify-center"
               label="streamlit"
               size="large"
               border
@@ -211,7 +211,7 @@
             </el-radio>
             <el-radio
               v-if="isAdmin"
-              class="rounded-[8px] !border-[2px] !h-[120px] flex justify-center"
+              class="rounded-md !border-[2px] !h-[120px] flex justify-center"
               size="large"
               label="nginx"
               border
@@ -226,7 +226,7 @@
             </el-radio>
             <el-radio
               v-if="!isAdmin"
-              class="rounded-[8px] !border-[2px] !h-[120px] flex justify-center"
+              class="rounded-md !border-[2px] !h-[120px] flex justify-center"
               size="large"
               label="docker"
               disabled
@@ -241,7 +241,7 @@
             </el-radio>
             <el-radio
               disabled
-              class="rounded-[8px] !border-[2px] !h-[120px] flex justify-center"
+              class="rounded-md !border-[2px] !h-[120px] flex justify-center"
               label="static"
               size="large"
               border
@@ -312,15 +312,15 @@
           /> 
         </el-form-item>
         <p
-          class="mb-[18px] rounded bg-brand-25] text-brand-500 text-[13px] py-[9px] px-4"
+          class="mb-[18px] rounded-sm bg-brand-25] text-brand-500 text-[13px] py-[9px] px-4"
         >
           {{ t('application_spaces.new.notes') }}
         </p>
         <div class="flex justify-end">
           <el-form-item>
             <el-button
               :loading="loading"
-              class="!text-center !h-9 !text-[16px] !text-white !bg-brand-600 !rounded-[8px] !border-[1px] !border-brand-600"
+              class="!text-center !h-9 !text-[16px] !text-white !bg-brand-600 !rounded-md !border-[1px] !border-brand-600"
               @click="handleSubmit"
             >
               {{ t('application_spaces.new.create') }}
@@ -581,7 +581,7 @@
   }
 
   :deep(.el-input .el-input__wrapper) {
-    border-radius: 8px;
+    border-radius: var(--border-radius-md);
   }
   :deep(.sdk-container .el-radio.is-bordered.el-radio--large .el-radio__inner) {
     display: none;

diff --git a/frontend/src/components/application_spaces/StoppedPage.vue b/frontend/src/components/application_spaces/StoppedPage.vue
@@ -13,14 +13,14 @@
     </p>
 
     <button v-if="isStopped && canWrite"
-            class="border border-brand-600 bg-brand-600 rounded-[8px] shadow-xs px-[16px] py-[10px] text-white font-[500] text-[16px] leading-[24px] mt-[24px]"
+            class="border border-brand-600 bg-brand-600 rounded-md shadow-xs px-[16px] py-[10px] text-white font-[500] text-[16px] leading-[24px] mt-[24px]"
             @click="startSpace"
     >
       {{ $t('application_spaces.restart') }}
     </button>
 
     <button v-if="isSleeping"
-            class="border border-brand-600 bg-brand-600 rounded-[8px] shadow-xs px-[16px] py-[10px] text-white font-[500] text-[16px] leading-[24px] mt-[24px]"
+            class="border border-brand-600 bg-brand-600 rounded-md shadow-xs px-[16px] py-[10px] text-white font-[500] text-[16px] leading-[24px] mt-[24px]"
             @click="wakeupSpace"
     >
       {{ $t('application_spaces.wakeup') }}

diff --git a/frontend/src/components/application_spaces/StreamlitInitializeGuide.vue b/frontend/src/components/application_spaces/StreamlitInitializeGuide.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sm:px-[20px]">
-    <div class="flex gap-[8px] mt-[32px] p-[16px] border border-gray-300 rounded-[12px] shadow-xs">
+    <div class="flex gap-[8px] mt-[32px] p-[16px] border border-gray-300 rounded-xl shadow-xs">
       <SvgIcon name="spaces"/>
       <div>
         <h3 class="text-gray-600 text-[14px] font-[500]">
@@ -55,7 +55,7 @@
     <p class="text-gray-500 text-[16px] font-[400] my-[24px]">
       {{ $t('application_spaces.gradioGuide.successNotes') }}
     </p>
-    <div class="text-[16px] text-gray-500 border border-gray-300 rounded-[8px] shadow-xs py-[12px] px-[14px] mb-[32px]">
+    <div class="text-[16px] text-gray-500 border border-gray-300 rounded-md shadow-xs py-[12px] px-[14px] mb-[32px]">
       <div>
         <h3 class="text-gray-900"> {{ $t('application_spaces.gradioGuide.dependencyNotesTitle') }} </h3>
         <p>{{ $t('application_spaces.gradioGuide.dependencyNotes1') }}</p>
@@ -141,7 +141,7 @@
 
 <style scoped>
   .active-tab {
-    border-radius: 6px;
+    border-radius: var(--border-radius-sm);
     background: var(--Gray-50, #F9FAFB);
   }
 </style>
diff --git a/frontend/src/components/application_spaces/SuccessStatus.vue b/frontend/src/components/application_spaces/SuccessStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center gap-[6px] border border-success-200 bg-success-100 rounded-[6px] py-[2px] px-[8px]">
+  <div class="flex items-center gap-[6px] border border-success-200 bg-success-100 rounded-sm py-[2px] px-[8px]">
     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
       <circle cx="4" cy="4" r="3" fill="#17B26A"/>
     </svg>

diff --git a/frontend/src/components/application_spaces/WarningStatus.vue b/frontend/src/components/application_spaces/WarningStatus.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center gap-[6px] border border-warning-200 bg-warning-50 rounded-[6px] py-[2px] px-[8px]">
+  <div class="flex items-center gap-[6px] border border-warning-200 bg-warning-50 rounded-sm py-[2px] px-[8px]">
     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
       <circle cx="4" cy="4" r="3" fill="#F79009"/>
     </svg>

diff --git a/frontend/src/components/codes/CodeSettings.vue b/frontend/src/components/codes/CodeSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border border-gray-200 rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
+    class="border border-gray-200 rounded-md my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
     <!-- 展示英文名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
@@ -16,7 +16,7 @@
           {{ $t('codes.namespaceCodeName') }}
         </p>
         <div
-          class="w-[512px] sm:w-full rounded-[8px] bg-gray-50 px-[14px] py-[10px] border">
+          class="w-[512px] sm:w-full rounded-md bg-gray-50 px-[14px] py-[10px] border">
           {{ codePath }}
         </div>
       </div>
@@ -148,7 +148,7 @@
           <div
             id="confirmDelete"
             @click="clickDelete"
-            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
+            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-md"
             :class="
               delDesc === codePath
                 ? 'bg-error-600 text-white cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-error-600 hover:text-white'