account menu

frontend/src/components/AccountIconButton.js

@@ -6,7 +6,6 @@ import {
   MenuList,
   MenuItem,
   MenuGroup,
-  MenuDivider,
   IconButton,
   chakra,
   Portal,
@@ -33,20 +32,24 @@ const AccountIconButton = (props) => {
       />
       <Portal>
         <MenuList
-          zIndex="dropdown"
-          width={["100vw", "100vw", "18rem", "20rem", "22rem", "24rem"]}
-          borderRadius={0}
-          color="black"
+          zIndex={100}
+          bg="#1A1D22"
+          w="auto"
+          minW="auto"
+          borderRadius="10px"
+          p="20px 20px 10px 20px"
+          border="1px solid white"
         >
           <MenuGroup>
             <RouterLink href="/account/security" passHref>
-              <MenuItem>Security</MenuItem>
+              <div className="desktop-menu-item">Security</div>
             </RouterLink>
             <RouterLink href="/account/tokens" passHref>
-              <MenuItem>API tokens</MenuItem>
+              <div className="desktop-menu-item" title="API tokens">
+                API tokens
+              </div>
             </RouterLink>
           </MenuGroup>
-          <MenuDivider />
           {ui.isMobileView &&
             SITEMAP.map((item, idx) => {
               if (item.type !== PAGETYPE.FOOTER_CATEGORY && item.children) {
@@ -65,14 +68,14 @@ const AccountIconButton = (props) => {
                 );
               }
             })}
-          <MenuDivider />
-          <MenuItem
+          <div
+            className="desktop-menu-item"
             onClick={() => {
               logout();
             }}
           >
             Logout
-          </MenuItem>
+          </div>
         </MenuList>
       </Portal>
     </Menu>

frontend/styles/styles.css

@@ -267,3 +267,32 @@ code {
     linear-gradient(to right, transparent 6px, white 6px),
     linear-gradient(to bottom, #444 1px, transparent 1px);
 }
+
+
+.desktop-menu-item {
+  color: white;
+  font-weight: 400;
+  padding-left: 0px;
+  padding-right: 0px;
+  margin-bottom: 10px;
+  height: 22px;
+  cursor: pointer;
+}
+
+.desktop-menu-item:hover {
+  color: #F56646;
+  font-weight: 700;
+}
+
+/* to dont change div size when bolding text. 
+Need 'title' attr in the longest item's tag*/
+.desktop-menu-item::after {
+  display: block;
+  content: attr(title);
+  font-weight: 700;
+  height: 1px;
+  color: transparent;
+  overflow: hidden;
+  visibility: hidden;
+}
+