From c139b09148de6fedd330b006ccd53f38d50c978e Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Thu, 6 Jun 2024 13:12:39 -0700
Subject: [PATCH] [FIX] Login screen image ui bug fix + fix footer icons when
 overflowing (#1602)

* login screen image ui bug fix + fixed footer icons

* fix uneven top/botton padding on footer

* patch Sidebar UI in mobile

---------

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
---
 .../src/components/Modals/Password/index.jsx  |  6 +--
 .../src/components/SettingsSidebar/index.jsx  | 21 +++++----
 frontend/src/components/Sidebar/index.jsx     | 47 +++++++++----------
 3 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/Modals/Password/index.jsx b/frontend/src/components/Modals/Password/index.jsx
index 8f86b611..7010fc66 100644
--- a/frontend/src/components/Modals/Password/index.jsx
+++ b/frontend/src/components/Modals/Password/index.jsx
@@ -33,12 +33,12 @@ export default function PasswordModal({ mode = "single" }) {
           alt="login illustration"
         />
       </div>
-      <div className="flex flex-col items-center justify-center h-full w-full md:w-1/2 z-50 relative">
+      <div className="flex flex-col items-center justify-center h-full w-full md:w-1/2 z-50 relative -mt-20">
         <img
           src={loginLogo}
           alt="Logo"
-          className={`hidden md:flex rounded-2xl w-fit m-4 z-30 ${
-            mode === "single" ? "md:top-[170px]" : "md:top-36"
+          className={`hidden relative md:flex rounded-2xl w-fit m-4 z-30 ${
+            mode === "single" ? "md:top-2" : "md:top-12"
           } absolute max-h-[65px] md:bg-login-gradient md:shadow-[0_4px_14px_rgba(0,0,0,0.25)]`}
           style={{ objectFit: "contain" }}
         />
diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx
index 2d59d0ff..297a1620 100644
--- a/frontend/src/components/SettingsSidebar/index.jsx
+++ b/frontend/src/components/SettingsSidebar/index.jsx
@@ -85,7 +85,7 @@ export default function SettingsSidebar() {
           />
           <div
             ref={sidebarRef}
-            className="h-[100vh] fixed top-0 left-0  rounded-r-[26px] bg-sidebar w-[80%] p-[18px] "
+            className="h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-sidebar w-[80%] p-[18px]"
           >
             <div className="w-full h-full flex flex-col overflow-x-hidden items-between">
               {/* Header Information */}
@@ -109,12 +109,14 @@ export default function SettingsSidebar() {
               </div>
 
               {/* Primary Body */}
-              <div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-scroll no-scroll ">
+              <div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-scroll no-scroll">
                 <div className="h-auto md:sidebar-items md:dark:sidebar-items">
-                  <div className=" flex flex-col gap-y-4 pb-8 overflow-y-scroll no-scroll">
+                  <div className="flex flex-col gap-y-4 pb-[60px] overflow-y-scroll no-scroll">
                     <SidebarOptions user={user} />
                   </div>
                 </div>
+              </div>
+              <div className="absolute bottom-2 left-0 right-0 pt-2 bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md">
                 <Footer />
               </div>
             </div>
@@ -139,22 +141,21 @@ export default function SettingsSidebar() {
       </Link>
       <div
         ref={sidebarRef}
-        style={{ height: "calc(100% - 76px)" }}
-        className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
+        className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px] h-[calc(100%-76px)]"
       >
         <div className="w-full h-full flex flex-col overflow-x-hidden items-between min-w-[235px]">
           <div className="text-white text-opacity-60 text-sm font-medium uppercase mt-[4px] mb-0 ml-2">
             Instance Settings
           </div>
-          <div className="relative h-full flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
+          <div className="relative h-[calc(100%-60px)] flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
             <div className="h-auto sidebar-items">
-              <div className="flex flex-col gap-y-2 h-full pb-8 overflow-y-scroll no-scroll">
+              <div className="flex flex-col gap-y-2 pb-[60px] overflow-y-scroll no-scroll">
                 <SidebarOptions user={user} />
               </div>
             </div>
-            <div className="mb-2">
-              <Footer />
-            </div>
+          </div>
+          <div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-50">
+            <Footer />
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index a32c0a3b..d4b4e007 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -32,34 +32,34 @@ export default function Sidebar() {
         <img
           src={logo}
           alt="Logo"
-          className="rounded max-h-[24px]"
-          style={{ objectFit: "contain" }}
+          className="rounded max-h-[24px] object-contain"
         />
       </Link>
       <div
         ref={sidebarRef}
-        style={{ height: "calc(100% - 76px)" }}
-        className="relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
+        className="relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px] h-[calc(100%-76px)]"
       >
         <div className="flex flex-col h-full overflow-x-hidden">
           <div className="flex-grow flex flex-col min-w-[235px]">
-            <div className="flex flex-col gap-y-2 pb-8 overflow-y-scroll no-scroll">
-              <div className="flex gap-x-2 items-center justify-between">
-                {(!user || user?.role !== "default") && (
-                  <button
-                    onClick={showNewWsModal}
-                    className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
-                  >
-                    <Plus size={18} weight="bold" />
-                    <p className="text-sidebar text-sm font-semibold">
-                      New Workspace
-                    </p>
-                  </button>
-                )}
+            <div className="relative h-[calc(100%-60px)] flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
+              <div className="flex flex-col gap-y-2 pb-[60px] overflow-y-scroll no-scroll">
+                <div className="flex gap-x-2 items-center justify-between">
+                  {(!user || user?.role !== "default") && (
+                    <button
+                      onClick={showNewWsModal}
+                      className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
+                    >
+                      <Plus size={18} weight="bold" />
+                      <p className="text-sidebar text-sm font-semibold">
+                        New Workspace
+                      </p>
+                    </button>
+                  )}
+                </div>
+                <ActiveWorkspaces />
               </div>
-              <ActiveWorkspaces />
             </div>
-            <div className="flex flex-col flex-grow justify-end mb-2">
+            <div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-30">
               <Footer />
             </div>
           </div>
@@ -156,12 +156,9 @@ export function SidebarMobileHeader() {
             </div>
 
             {/* Primary Body */}
-            <div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-hidden ">
+            <div className="h-full flex flex-col w-full justify-between pt-4 ">
               <div className="h-auto md:sidebar-items">
-                <div
-                  style={{ height: "calc(100vw - -3rem)" }}
-                  className=" flex flex-col gap-y-4 pb-8 overflow-y-scroll no-scroll"
-                >
+                <div className=" flex flex-col gap-y-4 overflow-y-scroll no-scroll pb-[60px]">
                   <div className="flex gap-x-2 items-center justify-between">
                     {(!user || user?.role !== "default") && (
                       <button
@@ -178,7 +175,7 @@ export function SidebarMobileHeader() {
                   <ActiveWorkspaces />
                 </div>
               </div>
-              <div>
+              <div className="z-99 absolute bottom-0 left-0 right-0 pt-2 pb-6 rounded-br-[26px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md">
                 <Footer />
               </div>
             </div>