fix: menu changes

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

@@ -57,8 +57,8 @@ const Header = memo(({ tree }) => {
           <nav className={classes.nav}>
             <ul className={classes.ul}>
               {tree.map((it, idx) => (
-                <li key={idx} className={classes.li}>
                 <NavLink
+                  key={idx}
                   to={it.route || it.children[0].route}
                   isActive={match => {
                     if (!match) return false
@@ -67,11 +67,12 @@ const Header = memo(({ tree }) => {
                   }}
                   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>
+                </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"