Separated theme components

client/src/components/Settings/GeneralSettings/GeneralSettings.tsx

@@ -164,7 +164,7 @@ export const GeneralSettings = (): JSX.Element => {
           </select>
         </InputGroup>
 
-        {/* SEARCH SETTINGS */}
+        {/* === SEARCH OPTIONS === */}
         <SettingsHeadline text="Search" />
         <InputGroup>
           <label htmlFor="defaultSearchProvider">Default search provider</label>

client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.tsx

@@ -0,0 +1,3 @@
+export const ThemeBuilder = (): JSX.Element => {
+  return <h1>theme builder</h1>;
+};

client/src/components/Settings/Themer/ThemeGrid/ThemeGrid.module.css

@@ -15,4 +15,4 @@
   .ThemerGrid {
     grid-template-columns: 1fr 1fr 1fr;
   }
-}
+}

client/src/components/Settings/Themer/ThemeGrid/ThemeGrid.tsx

@@ -0,0 +1,30 @@
+// Redux
+import { useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../../store';
+
+// Components
+import { ThemePreview } from '../ThemePreview/ThemePreview';
+
+// Other
+import { Theme } from '../../../../interfaces';
+import classes from './ThemeGrid.module.css';
+
+interface Props {
+  themes: Theme[];
+}
+
+export const ThemeGrid = ({ themes }: Props): JSX.Element => {
+  const dispatch = useDispatch();
+  const { setTheme } = bindActionCreators(actionCreators, dispatch);
+
+  return (
+    <div className={classes.ThemerGrid}>
+      {themes.map(
+        (theme: Theme, idx: number): JSX.Element => (
+          <ThemePreview key={idx} theme={theme} applyTheme={setTheme} />
+        )
+      )}
+    </div>
+  );
+};

client/src/components/Settings/Themer/ThemePreview/ThemePreview.tsx

@@ -1,4 +1,4 @@
-import { Theme } from '../../../interfaces/Theme';
+import { Theme } from '../../../../interfaces/Theme';
 import classes from './ThemePreview.module.css';
 
 interface Props {

client/src/components/Settings/Themer/Themer.tsx

@@ -9,11 +9,11 @@ import { actionCreators } from '../../../store';
 import { Theme, ThemeSettingsForm } from '../../../interfaces';
 
 // Components
-import { ThemePreview } from './ThemePreview';
 import { Button, InputGroup, SettingsHeadline } from '../../UI';
+import { ThemeBuilder } from './ThemeBuilder/ThemeBuilder';
+import { ThemeGrid } from './ThemeGrid/ThemeGrid';
 
 // Other
-import classes from './Themer.module.css';
 import { themes } from './themes.json';
 import { State } from '../../../store/reducers';
 import { inputHandler, themeSettingsTemplate } from '../../../utility';
@@ -25,10 +25,7 @@ export const Themer = (): JSX.Element => {
   } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
-  const { setTheme, updateConfig } = bindActionCreators(
-    actionCreators,
-    dispatch
-  );
+  const { updateConfig } = bindActionCreators(actionCreators, dispatch);
 
   // Initial state
   const [formData, setFormData] = useState<ThemeSettingsForm>(
@@ -65,14 +62,11 @@ export const Themer = (): JSX.Element => {
 
   return (
     <Fragment>
-      <SettingsHeadline text="Set theme" />
-      <div className={classes.ThemerGrid}>
-        {themes.map(
-          (theme: Theme, idx: number): JSX.Element => (
-            <ThemePreview key={idx} theme={theme} applyTheme={setTheme} />
-          )
-        )}
-      </div>
+      <SettingsHeadline text="App themes" />
+      <ThemeGrid themes={themes} />
+
+      <SettingsHeadline text="User themes" />
+      <ThemeBuilder />
 
       {isAuthenticated && (
         <form onSubmit={formSubmitHandler}>