Merge pull request #324 from djeck1432/fix/all_styles

fix/all_styles
djeck1432 · Dec 7, 2024 · b307875 · b307875
2 parents 75a6502 + be589f4
commit b307875
Show file tree

Hide file tree

Showing 35 changed files with 740 additions and 491 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -105,7 +105,7 @@ function App() {
           <Route path="/form" element={<Form />} />
           <Route path="/documentation" element={<Documentation />} />
 
-            <Route path="/stake" element={<Stake />} />
+          <Route path="/stake" element={<Stake />} />
         </Routes>
       </main>
       <Footer />

diff --git a/frontend/src/components/Footer/Footer.jsx b/frontend/src/components/Footer/Footer.jsx
@@ -68,7 +68,7 @@ function Footer() {
           </a>
         ))}
       </div>
-      <div className="footer-mob-nav px">
+      <div className="footer-mob-nav">
         <NavLink
           to="/dashboard"
           className={({ isActive }) => (isActive ? 'active-link footer-link-dashboard' : 'footer-link-dashboard')}
@@ -88,18 +88,17 @@ function Footer() {
             <span>Form</span>
           </div>
         </NavLink>
-        <div className="footer-mob-divider"></div>
-
-        <NavLink
+        {/* <div className="footer-mob-divider"></div> */}
+        {/* <NavLink
           to="/stake"
           className={({ isActive }) => (isActive ? 'active-link footer-link-form' : 'footer-link-form')}
         >
           <div className="link-wrapper">
             <FormIcon className="footer-icon" />
             <span>Vault</span>
           </div>
-        </NavLink>
-
+        </NavLink> */}
+        {/* <div className="footer-line"></div> */}
       </div>
     </footer>
   );

diff --git a/frontend/src/components/Footer/footer.css b/frontend/src/components/Footer/footer.css
@@ -30,6 +30,10 @@
   transition: transform 0.3s ease;
 }
 
+.footer-docs > a:last-child {
+  margin-right: 0;
+}
+
 .footer-docs a:hover {
   transform: scale(1.1);
 }
@@ -94,14 +98,13 @@
     height: 70px;
   }
 
-
-
   .footer-mob-nav {
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 15px 25px;
+    justify-content: inherit;
+    padding: 15px;
+    gap: 60px;
     width: 100%;
   }
 
@@ -179,5 +182,5 @@
 }
 
 .footer-link-active {
-  color: #49ABD2 !important;
+  color: #49abd2 !important;
 }
diff --git a/frontend/src/components/MetricCard/MetricCard.jsx b/frontend/src/components/MetricCard/MetricCard.jsx
@@ -8,7 +8,7 @@ export default function MetricCard({ title, value }) {
         <span className="label">{title}</span>
       </div>
       <div className="card-value">
-        <span className="top-card-value">{value}</span>
+        <span className="metric-card-value">{value}</span>
       </div>
     </div>
   );

diff --git a/frontend/src/components/MetricCard/metricCard.css b/frontend/src/components/MetricCard/metricCard.css
@@ -34,7 +34,7 @@
     line-height: 16px;
   }
 
-  .card-value .top-card-value {
+  .card-value .metric-card-value {
     font-size: 20px;
     line-height: 27px;
   }

diff --git a/frontend/src/components/NavigationLinks.jsx b/frontend/src/components/NavigationLinks.jsx
@@ -11,10 +11,10 @@ const NavigationLinks = ({ onNavClick }) => (
     <NavLink to="/dashboard" className={({ isActive }) => (isActive ? 'active-link' : '')} onClick={onNavClick}>
       Dashboard
     </NavLink>
-    <div className="nav-divider"></div>
-    <NavLink to="/stake" className={({ isActive }) => (isActive ? 'active-link' : '')} onClick={onNavClick}>
-      Vault
-    </NavLink>
+    {/* <div className="nav-divider"></div> */}
+    {/* <NavLink to="/stake" className={({ isActive }) => (isActive ? 'active-link' : '')} onClick={onNavClick}> */}
+    {/* Vault */}
+    {/* </NavLink> */}
   </div>
 );
 

diff --git a/frontend/src/components/TableOfContent/TableOfContents.jsx b/frontend/src/components/TableOfContent/TableOfContents.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import "./table_of_content_styles.css";
+import './table_of_content_styles.css';
 
 const TableOfContents = ({ items, defaultActiveId, tabelTitle, headerHeight = 80 }) => {
   const [activeId, setActiveId] = useState(defaultActiveId);
@@ -47,28 +47,28 @@ const TableOfContents = ({ items, defaultActiveId, tabelTitle, headerHeight = 80
   };
 
   return (
-    <div className={"table-of-contents"}>
+    <div className={'table-of-contents'}>
       <div className="toc-title-container">
-        <h3 className={"toc-title"}>{tabelTitle}</h3>
+        <h3 className={'toc-title'}>{tabelTitle}</h3>
       </div>
-      <nav className={"toc-nav"}>
+      <nav className={'toc-nav'}>
         {items.map((item, index) => (
-          <div key={index} className={"toc-item"}>
+          <div key={index} className={'toc-item'}>
             <a
               href={item.link}
               onClick={(e) => handleClick(e, item.link)}
-              className={`${"toc-link"} ${activeId === item.link.replace('#', '') ? 'active' : ''}`}
+              className={`${'toc-link'} ${activeId === item.link.replace('#', '') ? 'active' : ''}`}
             >
               • {item.title}
             </a>
             {item.subItems && (
-              <div className={"toc-subitems"}>
+              <div className={'toc-subitems'}>
                 {item.subItems.map((subItem, subIndex) => (
                   <a
                     key={subIndex}
                     href={subItem.link}
                     onClick={(e) => handleClick(e, subItem.link)}
-                    className={`${"toc-sublink"} ${activeId === subItem.link.replace('#', '') ? 'active' : ''}`}
+                    className={`${'toc-sublink'} ${activeId === subItem.link.replace('#', '') ? 'active' : ''}`}
                   >
                     {subItem.title}
                   </a>