Merge pull request #8 from pmigueld/codex/redesign-mobile-app-using-mockups

feat(mobile): redesign mobile interface

Author: pmigueld

packages/mobile/src/App.vue

@@ -3,34 +3,29 @@ import { RouterView } from 'vue-router'
 </script>
 
 <template>
-  <div id="app" class="vh-100 h-100 overflow-scroll text-break">
-    <header>
-      <nav
-        class="safe-top navbar p-3 d-flex justify-content-center border-bottom align-items-center"
-      >
-        <h5 class="m-0 bold title text-black">ID PASS DataCollect</h5>
-      </nav>
-    </header>
-    <main class="mx-2">
-      <div class="user-select-none disable-scrollbars">
-        <RouterView />
-      </div>
+  <div id="app" class="app-shell safe-top safe-bottom">
+    <main class="app-content disable-scrollbars">
+      <RouterView />
     </main>
-    <footer class="pb-safe"></footer>
   </div>
 </template>
 
 <style scoped>
-main {
-  padding: 1em;
+.app-shell {
+  min-height: 100vh;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f2f4f8 100%);
+  color: var(--color-text);
 }
 
-/* header {
-  display: flex;
-  align-items: flex-end;
-  border-bottom: 2px solid var(--color-medium-dark-blue);
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 1rem 0;
-} */
+.app-content {
+  padding: 1.5rem 1rem 3.5rem;
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .app-content {
+    padding: 2rem 0 4rem;
+  }
+}
 </style>

packages/mobile/src/style.css

@@ -15,7 +15,7 @@ body {
     color 0.5s,
     background-color 0.5s;
   line-height: 1.6;
-  background: var(--color-very-light-blue);
+  background: transparent;
   font-family: Manrope, sans-serif;
   font-size: 16px;
   text-rendering: optimizeLegibility;
@@ -33,16 +33,16 @@ body.barcode-scanner-active {
 }
 
 .btn {
-  border-radius: 2rem;
+  border-radius: 999px;
   border: none;
   cursor: pointer;
   font-family: Manrope, sans-serif;
   outline: 0;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s ease;
 }
 
 .btn:hover {
-  opacity: 0.6;
+  opacity: 0.85;
 }
 
 .btn.btn-primary {
@@ -57,20 +57,13 @@ button[type='submit'] {
 button[disabled] {
   pointer-events: none;
   user-select: none;
+  opacity: 0.5;
 }
 
 a[class] {
   cursor: pointer;
 }
 
-div[class$='actions'] {
-  display: flex;
-  flex-direction: row;
-  gap: 2rem;
-  justify-content: center;
-  margin-block-start: 4rem;
-}
-
 .disable-scrollbars {
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -97,27 +90,34 @@ div[class$='actions'] {
   background: transparent;
   font-weight: normal;
 }
+
 .banner {
   background-color: var(--color-btn-primary-bg);
   color: var(--color-btn-primary);
 }
+
 .title {
   color: #343434;
 }
+
 .title p {
   font-weight: 600;
   font-size: 1rem;
 }
+
 .title small {
   font-size: 0.75rem;
 }
+
 .search-form {
   height: 50px;
   border-radius: 10px;
 }
+
 .capitalize {
   text-transform: capitalize;
 }
+
 .back-link {
   color: var(--color-blue);
 }