From faf0a24296c18e46568e23462f49f7dafbc83db1 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Wed, 2 Oct 2024 13:27:08 +0100
Subject: [PATCH 1/2] fix phone input height

---
 client/components/forms/PhoneInput.vue | 13 ++---
 client/lib/forms/themes/form-themes.js | 69 ++++++++++++++++++++++----
 2 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/client/components/forms/PhoneInput.vue b/client/components/forms/PhoneInput.vue
index d3c1253a9..dc5337e1a 100644
--- a/client/components/forms/PhoneInput.vue
+++ b/client/components/forms/PhoneInput.vue
@@ -41,13 +41,14 @@
         <template #selected="props">
           <div
             class="flex items-center space-x-2 justify-center overflow-hidden"
+            :class="theme.PhoneInput.maxHeight"
           >
             <country-flag
               size="normal"
               class="!-mt-[9px] rounded"
               :country="props.option.code"
             />
-            <span>{{ props.option.dial_code }}</span>
+            <span class="text-sm">{{ props.option.dial_code }}</span>
           </div>
         </template>
       </v-select>
@@ -57,11 +58,11 @@
         class="inline-flex-grow !border-l-0 !rounded-l-none"
         :disabled="disabled ? true : null"
         :class="[
-          theme.default.input,
-          theme.default.spacing.horizontal,
-          theme.default.spacing.vertical,
-          theme.default.fontSize,
-          theme.default.borderRadius,
+          theme.PhoneInput.input,
+          theme.PhoneInput.spacing.horizontal,
+          theme.PhoneInput.spacing.vertical,
+          theme.PhoneInput.fontSize,
+          theme.PhoneInput.borderRadius,
           {
             '!ring-red-500 !ring-2': hasError,
             '!cursor-not-allowed !bg-gray-200': disabled,
diff --git a/client/lib/forms/themes/form-themes.js b/client/lib/forms/themes/form-themes.js
index bc83a43b2..3301a8759 100644
--- a/client/lib/forms/themes/form-themes.js
+++ b/client/lib/forms/themes/form-themes.js
@@ -73,18 +73,35 @@ export const themes = {
         lg: 'w-6 h-6 mx-1'
       }
     },
+    PhoneInput: {
+      flag: {
+        sm: '!-mt-[14px]',
+        md: '!-mt-[9px] rounded',
+        lg: '!-mt-[9px] rounded'
+      },
+      flagSize: {
+        sm: 'small',
+        md: 'normal',
+        lg: 'normal'
+      },
+      maxHeight: {
+        sm: 'max-h-[20px]',
+        md: 'max-h-[24px]',
+        lg: 'max-h-[28px]'
+      }
+    },
     DateInput: {
       input:
         'flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100'
     },
