From 31bf242587b4232cf510c61bfe27efdce77ef104 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sat, 23 Mar 2024 09:48:22 +0800
Subject: [PATCH] :lipstick: Optimized UI

---
 pkg/views/src/views/auth/connect.vue | 14 ++---
 pkg/views/src/views/auth/sign-in.vue | 19 ++----
 pkg/views/src/views/confirm.vue      |  2 +-
 pkg/views/src/views/personalize.vue  | 93 ++++++----------------------
 4 files changed, 31 insertions(+), 97 deletions(-)

diff --git a/pkg/views/src/views/auth/connect.vue b/pkg/views/src/views/auth/connect.vue
index ea62fb0..361b858 100644
--- a/pkg/views/src/views/auth/connect.vue
+++ b/pkg/views/src/views/auth/connect.vue
@@ -8,7 +8,7 @@
           <p>One Solarpass, entire internet.</p>
         </div>
 
-        <v-window :model-value="panel" class="pa-2 mx-[-0.5rem]">
+        <v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
           <v-window-item value="confirm">
             <div class="flex flex-col gap-2">
               <v-expand-transition>
@@ -141,12 +141,12 @@ async function approve() {
   loading.value = true
   const res = await request(
     "/api/auth/o/connect?" +
-      new URLSearchParams({
-        client_id: route.query["client_id"] as string,
-        redirect_uri: encodeURIComponent(route.query["redirect_uri"] as string),
-        response_type: "code",
-        scope: route.query["scope"] as string,
-      }),
+    new URLSearchParams({
+      client_id: route.query["client_id"] as string,
+      redirect_uri: encodeURIComponent(route.query["redirect_uri"] as string),
+      response_type: "code",
+      scope: route.query["scope"] as string,
+    }),
     {
       method: "POST",
       headers: { Authorization: `Bearer ${getAtk()}` },
diff --git a/pkg/views/src/views/auth/sign-in.vue b/pkg/views/src/views/auth/sign-in.vue
index 779adf6..1001690 100644
--- a/pkg/views/src/views/auth/sign-in.vue
+++ b/pkg/views/src/views/auth/sign-in.vue
@@ -10,11 +10,8 @@
           <div v-if="challenge" class="flex items-center gap-4">
             <v-tooltip>
               <template v-slot:activator="{ props }">
-                <v-progress-circular
-                  v-bind="props"
-                  size="large"
-                  :model-value="(challenge?.progress / challenge?.requirements) * 100"
-                />
+                <v-progress-circular v-bind="props" size="large"
+                  :model-value="(challenge?.progress / challenge?.requirements) * 100" />
               </template>
               <p><b>Risk: </b> {{ challenge?.risk_level }}</p>
               <p><b>Progress: </b> {{ challenge?.progress }}/{{ challenge?.requirements }}</p>
@@ -24,16 +21,10 @@
           <p v-else>Sign in via your Solar ID to access the entire Solar Network.</p>
         </div>
 
-        <v-window :model-value="panel" class="pa-2 mx-[-0.5rem]">
+        <v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
           <v-window-item v-for="k in Object.keys(panels)" :value="k">
-            <component
-              :is="panels[k]"
-              @swap="(val: string) => (panel = val)"
-              v-model:loading="loading"
-              v-model:factors="factors"
-              v-model:currentFactor="currentFactor"
-              v-model:challenge="challenge"
-            />
+            <component :is="panels[k]" @swap="(val: string) => (panel = val)" v-model:loading="loading"
+              v-model:factors="factors" v-model:currentFactor="currentFactor" v-model:challenge="challenge" />
           </v-window-item>
         </v-window>
       </v-card-text>
diff --git a/pkg/views/src/views/confirm.vue b/pkg/views/src/views/confirm.vue
index a8f0e0b..640023e 100644
--- a/pkg/views/src/views/confirm.vue
+++ b/pkg/views/src/views/confirm.vue
@@ -8,7 +8,7 @@
           <p>Confirm your account to keep your account longer than 48 hours.</p>
         </div>
 
-        <v-window :model-value="panel" class="pa-2 mx-[-0.5rem]">
+        <v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
           <v-window-item value="confirm">
             <div>
               <v-expand-transition>
diff --git a/pkg/views/src/views/personalize.vue b/pkg/views/src/views/personalize.vue
index 9347b12..a841f08 100644
--- a/pkg/views/src/views/personalize.vue
+++ b/pkg/views/src/views/personalize.vue
@@ -5,60 +5,28 @@
         <v-form class="mt-1" @submit.prevent="submit">
           <v-row dense>
             <v-col :xs="12" :md="6">
-              <v-text-field
-                readonly
-                hide-details
-                label="Username"
-                density="comfortable"
-                variant="outlined"
-                v-model="data.name"
-              />
+              <v-text-field readonly hide-details label="Username" density="comfortable" variant="outlined"
+                v-model="data.name" />
             </v-col>
             <v-col :xs="12" :md="6">
-              <v-text-field
-                hide-details
-                label="Nickname"
-                density="comfortable"
-                variant="outlined"
-                v-model="data.nick"
-              />
+              <v-text-field hide-details label="Nickname" density="comfortable" variant="outlined"
+                v-model="data.nick" />
             </v-col>
             <v-col :cols="12">
-              <v-textarea
-                hide-details
-                label="Description"
-                density="comfortable"
-                variant="outlined"
-                v-model="data.description"
-              />
+              <v-textarea hide-details label="Description" density="comfortable" variant="outlined"
+                v-model="data.description" />
             </v-col>
             <v-col :xs="12" :md="6" :lg="4">
-              <v-text-field
-                hide-details
-                label="First Name"
-                density="comfortable"
-                variant="outlined"
-                v-model="data.first_name"
-              />
+              <v-text-field hide-details label="First Name" density="comfortable" variant="outlined"
+                v-model="data.first_name" />
             </v-col>
             <v-col :xs="12" :md="6" :lg="4">
-              <v-text-field
-                hide-details
-                label="Last Name"
-                density="comfortable"
-                variant="outlined"
-                v-model="data.last_name"
-              />
+              <v-text-field hide-details label="Last Name" density="comfortable" variant="outlined"
+                v-model="data.last_name" />
             </v-col>
             <v-col :xs="12" :lg="4">
-              <v-text-field
-                hide-details
-                label="Birthday"
-                density="comfortable"
-                variant="outlined"
-                type="datetime-local"
-                v-model="data.birthday"
-              />
+              <v-text-field hide-details label="Birthday" density="comfortable" variant="outlined" type="datetime-local"
+                v-model="data.birthday" />
             </v-col>
           </v-row>
 
@@ -71,42 +39,17 @@
 
     <v-card>
       <v-card-text class="flex items-center gap-3">
-        <v-avatar
-          color="grey-lighten-2"
-          icon="mdi-account-circle"
-          class="rounded-card"
-          size="large"
-          :image="'/api/avatar/' + id.userinfo.data.avatar"
-        />
-        <v-file-input
-          clearable
-          hide-details
-          label="Upload another avatar"
-          variant="outlined"
-          density="comfortable"
-          accept="image/*"
-          prepend-icon=""
-          append-icon="mdi-upload"
-          v-model="avatar"
-          @click:append="applyAvatar"
-        />
+        <v-avatar color="grey-lighten-2" icon="mdi-account-circle" class="rounded-card" size="large"
+          :image="'/api/avatar/' + id.userinfo.data.avatar" />
+        <v-file-input clearable hide-details label="Upload another avatar" variant="outlined" density="comfortable"
+          accept="image/*" prepend-icon="" append-icon="mdi-upload" v-model="avatar" @click:append="applyAvatar" />
       </v-card-text>
 
       <v-img cover class="bg-grey-lighten-2" :height="320" :src="'/api/avatar/' + id.userinfo.data.banner" />
 
       <v-card-text>
-        <v-file-input
-          clearable
-          hide-details
-          label="Update your banner"
-          variant="outlined"
-          density="compact"
-          accept="image/*"
-          prepend-icon=""
-          append-icon="mdi-upload"
-          v-model="banner"
-          @click:append="applyBanner"
-        />
+        <v-file-input clearable hide-details label="Update your banner" variant="solo-filled" density="comfortable"
+          accept="image/*" prepend-icon="" append-icon="mdi-upload" v-model="banner" @click:append="applyBanner" />
       </v-card-text>
     </v-card>