fixes

src/layouts/DefaultLayout.vue

@@ -67,11 +67,11 @@ const goToSettings = () => {
 
 <template>
   <v-layout>
-    <v-app-bar density="compact" elevation="0" border>
+    <v-app-bar density="compact" elevation="0" border rounded="0">
       <template v-slot:prepend>
         <v-menu>
           <template v-slot:activator="{ props }">
-            <v-app-bar-nav-icon variant="text" v-bind="props" />
+            <v-app-bar-nav-icon variant="text" density="comfortable" v-bind="props" />
           </template>
 
           <v-list class="mt-1" width="200" density="compact">
@@ -93,7 +93,6 @@ const goToSettings = () => {
             {{ title }}
           </router-link>
           <span>v{{ version }}</span>
-          <v-divider class="mx-2" vertical />
 
           <project-menu v-if="session.data" />
         </div>
@@ -107,34 +106,38 @@ const goToSettings = () => {
           </router-link>
         </div>
       </div>
-      <v-btn v-if="!session.data" @click="goToSignIn">Sign In</v-btn>
-      <v-btn v-if="!session.data" @click="goToSignUp">Sign Up</v-btn>
+      <div v-if="!session.data">
+        <v-btn @click="goToSignIn">Sign In</v-btn>
+        <v-btn @click="goToSignUp">Sign Up</v-btn>
+      </div>
 
       <v-divider class="mx-1" vertical />
-      <v-btn icon="mdi-brightness-6" @click="toggleTheme" />
-      <v-divider class="mx-1" vertical />
+      <v-btn icon="mdi-brightness-6" density="comfortable" @click="toggleTheme" />
 
-      <v-menu v-if="session.data">
-        <template v-slot:activator="{ props }">
-          <v-btn icon v-bind="props">
-            <v-icon icon="mdi-account" />
-          </v-btn>
-        </template>
-        <v-list class="mt-1" width="200">
-          <v-list-item @click="goToProfile">
-            <v-icon icon="mdi-account" />
-            Profile
-          </v-list-item>
-          <v-list-item @click="goToSettings">
-            <v-icon icon="mdi-cog" />
-            settings
-          </v-list-item>
-          <v-list-item @click="goToSignOut">
-            <v-icon icon="mdi-logout" />
-            Sign Out
-          </v-list-item>
-        </v-list>
-      </v-menu>
+      <div v-if="session.data">
+        <v-divider class="mx-1" vertical />
+        <v-menu>
+          <template v-slot:activator="{ props }">
+            <v-btn density="comfortable" class="mr-1" icon v-bind="props">
+              <v-icon icon="mdi-account" />
+            </v-btn>
+          </template>
+          <v-list class="mt-1" width="200">
+            <v-list-item @click="goToProfile">
+              <v-icon icon="mdi-account" />
+              Profile
+            </v-list-item>
+            <v-list-item @click="goToSettings">
+              <v-icon icon="mdi-cog" />
+              settings
+            </v-list-item>
+            <v-list-item @click="goToSignOut">
+              <v-icon icon="mdi-logout" />
+              Sign Out
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
     </v-app-bar>
     <v-main>
       <v-container :fluid="false">

src/views/users/SignInView.vue

@@ -37,8 +37,8 @@ const signIn = async () => {
     <v-col cols="12" md="6" sm="8" offset-sm="2" offset-md="3" offset="0">
       <div class="d-flex flex-column ga-2">
         <div class="text-uppercase">sign in</div>
-        <v-text-field prepend-inner-icon="mdi-email" placeholder="email" v-model="signInData.email" />
-        <v-text-field prepend-inner-icon="mdi-lock" placeholder="password" v-model="signInData.password" />
+        <v-text-field prepend-inner-icon="mdi-email" placeholder="E-mail" v-model="signInData.email" />
+        <v-text-field prepend-inner-icon="mdi-lock" placeholder="Password" v-model="signInData.password" />
         <div class="d-flex ga-2 align-center">
           <v-switch color="info" v-model="signInData.rememberMe" label="Remember me" />
           <v-spacer />

src/views/users/SignUpView.vue

@@ -3,8 +3,8 @@ import { authClient } from '@/lib/auth-client.js'
 import { reactive } from 'vue'
 
 const signUpData = reactive({
-  name: 'Vadim',
-  email: 'vadim.olonin@gmail.com',
+  name: '',
+  email: '',
   password: '',
 })
 
@@ -24,15 +24,15 @@ const signUp = async () => {
 
 <template>
   <v-row>
-    <v-col cols="4" offset="4">
+    <v-col cols="12" md="6" sm="8" offset-sm="2" offset-md="3" offset="0">
       <div class="d-flex flex-column ga-2">
         <div class="text-uppercase">sign up</div>
-        <v-text-field placeholder="name" prepend-inner-icon="mdi-account" v-model="signUpData.name" />
-        <v-text-field placeholder="email" prepend-inner-icon="mdi-email" v-model="signUpData.email" />
-        <v-text-field placeholder="password" prepend-inner-icon="mdi-lock" v-model="signUpData.password" />
+        <v-text-field placeholder="Name" prepend-inner-icon="mdi-account" v-model="signUpData.name" />
+        <v-text-field placeholder="E-mail" prepend-inner-icon="mdi-email" v-model="signUpData.email" />
+        <v-text-field placeholder="Password" prepend-inner-icon="mdi-lock" v-model="signUpData.password" />
         <div class="d-flex ga-2 align-center">
           <div>
-            <v-btn @click="signUp">sign up</v-btn>
+            <v-btn @click="signUp" color="primary" density="comfortable">SIGN UP</v-btn>
           </div>
           <v-spacer />
           <router-link to="/verify-email" class="text-warning text-decoration-none"> Verify Email </router-link>

src/views/users/VerifyEmailView.vue

@@ -3,7 +3,7 @@ import { authClient } from '@/lib/auth-client.js'
 import { reactive } from 'vue'
 
 const verifyData = reactive({
-  email: 'vadim.olonin@gmail.com',
+  email: '',
 })
 
 const verify = async () => {
@@ -19,13 +19,13 @@ const verify = async () => {
 
 <template>
   <v-row>
-    <v-col cols="4" offset="4">
+    <v-col cols="12" md="6" sm="8" offset-sm="2" offset-md="3" offset="0">
       <div class="d-flex flex-column ga-2">
         <div class="text-uppercase">verify email</div>
 
         <v-text-field placeholder="email" prepend-inner-icon="mdi-email" v-model="verifyData.email" />
         <div>
-          <v-btn @click="verify">verify</v-btn>
+          <v-btn @click="verify" color="primary" density="comfortable">VERIFY</v-btn>
         </div>
       </div>
     </v-col>