update account settings design

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) {

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