settings

3 files changed, 122 insertions, 0 deletions

diff --git a/apps/Settings/components/Settings.js b/apps/Settings/components/Settings.js
new file mode 100644
index 0000000..2d7f238
--- /dev/null
+++ b/apps/Settings/components/Settings.js
@@ -0,0 +1,68 @@
+import styles from '../styles/Settings.module.scss'
+import React, {useContext} from 'react'
+import fetchJson from 'lib/fetchJson'
+import useUser from 'lib/useUser'
+import usePopup from 'hooks/usePopup'
+import Context from 'context';
+import {close} from 'helpers/windowActions'
+
+const Settings = () => {
+  const {setPopup} = usePopup()
+  const {settings: {theme, language}, setSettings, setApps} = useContext(Context)
+  const {user} = useUser()
+
+  const handleSave = e => {
+    e.preventDefault;
+
+    try {
+      fetchJson('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({_id: user._id, theme, language}),
+      })
+      setPopup({
+        content: 'Settings saved',
+        time: 2000,
+      })
+      close('Settings', setApps)
+    } catch (err) {
+      setpopup({
+        content: 'could not save settings',
+        time: 2000,
+        error: true,
+      })
+    }
+  }
+
+  return (
+    <div className={styles.settings}>
+      <div>Language:</div>
+      <div>
+        <span className={styles.settings__active}>English</span>
+      </div>
+      <div>Theme: </div>
+      <div>
+        <span
+          onClick={()=>{setSettings({language, theme:'green'})}}
+          className={theme === 'green' ? styles.settings__active : ''}
+        />
+        <span
+          onClick={()=>{setSettings({language, theme:'blue'})}}
+          className={theme === 'blue' ? styles.settings__active : ''}
+        />
+        <span
+          onClick={()=>{setSettings({language, theme:'black'})}}
+          className={theme === 'black' ? styles.settings__active : ''}
+        />
+      </div>
+      <input
+        type="button"
+        className="window__button"
+        value="Save"
+        onClick={handleSave}
+      />
+    </div>
+  )
+}
+
+export default Settings
diff --git a/apps/Settings/index.js b/apps/Settings/index.js
new file mode 100644
index 0000000..0a09ad4
--- /dev/null
+++ b/apps/Settings/index.js
@@ -0,0 +1,3 @@
+import Settings from './components/Settings'
+
+export default Settings
diff --git a/apps/Settings/styles/Settings.module.scss b/apps/Settings/styles/Settings.module.scss
new file mode 100644
index 0000000..9edef38
--- /dev/null
+++ b/apps/Settings/styles/Settings.module.scss
@@ -0,0 +1,51 @@
+.settings {
+  text-align: center;
+  padding: 1em;
+
+  span {
+    padding: .5em;
+  }
+
+  div {
+    text-align: left;
+    margin: 1.5em 0;
+
+    &:nth-of-type(1) {
+      margin-top: .5em;
+    }
+
+    &:nth-of-type(3) {
+      margin-top: 3em;
+    }
+
+    &:nth-of-type(4) > span {
+      width: 2em;
+      height: 2em;
+      display: inline-block;
+      margin: 0 1em;
+      outline-offset: 4px;
+
+      &:nth-of-type(1) {
+        background-color: #53e3a6;
+      }
+
+      &:nth-of-type(2) {
+        background-color: #2986b3;
+      }
+
+      &:nth-of-type(3) {
+        background-color: #000;
+      }
+    }
+  }
+
+  input {
+    margin: 1em auto;
+  }
+
+  &__active {
+    outline: 3px solid var(--color-window-buttons);
+  }
+}
+
+