Dark theme, alert, better adding tasks by keys

s3rbug · Feb 7, 2020 · 0b96d0c · 0b96d0c
1 parent cf7085b
commit 0b96d0c
Show file tree

Hide file tree

Showing 13 changed files with 285 additions and 138 deletions.
diff --git a/src/App.js b/src/App.js
@@ -7,29 +7,37 @@ import { Provider } from 'react-redux';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-const testTheme = createMuiTheme({
+const lightTheme = createMuiTheme({
   palette: {
     type: "light"
   }
 });
 
+const darkTheme = createMuiTheme({
+  palette: {
+    type: "dark"
+  }
+});
+
+
 const App = () => {
+  const [isLight, setIsLight] = React.useState(true)
   return (
     <div className="appWrapper">
-      <Header>
-        <Route path="/folders/:currentFolder?" render={() => <Folders />} />
-      </Header>
-    </div>
+      <ThemeProvider theme={isLight ? lightTheme : darkTheme}>
+        <Header isLight={isLight} setIsLight={setIsLight} >
+          <Route path="/folders/:currentFolder?" render={() => <Folders />} />
+        </Header>
+      </ThemeProvider>
+    </div >
   );
 }
 
 const MainApp = () => {
   return (
     <BrowserRouter>
       <Provider store={store}>
-        <ThemeProvider theme={testTheme}>
-          <App />
-        </ThemeProvider>
+        <App />
       </Provider>
     </BrowserRouter>
   )

diff --git a/src/asserts/AlertDialog.jsx b/src/asserts/AlertDialog.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+
+export default function AlertDialog({
+  question,
+  text,
+  open,
+  handleSuccess,
+  handleFail
+}) {
+  return (
+    <Dialog
+      open={open}
+      onClose={null}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">{question}</DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          {text}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleFail} color="primary">
+          No
+        </Button>
+        <Button onClick={handleSuccess} color="primary" autoFocus>
+          Yes
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/asserts/DraggableItem.jsx b/src/asserts/DraggableItem.jsx
@@ -1,14 +1,15 @@
 import React from "react";
 import { Draggable } from "react-beautiful-dnd";
 
-function DraggableItem({ el, children }) {
+function DraggableItem({ el, classes, children }) {
   return (
     <Draggable draggableId={"item-" + el.id} index={el.id}>
       {provided => (
         <div
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
+          className={classes ? classes.drag : ""}
         >
           {children}
           {provided.placeholder}

diff --git a/src/asserts/DroppableItem.jsx b/src/asserts/DroppableItem.jsx
@@ -8,7 +8,7 @@ function DroppableItem({ classes, droppableId, children }) {
         <div
           {...provided.droppableProps}
           ref={provided.innerRef}
-          className={classes.back}
+          className={classes ? classes.drop : ""}
         >
           {children}
           {provided.placeholder}

diff --git a/src/components/Folders/AddFolderDialog.jsx b/src/components/Folders/AddFolderDialog.jsx
@@ -0,0 +1,52 @@
+import React from "react";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import Button from "@material-ui/core/Button";
+import SetFolder from "./Folder/SetFolder";
+
+function AddFolderDialog({
+  classes,
+  open,
+  setOpen,
+  curHeadline,
+  setCurHeadline,
+  curDescription,
+  setCurDescription,
+  errorHead,
+  errorDesc,
+  setErrorHead,
+  setErrorDesc,
+  handleAddButton
+}) {
+  return (
+    <Dialog
+      className={classes.addFolderDialog}
+      open={open}
+      onClose={() => setOpen(false)}
+      aria-labelledby="form-dialog-folders"
+    >
+      <DialogTitle id="form-dialog-folders">Add new folder</DialogTitle>
+      <SetFolder
+        curHeadline={curHeadline}
+        setCurHeadline={setCurHeadline}
+        curDescription={curDescription}
+        setCurDescription={setCurDescription}
+        errorHead={errorHead}
+        errorDesc={errorDesc}
+        setErrorHead={setErrorHead}
+        setErrorDesc={setErrorDesc}
+      />
+      <DialogActions>
+        <Button onClick={() => setOpen(false)} color="secondary">
+          Cancel
+        </Button>
+        <Button onClick={handleAddButton} color="primary">
+          Add
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default AddFolderDialog;
diff --git a/src/components/Folders/Folder/Folder.jsx b/src/components/Folders/Folder/Folder.jsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-function Folder({ id, headline, description, deleteFolder, goals }) {
+function Folder({ id, headline, description, deleteFolder }) {
   const classes = useStyles();
   let [shadow, setShadow] = useState(2);
   function deleteThisFolder() {
@@ -52,7 +52,12 @@ function Folder({ id, headline, description, deleteFolder, goals }) {
         <Card variant="outlined" className={classes.card}>
           <NavLink to={`/folders/${id}`} className={classes.link}>
             <CardContent>
-              <Typography gutterBottom variant="h5" component="h2">
+              <Typography
+                gutterBottom
+                variant="h5"
+                component="h2"
+                color="textPrimary"
+              >
                 {headline}
               </Typography>
               <Typography variant="body2" color="textSecondary" component="p">

diff --git a/src/components/Folders/Folder/SetFolder.jsx b/src/components/Folders/Folder/SetFolder.jsx
@@ -17,42 +17,38 @@ function Folder({
 }) {
   const classes = useStyles();
   return (
-    <div className={classes.card}>
-      <DialogContent>
-        <TextField
-          className={classes.textField}
-          error={!!errorHead}
-          helperText={errorHead}
-          margin="dense"
-          id="headline"
-          label="Headline"
-          fullWidth
-          value={curHeadline}
-          onChange={e => {
-            setCurHeadline(e.target.value);
-            setErrorDesc("");
-            setErrorHead("");
-          }}
-        ></TextField>
-      </DialogContent>
-      <DialogContent>
-        <TextField
-          className={classes.textField}
-          error={!!errorDesc}
-          helperText={errorDesc}
-          margin="dense"
-          id="description"
-          label="Description"
-          fullWidth
-          value={curDescription}
-          onChange={e => {
-            setCurDescription(e.target.value);
-            setErrorDesc("");
-            setErrorHead("");
-          }}
-        ></TextField>
-      </DialogContent>
-    </div>
+    <DialogContent className={classes.card}>
+      <TextField
+        className={classes.textField}
+        error={!!errorHead}
+        helperText={errorHead}
+        margin="dense"
+        id="headline"
+        label="Headline"
+        fullWidth
+        value={curHeadline}
+        onChange={e => {
+          setCurHeadline(e.target.value);
+          setErrorDesc("");
+          setErrorHead("");
+        }}
+      ></TextField>
+      <TextField
+        className={classes.textField}
+        error={!!errorDesc}
+        helperText={errorDesc}
+        margin="dense"
+        id="description"
+        label="Description"
+        fullWidth
+        value={curDescription}
+        onChange={e => {
+          setCurDescription(e.target.value);
+          setErrorDesc("");
+          setErrorHead("");
+        }}
+      ></TextField>
+    </DialogContent>
   );
 }