From 2defaf883e96b8c0ca2ab22da6958ff4446dfa32 Mon Sep 17 00:00:00 2001
From: tombui99 <tom.quang.bui@gmai.com>
Date: Mon, 13 Nov 2023 16:41:14 +1100
Subject: [PATCH 1/2] Improve homepage UI

---
 ui/src/containers/Home.svelte | 77 +++++++++++++----------------------
 1 file changed, 28 insertions(+), 49 deletions(-)

diff --git a/ui/src/containers/Home.svelte b/ui/src/containers/Home.svelte
index 9490bd04..8db32110 100644
--- a/ui/src/containers/Home.svelte
+++ b/ui/src/containers/Home.svelte
@@ -59,20 +59,17 @@
 
   <section class="text-gray-700 body-font">
     <div
-      class="container mx-auto flex px-5 py-19 md:flex-row flex-col items-center"
+      class="container grid grid-cols-2 gap-4 mx-auto px-5 py-24 items-center"
     >
-      <div
-        class="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col
-        md:items-start md:text-left items-center text-center"
-      >
+      <div>
         <h1
           class="title-font leading-tight sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
         >
           View prior scans history
         </h1>
-        <p class="mb-8 leading-relaxed">View previous scan results</p>
+        <p class="mb-8 leading-relaxed">View previous scan results.</p>
       </div>
-      <div class="md:w-1/2 w-5/6 mb-10 md:mb-0">
+      <div>
         <a href="/images/dashboard.png" target="_blank">
           <img
             class="object-cover object-center rounded bordered"
@@ -86,9 +83,9 @@
 
   <section class="text-gray-700 body-font">
     <div
-      class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"
+      class="container grid grid-cols-2 gap-4 mx-auto px-5 py-24 items-center"
     >
-      <div class="md:w-1/2 w-5/6 mb-10 md:mb-0">
+      <div>
         <a href="/images/exportcsv.png" target="_blank">
           <img
             class="object-cover object-center rounded bordered"
@@ -97,17 +94,14 @@
           />
         </a>
       </div>
-      <div
-        class="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col
-        md:items-start md:text-left items-center text-center"
-      >
+      <div class="text-right">
         <h1
           class="title-font leading-tight sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
         >
           Export to CSV
         </h1>
         <p class="mb-8 leading-relaxed">
-          Export scan result to CSV to perform further analysis (e.g on PowerBI)
+          Export scan result to CSV to perform further analysis (e.g on PowerBI).
         </p>
       </div>
     </div>
@@ -115,22 +109,19 @@
 
   <section class="text-gray-700 body-font">
     <div
-      class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"
+      class="container grid grid-cols-2 gap-4 mx-auto px-5 py-24 items-center"
     >
-      <div
-        class="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col
-        md:items-start md:text-left items-center text-center"
-      >
+      <div>
         <h1
           class="title-font leading-tight sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
         >
           View Lighthouse Report
         </h1>
         <p class="mb-8 leading-relaxed">
-          View Lighthouse Report without leaving the app
+          View Lighthouse Report without leaving the app.
         </p>
       </div>
-      <div class="md:w-1/2 w-5/6 mb-10 md:mb-0">
+      <div>
         <a href="/images/lighthouse2.png" target="_blank">
           <img
             class="object-cover object-center rounded bordered"
@@ -144,9 +135,9 @@
 
   <section class="text-gray-700 body-font">
     <div
-      class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"
+      class="container grid grid-cols-2 gap-4 mx-auto px-5 py-24 items-center"
     >
-      <div class="md:w-1/2 w-5/6 mb-10 md:mb-0">
+      <div>
         <a href="/images/threshold.png" target="_blank">
           <img
             class="object-cover object-center rounded bordered"
@@ -155,10 +146,7 @@
           />
         </a>
       </div>
-      <div
-        class="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col
-        md:items-start md:text-left items-center text-center"
-      >
+      <div class="text-right">
         <h1
           class="title-font leading-tight sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
         >
@@ -166,7 +154,7 @@
         </h1>
         <p class="mb-8 leading-relaxed">
           If Performance is less than 80 and SEO score is less than 100, fail
-          the build
+          the build.
         </p>
       </div>
     </div>
@@ -174,22 +162,19 @@
 
   <section class="text-gray-700 body-font">
     <div
