Fixed visual bug with custom theme editor modal. Added Mint theme

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))

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>
       )}

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

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 ? (
+      {!userThemes.length ? isAuthenticated && customThemesEl : customThemesEl}
-        isAuthenticated && 'auth and empty'
-      ) : (
-        <Fragment>
-          <SettingsHeadline text="User themes" />
-          <ThemeBuilder themes={userThemes} />
-        </Fragment>
-      )}
 
       {isAuthenticated && (
         <form onSubmit={formSubmitHandler}>

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>
   );
 };

utils/init/initialFiles.json

@@ -174,6 +174,15 @@
               "accent": "#98c379"
             },
             "isCustom": false
+          },
+          {
+            "name": "mint",
+            "colors": {
+              "background": "#282525",
+              "primary": "#d9d9d9",
+              "accent": "#50fbc2"
+            },
+            "isCustom": false
           }
         ]
       },

utils/init/themes.json

@@ -134,6 +134,15 @@
         "accent": "#98c379"
       },
       "isCustom": false
+    },
+    {
+      "name": "mint",
+      "colors": {
+        "background": "#282525",
+        "primary": "#d9d9d9",
+        "accent": "#50fbc2"
+      },
+      "isCustom": false
     }
   ]
 }