From f2d2410046e810210c37cccc7e948812ba60bcc3 Mon Sep 17 00:00:00 2001
From: tetuaoro <65575727+tetuaoro@users.noreply.github.com>
Date: Wed, 14 Aug 2024 07:35:10 +0200
Subject: [PATCH] fix: buttons spaces & move layouts to components (#3)

* update: icons into components

- fix: header login page

* fix: tailwind handle btn class
---
 src/components/Clients/BackupConfig.vue  | 24 ++++--------------------
 src/components/Clients/New.vue           | 21 +++------------------
 src/components/Clients/RestoreConfig.vue | 24 +++---------------------
 src/components/base/Button.vue           | 22 +++++++---------------
 src/components/icons/ArrowInf.vue        | 17 +++++++++++++++++
 src/components/icons/Plus.vue            | 17 +++++++++++++++++
 src/components/icons/Stack.vue           | 17 +++++++++++++++++
 src/layouts/Header.vue                   | 10 +++++++++-
 src/pages/index.vue                      |  2 +-
 9 files changed, 78 insertions(+), 76 deletions(-)
 create mode 100644 src/components/icons/ArrowInf.vue
 create mode 100644 src/components/icons/Plus.vue
 create mode 100644 src/components/icons/Stack.vue

diff --git a/src/components/Clients/BackupConfig.vue b/src/components/Clients/BackupConfig.vue
index 98adb78d..8cbd52b5 100644
--- 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>
diff --git a/src/components/Clients/New.vue b/src/components/Clients/New.vue
index 0bf2c72f..2fedf635 100644
--- 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">
diff --git a/src/components/Clients/RestoreConfig.vue b/src/components/Clients/RestoreConfig.vue
index fb086682..009af79d 100644
--- 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">
diff --git a/src/components/base/Button.vue b/src/components/base/Button.vue
index 5e3b3fec..1d0418e3 100644
--- 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>
diff --git a/src/components/icons/ArrowInf.vue b/src/components/icons/ArrowInf.vue
new file mode 100644
index 00000000..4ffd745a
--- /dev/null
+++ 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>
diff --git a/src/components/icons/Plus.vue b/src/components/icons/Plus.vue
new file mode 100644
index 00000000..047e1082
--- /dev/null
+++ 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>
diff --git a/src/components/icons/Stack.vue b/src/components/icons/Stack.vue
new file mode 100644
index 00000000..74cc0f3b
--- /dev/null
+++ 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>
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
index c6562600..a34d310a 100644
--- 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);
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 0e2417e6..02561f4f 100644
--- 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 />