feat(config): add button to clear local storage

3 files changed, 23 insertions, 0 deletions

diff --git a/src/components/Config.js b/src/components/Config.js
index 6f4c336..01bc4bd 100644
--- a/src/components/Config.js
+++ b/src/components/Config.js
@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 import { useStoreState, useActions } from 'm/store';
 
 import { getConfigs, fetchConfigs, updateConfigs } from 'd/configs';
+import { clearStorage } from 'd/app';
 
 import ContentHeader from 'c/ContentHeader';
 import Switch from 'c/Switch';
 import ToggleSwitch from 'c/ToggleSwitch';
 import Input from 'c/Input';
+import Button from 'c/Button';
 import s0 from 'c/Config.module.css';
 
 const optionsRule = [
@@ -190,6 +192,15 @@ function Config({ configs }) {
           />
         </div>
       </div>
+
+      <div className={s0.sep}>
+        <div />
+      </div>
+
+      <div className={s0.section}>
+        <div className={s0.label}>Actions</div>
+        <Button label="Log out" onClick={clearStorage} />
+      </div>
     </div>
   );
 }
diff --git a/src/components/Config.module.css b/src/components/Config.module.css
index 1d747b4..2f9fad2 100644
--- a/src/components/Config.module.css
+++ b/src/components/Config.module.css
@@ -6,6 +6,17 @@
   }
 }
 
+.section {
+  padding: 10px 40px 40px;
+}
+
+.sep {
+  padding: 0 40px;
+  > div {
+    border-top: 1px dashed #373737;
+  }
+}
+
 .label {
   padding: 16px 0;
 }
diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css
index 0df0030..1b183bc 100644
--- a/src/components/Modal.module.css
+++ b/src/components/Modal.module.css
@@ -5,6 +5,7 @@
   left: 0;
   bottom: 0;
   background: #444;
+  z-index: 1024;
 }
 
 .content {