feat: App menu and user menu updates

Added border radius, spacing and custom text.

Author: zatteo

src/components/AppsMenu/components/AppItem.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { getAppDisplayName } from 'cozy-client/dist/models/applications'
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 import Buttons from 'cozy-ui/transpiled/react/Buttons'
 import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
 import AppLinker from 'cozy-ui/transpiled/react/AppLinker'
@@ -12,9 +13,21 @@ import stack from 'lib/stack'
 
 import styles from 'styles/apps-menu.styl'
 
+const useStyles = makeStyles(() => {
+  return {
+    text: {
+      lineHeight: '22.5px',
+      fontSize: '12px',
+      fontWeight: 400
+    }
+  }
+})
+
 export const AppItem = ({ app }) => {
   const appName = getAppDisplayName(app)
 
+  const classes = useStyles()
+
   return (
     <AppLinker href={app.href || ''} app={app}>
       {({ onClick, href }) => {
@@ -36,7 +49,7 @@ export const AppItem = ({ app }) => {
                     {...stack.get.iconProps()}
                   />
                 </div>
-                <Typography variant="subtitle1" noWrap>
+                <Typography noWrap className={classes.text}>
                   {appName}
                 </Typography>
               </div>

src/components/AppsMenu/index.jsx

@@ -30,6 +30,9 @@ const AppsMenu = () => {
           open={isOpen}
           onClose={toggleMenu}
           content={<AppsMenuContent />}
+          classes={{
+            paper: 'u-bdrs-7'
+          }}
         />
       ) : (
         <Menu
@@ -46,6 +49,9 @@ const AppsMenu = () => {
             vertical: -10,
             horizontal: 0
           }}
+          classes={{
+            paper: 'u-bdrs-7'
+          }}
         >
           <AppsMenuContent />
         </Menu>

src/components/UserMenu/index.jsx

@@ -43,6 +43,9 @@ const UserMenu = ({ onLogOut }) => {
               diskUsage={diskUsage}
             />
           }
+          classes={{
+            paper: 'u-bdrs-7'
+          }}
         />
       ) : (
         <Menu
@@ -59,6 +62,9 @@ const UserMenu = ({ onLogOut }) => {
             vertical: -10,
             horizontal: 0
           }}
+          classes={{
+            paper: 'u-bdrs-7'
+          }}
         >
           <UserMenuContent
             onLogOut={onLogOut}

src/styles/apps-menu.styl

@@ -7,8 +7,7 @@
 
     +desktop()
         width 15rem
-        margin-left .5rem
-        margin-right .5rem
+        margin 6px 10px
 
 .apps-menu-grid-item-wrapper
     width 33%
@@ -24,7 +23,7 @@
     justify-content center
     align-items center
     text-decoration none
-    gap .2rem // @stylint ignore Property is valid but unknown by stylint which is old and should be replaced
+    gap 4px // @stylint ignore Property is valid but unknown by stylint which is old and should be replaced
     width 100%
 
 .apps-menu-grid-item-icon