-    CheckboxInput:{
+    CheckboxInput: {
       size: {
         sm: 'w-4 h-4',
         md: 'w-5 h-5',
         lg: 'w-5 h-5'
       },
     },
-    SwitchInput:{
+    SwitchInput: {
       containerSize: {
         sm: 'h-5 w-10 p-0.5',
         md: 'h-6 w-12 p-1',
@@ -101,7 +118,7 @@ export const themes = {
         lg: 'translate-x-6'
       }
     },
-    RatingInput:{
+    RatingInput: {
       size: {
         sm: 'w-6 h-6',
         md: 'w-8 h-8',
@@ -202,17 +219,34 @@ export const themes = {
         lg: 'w-6 h-6 mx-1'
       }
     },
+    PhoneInput: {
+      flag: {
+        sm: '!-mt-[14px]',
+        md: '!-mt-[9px] rounded',
+        lg: '!-mt-[9px] rounded'
+      },
+      flagSize: {
+        sm: 'small',
+        md: 'normal',
+        lg: 'normal'
+      },
+      maxHeight: {
+        sm: 'max-h-[20px]',
+        md: 'max-h-[24px]',
+        lg: 'max-h-[28px]'
+      }
+    },
     DateInput: {
       input: 'flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 placeholder-gray-400 text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100'
     },
-    CheckboxInput:{
+    CheckboxInput: {
       size: {
         sm: 'w-4 h-4',
         md: 'w-5 h-5',
         lg: 'w-5 h-5'
       },
     },
-    SwitchInput:{
+    SwitchInput: {
       containerSize: {
         sm: 'h-5 w-10',
         md: 'h-6 w-12',
@@ -224,7 +258,7 @@ export const themes = {
         lg: 'h-4 w-4'
       },
     },
-    RatingInput:{
+    RatingInput: {
       size: {
         sm: 'w-6 h-6',
         md: 'w-8 h-8',
@@ -325,17 +359,34 @@ export const themes = {
         lg: 'w-6 h-6 mx-1'
       }
     },
+    PhoneInput: {
+      flag: {
+        sm: '!-mt-[14px]',
+        md: '!-mt-[9px] rounded',
+        lg: '!-mt-[9px] rounded'
+      },
+      flagSize: {
+        sm: 'small',
+        md: 'normal',
+        lg: 'normal'
+      },
+      maxHeight: {
+        sm: 'max-h-[20px]',
+        md: 'max-h-[24px]',
+        lg: 'max-h-[28px]'
+      }
+    },
     DateInput: {
       input: 'shadow-inner-notion border-transparent focus:border-transparent flex-1 appearance-none w-full bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 placeholder-gray-400 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion p-[1px]'
     },
-    CheckboxInput:{
+    CheckboxInput: {
       size: {
         sm: 'w-4 h-4',
         md: 'w-5 h-5',
         lg: 'w-5 h-5'
       },
     },
-    SwitchInput:{
+    SwitchInput: {
       containerSize: {
         sm: 'h-5 w-10',
         md: 'h-6 w-12',
@@ -347,7 +398,7 @@ export const themes = {
         lg: 'h-4 w-4'
       },
     },
-    RatingInput:{
+    RatingInput: {
       size: {
         sm: 'w-6 h-6',
         md: 'w-8 h-8',

From 5fde9f6be362dc87be55d335732120212f65e196 Mon Sep 17 00:00:00 2001
From: Frank <csskfaves@gmail.com>
Date: Thu, 3 Oct 2024 10:44:31 +0100
Subject: [PATCH 2/2] fix width classes

---
 client/components/forms/PhoneInput.vue |  2 +-
 client/lib/forms/themes/form-themes.js | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/components/forms/PhoneInput.vue b/client/components/forms/PhoneInput.vue
index dc5337e1a..92187a14d 100644
--- a/client/components/forms/PhoneInput.vue
+++ b/client/components/forms/PhoneInput.vue
@@ -12,7 +12,7 @@
     >
       <v-select
         v-model="selectedCountryCode"
-        class="w-[130px]"
+        :class="theme.PhoneInput.countrySelectWidth"
         dropdown-class="max-w-[300px]"
         input-class="rounded-r-none"
         :data="countries"
diff --git a/client/lib/forms/themes/form-themes.js b/client/lib/forms/themes/form-themes.js
index 3301a8759..2edde5fea 100644
--- a/client/lib/forms/themes/form-themes.js
+++ b/client/lib/forms/themes/form-themes.js
@@ -74,6 +74,11 @@ export const themes = {
       }
     },
     PhoneInput: {
+      countrySelectWidth: {
+        sm: 'w-[100px]',
+        md: 'w-[120px]',
+        lg: 'w-[120px]'
+      },
       flag: {
         sm: '!-mt-[14px]',
         md: '!-mt-[9px] rounded',
@@ -220,6 +225,11 @@ export const themes = {
       }
     },
     PhoneInput: {
+      countrySelectWidth: {
+        sm: 'w-[100px]',
+        md: 'w-[120px]',
+        lg: 'w-[120px]'
+      },
       flag: {
         sm: '!-mt-[14px]',
         md: '!-mt-[9px] rounded',
@@ -360,6 +370,11 @@ export const themes = {
       }
     },
     PhoneInput: {
+      countrySelectWidth: {
+        sm: 'w-[100px]',
+        md: 'w-[120px]',
+        lg: 'w-[120px]'
+      },
       flag: {
         sm: '!-mt-[14px]',
         md: '!-mt-[9px] rounded',