From 2c0491a5b0254ab7621dc4ba78e9de408c61406f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Malak?= <pawel999@icloud.com>
Date: Fri, 25 Mar 2022 14:07:53 +0100
Subject: [PATCH] Fixed visual bug with custom theme editor modal. Added Mint
 theme

---
 CHANGELOG.md                                     |  1 +
 .../Themer/ThemeBuilder/ThemeBuilder.tsx         | 10 ++++++++--
 .../Themer/ThemeBuilder/ThemeCreator.tsx         | 11 ++++++++---
 client/src/components/Settings/Themer/Themer.tsx | 16 ++++++++--------
 client/src/components/UI/Modal/Modal.tsx         | 16 ++++++++++++----
 utils/init/initialFiles.json                     |  9 +++++++++
 utils/init/themes.json                           |  9 +++++++++
 7 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3c9daaf..f8b571d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 - Added custom theme editor ([#246](https://github.com/pawelmalak/flame/issues/246))
 - Fixed bug where pressing Enter with empty search bar would redirect to search results ([#325](https://github.com/pawelmalak/flame/issues/325))
 - Fixed bug where user could create empty app or bookmark which was causing page to go blank ([#332](https://github.com/pawelmalak/flame/issues/332))
+- Added new theme: Mint
 
 ### v2.2.2 (2022-03-21)
 - Added option to get user location directly from the app ([#287](https://github.com/pawelmalak/flame/issues/287))
diff --git a/client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.tsx b/client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.tsx
index 50a2c5a..039e4d3 100644
--- a/client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.tsx
+++ b/client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.tsx
@@ -41,7 +41,11 @@ export const ThemeBuilder = ({ themes }: Props): JSX.Element => {
   return (
     <div className={classes.ThemeBuilder}>
       {/* MODALS */}
-      <Modal isOpen={showModal} setIsOpen={() => toggleShowModal(!showModal)}>
+      <Modal
+        isOpen={showModal}
+        setIsOpen={() => toggleShowModal(!showModal)}
+        cb={() => editTheme(null)}
+      >
         {isInEdit ? (
           <ThemeEditor modalHandler={() => toggleShowModal(!showModal)} />
         ) : (
@@ -65,7 +69,7 @@ export const ThemeBuilder = ({ themes }: Props): JSX.Element => {
             Create new theme
           </Button>
 
-          {themes.length && (
+          {themes.length ? (
             <Button
               click={() => {
                 toggleIsInEdit(true);
@@ -74,6 +78,8 @@ export const ThemeBuilder = ({ themes }: Props): JSX.Element => {
             >
               Edit user themes
             </Button>
+          ) : (
+            <></>
           )}
         </div>
       )}
diff --git a/client/src/components/Settings/Themer/ThemeBuilder/ThemeCreator.tsx b/client/src/components/Settings/Themer/ThemeBuilder/ThemeCreator.tsx
index 056d3dc..84e1896 100644
--- a/client/src/components/Settings/Themer/ThemeBuilder/ThemeCreator.tsx
+++ b/client/src/components/Settings/Themer/ThemeBuilder/ThemeCreator.tsx
@@ -22,7 +22,7 @@ export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
     theme: { activeTheme, themeInEdit },
   } = useSelector((state: State) => state);
 
-  const { addTheme, updateTheme } = bindActionCreators(
+  const { addTheme, updateTheme, editTheme } = bindActionCreators(
     actionCreators,
     useDispatch()
   );
@@ -68,6 +68,11 @@ export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
     });
   };
 
+  const closeModal = () => {
+    editTheme(null);
+    modalHandler();
+  };
+
   const formHandler = (e: FormEvent) => {
     e.preventDefault();
 
@@ -78,14 +83,14 @@ export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
     }
 
     // close modal
-    modalHandler();
+    closeModal();
 
     // clear theme name
     setFormData({ ...formData, name: '' });
   };
 
   return (
-    <ModalForm formHandler={formHandler} modalHandler={modalHandler}>
+    <ModalForm formHandler={formHandler} modalHandler={closeModal}>
       <InputGroup>
         <label htmlFor="name">Theme name</label>
         <input
diff --git a/client/src/components/Settings/Themer/Themer.tsx b/client/src/components/Settings/Themer/Themer.tsx
index 5a7ff06..ae2ac7d 100644
--- a/client/src/components/Settings/Themer/Themer.tsx
+++ b/client/src/components/Settings/Themer/Themer.tsx
@@ -64,19 +64,19 @@ export const Themer = (): JSX.Element => {
     });
   };
 
+  const customThemesEl = (
+    <Fragment>
+      <SettingsHeadline text="User themes" />
+      <ThemeBuilder themes={userThemes} />
+    </Fragment>
+  );
+
   return (
     <Fragment>
       <SettingsHeadline text="App themes" />
       {!themes.length ? <Spinner /> : <ThemeGrid themes={themes} />}
 
-      {!userThemes.length ? (
-        isAuthenticated && 'auth and empty'
-      ) : (
-        <Fragment>
-          <SettingsHeadline text="User themes" />
-          <ThemeBuilder themes={userThemes} />
-        </Fragment>
-      )}
+      {!userThemes.length ? isAuthenticated && customThemesEl : customThemesEl}
 
       {isAuthenticated && (
         <form onSubmit={formSubmitHandler}>
diff --git a/client/src/components/UI/Modal/Modal.tsx b/client/src/components/UI/Modal/Modal.tsx
index 43fb5e9..3f2a6bd 100644
--- a/client/src/components/UI/Modal/Modal.tsx
+++ b/client/src/components/UI/Modal/Modal.tsx
@@ -6,24 +6,32 @@ interface Props {
   isOpen: boolean;
   setIsOpen: Function;
   children: ReactNode;
+  cb?: Function;
 }
 
-export const Modal = (props: Props): JSX.Element => {
+export const Modal = ({
+  isOpen,
+  setIsOpen,
+  children,
+  cb,
+}: Props): JSX.Element => {
   const modalRef = useRef(null);
   const modalClasses = [
     classes.Modal,
-    props.isOpen ? classes.ModalOpen : classes.ModalClose,
+    isOpen ? classes.ModalOpen : classes.ModalClose,
   ].join(' ');
 
   const clickHandler = (e: MouseEvent) => {
     if (e.target === modalRef.current) {
-      props.setIsOpen(false);
+      setIsOpen(false);
+
+      if (cb) cb();
     }
   };
 
   return (
     <div className={modalClasses} onClick={clickHandler} ref={modalRef}>
-      {props.children}
+      {children}
     </div>
   );
 };
diff --git a/utils/init/initialFiles.json b/utils/init/initialFiles.json
index 43b68d5..83d370a 100644
--- a/utils/init/initialFiles.json
+++ b/utils/init/initialFiles.json
@@ -174,6 +174,15 @@
               "accent": "#98c379"
             },
             "isCustom": false
+          },
+          {
+            "name": "mint",
+            "colors": {
+              "background": "#282525",
+              "primary": "#d9d9d9",
+              "accent": "#50fbc2"
+            },
+            "isCustom": false
           }
         ]
       },
diff --git a/utils/init/themes.json b/utils/init/themes.json
index 685a81e..867fe7e 100644
--- a/utils/init/themes.json
+++ b/utils/init/themes.json
@@ -134,6 +134,15 @@
         "accent": "#98c379"
       },
       "isCustom": false
+    },
+    {
+      "name": "mint",
+      "colors": {
+        "background": "#282525",
+        "primary": "#d9d9d9",
+        "accent": "#50fbc2"
+      },
+      "isCustom": false
     }
   ]
 }