-      class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"
+      class="container grid grid-cols-2 gap-4 mx-auto px-5 py-24 items-center"
     >
-      <div
-        class="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col
-        md:items-start md:text-left items-center text-center"
-      >
+      <div>
         <h1
           class="title-font leading-tight sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
         >
           Ignore broken Links
         </h1>
         <p class="mb-8 leading-relaxed">
-          Ignored URLs will not cause build to fail
+          Ignored URLs will not cause build to fail.
         </p>
       </div>
-      <div class="md:w-1/2 w-5/6 mb-10 md:mb-0">
+      <div>
         <a href="/images/ignore.png" target="_blank">
           <img
             class="object-cover object-center rounded bordered"
@@ -203,9 +188,9 @@
 
   <section class="text-gray-700 body-font">
     <div
-      class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"
+      class="container grid grid-cols-2 gap-4 mx-auto px-5 py-24 items-center"
     >
-      <div class="md:w-1/2 w-5/6 mb-10 md:mb-0">
+      <div>
         <a href="/images/codeissues.png" target="_blank">
           <img
             class="object-cover object-center rounded bordered"
@@ -214,17 +199,14 @@
           />
         </a>
       </div>
-      <div
-        class="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col
-        md:items-start md:text-left items-center text-center"
-      >
+      <div class="text-right">
         <h1
           class="title-font leading-tight sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
         >
           View Code Errors
         </h1>
         <p class="mb-8 leading-relaxed">
-          View HTML code errors and Code errors without leaving the app
+          View HTML code errors and Code errors without leaving the app.
         </p>
       </div>
     </div>
@@ -232,22 +214,19 @@
 
   <section class="text-gray-700 body-font">
     <div
-      class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center"
+      class="container grid grid-cols-2 gap-4 mx-auto px-5 py-24 items-center"
     >
-      <div
-        class="lg:grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col
-        md:items-start md:text-left items-center text-center"
-      >
+      <div>
         <h1
           class="title-font leading-tight sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
         >
           View Artillery Load Test
         </h1>
         <p class="mb-8 leading-relaxed">
-          View Load Test results ran by Artillery without leaving the app
+          View Load Test results ran by Artillery without leaving the app.
         </p>
       </div>
-      <div class="md:w-1/2 w-5/6 mb-10 md:mb-0">
+      <div>
         <a href="/images/artillery.png" target="_blank">
           <img
             class="object-cover object-center rounded bordered"

From 8235c874ddc708dfd43be08f27b265bd4c7ab9b5 Mon Sep 17 00:00:00 2001
From: tombui99 <tom.quang.bui@gmail.com>
Date: Wed, 15 Nov 2023 12:18:17 +1100
Subject: [PATCH 2/2] Fixed nav bar alligning issues

---
 ui/src/containers/Layout.svelte | 250 ++++++++++++++++----------------
 1 file changed, 124 insertions(+), 126 deletions(-)

diff --git a/ui/src/containers/Layout.svelte b/ui/src/containers/Layout.svelte
index da68b531..68d7c37a 100644
--- a/ui/src/containers/Layout.svelte
+++ b/ui/src/containers/Layout.svelte
@@ -36,136 +36,134 @@
 
 <body class="flex flex-col min-h-screen">
   <main class="grow">
-    <nav class="flex items-center justify-between p-4 lg:h-24 bggrey mb-4">
-      <div class="flex flex-wrap mx-auto">
-        <div class="w-full">
-          <div class="w-full block md:flex md:justify-center md:flex-wrap lg:items-center">
-            <Navigate to="/" styles="sm:w-4/4 md:w-1/7 lg:w-3/12">
-              <img
-                class="logo h-7 object-cover max-h-20"
-                src="/images/logo-dark.png"
-                alt="CodeAuditor"
-              />
-            </Navigate>
-            <div
-              class="flex text-center md:block justify-evenly pt-4 lg:pt-0 lg:mt-2 sm:w-4/4 lg:w-6/12 overflow-hidden"
+    <nav class="items-center justify-between p-4 lg:h-24 bggrey mb-4">
+      <div class="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-1 items-center text-center">
+        <div class="mx-auto">
+          <Navigate to="/">
+            <img
+              class="logo h-7 object-cover max-h-20"
+              src="/images/logo-dark.png"
+              alt="CodeAuditor"
+            />
+          </Navigate>
+        </div>
+        <div
+          class="md:block justify-evenly pt-4 lg:pt-0 overflow-hidden"
+        >
+          <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
+            <span
+              class="header-item {currentRoute.path === '/'
+                ? 'textred'
+                : 'textdark'}"
             >
