OpenConceptLab/ocl_issues#1514 | styling apps menu

OpenConceptLab · Mar 11, 2023 · 1777fe3 · 1777fe3
1 parent 72559e5
commit 1777fe3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/components/app/App.scss b/src/components/app/App.scss
@@ -970,15 +970,20 @@ div.divider-highlight-hover:hover {
 }
 .app-menu {
     .app-container {
+        display: flex;
+        a {
+            width: 50%;
+        }
         .app:hover {
             background-color: rgba(0, 0, 0, 0.03);
         }
         .app {
-            border-radius: 5px;
             padding: 10px;
-            margin: 0 6px;
-            width: 120px;
             cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
             &.selected, &.selected:hover {
                 background-color: rgba(51, 115, 170, 0.25);
             }

diff --git a/src/components/common/AppsMenu.jsx b/src/components/common/AppsMenu.jsx
@@ -36,12 +36,12 @@ const AppsMenu = props => {
         </IconButton>
       </Tooltip>
       <PopperGrow open={open.value} anchorRef={anchorRef} handleClose={handleClose}>
-        <div className='app-menu' style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-          <Box className="app-container" display="flex" justifyContent="space-around">
+        <div className='app-menu'>
+          <Box className="app-container" display="inline-block" justifyContent="space-around" style={{width: '100%'}}>
             {
               !hideTermBrowserApp &&
-              <Link to="/" className='no-anchor-styles flex-vertical-center'>
-                <Box className={location.pathname !== "/imports" ? "app selected" : "app"} display="flex" flexDirection="column" alignItems="center">
+              <Link to="/" className='no-anchor-styles'>
+                <Box className={location.pathname !== "/imports" ? "app selected" : "app"} display="inline-block">
                   <MetadataBrowserIcon fontSize="large"/>
                   <Typography style={{lineHeight:"1.2", marginTop:"15px"}} align="center" component="h6">
                     {SITE_TITLE} <br/> TermBrowser
@@ -51,8 +51,8 @@ const AppsMenu = props => {
             }
             {
               !hideImportApp &&
-              <Link to='/imports' className='no-anchor-styles flex-vertical-center' onClick={handleClose}>
-                <Box className={location.pathname == "/imports" ? "app selected" : "app"} display="flex" flexDirection="column" alignItems="center">
+              <Link to='/imports' className='no-anchor-styles' onClick={handleClose}>
+                <Box className={location.pathname == "/imports" ? "app selected" : "app"} display="inline-block">
                   <ImportsIcon fontSize="large"/>
                   <Typography style={{lineHeight:"1.2", marginTop:"15px"}} align="center" component="h6">
                     Bulk <br/> Importer