From 2d91fdfaedc32cc8e0102c54fcde1fdba466fb2c Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Mon, 28 Oct 2024 14:59:54 +0100
Subject: [PATCH] Tweak layout for mobile (#177)

---
 .../Auth/Pages/Setup/Setup.razor              |  1 -
 .../Main/Layout/TopMenu.razor                 |  6 ++--
 .../Main/Pages/Credentials/Home.razor         |  6 ++--
 .../Main/Pages/Credentials/View.razor         |  2 +-
 .../Main/Pages/Welcome.razor                  | 13 +++++----
 .../wwwroot/css/tailwind.css                  | 29 +++++++++++++++++++
 6 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/AliasVault.Client/Auth/Pages/Setup/Setup.razor b/src/AliasVault.Client/Auth/Pages/Setup/Setup.razor
index 156bfbe60..f731bc464 100644
--- a/src/AliasVault.Client/Auth/Pages/Setup/Setup.razor
+++ b/src/AliasVault.Client/Auth/Pages/Setup/Setup.razor
@@ -118,7 +118,6 @@
     /// </summary>
     private async Task HandleSubmit()
     {
-        Console.WriteLine("HandleSubmit");
         if (IsNextEnabled) {
             await GoNext();
         }
diff --git a/src/AliasVault.Client/Main/Layout/TopMenu.razor b/src/AliasVault.Client/Main/Layout/TopMenu.razor
index 03aa37a3b..67d4c37dd 100644
--- a/src/AliasVault.Client/Main/Layout/TopMenu.razor
+++ b/src/AliasVault.Client/Main/Layout/TopMenu.razor
@@ -4,9 +4,9 @@
 <header>
     <nav class="fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 py-3 px-4">
         <div class="flex justify-between items-center max-w-screen-2xl mx-auto">
-            <div class="flex justify-start items-center">
+            <div class="flex flex-shrink-0 justify-start items-center">
                 <a href="/" class="flex mr-0 sm:mr-4 lg:mr-8">
-                    <img src="/img/icon-nopadding.png" class="mr-3 h-8" alt="AliasVault Logo">
+                    <img src="/img/icon-nopadding.png" class="mr-3 h-8 w-10" alt="AliasVault Logo">
                     <span class="self-center hidden sm:flex text-2xl font-semibold whitespace-nowrap dark:text-white">AliasVault</span>
                 </a>
 
@@ -23,7 +23,7 @@
             </div>
 
             <!-- New search box -->
-            <div class="flex-grow mr-4 ms-0 lg:ms-4">
+            <div class="flex-grow min-w-0 mr-4 ms-0 lg:ms-4">
                 <SearchWidget />
             </div>
 
diff --git a/src/AliasVault.Client/Main/Pages/Credentials/Home.razor b/src/AliasVault.Client/Main/Pages/Credentials/Home.razor
index 43e8bf2db..5e71e0427 100644
--- a/src/AliasVault.Client/Main/Pages/Credentials/Home.razor
+++ b/src/AliasVault.Client/Main/Pages/Credentials/Home.razor
@@ -21,9 +21,9 @@
 <div class="grid gap-4 px-4 mb-4 md:grid-cols-4 xl:grid-cols-6">
     @if (Credentials.Count == 0)
     {
-        <div class="credential-card col-span-full p-4 space-y-2 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 dark:bg-gray-800">
-            <div class="px-4 py-6 text-gray-500 dark:text-gray-400 rounded text-center flex flex-col items-center">
-                <p class="mb-2">No credentials yet</p>
+        <div class="credential-card col-span-full p-4 space-y-2 bg-amber-50 border border-primary-500 rounded-lg shadow-sm dark:border-primary-700 dark:bg-gray-800">
+            <div class="px-4 py-6 text-gray-700 dark:text-gray-200 rounded text-center flex flex-col items-center">
+                <p class="mb-2 text-lg font-semibold text-primary-700 dark:text-primary-400">No credentials yet</p>
                 <p class="text-sm mb-4">Create your first credential using the <span class="hidden md:inline">"+ New Alias"</span><span class="md:hidden">"+"</span> button in the top right corner.</p>
             </div>
         </div>
diff --git a/src/AliasVault.Client/Main/Pages/Credentials/View.razor b/src/AliasVault.Client/Main/Pages/Credentials/View.razor
index 06fb6efb5..175d6a8b8 100644
--- a/src/AliasVault.Client/Main/Pages/Credentials/View.razor
+++ b/src/AliasVault.Client/Main/Pages/Credentials/View.razor
@@ -30,7 +30,7 @@ else
     <div class="grid grid-cols-2 px-4 pt-6 md:grid-cols-3 lg:gap-4 dark:bg-gray-900">
         <div class="col-span-full lg:col-auto">
             <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
-                <div class="items-center sm:flex xl:block 2xl:flex sm:space-x-4 xl:space-x-0 2xl:space-x-4">
+                <div class="items-center flex space-x-4">
                     <DisplayFavicon FaviconBytes="@Alias.Service.Logo" />
 
                     <div>
diff --git a/src/AliasVault.Client/Main/Pages/Welcome.razor b/src/AliasVault.Client/Main/Pages/Welcome.razor
index 8986c7ffd..e389a45d2 100644
--- a/src/AliasVault.Client/Main/Pages/Welcome.razor
+++ b/src/AliasVault.Client/Main/Pages/Welcome.razor
@@ -1,10 +1,10 @@
 @page "/welcome"
 @inherits MainBase
 
-<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col lg:items-center lg:justify-center">
+<div class="bg-gray-100 dark:bg-gray-900 flex flex-col lg:items-center lg:justify-center">
     <div class="w-full mx-auto lg:max-w-4xl lg:bg-white lg:dark:bg-gray-800 lg:shadow-xl lg:rounded-lg lg:overflow-hidden flex flex-col">
         <div class="flex flex-col flex-grow">
-            <div class="flex-grow p-6 pt-4 lg:pt-6 pb-28 lg:pb-4">
+            <div class="flex-grow p-6 pt-4 lg:pt-6 lg:pb-4">
                 <div class="flex justify-between items-center mb-4">
                     <div class="flex-grow text-center">
                         <h2 class="text-xl font-semibold text-gray-900 dark:text-white">@GetStepTitle(_currentStep)</h2>
@@ -114,7 +114,6 @@
     {
         Welcome,
         HowAliasVaultWorks,
-        SecureEnvironment,
         SecurityTips,
         CreateFirstIdentity
     }
@@ -148,12 +147,12 @@
         }
     }
 
-    private void HandleSubmit()
+    private async Task HandleSubmit()
     {
-        GoNext();
+        await GoNext();
     }
 
-    private void GoNext()
+    private async Task GoNext()
     {
         _currentStep = _currentStep switch
         {
@@ -162,6 +161,8 @@
             TutorialStep.SecurityTips => TutorialStep.CreateFirstIdentity,
             _ => _currentStep
         };
+
+        await JsInteropService.ScrollToTop();
     }
 
     private void CreateFirstIdentity()
diff --git a/src/AliasVault.Client/wwwroot/css/tailwind.css b/src/AliasVault.Client/wwwroot/css/tailwind.css
index e6024c3d6..9b7627fd1 100644
--- a/src/AliasVault.Client/wwwroot/css/tailwind.css
+++ b/src/AliasVault.Client/wwwroot/css/tailwind.css
@@ -1004,6 +1004,10 @@ video {
   min-width: 100%;
 }
 
+.min-w-0 {
+  min-width: 0px;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -1482,6 +1486,21 @@ video {
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
 
+.bg-primary-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 224 150 / var(--tw-bg-opacity));
+}
+
+.bg-primary-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(251 203 116 / var(--tw-bg-opacity));
+}
+
+.bg-amber-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -2244,6 +2263,11 @@ video {
   border-color: rgb(234 179 8 / var(--tw-border-opacity));
 }
 
+.dark\:border-primary-700:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(184 112 47 / var(--tw-border-opacity));
+}
+
 .dark\:bg-blue-800:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity));
@@ -2413,6 +2437,11 @@ video {
   color: rgb(250 204 21 / var(--tw-text-opacity));
 }
 
+.dark\:text-primary-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(246 167 82 / var(--tw-text-opacity));
+}
+
 .dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));