From 0be503395a4d519407c5b37085c9a363a5055f84 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 26 Feb 2024 16:24:50 -0800
Subject: [PATCH] WIP main sidebar designs

---
 frontend/src/components/Footer/index.jsx      |  7 ++
 .../src/components/SettingsButton/index.jsx   | 17 +++++
 .../Sidebar/ActiveWorkspaces/index.jsx        | 73 ++++++++++---------
 frontend/src/components/Sidebar/index.jsx     | 58 +++++----------
 frontend/tailwind.config.js                   |  3 +-
 5 files changed, 83 insertions(+), 75 deletions(-)
 create mode 100644 frontend/src/components/SettingsButton/index.jsx

diff --git a/frontend/src/components/Footer/index.jsx b/frontend/src/components/Footer/index.jsx
index 26b271a8..4b175405 100644
--- a/frontend/src/components/Footer/index.jsx
+++ b/frontend/src/components/Footer/index.jsx
@@ -13,6 +13,7 @@ import {
   LinkSimple,
 } from "@phosphor-icons/react";
 import React, { useEffect, useState } from "react";
+import SettingsButton from "../SettingsButton";
 
 export const MAX_ICONS = 3;
 export const ICON_COMPONENTS = {
@@ -49,6 +50,7 @@ export default function Footer() {
           <a
             href={paths.github()}
             target="_blank"
+            rel="noreferrer"
             className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
           >
             <GithubLogo weight="fill" className="h-5 w-5 " />
@@ -56,6 +58,7 @@ export default function Footer() {
           <a
             href={paths.docs()}
             target="_blank"
+            rel="noreferrer"
             className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
           >
             <BookOpen weight="fill" className="h-5 w-5 " />
@@ -63,6 +66,7 @@ export default function Footer() {
           <a
             href={paths.discord()}
             target="_blank"
+            rel="noreferrer"
             className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
           >
             <DiscordLogo
@@ -70,6 +74,7 @@ export default function Footer() {
               className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
             />
           </a>
+          <SettingsButton />
         </div>
       </div>
     );
@@ -83,6 +88,7 @@ export default function Footer() {
             key={index}
             href={item.url}
             target="_blank"
+            rel="noreferrer"
             className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
           >
             {React.createElement(ICON_COMPONENTS[item.icon], {
@@ -91,6 +97,7 @@ export default function Footer() {
             })}
           </a>
         ))}
+        <SettingsButton />
       </div>
     </div>
   );
diff --git a/frontend/src/components/SettingsButton/index.jsx b/frontend/src/components/SettingsButton/index.jsx
new file mode 100644
index 00000000..18c7b1a1
--- /dev/null
+++ b/frontend/src/components/SettingsButton/index.jsx
@@ -0,0 +1,17 @@
+import useUser from "@/hooks/useUser";
+import paths from "@/utils/paths";
+import { Wrench } from "@phosphor-icons/react";
+
+export default function SettingsButton() {
+  const { user } = useUser();
+  return (
+    <a
+      href={
+        !!user?.role ? paths.settings.system() : paths.settings.appearance()
+      }
+      className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+    >
+      <Wrench className="h-5 w-5" weight="fill" />
+    </a>
+  );
+}
diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index 9ee6a687..467c6eb2 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -90,55 +90,58 @@ export default function ActiveWorkspaces() {
                 href={isActive ? null : paths.workspace.chat(workspace.slug)}
                 className={`
               transition-all duration-[200ms]
-                flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-lg text-slate-200 justify-start items-center 
-                hover:bg-workspace-item-selected-gradient 
+                flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-slate-200 justify-start items-center
+                hover:bg-workspace-item-selected-gradient
                 ${
                   isActive
-                    ? "border-2 bg-workspace-item-selected-gradient border-white"
-                    : "border bg-workspace-item-gradient bg-opacity-60 border-transparent hover:border-slate-100 hover:border-opacity-50"
+                    ? "bg-workspace-item-selected-gradient"
+                    : "border-[2px] border-outline"
                 }`}
               >
                 <div className="flex flex-row justify-between w-full">
                   <div className="flex items-center space-x-2">
                     <SquaresFour
                       weight={isActive ? "fill" : "regular"}
-                      className="h-5 w-5 flex-shrink-0"
+                      className="flex-shrink-0"
+                      size={24}
                     />
                     <p
-                      className={`text-white text-sm leading-loose font-medium whitespace-nowrap overflow-hidden ${
+                      className={`text-white text-[14px] leading-loose font-bold whitespace-nowrap overflow-hidden ${
                         isActive ? "" : "text-opacity-80"
                       }`}
                     >
                       {isActive || isHovered
-                        ? truncate(workspace.name, 17)
+                        ? truncate(workspace.name, 15)
                         : truncate(workspace.name, 20)}
                     </p>
                   </div>
                   {(isActive || isHovered || gearHover[workspace.id]) &&
                   user?.role !== "default" ? (
-                    <div className="flex items-center gap-x-2">
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          setSelectedWs(workspace);
-                          showModal();
-                        }}
-                        onMouseEnter={() =>
-                          handleUploadMouseEnter(workspace.id)
-                        }
-                        onMouseLeave={() =>
-                          handleUploadMouseLeave(workspace.id)
-                        }
-                        className="rounded-md flex items-center justify-center text-white ml-auto"
-                      >
-                        <UploadSimple
-                          weight={
-                            uploadHover[workspace.id] ? "fill" : "regular"
+                    <div className="flex items-center">
+                      <div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            setSelectedWs(workspace);
+                            showModal();
+                          }}
+                          onMouseEnter={() =>
+                            handleUploadMouseEnter(workspace.id)
                           }
-                          className="h-[20px] w-[20px] transition-all duration-300"
-                        />
-                      </button>
+                          onMouseLeave={() =>
+                            handleUploadMouseLeave(workspace.id)
+                          }
+                          className="rounded-md flex items-center justify-center text-white ml-auto"
+                        >
+                          <UploadSimple
+                            weight={
+                              uploadHover[workspace.id] ? "fill" : "regular"
+                            }
+                            className="h-[20px] w-[20px] transition-all duration-300"
+                          />
+                        </button>
+                      </div>
 
                       <Link
                         type="button"
@@ -149,10 +152,14 @@ export default function ActiveWorkspaces() {
                         onMouseLeave={() => handleGearMouseLeave(workspace.id)}
                         className="rounded-md flex items-center justify-center text-white ml-auto"
                       >
-                        <GearSix
-                          weight={gearHover[workspace.id] ? "fill" : "regular"}
-                          className="h-[20px] w-[20px] transition-all duration-300"
-                        />
+                        <div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
+                          <GearSix
+                            // weight={gearHover[workspace.id] ? "fill" : "regular"}
+                            className={`h-[20px] w-[20px]  ${
+                              gearHover[workspace.id] ? "" : ""
+                            }`}
+                          />
+                        </div>
                       </Link>
                     </div>
                   ) : null}
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index d14099b2..0c38eb77 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Wrench, Plus, List } from "@phosphor-icons/react";
+import { Plus, List } from "@phosphor-icons/react";
 import NewWorkspaceModal, {
   useNewWorkspaceModal,
 } from "../Modals/NewWorkspace";
 import ActiveWorkspaces from "./ActiveWorkspaces";
-import paths from "@/utils/paths";
 import { USER_BACKGROUND_COLOR } from "@/utils/constants";
 import useLogo from "@/hooks/useLogo";
 import useUser from "@/hooks/useUser";
 import Footer from "../Footer";
+import SettingsButton from "../SettingsButton";
 
 export default function Sidebar() {
   const { user } = useUser();
@@ -21,40 +21,30 @@ export default function Sidebar() {
   } = useNewWorkspaceModal();
 
   return (
-    <>
+    <div>
+      <div className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]">
+        <img
+          src={logo}
+          alt="Logo"
+          className="rounded max-h-[24px]"
+          style={{ objectFit: "contain" }}
+        />
+      </div>
       <div
         ref={sidebarRef}
-        style={{ height: "calc(100% - 32px)" }}
-        className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-sidebar border-4 border-accent min-w-[250px] p-[18px]"
+        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]"
       >
         <div className="flex flex-col h-full overflow-x-hidden">
-          {/* Header Information */}
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex shrink-0 max-w-[65%] items-center justify-start">
-              <img
-                src={logo}
-                alt="Logo"
-                className="rounded max-h-[40px]"
-                style={{ objectFit: "contain" }}
-              />
-            </div>
-            {(!user || user?.role !== "default") && (
-              <div className="flex gap-x-2 items-center text-slate-200">
-                <SettingsButton />
-              </div>
-            )}
-          </div>
-
-          {/* Primary Body */}
-          <div className="flex-grow flex flex-col">
+          <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-4 mb-2 bg-white rounded-lg text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
+                    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 className="h-5 w-5" />
+                    <Plus size={18} weight="bold" />
                     <p className="text-sidebar text-sm font-semibold">
                       New Workspace
                     </p>
@@ -70,7 +60,7 @@ export default function Sidebar() {
         </div>
       </div>
       {showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
-    </>
+    </div>
   );
 }
 
@@ -190,17 +180,3 @@ export function SidebarMobileHeader() {
     </>
   );
 }
-
-function SettingsButton() {
-  const { user } = useUser();
-  return (
-    <a
-      href={
-        !!user?.role ? paths.settings.system() : paths.settings.appearance()
-      }
-      className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
-    >
-      <Wrench className="h-4 w-4" weight="fill" />
-    </a>
-  );
-}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index f3f8aaca..8add5a69 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -24,7 +24,8 @@ export default {
         "sidebar-button": "#31353A",
         sidebar: "#25272C",
         "historical-msg-system": "rgba(255, 255, 255, 0.05);",
-        "historical-msg-user": "#2C2F35"
+        "historical-msg-user": "#2C2F35",
+        outline: "#4E5153"
       },
       backgroundImage: {
         "preference-gradient":