From 9292cd4c80f18e0870df1ff5afc7137aec33015d Mon Sep 17 00:00:00 2001
From: Mohammed Rabay'a <rabaya.moe@gmail.com>
Date: Fri, 5 Apr 2024 19:48:53 +0200
Subject: [PATCH] UI Enhancements

---
 assets/styles/utilities/_variables.scss       |  4 ++--
 .../organisms/Navigation/Nav.styled.tsx       |  2 +-
 components/organisms/Navigation/index.tsx     | 24 ++++---------------
 pages/index.tsx                               |  4 ++--
 4 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/assets/styles/utilities/_variables.scss b/assets/styles/utilities/_variables.scss
index 25a7ff1..3323145 100755
--- a/assets/styles/utilities/_variables.scss
+++ b/assets/styles/utilities/_variables.scss
@@ -45,7 +45,7 @@ $screen-xl: 1440px;
   --footer-font-color: #fafafa;
   --alternate-background-color: #f1f1f1;
   --alternate-text-color: #2a2a2a;
-  --nav-background-color: rgba(var(--background-color-rgb), 0.8);
+  --nav-background-color: rgba(var(--background-color-rgb), 0.7);
   --code-background-color: #eeeeee;
   --text-color: #000000;
   --text-color-rgb: 0, 0, 0;
@@ -90,7 +90,7 @@ html.dark {
   --background-color-rgb: 0, 0, 0;
   --alternate-background-color: #232323;
   --alternate-text-color: #fafafa;
-  --nav-background-color: rgb(17, 17, 17, 0.75);
+  --nav-background-color: rgb(17, 17, 17, 0.7);
   --code-background-color: #1e1e1e;
   --border-color: #eaeaea;
   --text-color: #ffffff;
diff --git a/components/organisms/Navigation/Nav.styled.tsx b/components/organisms/Navigation/Nav.styled.tsx
index 461f1dd..01366de 100644
--- a/components/organisms/Navigation/Nav.styled.tsx
+++ b/components/organisms/Navigation/Nav.styled.tsx
@@ -18,7 +18,7 @@ const Title = styled.span`
 
 const Nav = Object.assign(
   styled.nav<Props>`
-    backdrop-filter: blur(20px);
+    backdrop-filter: blur(25px);
     position: fixed;
     width: 100%;
     z-index: 100;
diff --git a/components/organisms/Navigation/index.tsx b/components/organisms/Navigation/index.tsx
index 2769ea9..d9d3b8e 100644
--- a/components/organisms/Navigation/index.tsx
+++ b/components/organisms/Navigation/index.tsx
@@ -29,8 +29,9 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => {
     Pages[locale == "ar" ? "ar" : "en"]?.map(({ path, name }, index) => (
       <Link
         className={`px-4 py-2 ${
-          index == 0 && "bg-neutral-200 dark:bg-neutral-900"
-        } font-regular mx-2 rounded-2xl text-stone-800 hover:bg-neutral-300 dark:text-neutral-50 dark:md:hover:bg-neutral-800`}
+          index == 0 &&
+          " bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid  dark:bg-stone-900 dark:hover:bg-stone-800 dark:hover:border-stone-800"
+        } font-regular mx-2 rounded-2xl text-stone-800 hover:bg-stone-300 dark:text-stone-50 dark:md:hover:bg-stone-800`}
         href={path}
         key={name}
       >
@@ -43,7 +44,7 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => {
       target="_blank"
       href="https://github.com/moerabaya/"
       key="github-url"
-      className="px-2 py-2 bg-neutral-200 font-regular mx-2 rounded-2xl dark:text-gray-50 hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+      className="px-2 py-2 bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid font-regular mx-2 rounded-2xl dark:text-gray-50 hover:bg-stone-200 hover:border-stone-200 dark:bg-stone-900 dark:hover:bg-stone-800 dark:hover:border-stone-800"
     >
       <BsGithub size="26px" />
     </a>,
@@ -51,7 +52,7 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => {
       target="_blank"
       href="https://www.linkedin.com/in/moerabaya/"
       key="linkedin-url"
-      className="px-2 py-2 bg-neutral-200 font-regular mx-2 rounded-2xl dark:text-gray-50 hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+      className="px-2 py-2 bg-[#F1F1F1] border-[1px] border-[#EEEEEE] dark:border-[#202020] border-solid font-regular mx-2 rounded-2xl dark:text-gray-50 hover:bg-stone-200 hover:border-stone-200 dark:bg-stone-900 dark:hover:bg-stone-800 dark:hover:border-stone-800"
     >
       <BsLinkedin size="26px" className="rounded-md" />
     </a>,
@@ -150,21 +151,6 @@ const Navigation = ({ hasReadPermission, previous, next }: any) => {
             <div className="mt-auto flex items-center pb-10 justify-center">
               {Socials}
             </div>
-            {hasReadPermission && (
-              <li className="logout">
-                <a
-                  onClick={(e) => {
-                    e.preventDefault();
-                    const cookies = new Cookies();
-                    cookies.remove(consts.SiteReadCookie, { path: "/" });
-                    window.location.href = asPath ?? "/";
-                  }}
-                  className="animated"
-                >
-                  Logout
-                </a>
-              </li>
-            )}
           </div>
         </div>
       </AnimatedView>
diff --git a/pages/index.tsx b/pages/index.tsx
index c090995..ca783a7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -31,7 +31,7 @@ const Home: NextPage<Props> = ({ projects }: Props) => {
               href={`work/${project.slug}`}
               className={`${
                 index === 0 ? "col-span-2" : "col-span-1"
-              } border-solid border-stone-100 max-sm:col-span-2`}
+              } max-sm:col-span-2`}
             >
               <AnimatedView
                 key={project.slug}
@@ -55,7 +55,7 @@ const Home: NextPage<Props> = ({ projects }: Props) => {
                     project.cover_photo &&
                     require("../assets/images/projects/" + project.cover_photo)
                   }
-                  className="overflow-hidden rounded-3xl transition ease-in-out duration-500 hover:shadow-stone-200 hover:shadow-lg cursor-pointer m-0"
+                  className="overflow-hidden rounded-3xl transition ease-in-out duration-500 hover:shadow-stone-200 hover:shadow-lg cursor-pointer m-0 border-solid border-[1px] border-stone-200 dark:hover:shadow-stone-600 dark:border-stone-600"
                 />
               </AnimatedView>
             </Link>