style: Menu component

packages/ui/src/2_molecules/Menu/Menu.module.css

@@ -0,0 +1,3 @@
+.menu {
+  @apply overflow-x-auto rounded bg-gray-80 transition-colors whitespace-nowrap p-1 font-roboto text-gray-30 text-xs font-semibold;
+}

packages/ui/src/2_molecules/Menu/Menu.tsx

@@ -1,10 +1,17 @@
 import React, { ReactNode } from 'react';
 
+import classNames from 'classnames';
+
+import styles from './Menu.module.css';
+
+export * from './components/MenuItem/MenuItem';
+export * from './components/MenuSeparator/MenuSeparator';
+
 type MenuProps = {
   className?: string;
   children?: ReactNode;
 };
 
 export const Menu: React.FC<MenuProps> = ({ className, children }) => (
-  <ul className={className}>{children}</ul>
+  <ul className={classNames(className, styles.menu)}>{children}</ul>
 );

packages/ui/src/2_molecules/Menu/components/MenuItem/MenuItem.module.css

@@ -1,8 +1,14 @@
 .host {
   @apply list-none;
 }
+.host:last-child .button{
+  @apply mb-0;
+}
+.host:first-child .button{
+  @apply mt-0;
+}
 .host .button {
-  @apply flex items-center w-full px-5 py-2.5 text-gray-8 text-left no-underline rounded hover:text-sov-white hover:bg-gray-3 font-medium opacity-70 hover:opacity-100 leading-none;
+  @apply flex text-left items-center w-full px-2.5 py-1 cursor-pointer rounded transition-colors my-1;
 
   @media (min-width: 1536px) {
     @apply px-4;
@@ -14,13 +20,19 @@
 }
 
 .host .button.active {
-  @apply text-sov-white bg-gray-3 font-bold opacity-100;
+  @apply opacity-100;
+}
+
+.host .button.active,
+.host .button:not(.disabled):hover {
+  @apply bg-gray-70 text-gray-10;
 }
 
 .host .button .text {
-  @apply text-sm font-medium leading-none text-sov-white flex items-center;
+  @apply text-sm font-semibold leading-none text-gray-10 flex items-center;
+  line-height: 25px;
 }
 
 .host .button .label {
-  @apply text-gray-8 text-tiny inline-block leading-none pointer-events-none;
+  @apply text-gray-30 font-normal text-tiny inline-block leading-none pointer-events-none;
 }

packages/ui/src/2_molecules/Menu/components/MenuItem/MenuItem.tsx

@@ -72,13 +72,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
             <div className="block leading-none">
               <div className="flex items-center">
                 {icon && <Icon icon={icon} className="mr-2" />}
-                <span
-                  className={classNames(styles.text, {
-                    'mb-1': !!label,
-                  })}
-                >
-                  {text}
-                </span>
+                <span className={classNames(styles.text)}>{text}</span>
                 <img
                   src={iconNewTab}
                   className="ml-2 h-5"
@@ -103,13 +97,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
             <div className="block leading-none">
               <div className="flex items-center">
                 {icon && <Icon icon={icon} className="mr-2" />}
-                <span
-                  className={classNames(styles.text, {
-                    'mb-1': !!label,
-                  })}
-                >
-                  {text}
-                </span>
+                <span className={classNames(styles.text)}>{text}</span>
               </div>
               {label && <span className={styles.label}>{label}</span>}
             </div>
@@ -130,13 +118,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
           <div className="block leading-none">
             <div className="flex items-center">
               {icon && <Icon icon={icon} className="mr-2" />}
-              <span
-                className={classNames(styles.text, {
-                  'mb-1': !!label,
-                })}
-              >
-                {text}
-              </span>
+              <span className={classNames(styles.text)}>{text}</span>
             </div>
             {label && <span className={styles.label}>{label}</span>}
           </div>

packages/ui/src/2_molecules/Menu/components/MenuSeparator/MenuSeparator.module.css

@@ -1,11 +1,11 @@
 .host {
-  @apply flex flex-row self-center w-full text-sm leading-snug px-0 font-extralight text-center mt-2 list-none;
+  @apply flex flex-row self-center w-full text-sm leading-snug px-0 font-extralight text-center my-1 list-none;
 }
 .host:after,
 .host:before {
-  @apply flex-1 border-b border-solid border-current m-auto;
+  @apply flex-1 border-b border-solid border-gray-10 m-auto;
 
-  content: "";
+  content: '';
 }
 
 .host:not(:empty):before {
@@ -14,7 +14,3 @@
 .host:not(:empty):after {
   @apply ml-2.5;
 }
-
-.host:empty {
-  @apply mb-2;
-}