Merge pull request #49 from Web3Auth/fix/update-theme-position

Change toggle light/dark position

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%;
   }

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] 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]">

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] lg:w-[368px] 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>