feat: remove header background

Signed-off-by: Quentin Guidée <[email protected]>
Yooooomi · Feb 28, 2024 · a679d6b · a679d6b
1 parent f46d56e
commit a679d6b
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 31 deletions.
diff --git a/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx b/apps/client/src/components/ButtonsHeader/ButtonsHeader.tsx
@@ -30,7 +30,11 @@ export default function ButtonsHeader({ items }: ButtonsHeaderProps) {
   );
 
   return (
-    <Tabs value={tab} onChange={(_, v) => goto(v)} textColor="secondary">
+    <Tabs
+      value={tab}
+      onChange={(_, v) => goto(v)}
+      textColor="secondary"
+      className={s.tabs}>
       {items.map((item, k) => (
         <Tab
           className={s.item}

diff --git a/apps/client/src/components/ButtonsHeader/index.module.css b/apps/client/src/components/ButtonsHeader/index.module.css
@@ -1,3 +1,14 @@
+.tabs {
+  border-bottom: 1px solid var(--divider);
+  margin-bottom: 16px;
+}
+
+@media screen and (max-width: 960px) {
+    .tabs {
+        margin-bottom: 8px;
+    }
+}
+
 .item {
   border-radius: var(--radius) !important;
 }
diff --git a/apps/client/src/components/ChartCard/index.module.css b/apps/client/src/components/ChartCard/index.module.css
@@ -15,17 +15,6 @@
   margin-bottom: 16px;
 }
 
-.root > div > h3::before {
-  content: '';
-  position: relative;
-  display: inline-block;
-  width: 16px;
-  height: 32px;
-  background-color: var(--text-on-light);
-  margin-right: 16px;
-  border-radius: 6px;
-}
-
 .title {
   display: flex;
   flex-direction: row;

diff --git a/apps/client/src/components/Header/index.module.css b/apps/client/src/components/Header/index.module.css
@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: space-between;
 
-  background-color: var(--header-background);
+  background-color: var(--content-background);
   padding: 16px;
 }
 

diff --git a/apps/client/src/components/TitleCard/index.module.css b/apps/client/src/components/TitleCard/index.module.css
@@ -10,7 +10,7 @@
 }
 
 .container {
-  padding: 16px;
+  padding: 16px 20px;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -30,17 +30,6 @@
   margin-left: auto;
 }
 
-.title::before {
-  content: '';
-  position: relative;
-  display: inline-block;
-  width: 16px;
-  height: 32px;
-  background-color: var(--primary);
-  margin-right: 16px;
-  border-radius: 6px;
-}
-
 .content {
   position: relative;
   flex-grow: 1;

diff --git a/apps/client/src/index.css b/apps/client/src/index.css
@@ -34,7 +34,7 @@ h6 {
 :root {
   --track-options: 34px;
   --radius: 6px;
-  --page-padding: 16px;
+  --page-padding: 0 16px 16px 16px;
   --accent: #FB717B;
   --header-image-size: 60px;
 }
@@ -51,7 +51,6 @@ h6 {
   --hover: rgb(65, 65, 65);
 
   --background: black;
-  --header-background: black;
   --content-background: black;
 
   --text-on-light: white;
@@ -73,8 +72,7 @@ h6 {
   --hover: #eaeaea;
 
   --background: white;
-  --header-background: white;
-  --content-background: #f7f7f7;
+  --content-background: #f2f3f6;
 
   --text-on-light: black;
   --text-on-dark: white;
@@ -91,7 +89,7 @@ h6 {
 
 @media screen and (max-width: 960px) {
   :root {
-    --page-padding: 8px;
+    --page-padding: 0px 8px 8px 8px;
     --header-image-size: 40px;
   }
 }

diff --git a/apps/client/src/services/theme.ts b/apps/client/src/services/theme.ts
@@ -30,7 +30,7 @@ export const useTheme = () => {
           MuiTabs: {
             styleOverrides: {
               root: {
-                backgroundColor: "var(--header-background)",
+                backgroundColor: "var(--content-background)",
               },
             },
           },