style(button): standardize button styles and replace el-button (#789)

Author: youngbeom-shin

frontend/src/assets/stylesheets/element-plus/button.css

@@ -347,6 +347,7 @@
 .btn-link-color.btn-sm {
   padding: 8px 12px;
   font-size: 12px;
+  line-height: 18px;
   font-weight: 400;
   transform: scale(1);
   -webkit-transform: scale(1);
@@ -368,7 +369,8 @@
 .btn-link-color.btn-md {
   /* 默认尺寸（可以认为是 md 尺寸） */
   padding: 10px 14px;
-  font-size: var(--font-size-sm);
+  font-size: 14px;
+  line-height: 22px;
   font-weight: 400;
   transform: scale(1);
   -webkit-transform: scale(1);
@@ -389,7 +391,8 @@
 .btn-link-gray.btn-lg,
 .btn-link-color.btn-lg {
   padding: 10px 16px;
-  font-size: var(--font-size-md);
+  font-size: 16px;
+  line-height: 24px;
   font-weight: 400;
   transform: scale(1);
   -webkit-transform: scale(1);
@@ -410,7 +413,8 @@
 .btn-link-gray.btn-xl,
 .btn-link-color.btn-xl {
   padding: 12px 18px;
-  font-size: var(--font-size-md);
+  font-size: 16px;
+  line-height: 24px;
   font-weight: 400;
   transform: scale(1);
   -webkit-transform: scale(1);
@@ -431,7 +435,8 @@
 .btn-link-gray.btn-2xl,
 .btn-link-color.btn-2xl {
   padding: 16px 22px;
-  font-size: var(--font-size-lg);
+  font-size: 18px;
+  line-height: 28px;
   font-weight: 400;
   transform: scale(1);
   -webkit-transform: scale(1);

frontend/src/components/organizations/InviteMember.vue

@@ -4,9 +4,9 @@
     <button
       v-if="role === 'admin'"
       @click="dialogVisible = true"
-      class="px-[12px] py-[8px] flex gap-[4px] items-center rounded-md border border-gray-300 text-sm"
+      class="btn btn-secondary-gray btn-md"
     >
-      <SvgIcon name="invite_org_member" />
+      <SvgIcon name="invite_org_member"/>
       <span>{{ $t('organization.invite.title') }}</span>
     </button>
     <!-- invite dialog -->
@@ -110,21 +110,18 @@
         </div>
       </div>
       <template #footer>
-        <span class="flex justify-between">
-          <el-button
-            class="w-[50%]"
-            size="large"
+        <span class="flex justify-between px-4 gap-2">
+          <button
+            class="btn btn-secondary-gray btn-md flex-1"
             @click="dialogVisible = false"
-            >{{ $t('all.cancel') }}</el-button
+            >{{ $t('all.cancel') }}</button
           >
-          <el-button
-            class="w-[50%]"
-            size="large"
-            type="primary"
+          <button
+            class="btn btn-primary btn-md flex-1"
             @click="confirmInviteNewMember"
           >
             {{ $t('all.confirm') }}
-          </el-button>
+          </button>
         </span>
       </template>
     </el-dialog>

frontend/src/components/organizations/NewOrganization.vue

@@ -87,13 +87,14 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button
-          class="w-full !text-center !h-[48px] !text-md !text-white !bg-brand-600 !rounded-md !border-[1px] !border-brand-600"
+        <button
+          class="btn btn-primary btn-md"
+          style="width: 100%;"
           @click="handleSubmit"
           :disabled="submitting"
         >
           {{ $t('organization.newOrganization.createOrg') }}
-        </el-button>
+        </button>
       </el-form-item>
     </el-form>
   </div>

frontend/src/components/organizations/OrganizationDetail.vue

@@ -18,13 +18,14 @@
         <div class="flex gap-[10px]">
           <el-popover placement="bottom-start" :width="300" trigger="click">
             <template #reference>
-              <div v-if="role === 'admin' || role ==='write'" :href="`/organizations/${organizationData.name}/edit`" class="flex cursor-pointer gap-[10px] border border-gray-300 items-center rounded-md px-[12px] py-[8px]">
+              <div v-if="role === 'admin' || role ==='write'" :href="`/organizations/${organizationData.name}/edit`" class="btn btn-secondary-gray btn-md">
                 <SvgIcon name="create_org_repo"/>
                 {{ $t('organization.create') }}
               </div>
             </template>
             <div>
               <a :href="`/models/new?orgName=${organizationData.name}`" class="hover:bg-gray-50 cursor-pointer flex gap-2 items-center py-[9px] px-[10px]">
+
                 <div class="px-2 py-2 bg-gray-50">
                   <SvgIcon name="models" />
                 </div>
@@ -62,8 +63,7 @@
               </a>
             </div>
           </el-popover>
-          <a v-if="role === 'write' || role === 'admin'" :href="`/organizations/${organizationData.name}/edit`" class="flex gap-[10px] border border-gray-300 rounded-md px-[12px] py-[8px]">
-            <SvgIcon name="invite_org_member" />
+          <a v-if="role === 'write' || role === 'admin'" :href="`/organizations/${organizationData.name}/edit`" class="btn btn-secondary-gray btn-md">
             {{ $t('organization.orgSetting') }}
           </a>
         </div>

frontend/src/components/organizations/OrganizationEdit.vue

@@ -76,7 +76,7 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button class="!text-center !h-[48px] !text-md !text-white !bg-brand-600 !rounded-md !border-[1px] !border-brand-600" @click="handleSubmit">{{ $t('all.saveSetting') }}</el-button>
+        <button class="btn btn-primary btn-md" @click="handleSubmit">{{ $t('all.saveSetting') }}</button>
       </el-form-item>
     </el-form>
   </div>