fix(ui): rearrange graphFooter(graph chooser)

delta · Jan 18, 2024 · 644d744 · 644d744
1 parent 50b3862
commit 644d744
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/src/components/GraphFooter/GraphFooter.module.css b/src/components/GraphFooter/GraphFooter.module.css
@@ -2,9 +2,9 @@
     border: 1px solid #ffffff50 !important;
     border-radius: 10px;
     background: #ffffff05 !important;
-    font-size: 3rem;
+    font-size: 1rem;
     box-shadow: none !important;
-    width: 46vw !important;
+    align-self: end;
 }
 
 .footer {
@@ -22,5 +22,5 @@
 .button {
     color: white;
     text-align: center;
-    font-size: 3rem !important;
+    font-size: 1rem !important;
 }
diff --git a/src/pages/Statistics/Statistics.module.css b/src/pages/Statistics/Statistics.module.css
@@ -1,6 +1,7 @@
 .bg {
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
+  align-items: center;
   overflow: hidden;
   background-color: #00000072;
   backdrop-filter: blur(17px);
@@ -47,9 +48,7 @@
   align-items: center;
   justify-content: center;
   height: fit-content;
-  padding: 50px;
-}
-.lineChart {
+  padding-top: 50px;
 }
 
 .lines {
@@ -67,12 +66,13 @@
 }
 
 .graphContainer {
+  margin-top: 2%;
   flex-shrink: 0;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
-  padding-top: 10%;
-  width: 100vw;
-  height: 100%;
+  flex-direction: column;
+  height: fit-content;
+  width: fit-content;
 }
 
diff --git a/src/pages/Statistics/Statistics.tsx b/src/pages/Statistics/Statistics.tsx
@@ -69,16 +69,15 @@ const Statistics = () => {
     <>
       <div className={styles.parent}>
         <div className={styles.footer}>
-          <h1 className={styles.title}>
+          <h1 className={styles.title}>{titles[selected]}</h1>
+        </div>
+        <div className={styles.bg}>
+          <div className={styles.graphContainer}>
             <GraphFooter
               graph={titles}
               selected={selected}
               setSelected={setSelected}
             />
-          </h1>
-        </div>
-        <div className={styles.bg}>
-          <div className={styles.graphContainer}>
             <div className={styles.graphParent}>
               {selected == 0 && (
                 <AreaChart