fix: menu changes

new-lamassu-admin/src/components/layout/Header.js

@@ -57,21 +57,22 @@ const Header = memo(({ tree }) => {
           <nav className={classes.nav}>
             <ul className={classes.ul}>
               {tree.map((it, idx) => (
-                <li key={idx} className={classes.li}>
-                  <NavLink
-                    to={it.route || it.children[0].route}
-                    isActive={match => {
-                      if (!match) return false
-                      setActive(it)
-                      return true
-                    }}
-                    className={classnames(classes.link, classes.whiteLink)}
-                    activeClassName={classes.activeLink}>
+                <NavLink
+                  key={idx}
+                  to={it.route || it.children[0].route}
+                  isActive={match => {
+                    if (!match) return false
+                    setActive(it)
+                    return true
+                  }}
+                  className={classnames(classes.link, classes.whiteLink)}
+                  activeClassName={classes.activeLink}>
+                  <li className={classes.li}>
                     <span className={classes.forceSize} forcesize={it.label}>
                       {it.label}
                     </span>
-                  </NavLink>
-                </li>
+                  </li>
+                </NavLink>
               ))}
             </ul>
           </nav>

new-lamassu-admin/src/components/layout/Header.styles.js

@@ -39,24 +39,17 @@ export default {
   },
   ul: {
     display: 'flex',
-    marginBottom: spacer * 1,
-    paddingLeft: spacer * 4.5
+    paddingLeft: spacer * 4.5,
+    height: spacer * 7,
+    margin: 0
   },
   li: {
-    extend: tl2,
-    height: spacer * 3,
+    // extend: tl2,
+    // height: spacer * 7,
     listStyle: 'none',
     color: white,
-    padding: [[0, spacer * 2.5]]
-  },
-  link: {
-    extend: p,
-    textDecoration: 'none',
-    border: 'none',
-    color: white,
-    backgroundColor: 'transparent',
+    margin: [[spacer * 2.5, spacer * 2.5, 0, spacer * 2.5]],
     '&:hover': {
-      extend: tl2,
       color: white
     },
     '&:hover::after': {
@@ -78,6 +71,34 @@ export default {
       transition: [['all', '0.2s', 'cubic-bezier(0.95, 0.1, 0.45, 0.94)']]
     }
   },
+  link: {
+    extend: p,
+    textDecoration: 'none',
+    border: 'none',
+    color: white,
+    backgroundColor: 'transparent'
+    // '&:hover': {
+    //   color: white
+    // },
+    // '&:hover::after': {
+    //   width: '50%',
+    //   marginLeft: '-25%'
+    // },
+    // position: 'relative',
+    // '&:after': {
+    //   content: '""',
+    //   display: 'block',
+    //   background: white,
+    //   width: 0,
+    //   height: 4,
+    //   left: '50%',
+    //   marginLeft: 0,
+    //   bottom: -8,
+    //   position: 'absolute',
+    //   borderRadius: 1000,
+    //   transition: [['all', '0.2s', 'cubic-bezier(0.95, 0.1, 0.45, 0.94)']]
+    // }
+  },
   forceSize: {
     display: 'inline-block',
     textAlign: 'center',
@@ -91,9 +112,8 @@ export default {
     }
   },
   activeLink: {
-    extend: tl2,
     color: white,
-    '&::after': {
+    '& li::after': {
       width: '50%',
       marginLeft: '-25%'
     }

new-lamassu-admin/todo.md

@@ -1,7 +1,3 @@
-Main menu:
-- do not change fonts on hover in the main menu
-- make the clickable button bigger, not just text
-
 Overall:
 - caching the page
 - validation is bad rn, negatives being allowed
@@ -81,7 +77,6 @@ Compliance:
 - Currently admin only handles { type: 'amount', direction: 'both' }
 - Sanctions should have more care in customers.js, currently just looking if is active as if old config
 
-
 Ideas
   - Transactions could have a link to the customer
   - Transactions table on customer should have a link to "transactions"