UI upgrades

web/src/components/layout/DefaultAppBar.vue

@@ -46,7 +46,7 @@
       <div class="mr-3">
         <!-- <AppLogo /> -->
         <PublicAppLogo
-          to="/dashboard"
+          to="/"
           :animated="false"
         />
       </div>

web/src/components/layout/ProfileMenu.vue

@@ -106,9 +106,9 @@
         <v-btn
           variant="outlined"
           block
+          text="Logout"
           @click="signOut"
-          >Logout</v-btn
+        />
-        >
       </div>
     </v-sheet>
   </v-menu>

web/src/components/layout/PublicAppBar.vue

@@ -7,13 +7,19 @@
       class="main-head pl-2"
     >
       <div class="mr-3">
-        <PublicAppLogo
+        <PublicAppLogo to="/" />
-          to="/"
-          :animated="isHomePage"
-        />
       </div>
 
       <v-spacer />
+
+      <ProfileMenu v-if="isAuthenticated" />
+      <v-btn
+        v-else
+        color="primary"
+        variant="tonal"
+        text="Sign in"
+        :to="{ name: 'SignInPage' }"
+      />
     </v-app-bar>
   </div>
   <div v-else>
@@ -31,6 +37,15 @@
       </div>
 
       <v-spacer />
+
+      <ProfileMenu v-if="isAuthenticated" />
+      <v-btn
+        v-else
+        color="primary"
+        variant="tonal"
+        text="Sign in"
+        :to="{ name: 'SignInPage' }"
+      />
     </v-app-bar>
   </div>
 </template>
@@ -39,11 +54,14 @@
 import { computed } from "vue"
 import { useRoute } from "vue-router"
 import { useDisplay } from "vuetify"
+import { useAuth0 } from "@auth0/auth0-vue"
 
+import ProfileMenu from "@/components/layout/ProfileMenu.vue"
 import PublicAppLogo from "@/components/common/PublicAppLogo.vue"
 
 const route = useRoute()
 const isHomePage = computed(() => route.name === "HomePage")
 
 const { mobile } = useDisplay()
+const { isAuthenticated } = useAuth0()
 </script>

web/src/pages/HomePage.vue

@@ -1 +1,28 @@
-<template><div></div></template>
+<template>
+  <div>
+    <v-row>
+      <v-col
+        cols="12"
+        sm="6"
+        md="4"
+        lg="2"
+      >
+        <AppCard
+          v-if="isAuthenticated"
+          :to="{ name: 'DashboardPage' }"
+          elevation="6"
+        >
+          You are signed in. Go to Dashboard
+        </AppCard>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAuth0 } from "@auth0/auth0-vue"
+
+import AppCard from "@/components/common/AppCard.vue"
+
+const { isAuthenticated } = useAuth0()
+</script>

web/src/pages/SignInPage.vue

@@ -16,17 +16,7 @@
             class="px-8"
             style="max-width: 500px"
           >
-            <!-- <img
+            <PublicAppLogo />
-              class="d-inline-block d-lg-none"
-              src="@/assets/app_logo_small.png"
-              style="height: 66px; transform: rotate(-12deg)"
-            /> -->
-            <h2
-              class="text-h1 textPrimary font-weight-semibold mb-0"
-              style="font-size: 2.5rem !important"
-            >
-              {{ APPLICATION_NAME }}
-            </h2>
             <h6 class="text-h6 text-medium-emphasis d-flex align-center mt-6 font-weight-medium">
               <v-btn
                 block
@@ -37,10 +27,6 @@
             </h6>
 
             <!--
-            <div class="my-6 text-medium-emphasis">
-              If you don't have an account, create one to get started using ROTYR. It's free to sign
-              up and only takes a few seconds.
-            </div>
              <v-btn
               block
               variant="outlined"
@@ -63,20 +49,6 @@
           </div>
         </div>
       </v-col>
-      <!-- <v-col
-        cols="12"
-        lg="7"
-        xl="8"
-        class="d-none d-lg-flex align-center justify-center authentication position-relative"
-      >
-        <div class="text-center">
-          <img
-            src="@/assets/app_logo_splash.png"
-            class="position-relative"
-            style="opacity: 0.15; width: 80%"
-          />
-        </div>
-      </v-col> -->
     </v-row>
   </div>
 </template>
@@ -85,7 +57,7 @@
 import { onMounted } from "vue"
 import { useAuth0 } from "@auth0/auth0-vue"
 
-import { APPLICATION_NAME } from "@/config"
+import PublicAppLogo from "@/components/common/PublicAppLogo.vue"
 import useCurrentUser from "@/use/use-current-user"
 
 const { reset: resetCurrentUser } = useCurrentUser()