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

2021-09-11 17:57:00 -04:00
parent ec9f9d241e
commit a51991ef0d
5 changed files with 72 additions and 39 deletions
--- a/app/web/src/App.tsx
+++ b/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>
-          <Routes />
+          <ThemeProvider theme={theme}>
+            <Routes />
+          </ThemeProvider>
        </RedwoodApolloProvider>
      </AuthProvider>
    </RedwoodProvider>
--- a/app/web/src/components/InputTextForm/InputTextForm.tsx
+++ b/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}
--- a/app/web/src/components/LoginModal/LoginModal.tsx
+++ b/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}>
-      <div className="bg-gray-100 max-w-2xl rounded-lg shadow-lg">
+    <Dialog
+      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">
-      {name}:
+    <span className="capitalize text-ch-gray-300 text-right text-sm align-middle my-3">
+      {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">
-    <span className="font-bold text-2xl text-indigo-200">{text}</span>
+  <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="text-3xl text-ch-purple-600">{text}</span>
  </Submit>
 )

@@ -129,13 +137,14 @@ const SignInForm = ({ onSubmitSignIn }) => (
          type="password"
          validation={{ required: true }}
        />
+        <div></div>
+        <Link
+          to={routes.accountRecovery()}
+          className="underline text-sm text-ch-gray-400 block mt-4"
+        >
+          forgot your password?
+        </Link>
      </div>
-      <Link
-        to={routes.accountRecovery()}
-        className="underline text-sm text-gray-500 block text-center"
-      >
-        forgot your password?
-      </Link>
    </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}
--- a/app/web/src/components/NavPlusButton/NavPlusButton.tsx
+++ b/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">
-        <Svg name="plus" className="text-gray-200" />
+      <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-ch-gray-300" />
      </Popover.Button>

-      <Popover.Panel className="absolute z-10 right-0">
-        <ul className="bg-gray-200 mt-4 rounded shadow-md overflow-hidden">
-          {menuOptions.map(({ name, sub, ideType }) => (
+      <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">
+        <p className="text-lg">New Project</p>
+        <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>
          ))}
--- a/app/web/src/layouts/MainLayout/MainLayout.js
+++ b/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>
            )}