starting refactor styling

web/vue-app/src/components/shared/LoginButton.vue

@@ -3,6 +3,8 @@ import { ref, nextTick, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { eventBus } from '@/common/eventBus'
 import { authenticateParent, isParentAuthenticated, logoutParent } from '../../stores/auth'
+import '@/assets/modal.css'
+import '@/assets/actions-shared.css'
 
 const router = useRouter()
 const show = ref(false)
@@ -62,6 +64,10 @@ async function signOut() {
   dropdownOpen.value = false
 }
 
+function goToProfile() {
+  router.push('/parent/profile')
+}
+
 onMounted(() => {
   eventBus.on('open-login', open)
 })
@@ -71,7 +77,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="login-button-root" style="position: relative">
+  <div style="position: relative">
     <button v-if="!isParentAuthenticated" @click="open" aria-label="Parent login" class="login-btn">
       Parent
     </button>
@@ -99,6 +105,9 @@ onUnmounted(() => {
           z-index: 10;
         "
       >
+        <button class="menu-item" @click="goToProfile" style="width: 100%; text-align: left">
+          Profile
+        </button>
         <button class="menu-item" @click="handleLogout" style="width: 100%; text-align: left">
           Log out
         </button>
@@ -135,11 +144,6 @@ onUnmounted(() => {
 <style>
 /* modal */
 
-.modal h3 {
-  margin-bottom: 0.5rem;
-  font-size: 1.05rem;
-}
-
 .pin-input {
   width: 100%;
   padding: 0.5rem 0.6rem;
@@ -151,16 +155,6 @@ onUnmounted(() => {
   text-align: center;
 }
 
-.actions {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: center;
-  margin-bottom: 0.4rem;
-}
-
-.login-button-root {
-}
-
 .dropdown-menu {
   padding: 0.5rem 0;
 }
@@ -183,4 +177,14 @@ onUnmounted(() => {
 .menu-item.danger {
   color: var(--menu-item-danger, #ff4d4f);
 }
+
+@media (max-width: 600px) {
+  .menu-item {
+    padding: 0.85rem 0.7rem;
+    font-size: 1rem;
+  }
+  .menu-item + .menu-item {
+    margin-top: 0.35rem;
+  }
+}
 </style>