From c03be02922abf891af58d401bf8d571d8b7440e7 Mon Sep 17 00:00:00 2001
From: Lionell Briones <llenoil@gmail.com>
Date: Tue, 5 Nov 2024 14:50:43 +0800
Subject: [PATCH 1/2] - change change theme position - fix responsive

---
 src/assets/main.css                           |  6 ++--
 src/components/LoginCard/LoginCard.vue        | 30 -----------------
 src/components/LoginCard/index.ts             |  3 --
 .../TelegramBanner/TelegramBanner.vue         |  2 +-
 src/views/Login.vue                           | 32 +++++++++++++------
 5 files changed, 27 insertions(+), 46 deletions(-)
 delete mode 100644 src/components/LoginCard/LoginCard.vue
 delete mode 100644 src/components/LoginCard/index.ts

diff --git a/src/assets/main.css b/src/assets/main.css
index b39abeb..72af920 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -37,7 +37,7 @@ html {
   right: 0;
   transform: translate(-100%, -40%) !important;
   position: absolute !important;
-  z-index: 999999;
+  z-index: 999990;
 }
 
 #w3a-modal::before {
@@ -72,11 +72,11 @@ html {
     top: 50% !important;
     left: 50% !important;
     right: 0;
-    transform: translate(-50%, -20%) !important;
+    transform: translate(-55%, -40%) !important;
   }
 }
 
