fix(ui): correct CSS class names and color variables (#751)

Removes trailing brackets from CSS class names (bg-brand-25], etc)
OpenCSGs · Nov 4, 2024 · 2448b65 · 2448b65
1 parent 5db3fae
commit 2448b65
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 18 deletions.
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-sm 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/NewApplicationSpace.vue b/frontend/src/components/application_spaces/NewApplicationSpace.vue
@@ -312,7 +312,7 @@
           /> 
         </el-form-item>
         <p
-          class="mb-[18px] rounded-sm 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>
@@ -555,17 +555,17 @@
   }
 
   :deep(.el-radio__label) {
-    color: #344054 !important;
+    color: var(--gray-700) !important;
     font-weight: 400;
   }
 
   :deep(.el-radio.is-bordered.is-checked) {
-    border: 2px solid #3250bd;
+    border: 2px solid var(--brand-600);
   }
 
   :deep(.el-radio__input.is-checked .el-radio__inner) {
-    background: #3250bd;
-    border-color: #3250bd;
+    background: var(--brand-600);
+    border-color: var(--brand-600);
   }
 
   :deep(.el-select) {
@@ -590,11 +590,11 @@
     margin-right: unset;
   }
   :deep(.sdk-container .el-radio.is-disabled .el-radio__label) {
-    color: #d0d5dd !important;
+    color: var(--gray-300) !important;
   }
   :deep(.sdk-container .el-radio.is-disabled.is-bordered) {
     border-style: dashed;
-    border-color: #eaecf0 !important;
+    border-color: var(--gray-200) !important;
   }
   :deep(.el-form-item__content) {
     line-height: unset;

diff --git a/frontend/src/components/codes/NewCode.vue b/frontend/src/components/codes/NewCode.vue
@@ -133,7 +133,7 @@
           />
         </el-form-item>
         <p
-          class="mb-[18px] rounded-sm 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('codes.newCode.tips') }}
         </p>

diff --git a/frontend/src/components/community/DiscussionCard.vue b/frontend/src/components/community/DiscussionCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex border border-gray-200 rounded-xs cursor-pointer">
-    <div class="px-[12px] py-[12px] bg-brand-25]"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path opacity="0.12" d="M13.5 19.8C13.5 18.1198 13.5 17.2798 13.827 16.638C14.1146 16.0735 14.5735 15.6146 15.138 15.327C15.7798 15 16.6198 15 18.3 15H28.2C29.8802 15 30.7202 15 31.362 15.327C31.9265 15.6146 32.3854 16.0735 32.673 16.638C33 17.2798 33 18.1198 33 19.8V30.5455C33 32.0355 31.2154 32.8004 30.1364 31.7727C29.0859 30.7723 27.6909 30.2143 26.2403 30.2143H18.3C16.6198 30.2143 15.7798 30.2143 15.138 29.8873C14.5735 29.5997 14.1146 29.1407 13.827 28.5763C13.5 27.9345 13.5 27.0944 13.5 25.4143V19.8Z" fill="#4D6AD6"/><path d="M13.5 21H10.875C10.5043 21 10.3189 21 10.1384 21.0146C9.4133 21.073 8.71316 21.3064 8.09799 21.6947C7.94487 21.7914 7.79658 21.9026 7.5 22.125V22.125C6.73286 22.7004 6.34929 22.988 6.05674 23.1004C4.82225 23.5746 3.44701 22.8869 3.08564 21.6148C3 21.3134 3 20.8339 3 19.875V10.2C3 7.67976 3 6.41965 3.49047 5.45704C3.9219 4.61031 4.61031 3.9219 5.45704 3.49047C6.41965 3 7.67976 3 10.2 3H19.8C22.3202 3 23.5804 3 24.543 3.49047C25.3897 3.9219 26.0781 4.61031 26.5095 5.45704C27 6.41965 27 7.67976 27 10.2V10.5V11.25M30.1364 31.7727V31.7727C31.2154 32.8004 33 32.0355 33 30.5455V19.8C33 18.1198 33 17.2798 32.673 16.638C32.3854 16.0735 31.9265 15.6146 31.362 15.327C30.7202 15 29.8802 15 28.2 15H18.3C16.6198 15 15.7798 15 15.138 15.327C14.5735 15.6146 14.1146 16.0735 13.827 16.638C13.5 17.2798 13.5 18.1198 13.5 19.8V25.4143C13.5 27.0944 13.5 27.9345 13.827 28.5763C14.1146 29.1407 14.5735 29.5997 15.138 29.8873C15.7798 30.2143 16.6198 30.2143 18.3 30.2143H26.2403C27.6909 30.2143 29.0859 30.7723 30.1364 31.7727Z" stroke="#4D6AD6" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
+    <div class="px-[12px] py-[12px] bg-brand-25"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path opacity="0.12" d="M13.5 19.8C13.5 18.1198 13.5 17.2798 13.827 16.638C14.1146 16.0735 14.5735 15.6146 15.138 15.327C15.7798 15 16.6198 15 18.3 15H28.2C29.8802 15 30.7202 15 31.362 15.327C31.9265 15.6146 32.3854 16.0735 32.673 16.638C33 17.2798 33 18.1198 33 19.8V30.5455C33 32.0355 31.2154 32.8004 30.1364 31.7727C29.0859 30.7723 27.6909 30.2143 26.2403 30.2143H18.3C16.6198 30.2143 15.7798 30.2143 15.138 29.8873C14.5735 29.5997 14.1146 29.1407 13.827 28.5763C13.5 27.9345 13.5 27.0944 13.5 25.4143V19.8Z" fill="#4D6AD6"/><path d="M13.5 21H10.875C10.5043 21 10.3189 21 10.1384 21.0146C9.4133 21.073 8.71316 21.3064 8.09799 21.6947C7.94487 21.7914 7.79658 21.9026 7.5 22.125V22.125C6.73286 22.7004 6.34929 22.988 6.05674 23.1004C4.82225 23.5746 3.44701 22.8869 3.08564 21.6148C3 21.3134 3 20.8339 3 19.875V10.2C3 7.67976 3 6.41965 3.49047 5.45704C3.9219 4.61031 4.61031 3.9219 5.45704 3.49047C6.41965 3 7.67976 3 10.2 3H19.8C22.3202 3 23.5804 3 24.543 3.49047C25.3897 3.9219 26.0781 4.61031 26.5095 5.45704C27 6.41965 27 7.67976 27 10.2V10.5V11.25M30.1364 31.7727V31.7727C31.2154 32.8004 33 32.0355 33 30.5455V19.8C33 18.1198 33 17.2798 32.673 16.638C32.3854 16.0735 31.9265 15.6146 31.362 15.327C30.7202 15 29.8802 15 28.2 15H18.3C16.6198 15 15.7798 15 15.138 15.327C14.5735 15.6146 14.1146 16.0735 13.827 16.638C13.5 17.2798 13.5 18.1198 13.5 19.8V25.4143C13.5 27.0944 13.5 27.9345 13.827 28.5763C14.1146 29.1407 14.5735 29.5997 15.138 29.8873C15.7798 30.2143 16.6198 30.2143 18.3 30.2143H26.2403C27.6909 30.2143 29.0859 30.7723 30.1364 31.7727Z" stroke="#4D6AD6" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
     <div class="px-[16px] py-[5px] w-full">
       <div class="flex justify-between items-center text-gray-700 text-[16px] leading-[24px] font-semibold">
         <div class="hover:underline">{{title}}</div>

diff --git a/frontend/src/components/community/DiscussionDetails.vue b/frontend/src/components/community/DiscussionDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-[16px]">
     <div class="flex gap-[8px] items-center">
-      <div class="px-[8px] py-[8px] bg-brand-25] rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path opacity="0.12" d="M9 13.2C9 12.0799 9 11.5198 9.21799 11.092C9.40973 10.7157 9.71569 10.4097 10.092 10.218C10.5198 10 11.0799 10 12.2 10H18.8C19.9201 10 20.4802 10 20.908 10.218C21.2843 10.4097 21.5903 10.7157 21.782 11.092C22 11.5198 22 12.0799 22 13.2V20.3636C22 21.357 20.8103 21.8669 20.0909 21.1818C19.3906 20.5149 18.4606 20.1429 17.4935 20.1429H12.2C11.0799 20.1429 10.5198 20.1429 10.092 19.9249C9.71569 19.7331 9.40973 19.4272 9.21799 19.0508C9 18.623 9 18.063 9 16.9429V13.2Z" fill="#4D6AD6"/><path d="M9 14H7.25C7.00285 14 6.87928 14 6.75895 14.0097C6.27553 14.0487 5.80877 14.2043 5.39866 14.4631C5.29658 14.5276 5.19772 14.6017 5 14.75V14.75C4.48857 15.1336 4.23286 15.3254 4.03782 15.4003C3.21483 15.7164 2.29801 15.258 2.05709 14.4099C2 14.2089 2 13.8893 2 13.25V6.8C2 5.11984 2 4.27976 2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698C4.27976 2 5.11984 2 6.8 2H13.2C14.8802 2 15.7202 2 16.362 2.32698C16.9265 2.6146 17.3854 3.07354 17.673 3.63803C18 4.27976 18 5.11984 18 6.8V7V7.5M20.0909 21.1818V21.1818C20.8103 21.8669 22 21.357 22 20.3636V13.2C22 12.0799 22 11.5198 21.782 11.092C21.5903 10.7157 21.2843 10.4097 20.908 10.218C20.4802 10 19.9201 10 18.8 10H12.2C11.0799 10 10.5198 10 10.092 10.218C9.71569 10.4097 9.40973 10.7157 9.21799 11.092C9 11.5198 9 12.0799 9 13.2V16.9429C9 18.063 9 18.623 9.21799 19.0508C9.40973 19.4272 9.71569 19.7331 10.092 19.9249C10.5198 20.1429 11.0799 20.1429 12.2 20.1429H17.4935C18.4606 20.1429 19.3906 20.5149 20.0909 21.1818Z" stroke="#4D6AD6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
+      <div class="px-[8px] py-[8px] bg-brand-25 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path opacity="0.12" d="M9 13.2C9 12.0799 9 11.5198 9.21799 11.092C9.40973 10.7157 9.71569 10.4097 10.092 10.218C10.5198 10 11.0799 10 12.2 10H18.8C19.9201 10 20.4802 10 20.908 10.218C21.2843 10.4097 21.5903 10.7157 21.782 11.092C22 11.5198 22 12.0799 22 13.2V20.3636C22 21.357 20.8103 21.8669 20.0909 21.1818C19.3906 20.5149 18.4606 20.1429 17.4935 20.1429H12.2C11.0799 20.1429 10.5198 20.1429 10.092 19.9249C9.71569 19.7331 9.40973 19.4272 9.21799 19.0508C9 18.623 9 18.063 9 16.9429V13.2Z" fill="#4D6AD6"/><path d="M9 14H7.25C7.00285 14 6.87928 14 6.75895 14.0097C6.27553 14.0487 5.80877 14.2043 5.39866 14.4631C5.29658 14.5276 5.19772 14.6017 5 14.75V14.75C4.48857 15.1336 4.23286 15.3254 4.03782 15.4003C3.21483 15.7164 2.29801 15.258 2.05709 14.4099C2 14.2089 2 13.8893 2 13.25V6.8C2 5.11984 2 4.27976 2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698C4.27976 2 5.11984 2 6.8 2H13.2C14.8802 2 15.7202 2 16.362 2.32698C16.9265 2.6146 17.3854 3.07354 17.673 3.63803C18 4.27976 18 5.11984 18 6.8V7V7.5M20.0909 21.1818V21.1818C20.8103 21.8669 22 21.357 22 20.3636V13.2C22 12.0799 22 11.5198 21.782 11.092C21.5903 10.7157 21.2843 10.4097 20.908 10.218C20.4802 10 19.9201 10 18.8 10H12.2C11.0799 10 10.5198 10 10.092 10.218C9.71569 10.4097 9.40973 10.7157 9.21799 11.092C9 11.5198 9 12.0799 9 13.2V16.9429C9 18.063 9 18.623 9.21799 19.0508C9.40973 19.4272 9.71569 19.7331 10.092 19.9249C10.5198 20.1429 11.0799 20.1429 12.2 20.1429H17.4935C18.4606 20.1429 19.3906 20.5149 20.0909 21.1818Z" stroke="#4D6AD6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
       <div>
         <div v-show="!isEdit" class="text-gray-700 text-[16px] leading-[24px] font-semibold flex items-center gap-[8px]">
           {{theTitle}}

diff --git a/frontend/src/components/datasets/NewDataset.vue b/frontend/src/components/datasets/NewDataset.vue
@@ -139,7 +139,7 @@
           />
         </el-form-item>
         <p
-          class="mb-[18px] rounded-sm 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('datasets.newDataset.tips') }}
         </p>
@@ -327,17 +327,17 @@
   }
 
   :deep(.el-radio__label) {
-    color: #344054 !important;
+    color: var(--gray-700) !important;
     font-weight: 400;
   }
 
   :deep(.el-radio.is-bordered.is-checked) {
-    border: 2px solid #3250bd;
+    border: 2px solid var(--brand-600);
   }
 
   :deep(.el-radio__input.is-checked .el-radio__inner) {
-    background: #3250bd;
-    border-color: #3250bd;
+    background: var(--brand-600);
+    border-color: var(--brand-600);
   }
 
   :deep(.el-select) {

diff --git a/frontend/src/components/models/NewModel.vue b/frontend/src/components/models/NewModel.vue
@@ -137,7 +137,7 @@
           />
         </el-form-item>
         <p
-          class="mb-[18px] rounded-sm 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('models.newModel.tips') }}
         </p>

diff --git a/frontend/src/components/user_settings/SshKeySettings.vue b/frontend/src/components/user_settings/SshKeySettings.vue
@@ -17,7 +17,7 @@
       </button>
       <div
         v-if="theSshKeys.length === 0"
-        class="mt-[16px] rounded-sm w-full bg-brand-25] py-[9px] px-[16px] text-brand-500"
+        class="mt-[16px] rounded-sm w-full bg-brand-25 py-[9px] px-[16px] text-brand-500"
       >
         {{ $t('sshKey.noKeyTips') }}
       </div>