Refactor/new menu item (#1448)

* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests

front/src/modules/ui/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -16,9 +16,9 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
   align-items: center;
 
   border-radius: ${({ theme }) => theme.border.radius.sm};
-
   cursor: pointer;
   display: flex;
+
   flex-direction: row;
 
   font-size: ${({ theme }) => theme.font.size.sm};
@@ -29,8 +29,6 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
 
   justify-content: space-between;
 
-  padding: var(--vertical-padding) var(--horizontal-padding);
-
   ${hoverBackground};
 
   ${({ theme, accent }) => {
@@ -43,6 +41,11 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
           }
         `;
       }
+      case 'placeholder': {
+        return css`
+          color: ${theme.font.color.tertiary};
+        `;
+      }
       case 'default':
       default: {
         return css`
@@ -52,7 +55,9 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
     }
   }}
 
+  padding: var(--vertical-padding) var(--horizontal-padding);
   position: relative;
+
   user-select: none;
 
   width: calc(100% - 2 * var(--horizontal-padding));