(fix): sidebar styles (might be broken idk)

select-studios · Mar 27, 2024 · e7af5b6 · e7af5b6
1 parent 15750f7
commit e7af5b6
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 66 deletions.
diff --git a/client/package.json b/client/package.json
@@ -28,7 +28,7 @@
     "electron-settings": "^4.0.2",
     "electron-store": "^8.1.0",
     "electron-updater": "^5.3.0",
-    "framer-motion": "^11.0.14",
+    "framer-motion": "^11.0.22",
     "mobx": "^6.8.0",
     "mobx-react": "^7.6.0",
     "mongoose": "^6.9.2",

diff --git a/client/src/assets/styles/index.css b/client/src/assets/styles/index.css
@@ -13,11 +13,6 @@
   overflow-x: hidden;
 }
 
-html,
-body {
-  @apply bg-primaryBG !important;
-}
-
 body {
   margin: 0;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
@@ -55,11 +50,6 @@ code {
     monospace;
 }
 
-button {
-  font-weight: bold !important;
-  text-transform: uppercase;
-}
-
 p,
 h1,
 h2,

diff --git a/client/src/components/appbar/appbar.component.tsx b/client/src/components/appbar/appbar.component.tsx
@@ -15,14 +15,9 @@ export const AppBar: React.FC<AppBarProps> = ({ dashboard, user }) => {
 
   return (
     <>
-      <header className="w-full bg-secondaryBG py-2 rounded-b-3xl shadow-xl pt-0">
+      <header className="w-full py-2 rounded-b-3xl shadow-xl pt-0">
         <div className="container mx-auto flex flex-wrap p-2 flex-col md:flex-row items-center">
           <nav className="flex lg:2/5 flex-wrap items-center text-base md:ml-auto"></nav>
-          <div className="flex order-first lg:order-none lg:w-1/5 title-font font-medium items-center text-gray-900 lg:items-center lg:justify-center mb-4 md:mb-0">
-            <p className="text-white font-semibold font-montserrat text-2xl pb-2 text-center">
-              Select Studios
-            </p>
-          </div>
           <div className="lg:w-2/5 inline-flex lg:justify-end">
             {dashboard && (
               <div className="flex">
@@ -35,7 +30,11 @@ export const AppBar: React.FC<AppBarProps> = ({ dashboard, user }) => {
                   }}
                 />
                 <Link to="/settings">
-                  <Button className="bg-tertiaryBG ml-2" size="lg" radius="full">
+                  <Button
+                    className="bg-tertiaryBG ml-2"
+                    size="lg"
+                    radius="full"
+                  >
                     <HiCog size="25" className="text-white w-auto" />
                   </Button>
                 </Link>

diff --git a/client/src/components/sidebar/sidebar.component.tsx b/client/src/components/sidebar/sidebar.component.tsx
@@ -81,7 +81,7 @@ const SidebarComp: React.FC<SidebarProps> = ({ active, settings }) => {
       initial={false}
       animate={SidebarStore.isOpen ? "sidebarOpen" : "sidebarClosed"}
     >
-      <div className="bg-secondaryBG mt-10 h-screen rounded-tr-xl rounded-br-xl">
+      <div className="bg-secondaryBG h-screen rounded-tr-xl rounded-br-xl">
         <div className="flex flex-col flex-1 p-5">
           <div>
             <Button
@@ -93,48 +93,22 @@ const SidebarComp: React.FC<SidebarProps> = ({ active, settings }) => {
               <HiMenuAlt1 size="25" className="font-bold" />
             </Button>
           </div>
-          <div className="grid justify-center mt-5">
+          <div className="grid space-y-10 justify-center mt-5">
             {!settings ? (
               <div>
                 {sidebarLinks.map((link, i) => (
-                  <Button
-                    onClick={() => navigate(link.href)}
-                    disabled={link.disabled}
-                    className={
-                      `bg-tertiaryBG mt-2 ${
-                        link.name.toLowerCase() == active
-                          ? "border-l-4 border-y-0 border-r-0 rounded-l-sm border-solid border-primary-base"
-                          : ""
-                      }` + !SidebarStore.isOpen
-                        ? "w-auto"
-                        : ""
-                    }
-                    // css={{
-                    //   borderLeftWidth:
-                    //     link.name.toLowerCase() == active ? "2px" : "",
-                    //   borderTopWidth:
-                    //     link.name.toLowerCase() == active ? "0px" : "",
-                    //   borderBottomWidth:
-                    //     link.name.toLowerCase() == active ? "0px" : "",
-                    //   borderRightWidth:
-                    //     link.name.toLowerCase() == active ? "0px" : "",
-                    //   borderTopLeftRadius:
-                    //     link.name.toLowerCase() == active ? "0.125rem" : "",
-                    //   borderBottomLeftRadius:
-                    //     link.name.toLowerCase() == active ? "0.125rem" : "",
-                    //   border: link.name.toLowerCase() == active ? "solid" : "",
-                    //   borderColor:
-                    //     link.name.toLowerCase() == active ? "#9980FA" : "",
-                    //   borderTopStyle: "none",
-                    //   borderBottomStyle: "none",
-                    //   borderRightStyle: "none",
-                    // }}
-                    startContent={link.icon}
-                    key={i}
-                    size="lg"
-                  >
-                    {SidebarStore.isOpen && link.name}
-                  </Button>
+                  <>
+                    <Button
+                      onPress={() => navigate(link.href)}
+                      isDisabled={link.disabled}
+                      className={"mb-2 "}
+                      startContent={link.icon}
+                      key={i}
+                      size="lg"
+                    >
+                      {SidebarStore.isOpen && link.name}
+                    </Button>
+                  </>
                 ))}
                 {user?.moderator && (
                   <div className="admin-zone">

diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -16,9 +16,11 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <NextUIProvider>
       <Router>
-        <div className="w-screen h-11 bg-secondaryBG appbar Draggable-Region" />
-        <App />
-        <ToastContainer position="bottom-right" theme="dark" />
+        <div className="font-sans">
+          <div className="w-screen h-11 bg-secondaryBG appbar Draggable-Region" />
+          <App />
+          <ToastContainer position="bottom-right" theme="dark" />
+        </div>
       </Router>
     </NextUIProvider>
   </React.StrictMode>

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -11,11 +11,11 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primaryBG: "#141414",
-        secondaryBG: "#181818",
-        tertiaryBG: "#272828",
+        primaryBG: "#000",
+        secondaryBG: "#090909",
+        tertiaryBG: "#121212",
 
-        primary: "#9c88ff",
+        primary: "#A558F2",
       },
     },
     fontFamily: {
@@ -36,7 +36,13 @@ module.exports = {
     nextui({
       defaultTheme: "dark",
       themes: {
-        dark: { colors: { primary: "#9c88ff" } },
+        dark: {
+          colors: {
+            background: "#000000",
+            primary: "#A558F2",
+            default: "#121212",
+          },
+        },
       },
     }),
   ],