From ec0ee1ccb4b2d1df6c8dbce7be1ee265abf91c57 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Sat, 23 Sep 2023 15:30:04 +0200
Subject: [PATCH 1/7] feat: add sidebar shadow

---
 src/app/globals.css                | 10 +++++++++-
 src/components/sidebar/Sidebar.tsx |  6 +++++-
 tailwind.config.js                 |  2 ++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 273d332d..15a252ac 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -20,4 +20,12 @@
 
 ::-webkit-scrollbar-thumb:hover {
     background: #C0C0C0;
-}
\ No newline at end of file
+}
+
+.sidebar-shadow-light {
+    box-shadow: 8px 0 10px -5px var(--neutral-focus);
+  }
+  
+.sidebar-shadow-dark {
+    box-shadow: 8px 0 10px -5px var(--neutral-focus);
+  }
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 393e3a66..c375490b 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -8,6 +8,7 @@ import {
   BookmarkSquareIcon,
   RocketLaunchIcon,
 } from "@heroicons/react/24/solid";
+import { useTheme } from "next-themes";
 import PageButton from "./PageButton";
 import VoyagePageButton from "./VoyagePageButton";
 import VoyageStatus from "./VoyageStatus";
@@ -106,6 +107,7 @@ const voyageData = {
 
 export default function Sidebar() {
   const currentPath = usePathname();
+  const { theme } = useTheme();
 
   const [isOpenSidebar, setIsOpenSidebar] = useState<boolean>(true);
   const [selectedButton, setSelectedButton] = useState<string>(currentPath);
@@ -123,11 +125,13 @@ export default function Sidebar() {
     }
   };
 
+  const isDark = theme === "dark";
+
   return (
     <aside
       className={`sticky top-16 h-[calc(100vh-theme(spacing.16))] ${
         isOpenSidebar ? "w-[18.4375rem]" : "w-[5.8125rem]"
-      } text-center bg-base-200 flex flex-col justify-between`}
+      } text-center bg-base-200 flex flex-col justify-between ${isDark ? "sidebar-shadow-dark" : "sidebar-shadow-light"}`}
     >
       <ul
         className={`flex flex-col ${
diff --git a/tailwind.config.js b/tailwind.config.js
index 4ccdc19e..ea2eb855 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -33,6 +33,7 @@ module.exports = {
           "base-200": "#F5F5F5",
           "base-300": "#16171A",
           "base-content": "#EEEFF0",
+          "--neutral-focus": "#4C515B",
         },
       },
       {
@@ -61,6 +62,7 @@ module.exports = {
           "base-200": "#16171A",
           "base-300": "#F5F5F5",
           "base-content": "#2D3036",
+          "--neutral-focus": "#A0A5AE",
         },
       },
     ],

From e43a778bc32449d27a037fad0084a57241f937ad Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Sat, 23 Sep 2023 15:39:32 +0200
Subject: [PATCH 2/7] feat: fix prettier errors

