Merge pull request #495 from rvpanoz/feat/app-theme

Feat/app theme
rvpanoz · Oct 12, 2020 · 85e6181 · 85e6181
2 parents 2d460b7 + 8fb6474
commit 85e6181
Show file tree

Hide file tree

Showing 46 changed files with 87 additions and 98 deletions.
diff --git a/README.md b/README.md
@@ -38,10 +38,13 @@ Luna was created with main purpose to provide a flexible and modern UI for npm d
 
 <div style="display: flex; flex-wrap: wrap;padding: 0 4px;">
   <div style="flex: 25%;max-width: 25%;padding: 0 4px;">
-    <img style="margin-top: 8px; vertical-align: middle;" title="luna-1" src="./media/images/luna-1.png"/>
+    <img style="margin-top: 8px; vertical-align: middle;" title="luna-1" src="./media/images/luna-screen-1.png"/>
   </div>
   <div style="flex: 25%;max-width: 25%;padding: 0 4px;">
-    <img style="margin-top: 8px; vertical-align: middle;" title="luna-2" src="./media/images/luna-2.png"/>
+    <img style="margin-top: 8px; vertical-align: middle;" title="luna-2" src="./media/images/luna-screen-2.png"/>
+  </div>
+  <div style="flex: 25%;max-width: 25%;padding: 0 4px;">
+    <img style="margin-top: 8px; vertical-align: middle;" title="luna-2" src="./media/images/luna-screen-3.png"/>
   </div>
 </div>
 
@@ -50,11 +53,11 @@ Luna was created with main purpose to provide a flexible and modern UI for npm d
 The Renderer Process architecture:
 
 - Action (Event) driven nature
-- The IO Management, Business Logic Management and Predictable Application State Management processors (middlewares) 
+- The IO Management, Business Logic Management and Predictable Application State Management processors (middlewares)
   are subscribers of the application action stream.
 - The IO Management and Business Logic Management are consumers and producers of actions.
 - The Predictable State Management is just a consumer of actions
-- The views are listeners of the predictable state and they are re rendered whenever the predictable state changes 
+- The views are listeners of the predictable state and they are re rendered whenever the predictable state changes
   and they produce actions upon the user interaction (clicks)
 
 <div style="display: flex; flex-wrap: wrap;padding: 0 4px;">

diff --git a/app/components/common/AppLogo.js b/app/components/common/AppLogo.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import anime from 'animejs';
 import cn from 'classnames';
+
 import styles from './styles/appLogo';
 
 const AppLogo = ({ classes, className }) => {
@@ -42,7 +43,7 @@ const AppLogo = ({ classes, className }) => {
                     classes.logo_animation__logo_letter_svg,
                     classes.logo_animation__bounce,
                     classes.rot,
-                    classes.errorColor
+                    classes.whiteColor
                   )}
                   viewBox="0 0 150 250"
                   width="20"
