Added CompactTable and ActionIcons UI components

client/src/components/Settings/GeneralSettings/CustomQueries/CustomQueries.module.css

@@ -1,30 +0,0 @@
-.QueriesGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.QueriesGrid span {
-  color: var(--color-primary);
-}
-
-.QueriesGrid span:last-child {
-  margin-bottom: 10px;
-}
-
-.ActionIcons {
-  display: flex;
-}
-
-.ActionIcons svg {
-  width: 20px;
-}
-
-.ActionIcons svg:hover {
-  cursor: pointer;
-}
-
-.Separator {
-  grid-column: 1 / 4;
-  border-bottom: 1px solid var(--color-primary);
-  margin: 10px 0;
-}

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

@@ -9,11 +9,8 @@ import { actionCreators } from '../../../../store';
 // Typescript
 import { Query } from '../../../../interfaces';
 
-// CSS
-import classes from './CustomQueries.module.css';
-
 // UI
-import { Modal, Icon, Button } from '../../../UI';
+import { Modal, Icon, Button, CompactTable, ActionIcons } from '../../../UI';
 
 // Components
 import { QueriesForm } from './QueriesForm';
@@ -67,33 +64,25 @@ export const CustomQueries = (): JSX.Element => {
         )}
       </Modal>
 
-      <div>
+      <section>
-        <div className={classes.QueriesGrid}>
+        {customQueries.length && (
-          {customQueries.length > 0 && (
+          <CompactTable headers={['Name', 'Prefix', 'Actions']}>
-            <Fragment>
+            {customQueries.map((q: Query, idx) => (
-              <span>Name</span>
+              <Fragment key={idx}>
-              <span>Prefix</span>
+                <span>{q.name}</span>
-              <span>Actions</span>
+                <span>{q.prefix}</span>
-
+                <ActionIcons>
-              <div className={classes.Separator}></div>
+                  <span onClick={() => updateHandler(q)}>
-            </Fragment>
+                    <Icon icon="mdiPencil" />
-          )}
+                  </span>
-
+                  <span onClick={() => deleteHandler(q)}>
-          {customQueries.map((q: Query, idx) => (
+                    <Icon icon="mdiDelete" />
-            <Fragment key={idx}>
+                  </span>
-              <span>{q.name}</span>
+                </ActionIcons>
-              <span>{q.prefix}</span>
+              </Fragment>
-              <span className={classes.ActionIcons}>
+            ))}
-                <span onClick={() => updateHandler(q)}>
+          </CompactTable>
-                  <Icon icon="mdiPencil" />
+        )}
-                </span>
-                <span onClick={() => deleteHandler(q)}>
-                  <Icon icon="mdiDelete" />
-                </span>
-              </span>
-            </Fragment>
-          ))}
-        </div>
 
         <Button
           click={() => {
@@ -103,7 +92,7 @@ export const CustomQueries = (): JSX.Element => {
         >
           Add new search provider
         </Button>
-      </div>
+      </section>
     </Fragment>
   );
 };

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

@@ -1,17 +1,27 @@
-import { ChangeEvent, FormEvent, useState } from 'react';
+import { ChangeEvent, FormEvent, useState, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+
+// Redux
+import { useDispatch, useSelector } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../../../store';
-import { Theme } from '../../../../interfaces';
+import { State } from '../../../../store/reducers';
-import { Button, InputGroup, ModalForm } from '../../../UI';
 
+// UI
+import { Button, InputGroup, ModalForm } from '../../../UI';
 import classes from './ThemeCreator.module.css';
 
+// Other
+import { Theme } from '../../../../interfaces';
+
 interface Props {
   modalHandler: () => void;
 }
 
 export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
+  const {
+    theme: { activeTheme },
+  } = useSelector((state: State) => state);
+
   const { addTheme } = bindActionCreators(actionCreators, useDispatch());
 
   const [formData, setFormData] = useState<Theme>({
@@ -24,6 +34,10 @@ export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
     },
   });
 
+  useEffect(() => {
+    setFormData({ ...formData, colors: activeTheme.colors });
+  }, [activeTheme]);
+
   const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
 

client/src/components/UI/Icons/ActionIcons/ActionIcons.module.css

@@ -0,0 +1,11 @@
+.ActionIcons {
+  display: flex;
+}
+
+.ActionIcons svg {
+  width: 20px;
+}
+
+.ActionIcons svg:hover {
+  cursor: pointer;
+}

client/src/components/UI/Icons/ActionIcons/ActionIcons.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import styles from './ActionIcons.module.css';
+
+interface Props {
+  children: ReactNode;
+}
+
+export const ActionIcons = ({ children }: Props): JSX.Element => {
+  return <span className={styles.ActionIcons}>{children}</span>;
+};

client/src/components/UI/Tables/CompactTable/CompactTable.module.css

@@ -0,0 +1,16 @@
+.CompactTable {
+  display: grid;
+}
+
+.CompactTable span {
+  color: var(--color-primary);
+}
+
+.CompactTable span:last-child {
+  margin-bottom: 10px;
+}
+
+.Separator {
+  border-bottom: 1px solid var(--color-primary);
+  margin: 10px 0;
+}

client/src/components/UI/Tables/CompactTable/CompactTable.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import classes from './CompactTable.module.css';
+
+interface Props {
+  headers: string[];
+  children?: ReactNode;
+}
+
+export const CompactTable = ({ headers, children }: Props): JSX.Element => {
+  return (
+    <div
+      className={classes.CompactTable}
+      style={{ gridTemplateColumns: `repeat(${headers.length}, 1fr)` }}
+    >
+      {headers.map((h, idx) => (
+        <span key={idx}>{h}</span>
+      ))}
+
+      <div
+        className={classes.Separator}
+        style={{ gridColumn: `1 / ${headers.length + 1}` }}
+      ></div>
+
+      {children}
+    </div>
+  );
+};

client/src/components/UI/index.ts

@@ -1,10 +1,12 @@
-export * from './Table/Table';
+export * from './Tables/Table/Table';
+export * from './Tables/CompactTable/CompactTable';
 export * from './Spinner/Spinner';
 export * from './Notification/Notification';
 export * from './Modal/Modal';
 export * from './Layout/Layout';
 export * from './Icons/Icon/Icon';
 export * from './Icons/WeatherIcon/WeatherIcon';
+export * from './Icons/ActionIcons/ActionIcons';
 export * from './Headlines/Headline/Headline';
 export * from './Headlines/SectionHeadline/SectionHeadline';
 export * from './Headlines/SettingsHeadline/SettingsHeadline';