fix: buttons spaces & move layouts to components (#3)

* update: icons into components - fix: header login page * fix: tailwind handle btn class
12 months ago · f2d2410046
9 changed files with 78 additions and 76 deletions
--- a/src/components/Clients/BackupConfig.vue
+++ b/src/components/Clients/BackupConfig.vue
@ -1,26 +1,10 @@
 <template>
-  <a
+  <BaseButton
+    as="a"
    href="./api/wireguard/backup"
    :title="$t('titleBackupConfig')"
-    class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-x-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 md:rounded inline-flex items-center transition"
  >
-    <svg
-      inline
-      class="w-4 md:mr-2"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"
-      />
-    </svg>
+    <IconsStack />
    <span class="max-md:hidden text-sm">{{ $t('backup') }}</span>
-  </a>
+  </BaseButton>
 </template>
-
-<script setup lang="ts"></script>
--- a/src/components/Clients/New.vue
+++ b/src/components/Clients/New.vue
@ -1,28 +1,13 @@
 <template>
-  <button
-    class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-l-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-r-full md:rounded inline-flex items-center transition"
+  <BaseButton
    @click="
      modalStore.clientCreate = true;
      modalStore.clientCreateName = '';
    "
  >
-    <svg
-      class="w-4 md:mr-2"
-      inline
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-      />
-    </svg>
+    <IconsPlus />
    <span class="max-md:hidden text-sm">{{ $t('new') }}</span>
-  </button>
+  </BaseButton>
 </template>

 <script setup lang="ts">
--- a/src/components/Clients/RestoreConfig.vue
+++ b/src/components/Clients/RestoreConfig.vue
@ -1,24 +1,6 @@
 <template>
-  <label
-    for="inputRC"
-    :title="$t('titleRestoreConfig')"
-    class="hover:cursor-pointer hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-r-0 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded-l-full md:rounded inline-flex items-center transition"
-  >
-    <svg
-      inline
-      class="w-4 md:mr-2"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
-      />
-    </svg>
+  <BaseButton as="label" for="inputRC" :title="$t('titleRestoreConfig')">
+    <IconsArrowInf />
    <span class="max-md:hidden text-sm">{{ $t('restore') }}</span>
    <input
      id="inputRC"
@ -28,7 +10,7 @@
      class="hidden"
      @change="restoreConfig"
    />
-  </label>
+  </BaseButton>
 </template>

 <script setup lang="ts">
--- a/src/components/base/Button.vue
+++ b/src/components/base/Button.vue
@ -1,5 +1,10 @@
 <template>
-  <component :is="elementType" role="button" :class="btnClasses" v-bind="attrs">
+  <component
+    :is="elementType"
+    role="button"
+    class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 max-md:border-x-0 border-2 border-gray-100 dark:border-neutral-600 py-2 md:px-4 rounded max-md:rounded-full inline-flex items-center transition"
+    v-bind="attrs"
+  >
    <slot />
  </component>
 </template>
@ -10,25 +15,12 @@ const props = defineProps({
    type: String,
    default: 'button',
  },
-  class: {
-    type: String,
-    default: '',
-  },
 });

 const elementType = computed(() => props.as);

 const attrs = computed(() => {
-  const { as, class: _, ...attrs } = props;
+  const { as, ...attrs } = props;
  return attrs;
 });
-
-const btnClasses =
-  props.class ||
-  `
-py-2 px-4 transition-colors
-hover:bg-primary hover:border-primary
-hover:text-white text-gray-700 dark:text-neutral-200
-max-md:border-l-0 border-2 border-gray-100 dark:border-neutral-600
-  `.replaceAll('\n', ' ');
 </script>
--- a/src/components/icons/ArrowInf.vue
+++ b/src/components/icons/ArrowInf.vue
@ -0,0 +1,17 @@
+<template>
+  <svg
+    inline
+    class="w-4 md:mr-2"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Plus.vue
+++ b/src/components/icons/Plus.vue
@ -0,0 +1,17 @@
+<template>
+  <svg
+    class="w-4 md:mr-2"
+    inline
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+    />
+  </svg>
+</template>
--- a/src/components/icons/Stack.vue
+++ b/src/components/icons/Stack.vue
@ -0,0 +1,17 @@
+<template>
+  <svg
+    inline
+    class="w-4 md:mr-2"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"
+    />
+  </svg>
+</template>
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@ -1,9 +1,14 @@
 <template>
  <header class="container mx-auto max-w-3xl px-3 md:px-0 mt-4 xs:mt-6">
    <div
-      class="flex flex-col-reverse xxs:flex-row flex-auto items-center gap-3"
+      :class="
+        isLoginPage
+          ? 'flex justify-end'
+          : 'flex flex-col-reverse xxs:flex-row flex-auto items-center gap-3'
+      "
    >
      <h1
+        v-if="!isLoginPage"
        class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4"
      >
        <img
@ -140,6 +145,9 @@

 <script setup lang="ts">
 const authStore = useAuthStore();
+const route = useRoute();
+
+const isLoginPage = computed(() => route.path == '/login');

 const currentRelease = ref<null | number>(null);
 const latestRelease = ref<null | { version: number; changelog: string }>(null);
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -11,7 +11,7 @@
            {{ $t('clients') }}
          </p>
        </div>
-        <div class="flex md:block md:flex-shrink-0">
+        <div class="flex md:block md:flex-shrink-0 space-x-1">
          <ClientsRestoreConfig />
          <ClientsBackupConfig />
          <ClientsNew />