---
 src/components/sidebar/Sidebar.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index c375490b..9f468a25 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -131,7 +131,9 @@ export default function Sidebar() {
     <aside
       className={`sticky top-16 h-[calc(100vh-theme(spacing.16))] ${
         isOpenSidebar ? "w-[18.4375rem]" : "w-[5.8125rem]"
-      } text-center bg-base-200 flex flex-col justify-between ${isDark ? "sidebar-shadow-dark" : "sidebar-shadow-light"}`}
+      } text-center bg-base-200 flex flex-col justify-between ${
+        isDark ? "sidebar-shadow-dark" : "sidebar-shadow-light"
+      }`}
     >
       <ul
         className={`flex flex-col ${

From 45c701d00cbb5f317ee06ae1f266feb79dee0e86 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Sat, 23 Sep 2023 15:50:33 +0200
Subject: [PATCH 3/7] feat: use constants to define the colors

---
 tailwind.config.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index ea2eb855..7d43dd1d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,8 @@
 /** @type {import('tailwindcss').Config} */
+
+const NEUTRAL_FOCUS_LIGHT = "#4C515B";
+const NEUTRAL_FOCUS_DARK = "#A0A5AE";
+
 module.exports = {
   content: [
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
@@ -19,7 +23,7 @@ module.exports = {
           "accent-focus": "#98DDBD",
           "accent-content": "#D7EDE3",
           neutral: "#6B7280",
-          "neutral-focus": "#4C515B",
+          "neutral-focus": NEUTRAL_FOCUS_LIGHT,
           "neutral-content": "#9CA1AA",
           info: "#8FC4E5",
           "info-content": "#DCEDF7",
@@ -33,7 +37,7 @@ module.exports = {
           "base-200": "#F5F5F5",
           "base-300": "#16171A",
           "base-content": "#EEEFF0",
-          "--neutral-focus": "#4C515B",
+          "--neutral-focus": NEUTRAL_FOCUS_LIGHT,
         },
       },
       {
@@ -48,7 +52,7 @@ module.exports = {
           "accent-focus": "#6EE7B7",
           "accent-content": "#6B9984",
           neutral: "#6B7280",
-          "neutral-focus": "#A0A5AE",
+          "neutral-focus": NEUTRAL_FOCUS_DARK,
           "neutral-content": "#3B3F46",
           info: "#84B5D4",
           "info-content": "#668BA3",
@@ -62,7 +66,7 @@ module.exports = {
           "base-200": "#16171A",
           "base-300": "#F5F5F5",
           "base-content": "#2D3036",
-          "--neutral-focus": "#A0A5AE",
+          "--neutral-focus": NEUTRAL_FOCUS_DARK,
         },
       },
     ],

From ddf21b234a0357b173e4813dfb4e8f75b436ae70 Mon Sep 17 00:00:00 2001
From: Jane Moroz <Moroz.jane@yahoo.com>
Date: Tue, 26 Sep 2023 14:37:02 +0300
Subject: [PATCH 4/7] fix: banner image fix

---
 src/components/Banner.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 24664289..20511a51 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -9,9 +9,17 @@ interface BannerProps {
 
 function Banner({ image, alt, title, description }: BannerProps) {
   return (
-    <div className="card w-full max-h-[320px] bg-accent-content flex flex-row px-20 py-10 box-border">
-      <Image src={image} alt={alt} width={454} height={200} priority={false} />
-      <div className="flex flex-col justify-center pl-24 gap-y-3.5">
+    <div className="card w-full max-h-[320px] bg-accent-content flex flex-row justify-between px-20 py-10 box-border gap-x-10 lg:gap-x-20">
+      <div className="h-[200px] w-[276px] relative shrink-0">
+        <Image
+          src={image}
+          alt={alt}
+          fill={true}
+          objectFit="contain"
+          priority={false}
+        />
+      </div>
+      <div className="flex flex-col max-w-[700px] 2xl:max-w-none justify-center gap-y-3.5">
         <h3 className="text-3xl font-bold text-black">{title}</h3>
         <p className="text-lg font-medium text-black">{description}</p>
       </div>

From 8a41b295ba37abe83745036748dfd0cd66a21a4c Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Tue, 26 Sep 2023 19:19:32 +0200
Subject: [PATCH 5/7] feat: fix shadow

---
 src/app/globals.css                | 10 +---------
 src/components/sidebar/Sidebar.tsx |  8 +-------
 tailwind.config.js                 |  9 ++-------
 3 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 15a252ac..273d332d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -20,12 +20,4 @@
 
 ::-webkit-scrollbar-thumb:hover {
     background: #C0C0C0;
-}
-
-.sidebar-shadow-light {
-    box-shadow: 8px 0 10px -5px var(--neutral-focus);
-  }
-  
-.sidebar-shadow-dark {
-    box-shadow: 8px 0 10px -5px var(--neutral-focus);
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 4ff18f59..647fdd4e 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -9,7 +9,6 @@ import {
   BookmarkSquareIcon,
   RocketLaunchIcon,
 } from "@heroicons/react/24/solid";
-import { useTheme } from "next-themes";
 import PageButton from "./PageButton";
 import VoyagePageButton from "./VoyagePageButton";
 import ExpandButton from "./ExpandButton";
@@ -102,7 +101,6 @@ const isVoyageStarted: boolean = true;
 
 export default function Sidebar() {
   const currentPath = usePathname();
-  const { theme } = useTheme();
 
   const [isOpenSidebar, setIsOpenSidebar] = useState<boolean>(true);
   const [selectedButton, setSelectedButton] = useState<string>(currentPath);
@@ -120,15 +118,11 @@ export default function Sidebar() {
     }
   };
 
-  const isDark = theme === "dark";
-
   return (
     <aside
       className={`overflow-y-auto ${
         isOpenSidebar ? "w-[18.438rem]" : "w-[5.813rem]"
-      } text-center bg-base-200 flex flex-col justify-between border-r border-neutral-content ${
-        isDark ? "sidebar-shadow-dark" : "sidebar-shadow-light"
-      }`}
+      } text-center bg-base-200 flex flex-col justify-between border-r border-neutral-content shadow-[4px_4px_4px_0] shadow-neutral-focus/30`}
     >
       <ul
         className={`flex flex-col ${
diff --git a/tailwind.config.js b/tailwind.config.js
index 7d43dd1d..28424d9f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 
-const NEUTRAL_FOCUS_LIGHT = "#4C515B";
-const NEUTRAL_FOCUS_DARK = "#A0A5AE";
-
 module.exports = {
   content: [
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
@@ -23,7 +20,7 @@ module.exports = {
           "accent-focus": "#98DDBD",
           "accent-content": "#D7EDE3",
           neutral: "#6B7280",
-          "neutral-focus": NEUTRAL_FOCUS_LIGHT,
+          "neutral-focus": "#4C515B",
           "neutral-content": "#9CA1AA",
           info: "#8FC4E5",
           "info-content": "#DCEDF7",
@@ -37,7 +34,6 @@ module.exports = {
           "base-200": "#F5F5F5",
           "base-300": "#16171A",
           "base-content": "#EEEFF0",
-          "--neutral-focus": NEUTRAL_FOCUS_LIGHT,
         },
       },
       {
@@ -52,7 +48,7 @@ module.exports = {
           "accent-focus": "#6EE7B7",
           "accent-content": "#6B9984",
           neutral: "#6B7280",
-          "neutral-focus": NEUTRAL_FOCUS_DARK,
+          "neutral-focus": "#A0A5AE",
           "neutral-content": "#3B3F46",
           info: "#84B5D4",
           "info-content": "#668BA3",
@@ -66,7 +62,6 @@ module.exports = {
           "base-200": "#16171A",
           "base-300": "#F5F5F5",
           "base-content": "#2D3036",
-          "--neutral-focus": NEUTRAL_FOCUS_DARK,
         },
       },
     ],

From d37e88afc4da1ef24637826a44f4caabd4347bd8 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Tue, 26 Sep 2023 19:23:34 +0200
Subject: [PATCH 6/7] feat: prettier fix

---
 tailwind.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 28424d9f..4ccdc19e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,4 @@
 /** @type {import('tailwindcss').Config} */
-
 module.exports = {
   content: [
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",

From 267af957f88831c8d752e3c5392ba64f801fa841 Mon Sep 17 00:00:00 2001
From: Timothy Russo <russotimothy@live.it>
Date: Wed, 27 Sep 2023 15:09:46 +0200
Subject: [PATCH 7/7] feat: fix opacity of the shadows color

---
 src/components/sidebar/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 647fdd4e..3a499787 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -122,7 +122,7 @@ export default function Sidebar() {
     <aside
       className={`overflow-y-auto ${
         isOpenSidebar ? "w-[18.438rem]" : "w-[5.813rem]"
-      } text-center bg-base-200 flex flex-col justify-between border-r border-neutral-content shadow-[4px_4px_4px_0] shadow-neutral-focus/30`}
+      } text-center bg-base-200 flex flex-col justify-between border-r border-neutral-content shadow-[4px_4px_4px_0] shadow-neutral-focus/5`}
     >
       <ul
         className={`flex flex-col ${