From 26b1e06614413bbe67b53ce33a140b613189aca7 Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Fri, 10 May 2024 22:23:18 +0200
Subject: [PATCH] update account settings design

---
 .../settings-modal/settings-modal.module.css     | 16 +++++++++++++---
 src/components/settings-modal/settings-modal.tsx | 15 ++++++++++-----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/settings-modal/settings-modal.module.css b/src/components/settings-modal/settings-modal.module.css
index 7dc2db14..6810d6c0 100644
--- a/src/components/settings-modal/settings-modal.module.css
+++ b/src/components/settings-modal/settings-modal.module.css
@@ -144,6 +144,17 @@
 
 .accountSettings button {
   cursor: pointer;
+}
+
+.saveResetAccount {
+  margin-top: 15px;
+}
+
+.accountSettings textarea {
+  margin-bottom: 5px;
+}
+
+.accountSettings div {
   margin-top: 5px;
 }
 
@@ -151,9 +162,8 @@
   color: red;
 }
 
-.accountSettings select {
-  display: block;
-  margin-bottom: 10px;
+.accountSettings .createAccount {
+  margin-left: 5px;
 }
 
 @media (max-width: 640px) {
diff --git a/src/components/settings-modal/settings-modal.tsx b/src/components/settings-modal/settings-modal.tsx
index 4011dd1c..42970fa9 100644
--- a/src/components/settings-modal/settings-modal.tsx
+++ b/src/components/settings-modal/settings-modal.tsx
@@ -254,13 +254,18 @@ const AccountSettings = () => {
 
   return (
     <div className={styles.accountSettings}>
-      <select value={account?.name} onChange={(e) => setActiveAccount(e.target.value)}>
-        {accountsOptions}
-      </select>
-      Account Data Preview:
+      <div>
+        <select value={account?.name} onChange={(e) => setActiveAccount(e.target.value)}>
+          {accountsOptions}
+        </select>
+        <button className={styles.createAccount} onClick={_createAccount}>
+          +
+        </button>
+      </div>
+      <div></div>
       <textarea value={text} onChange={(e) => setText(e.target.value)} autoCorrect='off' autoComplete='off' spellCheck='false' />
       <div>
-        <button onClick={_createAccount}>Create</button> a new account
+        <button onClick={saveAccount}>Save</button> <button onClick={() => setText(accountJson)}>Reset</button>
       </div>
       <div>
         <button onClick={_importAccount}>Import</button> full account data