Tweaked styles on login modal, sign up button, and new project popover

app/web/src/App.tsx

@@ -4,6 +4,8 @@ import GoTrue from 'gotrue-js'
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
+import { createMuiTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 import ReactGA from 'react-ga'
 
 ReactGA.initialize(process.env.GOOGLE_ANALYTICS_ID)
@@ -19,12 +21,25 @@ const goTrueClient = new GoTrue({
   setCookie: true,
 })
 
+const theme = createMuiTheme({
+  palette: {
+    type: 'dark',
+    primary: {
+      light: '#C99DFF',
+      main: '#A663FA',
+      dark: '#3B0480',
+    }
+  },
+})
+
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider>
       <AuthProvider client={goTrueClient} type="goTrue">
         <RedwoodApolloProvider>
+          <ThemeProvider theme={theme}>
             <Routes />
+          </ThemeProvider>
         </RedwoodApolloProvider>
       </AuthProvider>
     </RedwoodProvider>

app/web/src/components/InputTextForm/InputTextForm.tsx

@@ -8,20 +8,15 @@ const InputText = ({ type = 'text', className, name, validation }) => {
   } = useFormContext()
   return (
     <>
-      <div className={getActiveClasses('relative inline-block', className)}>
+      <div className={getActiveClasses('relative mt-5', className)}>
         <FieldError
-          className="absolute -my-4 text-sm text-red-500 font-ropa-sans"
+          className="absolute -my-5 text-sm text-red-500 font-ropa-sans"
           name={name}
         />
-        <div
-          className={getActiveClasses(
-            'absolute inset-0 mb-2 rounded bg-gray-200 shadow-inner',
-            { 'border border-red-500': errors[name] }
-          )}
-        />
         <TextField
           className={getActiveClasses(
-            'pl-2 pt-1 text-indigo-800 font-medium mb-px pb-px bg-transparent relative w-full'
+            'text-ch-gray-300 rounded-none bg-ch-gray-600 border border-transparent focus:border-ch-gray-300 px-2 py-1 relative w-full',
+            { 'border border-red-600': errors[name] }
           )}
           name={name}
           readOnly={false}

app/web/src/components/LoginModal/LoginModal.tsx

@@ -55,8 +55,16 @@ const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
     }
   }
   return (
-    <Dialog open={open} onClose={onClose} className={classes.root}>
+    <Dialog
-      <div className="bg-gray-100 max-w-2xl rounded-lg shadow-lg">
+      open={open}
+      onClose={onClose}
+      className={classes.root}
+      PaperProps={{
+        style: {
+          backgroundColor: 'transparent',
+        },
+      }}>
+      <div className="bg-ch-gray-700 max-w-2xl rounded-lg shadow-lg text-ch-gray-300">
         <Tabs
           value={tab}
           onChange={onTabChange}
@@ -89,8 +97,8 @@ const LoginModal = ({ open, onClose, shouldStartWithSignup = false }) => {
 
 const Field = ({ name, type = 'text', validation }) => (
   <>
-    <span className="capitalize text-gray-500 text-sm align-middle my-3">
+    <span className="capitalize text-ch-gray-300 text-right text-sm align-middle my-3">
-      {name}:
+      {name}
     </span>
     <InputTextForm
       type={type}
@@ -102,8 +110,8 @@ const Field = ({ name, type = 'text', validation }) => (
 )
 
 const HeroButton = ({ text }) => (
-  <Submit className="bg-texture bg-purple-800 py-6 w-full flex items-center justify-center rounded-b border border-indigo-300 border-opacity-0 hover:border-opacity-100 hover:shadow-xl">
+  <Submit className="bg-texture bg-ch-purple-400 bg-opacity-50 py-6 w-full flex items-center justify-center rounded-b border border-indigo-300 border-opacity-0 hover:bg-opacity-80 hover:shadow-xl">
-    <span className="font-bold text-2xl text-indigo-200">{text}</span>
+    <span className="text-3xl text-ch-purple-600">{text}</span>
   </Submit>
 )
 
@@ -129,14 +137,15 @@ const SignInForm = ({ onSubmitSignIn }) => (
           type="password"
           validation={{ required: true }}
         />
-      </div>
+        <div></div>
         <Link
           to={routes.accountRecovery()}
-        className="underline text-sm text-gray-500 block text-center"
+          className="underline text-sm text-ch-gray-400 block mt-4"
         >
           forgot your password?
         </Link>
       </div>
+    </div>
     <HeroButton text="Sign In" />
   </Form>
 )
@@ -174,22 +183,22 @@ const SignUpForm = ({ onSubmitSignUp, checkBox, setCheckBox, onClose }) => (
           type="password"
           validation={{ required: true }}
         />
-      </div>
-      <div className="flex pt-4">
         <input
           type="checkbox"
+          id="signup-toc"
+          className="justify-self-end mr-2"
           checked={checkBox}
           onChange={() => setCheckBox(!checkBox)}
         />{' '}
-        <span className="pl-4 text-gray-500 text-sm max-w-sm">
+        <label htmlFor="signup-toc" className="text-ch-gray-400 text-sm mt-4 cursor-pointer">
           Stay up-to-date with CadHub's progress with the founder's (
           <OutBound className="underline" to="https://twitter.com/IrevDev">
             Kurt's
           </OutBound>
           ) newsletter
-        </span>
+        </label>
       </div>
-      <span className="text-sm text-gray-500 block text-center pt-4">
+      <span className="text-sm text-ch-gray-400 block text-center pt-4">
         Use of CadHub requires you to abide by our{' '}
         <Link
           onClick={onClose}

app/web/src/components/NavPlusButton/NavPlusButton.tsx

@@ -1,39 +1,53 @@
 import { Link, routes } from '@redwoodjs/router'
 import Svg from 'src/components/Svg/Svg'
 import { Popover } from '@headlessui/react'
-import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
+import CadPackage, {
+  CadPackageType,
+} from 'src/components/CadPackage/CadPackage'
 
 const menuOptions: {
   name: string
   sub: string
+  dotClasses: string
+  bgClasses: string
   ideType: CadPackageType
 }[] = [
   {
     name: 'OpenSCAD',
     sub: 'beta',
+    bgClasses: 'bg-yellow-800',
+    dotClasses: 'bg-yellow-200',
     ideType: 'openscad',
   },
-  { name: 'CadQuery', sub: 'beta', ideType: 'cadquery' },
+  {
+    name: 'CadQuery',
+    sub: 'beta',
+    bgClasses: 'bg-ch-blue-700',
+    dotClasses: 'bg-blue-800',
+    ideType: 'cadquery'
+  },
   // { name: 'JSCAD', sub: 'alpha', ideType: 'jscad' }, // TODO #422, add jscad to db schema when were ready to enable saving of jscad projects
 ]
 
 const NavPlusButton: React.FC = () => {
   return (
     <Popover className="relative outline-none w-full h-full">
-      <Popover.Button className="h-full w-full outline-none hover:bg-ch-gray-550 border rounded-full">
+      <Popover.Button className="h-full w-full outline-none hover:bg-ch-gray-550 border-ch-gray-400 border-2 rounded-full">
-        <Svg name="plus" className="text-gray-200" />
+        <Svg name="plus" className="text-ch-gray-300" />
       </Popover.Button>
 
-      <Popover.Panel className="absolute z-10 right-0">
+      <Popover.Panel className="absolute z-10 right-0 bg-ch-gray-700 mt-4 px-3 py-2 rounded shadow-md overflow-hidden text-ch-gray-300">
-        <ul className="bg-gray-200 mt-4 rounded shadow-md overflow-hidden">
+        <p className="text-lg">New Project</p>
-          {menuOptions.map(({ name, sub, ideType }) => (
+        <ul className="">
+          {menuOptions.map(({ name, sub, ideType, bgClasses, dotClasses }) => (
             <li
               key={name}
-              className="px-4 py-2 hover:bg-gray-400 text-gray-800"
+              className={bgClasses+" px-4 py-1 my-4 bg-opacity-30 hover:bg-opacity-70 grid grid-flow-col-dense items-center gap-2"}
             >
+              <div className={dotClasses + " w-5 h-5 rounded-full"}></div>
               <Link to={routes.draftProject({ cadPackage: ideType })}>
                 <div>{name}</div>
-                <div className="text-xs text-gray-600 font-light">{sub}</div>
+                <div className="text-xs text-ch-gray-400 font-light">{sub}</div>
               </Link>
             </li>
           ))}

app/web/src/layouts/MainLayout/MainLayout.js

@@ -125,7 +125,7 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
           <ul className="flex items-center">
             <li
               className={getActiveClasses(
-                'mr-4 md:mr-8 h-8 w-8 md:h-10 md:w-10 rounded-full border-2 border-indigo-300 flex items-center justify-center'
+                'mr-4 md:mr-8 h-8 w-8 md:h-10 md:w-10 flex items-center justify-center'
               )}
             >
               <NavPlusButton />
@@ -150,10 +150,10 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
               <li>
                 <a
                   href="#"
-                  className="text-indigo-200 font-semibold underline mr-2"
+                  className="text-ch-gray-300 mr-2 px-4 py-2 border-2 border-ch-gray-400 rounded-full hover:bg-ch-gray-600"
                   onClick={recordedLogin}
                 >
-                  Sign in/up
+                  Sign In/Up
                 </a>
               </li>
             )}