@@ -60,7 +61,7 @@ const AppLogo = ({ classes, className }) => {
                   className={cn(
                     classes.logo_animation__bounce,
                     classes.flip,
-                    classes.primaryColor
+                    classes.whiteColor
                   )}
                   viewBox="0 0 150 250"
                   width="20"
@@ -77,7 +78,7 @@ const AppLogo = ({ classes, className }) => {
                 <svg
                   className={cn(
                     classes.logo_animation__bounce,
-                    classes.warningColor
+                    classes.whiteColor
                   )}
                   viewBox="0 0 150 250"
                   width="30"
@@ -94,7 +95,7 @@ const AppLogo = ({ classes, className }) => {
                 <svg
                   className={cn(
                     classes.logo_animation__bounce,
-                    classes.secondaryColor
+                    classes.whiteColor
                   )}
                   viewBox="0 0 150 250"
                   width="20"

diff --git a/app/components/common/HelperText.js b/app/components/common/HelperText.js
@@ -15,7 +15,7 @@ const HelperText = ({
   actionHandler,
   actionDisabled,
 }) => (
-  <div className={classes.containerColumn}>
+  <div className={classes.container}>
     <Typography
       color="textSecondary"
       variant="subtitle1"
@@ -37,7 +37,6 @@ const HelperText = ({
         disabled={actionDisabled}
         color={color}
         className={classes.button}
-        variant="contained"
         onClick={actionHandler}
       >
         {actionText}

diff --git a/app/components/common/styles/appLogo.js b/app/components/common/styles/appLogo.js
@@ -5,9 +5,10 @@ const styles = (theme) => ({
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    width: '100%',
     maxWidth: 290,
-    padding: theme.spacing(2),
+    height: 64,
+    padding: theme.spacing(1),
+    backgroundColor: lighten(theme.palette.secondary.main, 0.25),
   },
   logo_animation_wrapper: {
     position: 'relative',
@@ -56,7 +57,7 @@ const styles = (theme) => ({
     fillRule: 'evenodd',
   },
   logo_animation__line: {
-    fill: '#fff',
+    fill: lighten(theme.palette.secondary.main, 0.25),
     fillRule: 'evenodd',
     strokeLinecap: 'square',
     strokeWidth: 50,
@@ -66,17 +67,8 @@ const styles = (theme) => ({
     stroke: 'currentColor',
     strokeWidth: 40,
   },
-  primaryColor: {
-    stroke: lighten(theme.palette.primary.main, 0.2),
-  },
-  secondaryColor: {
-    stroke: lighten(theme.palette.secondary.main, 0.2),
-  },
-  warningColor: {
-    stroke: lighten(theme.palette.error.main, 0.2),
-  },
-  errorColor: {
-    stroke: lighten(theme.palette.error.main, 0.2),
+  whiteColor: {
+    stroke: lighten(theme.palette.common.white, 0.1),
   },
 });
 

diff --git a/app/components/common/styles/helperText.js b/app/components/common/styles/helperText.js
@@ -2,7 +2,7 @@ import { lighten } from '@material-ui/core/styles/colorManipulator';
 import { defaultFont, grayColor } from 'styles/variables';
 
 const styles = (theme) => ({
-  containerColumn: {
+  container: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',

diff --git a/app/components/layout/styles.js b/app/components/layout/styles.js
@@ -1,4 +1,5 @@
 import { drawerWidth } from 'styles/variables';
+import { lighten } from '@material-ui/core';
 
 const styles = (theme) => ({
   root: {
@@ -16,8 +17,7 @@ const styles = (theme) => ({
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
-    paddingLeft: theme.spacing(6),
-    paddingTop: theme.spacing(1),
+    paddingLeft: theme.spacing(8) + 1,
   },
   topBar: {
     width: '100%',

diff --git a/app/components/navigation/styles.js b/app/components/navigation/styles.js
@@ -3,7 +3,7 @@ import { flexContainer } from 'styles/variables';
 const styles = (theme) => ({
   root: {
     width: '100%',
-    paddingTop: theme.spacing(1) + 2,
+    paddingTop: theme.spacing(1) - 3,
   },
   bar: {
     display: 'flex',

diff --git a/app/components/sidebar/Sidebar.js b/app/components/sidebar/Sidebar.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { string, objectOf, func, bool, object, arrayOf } from 'prop-types';
 import { withStyles } from '@material-ui/styles';
-
 import { AppLogo } from 'components/common';
 import Tabs from './tabs/Tabs';
 import { PackagesTab, ActionsTab, HistoryTab } from './tabs';

diff --git a/app/components/sidebar/styles.js b/app/components/sidebar/styles.js
@@ -1,3 +1,4 @@
+import { lighten } from '@material-ui/core';
 import { drawerWidth } from 'styles/variables';
 
 const styles = (theme) => ({
@@ -12,6 +13,7 @@ const styles = (theme) => ({
   },
   drawer: {
     width: drawerWidth,
+    borderRight: 0,
   },
 });
 

diff --git a/app/components/sidebar/tabs/History.js b/app/components/sidebar/tabs/History.js
@@ -42,11 +42,6 @@ const HistoryTab = ({ classes, directories, onClick }) => (
               primary={
                 <Typography className={classes.label}>{dir.name}</Typography>
               }
-              secondary={
-                <Typography variant="caption" className={classes.directory}>
-                  {directory}
-                </Typography>
-              }
             />
             <ListItemSecondaryAction>
               <Tooltip title={iMessage('title', 'loadDirectory')}>

diff --git a/app/components/sidebar/tabs/Packages.js b/app/components/sidebar/tabs/Packages.js
@@ -23,12 +23,9 @@ const PackagesTab = ({ classes, items, loading, updatedAt, fromSearch }) => (
       </Typography>
       <Divider />
       <div className={classes.tab}>
-        <AppLoader
-          relative
-          mini
-          loading={loading && !fromSearch}
-          className={classes.loader}
-        >
+        {loading && !fromSearch ? (
+          <div className={classes.loading}>Loading..</div>
+        ) : (
           <List disablePadding>
             {items &&
               items.map((item) => (
@@ -53,7 +50,7 @@ const PackagesTab = ({ classes, items, loading, updatedAt, fromSearch }) => (
                 </ListItem>
               ))}
           </List>
-        </AppLoader>
+        )}
       </div>
     </CardContent>
     <Divider />

diff --git a/app/components/sidebar/tabs/styles/history.js b/app/components/sidebar/tabs/styles/history.js
@@ -21,7 +21,7 @@ const styles = (theme) => ({
     maxWidth: 190,
   },
   listItem: {
-    padding: 0,
+    paddingTop: theme.spacing(1),
     paddingLeft: theme.spacing(1) + 4,
     margin: 0,
   },

diff --git a/app/components/sidebar/tabs/styles/packages.js b/app/components/sidebar/tabs/styles/packages.js
@@ -6,7 +6,7 @@ const styles = (theme) => ({
     ...flexContainer,
   },
   card: {
-    width: 260,
+    width: 266,
   },
   cardTitle: {
     ...defaultFont,
@@ -31,7 +31,13 @@ const styles = (theme) => ({
   },
   tab: {
     width: '100%',
-    minHeight: 150,
+    minHeight: 115,
+  },
+  loading: {
+    ...defaultFont,
+    paddingTop: theme.spacing(1),
+    fontSize: 14,
+    color: darken(grayColor, 0.5),
   },
   listItem: {
     margin: 0,

diff --git a/app/components/sidebar/tabs/styles/tabs.js b/app/components/sidebar/tabs/styles/tabs.js
@@ -3,10 +3,10 @@ import { defaultFont } from 'styles/variables';
 const styles = (theme) => ({
   root: {
     width: '100%',
-    backgroundColor: theme.palette.background.paper,
+    maxWidth: 275,
   },
   indicator: {
-    backgroundColor: theme.palette.secondary.light,
+    backgroundColor: theme.palette.secondary.main,
   },
   tabLabel: {
     ...defaultFont,

diff --git a/app/components/topbar/TopBar.js b/app/components/topbar/TopBar.js
@@ -2,13 +2,12 @@ import React from 'react';
 import { objectOf, func, bool, arrayOf, object, string } from 'prop-types';
 import { withStyles } from '@material-ui/styles';
 import { AppBar, Toolbar, Tooltip, Badge, IconButton } from '@material-ui/core';
-import NotificationsActiveIcon from '@material-ui/icons/NotificationsActiveOutlined';
-import NotificationsIcon from '@material-ui/icons/NotificationsOutlined';
-import SettingsIcon from '@material-ui/icons/SettingsOutlined';
-import AddIcon from '@material-ui/icons/AddOutlined';
-import ArchiveIcon from '@material-ui/icons/ArchiveOutlined';
-import SecurityIcon from '@material-ui/icons/SecurityOutlined';
-import LocalHospitalIcon from '@material-ui/icons/LocalHospitalOutlined';
+import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import SettingsIcon from '@material-ui/icons/Settings';
+import AddIcon from '@material-ui/icons/Add';
+import ArchiveIcon from '@material-ui/icons/Archive';
+import SecurityIcon from '@material-ui/icons/Security';
 
 import { iMessage } from 'commons/utils';
 import SearchBox from './SearchBox';
@@ -54,12 +53,7 @@ const Topbar = ({
   onShowSettings,
   setActivePage,
 }) => (
-  <AppBar
-    className={classes.topbar}
-    elevation={0}
-    position="static"
-    color="inherit"
-  >
+  <AppBar className={classes.topbar} elevation={0} position="static">
     <Toolbar disableGutters>
       <div className={classes.actions}>
         <Toolbar
@@ -72,7 +66,12 @@ const Topbar = ({
             classes={classes}
             title={iMessage('title', 'loadDirectory')}
             onClick={onLoadDirectory}
-            icon={<ArchiveIcon className={classes.icon} />}
+            icon={
+              <ArchiveIcon
+                className={classes.icon}
+                shapeRendering="crispEdges"
+              />
+            }
             disabled={loading}
           />
 
@@ -84,14 +83,6 @@ const Topbar = ({
             disabled={loading}
           />
 
-          <ToolbarAction
-            classes={classes}
-            title={iMessage('info', 'npmDoctorInfo')}
-            onClick={() => setActivePage('doctor')}
-            icon={<LocalHospitalIcon className={classes.icon} />}
-            disabled={loading}
-          />
-
           <Tooltip title={iMessage('title', 'notifications')}>
             <div>
               <IconButton
@@ -121,13 +112,15 @@ const Topbar = ({
       </div>
       <div className={classes.flexGrow} />
       <SearchBox />
-      <IconButton
-        className={classes.button}
-        color="inherit"
-        onClick={onShowSettings}
-      >
-        <SettingsIcon />
-      </IconButton>
+      <Tooltip title={iMessage('title', 'settings')}>
+        <IconButton
+          className={classes.button}
+          color="inherit"
+          onClick={onShowSettings}
+        >
+          <SettingsIcon />
+        </IconButton>
+      </Tooltip>
     </Toolbar>
   </AppBar>
 );

diff --git a/app/components/topbar/TopBarContainer.js b/app/components/topbar/TopBarContainer.js
@@ -48,7 +48,6 @@ const AppTopBar = ({ classes, className }) => {
     rowsPerPage,
   } = useMappedState(mapState);
   const dispatch = useDispatch();
-
   const [state, setState] = useState({
     view: '',
     dialogTitle: '',
@@ -79,7 +78,7 @@ const AppTopBar = ({ classes, className }) => {
     };
 
     const dialogHandler = ({ filePaths }) => {
-      if (!filePaths || !filePaths.lenght) {
+      if (!filePaths || !filePaths.length) {
         return;
       }
 
@@ -144,9 +143,9 @@ const AppTopBar = ({ classes, className }) => {
         onShowSettings={() =>
           setState({
             ...state,
+            view: 'settings',
             dialogOpen: true,
             dialogTitle: iMessage('title', 'settings'),
-            view: 'settings',
           })
         }
       />