feat: improve ui for input components

slater-notes · Apr 27, 2021 · 1d91dfa · 1d91dfa
1 parent a02c37e
commit 1d91dfa
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 15 deletions.
diff --git a/src/components/Input/SingleLineInput.tsx b/src/components/Input/SingleLineInput.tsx
@@ -0,0 +1,31 @@
+import { makeStyles, TextField, TextFieldProps } from '@material-ui/core';
+
+const SingleLineInput = (props: TextFieldProps) => {
+  const { label, input } = useStyles();
+
+  return (
+    <div>
+      {props.label && (
+        <label className={label} htmlFor={props.name}>
+          {props.label}
+        </label>
+      )}
+      <TextField id={props.name} {...props} className={input} label={undefined} />
+    </div>
+  );
+};
+
+const useStyles = makeStyles((theme) => ({
+  label: {
+    display: 'block',
+    fontSize: '0.9rem',
+    fontWeight: theme.typography.fontWeightMedium,
+    marginBottom: theme.spacing(1),
+  },
+
+  input: {
+    width: '100%',
+  },
+}));
+
+export default SingleLineInput;
diff --git a/src/containers/Sidebar/Files/FilterFiles.tsx b/src/containers/Sidebar/Files/FilterFiles.tsx
@@ -1,5 +1,5 @@
-import { FormControl, makeStyles, TextField } from '@material-ui/core';
-import React from 'react';
+import { FormControl, makeStyles } from '@material-ui/core';
+import SingleLineInput from '../../../components/Input/SingleLineInput';
 
 interface Props {
   onChange: (input: string) => void;
@@ -10,8 +10,8 @@ const FilterFiles = (props: Props) => {
 
   return (
     <FormControl fullWidth className={classes.formControl}>
-      <TextField
-        label='Search Files'
+      <SingleLineInput
+        placeholder='Search for notes'
         variant='outlined'
         autoComplete='off'
         size='small'
@@ -23,7 +23,6 @@ const FilterFiles = (props: Props) => {
 
 const useStyles = makeStyles((theme) => ({
   formControl: {
-    display: 'flex',
     marginTop: `-${theme.spacing(3)}px`,
     marginBottom: `${theme.spacing(3)}px`,
   },

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
@@ -3,7 +3,6 @@ import {
   Checkbox,
   FormControlLabel,
   makeStyles,
-  TextField,
   Typography,
   useTheme,
 } from '@material-ui/core';
@@ -21,6 +20,7 @@ import useCloudSyncLogin from '../../hooks/useCloudSyncLogin';
 import { useEffect, useState } from 'react';
 import { ErrorOrNull } from '../../hooks/useLoading';
 import { defer, upperFirst } from 'lodash';
+import SingleLineInput from '../../components/Input/SingleLineInput';
 
 type FormFields = {
   username: string;
@@ -151,7 +151,7 @@ const Login = () => {
             }
           />
 
-          <TextField
+          <SingleLineInput
             type='text'
             name='username'
             label='Username'
@@ -169,7 +169,7 @@ const Login = () => {
               upperFirst(formik.errors.username)
             }
           />
-          <TextField
+          <SingleLineInput
             type='password'
             name='password'
             label='Password'

diff --git a/src/pages/Signup/index.tsx b/src/pages/Signup/index.tsx
@@ -6,7 +6,6 @@ import {
   Divider,
   FormControlLabel,
   makeStyles,
-  TextField,
   Typography,
   withStyles,
 } from '@material-ui/core';
@@ -26,6 +25,7 @@ import prepareAndRegisterToCloudSync from '../../services/prepareAndRegisterToCl
 import generateTokenFromPassword from '../../utils/generateTokenFromPassword';
 import moment from 'moment';
 import ExternalAnchor from '../../components/Typography/ExternalAnchor';
+import SingleLineInput from '../../components/Input/SingleLineInput';
 
 const Signup = () => {
   const classes = useStyles();
@@ -158,7 +158,7 @@ const Signup = () => {
           {({ handleSubmit, handleChange, handleBlur, values, isSubmitting, errors, touched }) => (
             <React.Fragment>
               <form onSubmit={handleSubmit} autoComplete='off'>
-                <TextField
+                <SingleLineInput
                   name='username'
                   label='Username'
                   variant='outlined'
@@ -177,7 +177,7 @@ const Signup = () => {
 
                 <Divider />
 
-                <TextField
+                <SingleLineInput
                   type='password'
                   name='password'
                   label='Password'
@@ -194,7 +194,7 @@ const Signup = () => {
                   }
                 />
 
-                <TextField
+                <SingleLineInput
                   type='password'
                   name='password2'
                   label='Confirm Password'
@@ -225,8 +225,7 @@ const Signup = () => {
                   <AccordionDetails>
                     <Typography variant='body2' color='textSecondary'>
                       You can choose to disable cloud sync. This means that your account and notes
-                      stay on your device. Nothing touches a server. No one knows your account
-                      exists.
+                      stay on your device/browser. Nothing touches a cloud server.
                     </Typography>
                     <FormControlLabel
                       control={
@@ -246,7 +245,7 @@ const Signup = () => {
                         Learn more
                       </ExternalAnchor>
                     </Typography>
-                    <TextField
+                    <SingleLineInput
                       type='number'
                       name='iterations'
                       label='PBKDF2 Iterations'