-              <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
-                <span
-                  class="header-item {currentRoute.path === '/'
-                    ? 'textred'
-                    : 'textdark'}"
-                >
-                  <Navigate to="/" styles="hover:no-underline">Home</Navigate>
-                </span>
-              </span>
-              <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
-                <span
-                  class="header-item {currentRoute.path === '/howitworks'
-                    ? 'textred'
-                    : 'textdark'}"
-                >
-                  <Navigate to="/howItWorks" styles="hover:no-underline">How It Works</Navigate>
-                </span>
-              </span>
-              <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
-                <span
-                  class="header-item {currentRoute.path === '/explore'
-                    ? 'textred'
-                    : 'textdark'}"
-                >
-                  <Navigate to="/explore" styles="hover:no-underline">Explore</Navigate>
-                </span>
-              </span>
-              <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
-                <span
-                  class="header-item {currentRoute.path === '/rules'
-                    ? 'textred'
-                    : 'textdark'}"
+              <Navigate to="/" styles="hover:no-underline">Home</Navigate>
+            </span>
+          </span>
+          <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
+            <span
+              class="header-item {currentRoute.path === '/howitworks'
+                ? 'textred'
+                : 'textdark'}"
+            >
+              <Navigate to="/howItWorks" styles="hover:no-underline">How It Works</Navigate>
+            </span>
+          </span>
+          <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
+            <span
+              class="header-item {currentRoute.path === '/explore'
+                ? 'textred'
+                : 'textdark'}"
+            >
+              <Navigate to="/explore" styles="hover:no-underline">Explore</Navigate>
+            </span>
+          </span>
+          <span class="textdark text-sm uppercase font-bold lg:pt-0 mx-2 sm:mx-4">
+            <span
+              class="header-item {currentRoute.path === '/rules'
+                ? 'textred'
+                : 'textdark'}"
+            >
+              <Navigate to="/rules" styles="hover:no-underline">Rules</Navigate>
+            </span>
+          </span>
+        </div>
+        {#if $isLoggedIn}
+          <div class="lg:mt-1 mx-4 lg:mx-0 mt-4 md:mt-2">
+            <span class="text-white">
+              <div
+                class="relative"
+              >
+                <div
+                  on:mouseenter={() => (menu = true)}
+                  on:mouseleave={() => (menu = false)}
+                  class="inline-block relative text-l px-4 py-2 leading-none border rounded
+                    textdark borderdark header-item hover:bg-white cursor-default"
                 >
-                  <Navigate to="/rules" styles="hover:no-underline">Rules</Navigate>
-                </span>
-              </span>
-            </div>
-            {#if $isLoggedIn}
-              <div class="text-center md:text-right sm:w-4/4 lg:mt-1 lg:w-3/12 mx-4 lg:mx-0 mt-4 md:mt-2">
-                <span class="text-white">
-                  <div
-                    class="relative"
-                  >
-                    <div
-                      on:mouseenter={() => (menu = true)}
-                      on:mouseleave={() => (menu = false)}
-                      class="inline-block relative text-l px-4 py-2 leading-none border rounded
-                        textdark borderdark header-item hover:bg-white cursor-default"
+                  {$userName}
+                  
+                  {#if menu}
+                    <span
+                      in:scale={{ duration: 100, start: 0.95 }}
+                      out:scale={{ duration: 75, start: 0.95 }}
+                      class="text-center w-full md:text-right text-white origin-top-right absolute right-0 py-2 mt-6 rounded shadow-md"
+                      style="background-color: #797979"
                     >
-                      {$userName}
-                      
-                      {#if menu}
-                        <span
-                          in:scale={{ duration: 100, start: 0.95 }}
-                          out:scale={{ duration: 75, start: 0.95 }}
-                          class="text-center w-full md:text-right text-white origin-top-right absolute right-0 w-48 py-2 mt-6 rounded shadow-md"
-                          style="background-color: #797979"
-                        >
-                          <!-- svelte-ignore a11y-click-events-have-key-events -->
-                          <span
-                            class="{scanActive
-                              ? 'bgred'
-                              : '#797979'} block px-4 py-2 cursor-pointer"
-                            on:click={() => navigateTo("/yourScan")}
-                            on:mouseenter={() => (scanActive = true)}
-                            on:mouseleave={() => (scanActive = false)}
-                            >Your Scans</span
-                          >
-                          <!-- svelte-ignore a11y-click-events-have-key-events -->
-                          <span
-                            class="{settingActive
-                              ? 'bgred'
-                              : '#797979'} block px-4 py-2 cursor-pointer"
-                            on:click={() => navigateTo("/settings")}
-                            on:mouseenter={() => (settingActive = true)}
-                            on:mouseleave={() => (settingActive = false)}
-                            >Ignored URLs</span
-                          >
-                          <!-- svelte-ignore a11y-click-events-have-key-events -->
-                          <span
-                            class="{signOutActive
-                              ? 'bgred'
-                              : '#797979'} block px-4 py-2 cursor-pointer"
-                            on:click={signOut}
-                            on:mouseenter={() => (signOutActive = true)}
-                            on:mouseleave={() => (signOutActive = false)}
-                            >Logout</span
-                          >
-                        </span>
-                      {/if}
-                    </div>
-                  </div>
-                </span>
-              </div>
-            {:else}
-              <div class="text-center sm:w-4/4 md:mt-1 lg:w-3/12 mx-4 lg:mx-0 mt-2">
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <button
-                  class="inline-block text-sm px-4 py-2 leading-none border rounded
-                    uppercase borderdark font-bold text-sm header-item
-                    mt-2 lg:mt-0 cursor-pointer"
-                  on:click={() => navigateTo("/login")}>Log In</button
-                >
-                <button
-                  on:click={() => navigateTo("/signup")}
-                  type="button"
-                  class="inline-block text-sm px-4 py-2 leading-none border rounded
-                    text-white borderdark bgdark uppercase font-bold text-sm header-item
-                    hover:bg-white mt-2 lg:mt-0 cursor-pointer"
-                >
-                  Sign Up
-                </button>
+                      <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <span
+                        class="{scanActive
+                          ? 'bgred'
+                          : '#797979'} block px-4 py-2 cursor-pointer"
+                        on:click={() => navigateTo("/yourScan")}
+                        on:mouseenter={() => (scanActive = true)}
+                        on:mouseleave={() => (scanActive = false)}
+                        >Your Scans</span
+                      >
+                      <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <span
+                        class="{settingActive
+                          ? 'bgred'
+                          : '#797979'} block px-4 py-2 cursor-pointer"
+                        on:click={() => navigateTo("/settings")}
+                        on:mouseenter={() => (settingActive = true)}
+                        on:mouseleave={() => (settingActive = false)}
+                        >Ignored URLs</span
+                      >
+                      <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <span
+                        class="{signOutActive
+                          ? 'bgred'
+                          : '#797979'} block px-4 py-2 cursor-pointer"
+                        on:click={signOut}
+                        on:mouseenter={() => (signOutActive = true)}
+                        on:mouseleave={() => (signOutActive = false)}
+                        >Logout</span
+                      >
+                    </span>
+                  {/if}
+                </div>
               </div>
-            {/if}
+            </span>
           </div>
-        </div>
+        {:else}
+          <div class="md:mt-1 mx-4 lg:mx-0 mt-2">
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <button
+              class="inline-block px-4 py-2 leading-none border rounded
+                uppercase borderdark font-bold text-sm header-item
+                mt-2 lg:mt-0 cursor-pointer"
+              on:click={() => navigateTo("/login")}>Log In</button
+            >
+            <button
+              on:click={() => navigateTo("/signup")}
+              type="button"
+              class="inline-block px-4 py-2 leading-none border rounded
+                text-white borderdark bgdark uppercase font-bold text-sm header-item
+                hover:bg-white mt-2 lg:mt-0 cursor-pointer"
+            >
+              Sign Up
+            </button>
+          </div>
+        {/if}
       </div>
     </nav>
     <Route {currentRoute} {params} />
@@ -369,7 +367,7 @@
     max-width: 1280px;
   }
   img {
-    max-width: 100%;
+    max-width: 400px;
     height: auto;
   }
   footer {