New Ligera (light) Theme (#990)

* Enhanced Light Theme

* New Login Screen

* Fix Appbar for sm screen

* Reverse Gradient

* Fix test error

* Fix color

* Fix Gradient

* Theme color change

* Fix playlist autocomp popup

* Rename theme

* Fix hover icon color

ui/src/layout/AppBar.js

@@ -16,15 +16,20 @@ import ActivityPanel from './ActivityPanel'
 import UserMenu from './UserMenu'
 import config from '../config'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    color: theme.palette.text.secondary,
-  },
-  active: {
-    color: theme.palette.text.primary,
-  },
-  icon: { minWidth: theme.spacing(5) },
-}))
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      color: theme.palette.text.secondary,
+    },
+    active: {
+      color: theme.palette.text.primary,
+    },
+    icon: { minWidth: theme.spacing(5) },
+  }),
+  {
+    name: 'NDAppBar',
+  }
+)
 
 const AboutMenuItem = forwardRef(({ onClick, ...rest }, ref) => {
   const classes = useStyles(rest)

ui/src/layout/SubMenu.js

@@ -10,17 +10,22 @@ import Tooltip from '@material-ui/core/Tooltip'
 import { makeStyles } from '@material-ui/core/styles'
 import { useTranslate } from 'react-admin'
 
-const useStyles = makeStyles((theme) => ({
-  icon: { minWidth: theme.spacing(5) },
-  sidebarIsOpen: {
-    paddingLeft: 25,
-    transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
-  },
-  sidebarIsClosed: {
-    paddingLeft: 0,
-    transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
-  },
-}))
+const useStyles = makeStyles(
+  (theme) => ({
+    icon: { minWidth: theme.spacing(5) },
+    sidebarIsOpen: {
+      paddingLeft: 25,
+      transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
+    },
+    sidebarIsClosed: {
+      paddingLeft: 0,
+      transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
+    },
+  }),
+  {
+    name: 'NDSubMenu',
+  }
+)
 
 const SubMenu = ({
   handleToggle,