From 9e16e30ad0cee16f8a4a7c168ac9277dce3c1bdc Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Mon, 14 Oct 2024 13:42:40 +0200 Subject: [PATCH 01/18] Add start screen, replace logo with text and img cleanup (#306) --- src/AliasVault.Admin/wwwroot/css/tailwind.css | 190 +++----- .../Auth/Components/Logo.razor | 9 +- .../Auth/Layout/EmptyLayout.razor | 6 + .../Auth/Layout/MainLayout.razor | 4 +- .../Auth/Layout/MainLayout.razor.css | 77 ---- src/AliasVault.Client/Auth/Pages/Start.razor | 61 +++ src/AliasVault.Client/Auth/Pages/Unlock.razor | 2 +- .../Main/Components/RedirectToLogin.razor | 2 +- .../Main/Layout/Footer.razor | 25 +- .../Main/Layout/MainLayout.razor | 6 +- .../Main/Layout/TopMenu.razor | 2 +- .../wwwroot/css/tailwind.css | 429 ++++++++++++------ .../wwwroot/horizontal-logo-cropped.png | Bin 25809 -> 0 bytes .../icon-nopadding.png} | Bin 14 files changed, 449 insertions(+), 364 deletions(-) create mode 100644 src/AliasVault.Client/Auth/Layout/EmptyLayout.razor delete mode 100644 src/AliasVault.Client/Auth/Layout/MainLayout.razor.css create mode 100644 src/AliasVault.Client/Auth/Pages/Start.razor delete mode 100644 src/AliasVault.Client/wwwroot/horizontal-logo-cropped.png rename src/AliasVault.Client/wwwroot/{icon-trimmed.png => img/icon-nopadding.png} (100%) diff --git a/src/AliasVault.Admin/wwwroot/css/tailwind.css b/src/AliasVault.Admin/wwwroot/css/tailwind.css index 393441ff7..5e5c988d6 100644 --- a/src/AliasVault.Admin/wwwroot/css/tailwind.css +++ b/src/AliasVault.Admin/wwwroot/css/tailwind.css @@ -687,6 +687,10 @@ video { margin-bottom: 2rem; } +.ml-1 { + margin-left: 0.25rem; +} + .ml-2 { margin-left: 0.5rem; } @@ -719,6 +723,10 @@ video { margin-right: 1rem; } +.ms-1 { + margin-inline-start: 0.25rem; +} + .mt-0 { margin-top: 0px; } @@ -747,14 +755,6 @@ video { margin-top: 2rem; } -.ms-1 { - margin-inline-start: 0.25rem; -} - -.ml-1 { - margin-left: 0.25rem; -} - .line-clamp-1 { overflow: hidden; display: -webkit-box; @@ -798,6 +798,10 @@ video { height: 2.5rem; } +.h-3 { + height: 0.75rem; +} + .h-4 { height: 1rem; } @@ -826,10 +830,6 @@ video { height: 100%; } -.h-3 { - height: 0.75rem; -} - .w-1\/2 { width: 50%; } @@ -846,6 +846,10 @@ video { width: 66.666667%; } +.w-3 { + width: 0.75rem; +} + .w-4 { width: 1rem; } @@ -882,10 +886,6 @@ video { width: 100%; } -.w-3 { - width: 0.75rem; -} - .max-w-2xl { max-width: 42rem; } @@ -1038,12 +1038,6 @@ video { margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } -.space-y-3 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); -} - .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); @@ -1130,11 +1124,6 @@ video { border-top-width: 1px; } -.border-amber-200 { - --tw-border-opacity: 1; - border-color: rgb(253 230 138 / var(--tw-border-opacity)); -} - .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); @@ -1160,26 +1149,21 @@ video { border-color: rgb(239 68 68 / var(--tw-border-opacity)); } -.border-sky-200 { - --tw-border-opacity: 1; - border-color: rgb(186 230 253 / var(--tw-border-opacity)); -} - .border-yellow-500 { --tw-border-opacity: 1; border-color: rgb(234 179 8 / var(--tw-border-opacity)); } -.bg-amber-50 { - --tw-bg-opacity: 1; - background-color: rgb(255 251 235 / var(--tw-bg-opacity)); -} - .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity)); } +.bg-blue-50 { + --tw-bg-opacity: 1; + background-color: rgb(239 246 255 / var(--tw-bg-opacity)); +} + .bg-blue-500 { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); @@ -1310,11 +1294,6 @@ video { background-color: rgb(185 28 28 / var(--tw-bg-opacity)); } -.bg-sky-50 { - --tw-bg-opacity: 1; - background-color: rgb(240 249 255 / var(--tw-bg-opacity)); -} - .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1325,21 +1304,16 @@ video { background-color: rgb(254 249 195 / var(--tw-bg-opacity)); } -.bg-yellow-500 { - --tw-bg-opacity: 1; - background-color: rgb(234 179 8 / var(--tw-bg-opacity)); -} - -.bg-blue-50 { - --tw-bg-opacity: 1; - background-color: rgb(239 246 255 / var(--tw-bg-opacity)); -} - .bg-yellow-50 { --tw-bg-opacity: 1; background-color: rgb(254 252 232 / var(--tw-bg-opacity)); } +.bg-yellow-500 { + --tw-bg-opacity: 1; + background-color: rgb(234 179 8 / var(--tw-bg-opacity)); +} + .bg-opacity-50 { --tw-bg-opacity: 0.5; } @@ -1547,11 +1521,6 @@ video { line-height: 2.25rem; } -.text-amber-700 { - --tw-text-opacity: 1; - color: rgb(180 83 9 / var(--tw-text-opacity)); -} - .text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity)); @@ -1627,11 +1596,6 @@ video { color: rgb(153 27 27 / var(--tw-text-opacity)); } -.text-sky-700 { - --tw-text-opacity: 1; - color: rgb(3 105 161 / var(--tw-text-opacity)); -} - .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1855,10 +1819,6 @@ video { --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity)); } -.focus\:ring-offset-2:focus { - --tw-ring-offset-width: 2px; -} - .dark\:divide-gray-600:is(.dark *) > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(75 85 99 / var(--tw-divide-opacity)); @@ -1873,9 +1833,9 @@ video { border-width: 1px; } -.dark\:border-amber-800:is(.dark *) { +.dark\:border-blue-500:is(.dark *) { --tw-border-opacity: 1; - border-color: rgb(146 64 14 / var(--tw-border-opacity)); + border-color: rgb(59 130 246 / var(--tw-border-opacity)); } .dark\:border-gray-500:is(.dark *) { @@ -1893,14 +1853,9 @@ video { border-color: rgb(55 65 81 / var(--tw-border-opacity)); } -.dark\:border-sky-800:is(.dark *) { +.dark\:border-green-500:is(.dark *) { --tw-border-opacity: 1; - border-color: rgb(7 89 133 / var(--tw-border-opacity)); -} - -.dark\:border-blue-500:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); + border-color: rgb(34 197 94 / var(--tw-border-opacity)); } .dark\:border-red-500:is(.dark *) { @@ -1908,16 +1863,21 @@ video { border-color: rgb(239 68 68 / var(--tw-border-opacity)); } -.dark\:border-green-500:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(34 197 94 / var(--tw-border-opacity)); -} - .dark\:border-yellow-500:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(234 179 8 / var(--tw-border-opacity)); } +.dark\:bg-blue-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 64 175 / var(--tw-bg-opacity)); +} + +.dark\:bg-blue-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 58 138 / var(--tw-bg-opacity)); +} + .dark\:bg-gray-600:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(75 85 99 / var(--tw-bg-opacity)); @@ -1943,9 +1903,14 @@ video { background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } -.dark\:bg-primary-500:is(.dark *) { +.dark\:bg-green-800:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(244 149 65 / var(--tw-bg-opacity)); + background-color: rgb(22 101 52 / var(--tw-bg-opacity)); +} + +.dark\:bg-green-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(20 83 45 / var(--tw-bg-opacity)); } .dark\:bg-primary-600:is(.dark *) { @@ -1958,34 +1923,14 @@ video { background-color: rgb(220 38 38 / var(--tw-bg-opacity)); } -.dark\:bg-red-900:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(127 29 29 / var(--tw-bg-opacity)); -} - -.dark\:bg-slate-800:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity)); -} - -.dark\:bg-yellow-900:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(113 63 18 / var(--tw-bg-opacity)); -} - -.dark\:bg-blue-800:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(30 64 175 / var(--tw-bg-opacity)); -} - .dark\:bg-red-800:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(153 27 27 / var(--tw-bg-opacity)); } -.dark\:bg-green-800:is(.dark *) { +.dark\:bg-red-900:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(22 101 52 / var(--tw-bg-opacity)); + background-color: rgb(127 29 29 / var(--tw-bg-opacity)); } .dark\:bg-yellow-800:is(.dark *) { @@ -1993,23 +1938,18 @@ video { background-color: rgb(133 77 14 / var(--tw-bg-opacity)); } -.dark\:bg-blue-900:is(.dark *) { +.dark\:bg-yellow-900:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(30 58 138 / var(--tw-bg-opacity)); -} - -.dark\:bg-green-900:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(20 83 45 / var(--tw-bg-opacity)); + background-color: rgb(113 63 18 / var(--tw-bg-opacity)); } .dark\:bg-opacity-80:is(.dark *) { --tw-bg-opacity: 0.8; } -.dark\:text-amber-300:is(.dark *) { +.dark\:text-blue-300:is(.dark *) { --tw-text-opacity: 1; - color: rgb(252 211 77 / var(--tw-text-opacity)); + color: rgb(147 197 253 / var(--tw-text-opacity)); } .dark\:text-blue-400:is(.dark *) { @@ -2042,9 +1982,9 @@ video { color: rgb(75 85 99 / var(--tw-text-opacity)); } -.dark\:text-green-400:is(.dark *) { +.dark\:text-green-300:is(.dark *) { --tw-text-opacity: 1; - color: rgb(74 222 128 / var(--tw-text-opacity)); + color: rgb(134 239 172 / var(--tw-text-opacity)); } .dark\:text-primary-200:is(.dark *) { @@ -2072,11 +2012,6 @@ video { color: rgb(248 113 113 / var(--tw-text-opacity)); } -.dark\:text-sky-300:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(125 211 252 / var(--tw-text-opacity)); -} - .dark\:text-white:is(.dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -2092,16 +2027,6 @@ video { color: rgb(254 240 138 / var(--tw-text-opacity)); } -.dark\:text-blue-300:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(147 197 253 / var(--tw-text-opacity)); -} - -.dark\:text-green-300:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(134 239 172 / 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)); @@ -2131,11 +2056,6 @@ video { background-color: rgb(21 128 61 / var(--tw-bg-opacity)); } -.dark\:hover\:bg-primary-600:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(214 131 56 / var(--tw-bg-opacity)); -} - .dark\:hover\:bg-primary-700:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(184 112 47 / var(--tw-bg-opacity)); diff --git a/src/AliasVault.Client/Auth/Components/Logo.razor b/src/AliasVault.Client/Auth/Components/Logo.razor index 464e819ed..215602447 100644 --- a/src/AliasVault.Client/Auth/Components/Logo.razor +++ b/src/AliasVault.Client/Auth/Components/Logo.razor @@ -1,3 +1,8 @@ - - AliasVault + +
+ AliasVault + AliasVault +
+ + diff --git a/src/AliasVault.Client/Auth/Layout/EmptyLayout.razor b/src/AliasVault.Client/Auth/Layout/EmptyLayout.razor new file mode 100644 index 000000000..4e097dca3 --- /dev/null +++ b/src/AliasVault.Client/Auth/Layout/EmptyLayout.razor @@ -0,0 +1,6 @@ +@inherits LayoutComponentBase + + +@Body + +