-@media only screen and (max-width: 830px) {
+@media only screen and (max-width: 768px) {
   #w3a-modal {
     width: 100%;
   }
diff --git a/src/components/LoginCard/LoginCard.vue b/src/components/LoginCard/LoginCard.vue
deleted file mode 100644
index 2a97c43..0000000
--- a/src/components/LoginCard/LoginCard.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@toruslabs/vue-components/Icon'
-import { computed } from 'vue'
-
-import useCustomConfig from '@/composables/use-custom-config'
-
-const customConfig = useCustomConfig()
-const config = computed(() => customConfig.config)
-</script>
-
-<template>
-  <div class="mb-6 max-sm:z-[1000000]">
-    <button
-      type="button"
-      class="flex items-center justify-center gap-2 rounded-full pl-2 pr-4 py-2 bg-app-gray-200 dark:bg-app-gray-800"
-      @click="customConfig.setActiveTheme"
-    >
-      <div class="h-8 w-8 bg-app-white rounded-full flex justify-center items-center">
-        <Icon
-          class="text-app-gray-500"
-          :name="config.value.isDark ? 'moon-solid-icon' : 'sun-solid-icon'"
-          size="24"
-        />
-      </div>
-      <div class="leading-none text-left text-sm text-app-gray-500 dark:text-app-gray-400">
-        {{ config.value.isDark ? 'DARK' : 'LIGHT' }}<br />MODE
-      </div>
-    </button>
-  </div>
-</template>
diff --git a/src/components/LoginCard/index.ts b/src/components/LoginCard/index.ts
deleted file mode 100644
index b78085b..0000000
--- a/src/components/LoginCard/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import LoginCard from './LoginCard.vue'
-
-export default LoginCard
diff --git a/src/components/TelegramBanner/TelegramBanner.vue b/src/components/TelegramBanner/TelegramBanner.vue
index 246e773..a04c937 100644
--- a/src/components/TelegramBanner/TelegramBanner.vue
+++ b/src/components/TelegramBanner/TelegramBanner.vue
@@ -13,7 +13,7 @@ const handleURL = () => {
 <template>
   <button
     type="button"
-    class="appearance-none rounded-[10px] flex gap-x-2 items-center bg-app-white dark:bg-app-gray-800 w-full lg:!w-[368px] p-4 cursor-pointer max-sm:z-[1000000]"
+    class="appearance-none rounded-[10px] flex gap-x-2 items-center bg-app-white dark:bg-app-gray-800 w-full md:!w-[340px] p-4 cursor-pointer max-sm:z-[1000000]"
     @click="handleURL"
   >
     <Badge variant="info" class="gap-x-1 p-2 sm:px-2.5 sm:py-1 rounded-[10px]">
diff --git a/src/views/Login.vue b/src/views/Login.vue
index af915a4..b259c1c 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -3,9 +3,8 @@ import { Button } from '@toruslabs/vue-components/Button'
 import { Card } from '@toruslabs/vue-components/Card'
 import { Icon } from '@toruslabs/vue-components/Icon'
 import { useWeb3Auth } from '@web3auth/modal-vue-composables'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
-import LoginCard from '@/components/LoginCard'
 import TelegramBanner from '@/components/TelegramBanner/TelegramBanner.vue'
 import WhiteLabelConfig from '@/components/WhiteLabelConfig'
 
@@ -21,6 +20,8 @@ locales.setActiveLocale(customConfig.config.value.selectedLanguage)
 
 const configDialogRef = ref<HTMLDialogElement | null>(null)
 
+const config = computed(() => customConfig.config)
+
 function showConfigDialog() {
   showAnimateConfigDialog.value = true
   configDialogRef.value?.showModal()
@@ -49,11 +50,29 @@ watch(
 </script>
 
 <template>
-  <div class="flex-1 lg:flex items-center">
+  <div class="flex-1 md:flex items-center relative">
     <div class="flex flex-col gap-4 mx-auto h-full w-full p-4 sm:py-6 sm:px-10">
       <TelegramBanner />
+      <div class="top-4 right-4 md:absolute z-[999999]">
+        <button
+          type="button"
+          class="flex items-center justify-center gap-2 rounded-full pl-2 pr-4 py-2 bg-app-gray-200 dark:bg-app-gray-800"
+          @click="customConfig.setActiveTheme"
+        >
+          <div class="h-8 w-8 bg-app-white rounded-full flex justify-center items-center">
+            <Icon
+              class="text-app-gray-500"
+              :name="config.value.isDark ? 'moon-solid-icon' : 'sun-solid-icon'"
+              size="24"
+            />
+          </div>
+          <div class="leading-none text-left text-sm text-app-gray-500 dark:text-app-gray-400">
+            {{ config.value.isDark ? 'DARK' : 'LIGHT' }}<br />MODE
+          </div>
+        </button>
+      </div>
       <div class="flex gap-x-4">
-        <div class="hidden w-[368px] lg:!flex justify-center items-center">
+        <div class="hidden w-[340px] md:!flex justify-center items-center">
           <Card
             class="!shadow-modal !border-0 dark:!border-app-gray-800 dark:!shadow-dark"
             :classes="{
@@ -63,11 +82,6 @@ watch(
             <WhiteLabelConfig />
           </Card>
         </div>
-        <div class="flex-1 flex justify-start items-start max-sm:z-[10000000]">
-          <div class="max-w-[392px]">
-            <LoginCard />
-          </div>
-        </div>
       </div>
     </div>
   </div>

From 363f2e512aac0e9c1e133239ba7c0b1fda83f53b Mon Sep 17 00:00:00 2001
From: Lionell Briones <llenoil@gmail.com>
Date: Tue, 5 Nov 2024 14:55:38 +0800
Subject: [PATCH 2/2] adjust config size

---
 src/components/TelegramBanner/TelegramBanner.vue | 2 +-
 src/views/Login.vue                              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TelegramBanner/TelegramBanner.vue b/src/components/TelegramBanner/TelegramBanner.vue
index a04c937..9d8f7c7 100644
--- a/src/components/TelegramBanner/TelegramBanner.vue
+++ b/src/components/TelegramBanner/TelegramBanner.vue
@@ -13,7 +13,7 @@ const handleURL = () => {
 <template>
   <button
     type="button"
-    class="appearance-none rounded-[10px] flex gap-x-2 items-center bg-app-white dark:bg-app-gray-800 w-full md:!w-[340px] p-4 cursor-pointer max-sm:z-[1000000]"
+    class="appearance-none rounded-[10px] flex gap-x-2 items-center bg-app-white dark:bg-app-gray-800 w-full md:!w-[340px] lg:!w-[368px] p-4 cursor-pointer max-sm:z-[1000000]"
     @click="handleURL"
   >
     <Badge variant="info" class="gap-x-1 p-2 sm:px-2.5 sm:py-1 rounded-[10px]">
diff --git a/src/views/Login.vue b/src/views/Login.vue
index b259c1c..98dc7cb 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -72,7 +72,7 @@ watch(
         </button>
       </div>
       <div class="flex gap-x-4">
-        <div class="hidden w-[340px] md:!flex justify-center items-center">
+        <div class="hidden w-[340px] lg:w-[368px] md:!flex justify-center items-center">
           <Card
             class="!shadow-modal !border-0 dark:!border-app-gray-800 dark:!shadow-dark"
             :classes="{