Read/write css file from app settings. Changed order of operations at app startup. Added nano to Dockerfile

client/src/components/Settings/Settings.tsx

@@ -9,6 +9,7 @@ import Themer from '../Themer/Themer';
 import WeatherSettings from './WeatherSettings/WeatherSettings';
 import OtherSettings from './OtherSettings/OtherSettings';
 import AppDetails from './AppDetails/AppDetails';
+import StyleSettings from './StyleSettings/StyleSettings';
 
 const Settings = (): JSX.Element => {
   return (
@@ -40,6 +41,13 @@ const Settings = (): JSX.Element => {
             to='/settings/other'>
             Other
           </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/css'>
+            CSS
+          </NavLink>
           <NavLink
             className={classes.SettingsNavLink}
             activeClassName={classes.SettingsNavLinkActive}
@@ -53,6 +61,7 @@ const Settings = (): JSX.Element => {
             <Route exact path='/settings' component={Themer} />
             <Route path='/settings/weather' component={WeatherSettings} />
             <Route path='/settings/other' component={OtherSettings} />
+            <Route path='/settings/css' component={StyleSettings} />
             <Route path='/settings/app' component={AppDetails} />
           </Switch>
         </section>

client/src/components/Settings/StyleSettings/StyleSettings.tsx

@@ -0,0 +1,44 @@
+import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
+import axios from 'axios';
+
+import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import Button from '../../UI/Buttons/Button/Button';
+import { ApiResponse } from '../../../interfaces';
+
+const StyleSettings = (): JSX.Element => {
+  const [customStyles, setCustomStyles] = useState<string>('');
+
+  useEffect(() => {
+    axios.get<ApiResponse<string>>('/api/config/0/css')
+      .then(data => setCustomStyles(data.data.data))
+      .catch(err => console.log(err));
+  }, [])
+
+  const inputChangeHandler = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    e.preventDefault();
+    setCustomStyles(e.target.value);
+  }
+
+  const formSubmitHandler = (e: FormEvent) => {
+    e.preventDefault();
+
+    axios.put<ApiResponse<{}>>('/api/config/0/css', { styles: customStyles });
+  }
+
+  return (
+    <form onSubmit={(e) => formSubmitHandler(e)}>
+      <InputGroup>
+        <label htmlFor='customStyles'>Custom CSS</label>
+        <textarea
+          id='customStyles'
+          name='customStyles'
+          value={customStyles}
+          onChange={(e) => inputChangeHandler(e)}
+        ></textarea>
+      </InputGroup>
+      <Button>Save CSS</Button>
+    </form>
+  )
+}
+
+export default StyleSettings;

client/src/components/UI/Forms/InputGroup/InputGroup.module.css

@@ -4,12 +4,14 @@
 
 .InputGroup label,
 .InputGroup span,
-.InputGroup input {
+.InputGroup input,
+.InputGroup textarea {
   display: block;
 }
 
 .InputGroup input,
-.InputGroup select {
+.InputGroup select,
+.InputGroup textarea {
   margin: 8px 0;
   width: 100%;
   border: none;
@@ -30,4 +32,9 @@
 
 .InputGroup label {
   color: var(--color-primary);
+}
+
+.InputGroup textarea {
+  resize: none;
+  height: 50vh;
 }