Refactor button

actris-cloudnet · Nov 15, 2024 · 498958d · 498958d
1 parent aeccab5
commit 498958d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 16 deletions.
diff --git a/frontend/src/components/BaseButton.vue b/frontend/src/components/BaseButton.vue
@@ -4,26 +4,27 @@ import type { RouteLocationRaw } from "vue-router";
 export interface Props {
   to?: RouteLocationRaw;
   href?: string;
-  type: "primary" | "secondary" | "brand" | "danger" | "retry";
+  type: "primary" | "secondary" | "brand" | "danger";
+  size?: "normal" | "small";
   disabled?: boolean;
   htmlType?: HTMLButtonElement["type"];
 }
 
-withDefaults(defineProps<Props>(), { disabled: false, htmlType: "button" });
+withDefaults(defineProps<Props>(), { disabled: false, htmlType: "button", size: "normal" });
 
 defineEmits<{
   (e: "click"): void;
 }>();
 </script>
 
 <template>
-  <router-link :to="to" class="button" :class="type" @click="$emit('click')" v-if="to && !disabled">
+  <router-link :to="to" class="button" :class="[type, size]" @click="$emit('click')" v-if="to && !disabled">
     <slot></slot>
   </router-link>
-  <a :href="href" class="button" :class="type" @click="$emit('click')" v-else-if="href && !disabled">
+  <a :href="href" class="button" :class="[type, size]" @click="$emit('click')" v-else-if="href && !disabled">
     <slot></slot>
   </a>
-  <button class="button" :type="htmlType" :class="type" @click="$emit('click')" :disabled="disabled" v-else>
+  <button class="button" :type="htmlType" :class="[type, size]" @click="$emit('click')" :disabled="disabled" v-else>
     <slot></slot>
   </button>
 </template>
@@ -109,19 +110,10 @@ defineEmits<{
     }
   }
 
-  &.retry {
-    background-color: $actris-violetlight;
+  &.small {
     margin: 0;
     padding: 0 5px;
     font-size: 0.8rem;
-    cursor: pointer;
-    display: flex;
-
-    &:hover,
-    &:focus-visible {
-      text-decoration: none;
-      background-color: darken($actris-violetlight, 10%);
-    }
   }
 
   &:disabled {

diff --git a/frontend/src/views/QueueView.vue b/frontend/src/views/QueueView.vue
@@ -65,7 +65,9 @@
                 {{ task.status === "created" ? timeDifference(task.scheduledAt) : "" }}
               </td>
               <td v-if="showFailed" class="retry-button">
-                <BaseButton type="retry" @click="retryTask(task)"> Retry </BaseButton>
+                <BaseButton type="danger" size="small" style="display: block" @click="retryTask(task)">
+                  Retry
+                </BaseButton>
               </td>
             </tr>
           </tbody>