From d1961cf062e95da12121f75bc14f5e9b324fbbde Mon Sep 17 00:00:00 2001
From: Julien WITTOUCK <julien.wittouck@gmail.com>
Date: Tue, 23 Jan 2024 19:06:12 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20:=20configure=20primary=20button?=
 =?UTF-8?q?=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/frontend/main.css                    |  17 +
 src/main/frontend/tailwind.config.js          |  20 +-
 .../public/images/gitlab-logo-200.svg         |  57 +++
 .../public/images/gitlab-logo-500.svg         |  58 ++-
 src/main/resources/public/main.css            | 478 +++++-------------
 src/main/resources/templates/login.html       |  50 +-
 6 files changed, 297 insertions(+), 383 deletions(-)
 create mode 100644 src/main/resources/public/images/gitlab-logo-200.svg

diff --git a/src/main/frontend/main.css b/src/main/frontend/main.css
index 75bfb2b..703df8c 100644
--- a/src/main/frontend/main.css
+++ b/src/main/frontend/main.css
@@ -38,3 +38,20 @@
     font-family: "Noto Sans";
     src: url("/fonts/NotoSans-VariableFont_wdth,wght.ttf");
 }
+
+
+@layer components {
+
+    .btn-primary {
+        @apply flex items-center justify-center rounded-lg bg-primary-100;
+        @apply hover:bg-primary-80;
+        @apply active:bg-primary-60;
+        @apply focus:bg-primary-100 focus:outline focus:outline-6 focus:outline-primary-40;
+        padding: 13px 28px;
+        gap: 10px;
+    }
+    .btn-primary img {
+        width: 20px;
+        height: 20px;
+    }
+}
diff --git a/src/main/frontend/tailwind.config.js b/src/main/frontend/tailwind.config.js
index 975adb2..1b0b697 100644
--- a/src/main/frontend/tailwind.config.js
+++ b/src/main/frontend/tailwind.config.js
@@ -2,7 +2,11 @@
 module.exports = {
     content: ["../resources/templates/**/*.{html,js}"], // it will be explained later
     theme: {
-        extend: {},
+        extend: {
+            outlineWidth: {
+                6: '6px'
+            }
+        },
         colors: {
             'primary': {
                 40: "#1B275F",
@@ -51,7 +55,19 @@ module.exports = {
                 "light": "#82E6AC",
                 "light-20": "#22AD5C"
             }
-
+        },
+        spacing: {
+            '1': '4px',
+            '2': '8px',
+            '4': '16px',
+            '6': '24px',
+            '8': '32px',
+            '10': '40px',
+            '12': '48px',
+            '14': '56px',
+            '16': '64px',
+            '18': '72px',
+            '20': '80px',
         }
     },
     plugins: [
diff --git a/src/main/resources/public/images/gitlab-logo-200.svg b/src/main/resources/public/images/gitlab-logo-200.svg
new file mode 100644
index 0000000..27a881b
--- /dev/null
+++ b/src/main/resources/public/images/gitlab-logo-200.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 200 200"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="gitlab-logo-200.svg"
+   width="200"
+   height="200"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.2422728"
+     inkscape:cx="233.46847"
+     inkscape:cy="233.02249"
+     inkscape:window-width="2560"
+     inkscape:window-height="1403"
+     inkscape:window-x="2560"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <defs
+     id="defs1">
+    <style
+       id="style1">.cls-1{fill:#e24329;}.cls-2{fill:#fc6d26;}.cls-3{fill:#fca326;}</style>
+  </defs>
+  <g
+     id="LOGO"
+     transform="matrix(1.0413764,0,0,1.0811663,-97.861519,-105.43238)">
+    <path
+       class="cls-1"
+       d="m 282.83,170.73 -0.27,-0.69 -26.14,-68.22 a 6.81,6.81 0 0 0 -2.69,-3.24 7,7 0 0 0 -8,0.43 7,7 0 0 0 -2.32,3.52 l -17.65,54 h -71.47 l -17.65,-54 a 6.86,6.86 0 0 0 -2.32,-3.53 7,7 0 0 0 -8,-0.43 6.87,6.87 0 0 0 -2.69,3.24 L 97.44,170 l -0.26,0.69 a 48.54,48.54 0 0 0 16.1,56.1 l 0.09,0.07 0.24,0.17 39.82,29.82 19.7,14.91 12,9.06 a 8.07,8.07 0 0 0 9.76,0 l 12,-9.06 19.7,-14.91 40.06,-30 0.1,-0.08 a 48.56,48.56 0 0 0 16.08,-56.04 z"
+       id="path1" />
+    <path
+       class="cls-2"
+       d="m 282.83,170.73 -0.27,-0.69 a 88.3,88.3 0 0 0 -35.15,15.8 L 190,229.25 c 19.55,14.79 36.57,27.64 36.57,27.64 l 40.06,-30 0.1,-0.08 a 48.56,48.56 0 0 0 16.1,-56.08 z"
+       id="path2" />
+    <path
+       class="cls-3"
+       d="m 153.43,256.89 19.7,14.91 12,9.06 a 8.07,8.07 0 0 0 9.76,0 l 12,-9.06 19.7,-14.91 c 0,0 -17.04,-12.89 -36.59,-27.64 -19.55,14.75 -36.57,27.64 -36.57,27.64 z"
+       id="path3" />
+    <path
+       class="cls-2"
+       d="M 132.58,185.84 A 88.19,88.19 0 0 0 97.44,170 l -0.26,0.69 a 48.54,48.54 0 0 0 16.1,56.1 l 0.09,0.07 0.24,0.17 39.82,29.82 c 0,0 17,-12.85 36.57,-27.64 z"
+       id="path4" />
+  </g>
+</svg>
diff --git a/src/main/resources/public/images/gitlab-logo-500.svg b/src/main/resources/public/images/gitlab-logo-500.svg
index 95a22f1..184350a 100644
--- a/src/main/resources/public/images/gitlab-logo-500.svg
+++ b/src/main/resources/public/images/gitlab-logo-500.svg
@@ -1 +1,57 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><defs><style>.cls-1{fill:#e24329;}.cls-2{fill:#fc6d26;}.cls-3{fill:#fca326;}</style></defs><g id="LOGO"><path class="cls-1" d="M282.83,170.73l-.27-.69-26.14-68.22a6.81,6.81,0,0,0-2.69-3.24,7,7,0,0,0-8,.43,7,7,0,0,0-2.32,3.52l-17.65,54H154.29l-17.65-54A6.86,6.86,0,0,0,134.32,99a7,7,0,0,0-8-.43,6.87,6.87,0,0,0-2.69,3.24L97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82,19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91,40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/><path class="cls-2" d="M282.83,170.73l-.27-.69a88.3,88.3,0,0,0-35.15,15.8L190,229.25c19.55,14.79,36.57,27.64,36.57,27.64l40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/><path class="cls-3" d="M153.43,256.89l19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91S209.55,244,190,229.25C170.45,244,153.43,256.89,153.43,256.89Z"/><path class="cls-2" d="M132.58,185.84A88.19,88.19,0,0,0,97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82s17-12.85,36.57-27.64Z"/></g></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 200 200"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="gitlab-logo-500.svg"
+   width="200"
+   height="200"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.2422728"
+     inkscape:cx="233.46847"
+     inkscape:cy="233.02249"
+     inkscape:window-width="2560"
+     inkscape:window-height="1403"
+     inkscape:window-x="2560"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <defs
+     id="defs1">
+    <style
+       id="style1">.cls-1{fill:#e24329;}.cls-2{fill:#fc6d26;}.cls-3{fill:#fca326;}</style>
+  </defs>
+  <g
+     id="LOGO"
+     transform="matrix(1.0413764,0,0,1.0811663,-97.861519,-105.43238)">
+    <path
+       class="cls-1"
+       d="m 282.83,170.73 -0.27,-0.69 -26.14,-68.22 a 6.81,6.81 0 0 0 -2.69,-3.24 7,7 0 0 0 -8,0.43 7,7 0 0 0 -2.32,3.52 l -17.65,54 h -71.47 l -17.65,-54 a 6.86,6.86 0 0 0 -2.32,-3.53 7,7 0 0 0 -8,-0.43 6.87,6.87 0 0 0 -2.69,3.24 L 97.44,170 l -0.26,0.69 a 48.54,48.54 0 0 0 16.1,56.1 l 0.09,0.07 0.24,0.17 39.82,29.82 19.7,14.91 12,9.06 a 8.07,8.07 0 0 0 9.76,0 l 12,-9.06 19.7,-14.91 40.06,-30 0.1,-0.08 a 48.56,48.56 0 0 0 16.08,-56.04 z"
+       id="path1" />
+    <path
+       class="cls-2"
+       d="m 282.83,170.73 -0.27,-0.69 a 88.3,88.3 0 0 0 -35.15,15.8 L 190,229.25 c 19.55,14.79 36.57,27.64 36.57,27.64 l 40.06,-30 0.1,-0.08 a 48.56,48.56 0 0 0 16.1,-56.08 z"
+       id="path2" />
+    <path
+       class="cls-3"
+       d="m 153.43,256.89 19.7,14.91 12,9.06 a 8.07,8.07 0 0 0 9.76,0 l 12,-9.06 19.7,-14.91 c 0,0 -17.04,-12.89 -36.59,-27.64 -19.55,14.75 -36.57,27.64 -36.57,27.64 z"
+       id="path3" />
+    <path
+       class="cls-2"
+       d="M 132.58,185.84 A 88.19,88.19 0 0 0 97.44,170 l -0.26,0.69 a 48.54,48.54 0 0 0 16.1,56.1 l 0.09,0.07 0.24,0.17 39.82,29.82 c 0,0 17,-12.85 36.57,-27.64 z"
+       id="path4" />
+  </g>
+</svg>
diff --git a/src/main/resources/public/main.css b/src/main/resources/public/main.css
index fee8105..2699c37 100644
--- a/src/main/resources/public/main.css
+++ b/src/main/resources/public/main.css
@@ -779,6 +779,43 @@ h6 {
   --tw-backdrop-sepia:  ;
 }
 
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 97 238 / var(--tw-bg-opacity));
+}
+
+.btn-primary:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(54 78 190 / var(--tw-bg-opacity));
+}
+
+.btn-primary:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(40 58 143 / var(--tw-bg-opacity));
+}
+
+.btn-primary:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 97 238 / var(--tw-bg-opacity));
+  outline-style: solid;
+  outline-width: 6px;
+  outline-color: #1B275F;
+}
+
+.btn-primary {
+  padding: 13px 28px;
+  gap: 10px;
+}
+
+.btn-primary img {
+  width: 20px;
+  height: 20px;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -804,28 +841,7 @@ h6 {
 }
 
 .-inset-1 {
-  inset: -0.25rem;
-}
-
-.-inset-1\.5 {
-  inset: -0.375rem;
-}
-
-.inset-0 {
-  inset: 0px;
-}
-
-.inset-y-0 {
-  top: 0px;
-  bottom: 0px;
-}
-
-.left-0 {
-  left: 0px;
-}
-
-.right-0 {
-  right: 0px;
+  inset: -4px;
 }
 
 .z-10 {
@@ -841,18 +857,13 @@ h6 {
 }
 
 .-mx-4 {
-  margin-left: -1rem;
-  margin-right: -1rem;
+  margin-left: -16px;
+  margin-right: -16px;
 }
 
 .-my-2 {
-  margin-top: -0.5rem;
-  margin-bottom: -0.5rem;
-}
-
-.-my-3 {
-  margin-top: -0.75rem;
-  margin-bottom: -0.75rem;
+  margin-top: -8px;
+  margin-bottom: -8px;
 }
 
 .mx-auto {
@@ -860,88 +871,60 @@ h6 {
   margin-right: auto;
 }
 
-.-ml-0 {
-  margin-left: -0px;
-}
-
-.-ml-0\.5 {
-  margin-left: -0.125rem;
-}
-
-.-mt-32 {
-  margin-top: -8rem;
-}
-
 .mb-4 {
-  margin-bottom: 1rem;
+  margin-bottom: 16px;
 }
 
 .mb-6 {
-  margin-bottom: 1.5rem;
+  margin-bottom: 24px;
 }
 
 .ml-1 {
-  margin-left: 0.25rem;
+  margin-left: 4px;
 }
 
 .ml-10 {
-  margin-left: 2.5rem;
+  margin-left: 40px;
 }
 
 .ml-2 {
-  margin-left: 0.5rem;
-}
-
-.ml-3 {
-  margin-left: 0.75rem;
+  margin-left: 8px;
 }
 
 .ml-4 {
-  margin-left: 1rem;
+  margin-left: 16px;
 }
 
 .ml-6 {
-  margin-left: 1.5rem;
+  margin-left: 24px;
 }
 
 .mr-1 {
-  margin-right: 0.25rem;
-}
-
-.mr-1\.5 {
-  margin-right: 0.375rem;
+  margin-right: 4px;
 }
 
 .mt-1 {
-  margin-top: 0.25rem;
+  margin-top: 4px;
 }
 
 .mt-10 {
-  margin-top: 2.5rem;
+  margin-top: 40px;
 }
 
 .mt-12 {
-  margin-top: 3rem;
+  margin-top: 48px;
 }
 
 .mt-2 {
-  margin-top: 0.5rem;
-}
-
-.mt-3 {
-  margin-top: 0.75rem;
-}
-
-.mt-5 {
-  margin-top: 1.25rem;
+  margin-top: 8px;
 }
 
 .mt-6 {
-  margin-top: 1.5rem;
+  margin-top: 24px;
 }
 
 .mt-8 {
-  margin-top: 2rem;
+  margin-top: 32px;
 }
 
 .block {
@@ -977,35 +960,27 @@ h6 {
 }
 
 .h-10 {
-  height: 2.5rem;
-}
-
-.h-11 {
-  height: 2.75rem;
+  height: 40px;
 }
 
 .h-12 {
-  height: 3rem;
+  height: 48px;
 }
 
 .h-16 {
-  height: 4rem;
+  height: 64px;
 }
 
 .h-4 {
-  height: 1rem;
-}
-
-.h-5 {
-  height: 1.25rem;
+  height: 16px;
 }
 
 .h-6 {
-  height: 1.5rem;
+  height: 24px;
 }
 
 .h-8 {
-  height: 2rem;
+  height: 32px;
 }
 
 .h-full {
@@ -1016,54 +991,34 @@ h6 {
   min-height: 100%;
 }
 
-.w-0 {
-  width: 0px;
-}
-
 .w-10 {
-  width: 2.5rem;
-}
-
-.w-11 {
-  width: 2.75rem;
+  width: 40px;
 }
 
 .w-12 {
-  width: 3rem;
+  width: 48px;
 }
 
-.w-16 {
-  width: 4rem;
+.w-20 {
+  width: 80px;
 }
 
 .w-4 {
-  width: 1rem;
-}
-
-.w-48 {
-  width: 12rem;
-}
-
-.w-5 {
-  width: 1.25rem;
+  width: 16px;
 }
 
 .w-6 {
-  width: 1.5rem;
+  width: 24px;
 }
 
 .w-8 {
-  width: 2rem;
+  width: 32px;
 }
 
 .w-full {
   width: 100%;
 }
 
-.min-w-0 {
-  min-width: 0px;
-}
-
 .min-w-full {
   min-width: 100%;
 }
@@ -1080,10 +1035,6 @@ h6 {
   max-width: 80rem;
 }
 
-.max-w-sm {
-  max-width: 24rem;
-}
-
 .max-w-xl {
   max-width: 36rem;
 }
@@ -1152,84 +1103,61 @@ h6 {
   justify-content: space-between;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
-.gap-3 {
-  gap: 0.75rem;
-}
-
-.gap-5 {
-  gap: 1.25rem;
-}
-
 .gap-6 {
-  gap: 1.5rem;
-}
-
-.gap-x-3 {
-  -moz-column-gap: 0.75rem;
-       column-gap: 0.75rem;
+  gap: 24px;
 }
 
 .gap-x-4 {
-  -moz-column-gap: 1rem;
-       column-gap: 1rem;
+  -moz-column-gap: 16px;
+       column-gap: 16px;
 }
 
 .gap-x-6 {
-  -moz-column-gap: 1.5rem;
-       column-gap: 1.5rem;
+  -moz-column-gap: 24px;
+       column-gap: 24px;
 }
 
 .gap-x-8 {
-  -moz-column-gap: 2rem;
-       column-gap: 2rem;
+  -moz-column-gap: 32px;
+       column-gap: 32px;
 }
 
 .gap-y-10 {
-  row-gap: 2.5rem;
+  row-gap: 40px;
 }
 
 .gap-y-8 {
-  row-gap: 2rem;
-}
-
-.space-x-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+  row-gap: 32px;
 }
 
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-right: calc(16px * var(--tw-space-x-reverse));
+  margin-left: calc(16px * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-right: calc(24px * var(--tw-space-x-reverse));
+  margin-left: calc(24px * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+  margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(4px * var(--tw-space-y-reverse));
 }
 
 .space-y-12 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
+  margin-top: calc(48px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(48px * var(--tw-space-y-reverse));
 }
 
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+  margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(24px * var(--tw-space-y-reverse));
 }
 
 .divide-y > :not([hidden]) ~ :not([hidden]) {
@@ -1306,11 +1234,6 @@ h6 {
   background-color: rgb(18 27 38 / var(--tw-bg-opacity));
 }
 
-.bg-primary-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(67 97 238 / var(--tw-bg-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1322,169 +1245,93 @@ h6 {
 }
 
 .p-1 {
-  padding: 0.25rem;
+  padding: 4px;
 }
 
 .p-4 {
-  padding: 1rem;
+  padding: 16px;
 }
 
 .p-6 {
-  padding: 1.5rem;
+  padding: 24px;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.px-12 {
+  padding-left: 48px;
+  padding-right: 48px;
 }
 
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
-.px-3\.5 {
-  padding-left: 0.875rem;
-  padding-right: 0.875rem;
+.px-2 {
+  padding-left: 8px;
+  padding-right: 8px;
 }
 
 .px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
 .px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+  padding-left: 24px;
+  padding-right: 24px;
 }
 
 .py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
-.py-1\.5 {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
+  padding-top: 4px;
+  padding-bottom: 4px;
 }
 
 .py-10 {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
+  padding-top: 40px;
+  padding-bottom: 40px;
 }
 
 .py-12 {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
+  padding-top: 48px;
+  padding-bottom: 48px;
 }
 
 .py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.py-2\.5 {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-}
-
-.py-24 {
-  padding-top: 6rem;
-  padding-bottom: 6rem;
-}
-
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
-.py-3\.5 {
-  padding-top: 0.875rem;
-  padding-bottom: 0.875rem;
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 .py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.py-5 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
+  padding-top: 16px;
+  padding-bottom: 16px;
 }
 
 .py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
+  padding-top: 24px;
+  padding-bottom: 24px;
 }
 
 .pb-12 {
-  padding-bottom: 3rem;
-}
-
-.pb-32 {
-  padding-bottom: 8rem;
-}
-
-.pb-4 {
-  padding-bottom: 1rem;
-}
-
-.pb-5 {
-  padding-bottom: 1.25rem;
+  padding-bottom: 48px;
 }
 
 .pb-6 {
-  padding-bottom: 1.5rem;
+  padding-bottom: 24px;
 }
 
 .pl-10 {
-  padding-left: 2.5rem;
-}
-
-.pl-3 {
-  padding-left: 0.75rem;
+  padding-left: 40px;
 }
 
 .pl-4 {
-  padding-left: 1rem;
-}
-
-.pl-8 {
-  padding-left: 2rem;
+  padding-left: 16px;
 }
 
 .pr-10 {
-  padding-right: 2.5rem;
+  padding-right: 40px;
 }
 
 .pr-12 {
-  padding-right: 3rem;
-}
-
-.pr-3 {
-  padding-right: 0.75rem;
-}
-
-.pr-8 {
-  padding-right: 2rem;
+  padding-right: 48px;
 }
 
 .pt-12 {
-  padding-top: 3rem;
-}
-
-.pt-4 {
-  padding-top: 1rem;
-}
-
-.pt-5 {
-  padding-top: 1.25rem;
+  padding-top: 48px;
 }
 
 .text-left {
@@ -1681,20 +1528,12 @@ h6 {
   }
 
   .sm\:-mx-6 {
-    margin-left: -1.5rem;
-    margin-right: -1.5rem;
-  }
-
-  .sm\:ml-3 {
-    margin-left: 0.75rem;
+    margin-left: -24px;
+    margin-right: -24px;
   }
 
   .sm\:ml-4 {
-    margin-left: 1rem;
-  }
-
-  .sm\:mt-0 {
-    margin-top: 0px;
+    margin-left: 16px;
   }
 
   .sm\:block {
@@ -1743,8 +1582,8 @@ h6 {
 
   .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
-    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+    margin-right: calc(24px * var(--tw-space-x-reverse));
+    margin-left: calc(24px * calc(1 - var(--tw-space-x-reverse)));
   }
 
   .sm\:truncate {
@@ -1754,31 +1593,12 @@ h6 {
   }
 
   .sm\:p-6 {
-    padding: 1.5rem;
-  }
-
-  .sm\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  .sm\:px-3 {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
+    padding: 24px;
   }
 
   .sm\:px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
-  .sm\:py-32 {
-    padding-top: 8rem;
-    padding-bottom: 8rem;
-  }
-
-  .sm\:pl-0 {
-    padding-left: 0px;
+    padding-left: 24px;
+    padding-right: 24px;
   }
 
   .sm\:text-3xl {
@@ -1811,7 +1631,7 @@ h6 {
   }
 
   .md\:ml-6 {
-    margin-left: 1.5rem;
+    margin-left: 24px;
   }
 
   .md\:block {
@@ -1833,34 +1653,18 @@ h6 {
 
 @media (min-width: 1024px) {
   .lg\:-mx-8 {
-    margin-left: -2rem;
-    margin-right: -2rem;
+    margin-left: -32px;
+    margin-right: -32px;
   }
 
   .lg\:ml-4 {
-    margin-left: 1rem;
-  }
-
-  .lg\:mt-0 {
-    margin-top: 0px;
-  }
-
-  .lg\:block {
-    display: block;
+    margin-left: 16px;
   }
 
   .lg\:flex {
     display: flex;
   }
 
-  .lg\:w-96 {
-    width: 24rem;
-  }
-
-  .lg\:flex-none {
-    flex: none;
-  }
-
   .lg\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -1873,25 +1677,15 @@ h6 {
     justify-content: space-between;
   }
 
-  .lg\:px-20 {
-    padding-left: 5rem;
-    padding-right: 5rem;
-  }
-
   .lg\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
+    padding-left: 32px;
+    padding-right: 32px;
   }
 }
 
 @media (min-width: 1280px) {
   .xl\:gap-x-8 {
-    -moz-column-gap: 2rem;
-         column-gap: 2rem;
-  }
-
-  .xl\:px-24 {
-    padding-left: 6rem;
-    padding-right: 6rem;
+    -moz-column-gap: 32px;
+         column-gap: 32px;
   }
 }
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index d85cc6c..4a5b535 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -11,47 +11,21 @@
 <body class="h-full">
 
 <div class="flex min-h-full bg-dark-1">
-    <div class="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
-        <div class="mx-auto w-full max-w-sm lg:w-96">
-            <div>
-                <h3 class="text-white bold">
-                    <svg class="h-16 w-16" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"
-                                                 aria-hidden="true" role="img"
-                                                 preserveAspectRatio="xMidYMid meet" fill="#000000">
-                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-                    <g id="SVGRepo_iconCarrier">
-                        <path fill="#6366f1"
-                              d="M13.431 9.802c.658 2.638-8.673 10.489-11.244 4.098C.696 10.197-.606 2.434.874 2.065c1.48-.368 11.9 5.098 12.557 7.737z"></path>
-                        <path fill="#1E23DC"
-                              d="M11.437 10.355c.96 1.538-1.831 4.561-3.368 5.522c-1.538.961-2.899-.552-4.414-4.414c-.662-1.689-1.666-6.27-1.103-6.622c.562-.351 7.924 3.976 8.885 5.514z"></path>
-                        <path fill="#6366f1"
-                              d="M22.557 9.802C21.9 12.441 31.23 20.291 33.802 13.9c1.49-3.703 2.792-11.466 1.312-11.835c-1.48-.368-11.899 5.098-12.557 7.737z"></path>
-                        <path fill="#1E23DC"
-                              d="M24.552 10.355c-.96 1.538 1.831 4.561 3.368 5.522c1.537.961 2.898-.552 4.413-4.414c.662-1.688 1.666-6.269 1.104-6.621c-.563-.352-7.924 3.975-8.885 5.513z"></path>
-                        <path fill="#6366f1"
-                              d="M32.347 26.912c0-.454-.188-1.091-.407-1.687c.585.028 1.519.191 2.77.817a4.003 4.003 0 0 0-.273-1.393c.041.02.075.034.116.055c-1.103-3.31-3.309-5.517-3.309-5.517h2.206c-2.331-4.663-4.965-8.015-8.075-9.559c-1.39-.873-3.688-1.338-7.373-1.339h-.003c-3.695 0-5.996.468-7.385 1.346c-3.104 1.547-5.734 4.896-8.061 9.552H4.76s-2.207 2.206-3.311 5.517c.03-.015.055-.025.084-.04a2.685 2.685 0 0 0-.282 1.377c1.263-.632 2.217-.792 2.813-.818c-.189.513-.343 1.044-.386 1.475a3.146 3.146 0 0 0-.135 1.343C6.75 26.584 8.25 26.792 10 27.667C11.213 31.29 14.206 34 18.001 34c3.793 0 6.746-2.794 7.958-6.416c1.458-1.25 3.708-.875 6.416.416a2.843 2.843 0 0 0-.036-1.093l.008.005z"></path>
-                        <path fill="#B5B7FB"
-                              d="M31.243 23.601c.006 0 1.108.003 3.309 1.103c-1.249-2.839-7.525-4.07-9.931-3.291c-1.171 1.954-1.281 5.003-3.383 6.622c-1.741 1.431-4.713 1.458-6.479 0c-2.345-1.924-2.559-5.813-3.382-6.622c-2.407-.781-8.681.454-9.931 3.291c2.201-1.101 3.304-1.103 3.309-1.103c0 .001-1.103 2.208-1.103 3.311l.001-.001v.001c2.398-1.573 5.116-2.271 7.429-.452c1.666 7.921 12.293 7.545 13.833 0c2.314-1.818 5.03-1.122 7.429.452v-.001l.001.001c.002-1.103-1.101-3.311-1.102-3.311z"></path>
-                        <path fill="#272B2B"
-                              d="M11 17s0-1.5 1.5-1.5S14 17 14 17v1.5s0 1.5-1.5 1.5s-1.5-1.5-1.5-1.5V17zm11 0s0-1.5 1.5-1.5S25 17 25 17v1.5s0 1.5-1.5 1.5s-1.5-1.5-1.5-1.5V17zm-7.061 10.808c-1.021.208 2.041 3.968 3.062 3.968c1.02 0 4.082-3.76 3.062-3.968c-1.021-.208-5.103-.208-6.124 0z"></path>
-                    </g>
-                </svg>
-                    GitLab Classrooms
-                </h3>
-                <h4 class="mt-8 text-white">Sign in to your account</h4>
-            </div>
+    <div class="flex flex-col justify-center px-12 py-12">
+        <h3 class="text-white bold">
+            <img src="/images/fox-svgrepo-com.svg" class="w-20 mb-4"/>
+            GitLab Classrooms
+        </h3>
+        <h4 class="mt-8 text-white">Sign in to your account</h4>
 
-            <div class="mt-10">
-                <a th:href="@{/oauth2/authorization/gitlab}"
-                   class="flex items-center justify-center rounded-lg gap-2 bg-primary-100 pt-4 pb-4 pl-8 pr-8">
-                    <img width="20" src="/images/gitlab-logo-500.svg"/>
-                    <span class="text-white text-base font-medium">Login with GitLab</span>
-                </a>
-            </div>
+        <div class="flex">
+            <a th:href="@{/oauth2/authorization/gitlab}" class="btn-primary mt-10">
+                <img src="/images/gitlab-logo-200.svg"/>
+                <span class="text-white text-base font-medium">Login with GitLab</span>
+            </a>
         </div>
     </div>
-    <div class="relative hidden w-0 flex-1 lg:block">
+    <div class="relative flex-1">
         <img class="absolute inset-0 h-full w-full object-cover"
              src="/images/desola-lanre-ologun-IgUR1iX0mqM-unsplash.jpg"
              alt="">
-- 
2.54.0