ui: Improve account page UI

components/Account/ChangeFiatCurrency.tsx

@@ -40,22 +40,26 @@ export default function ChangeFiatCurrency ({ preferredCurrencyId }: IProps): Re
     }
   }
 
-  return (<>
-    <div className={style.changeCurrency_ctn}>
+  return (
+    <>
       <select
-        id='currency'
+        id="currency"
         required
         value={currency}
-        onChange={(e) => { void onChangeCurrency(e.target.value) }}
+        onChange={(e) => {
+          void onChangeCurrency(e.target.value)
+        }}
       >
         {SUPPORTED_QUOTES.map((currency: SupportedQuotesType) => (
           <option key={currency} value={currency}>
             {currency.toUpperCase()}
           </option>
         ))}
       </select>
-    </div>
-    {error !== '' && <span className={style.error_message}> {error} </span>}
-    {success !== '' && <span className={style.success_message}> {success} </span>}
-    </>)
+      {error !== '' && <span className={style.error_message}>{error}</span>}
+      {success !== '' && (
+        <span className={style.success_message}>{success}</span>
+      )}
+    </>
+  )
 }

components/Account/ChangePassword.tsx

@@ -4,7 +4,7 @@ import { ChangePasswordPOSTParameters } from 'utils/validators'
 import style from './account.module.css'
 
 interface IProps {
-  toggleChangePassword: () => void;
+  toggleChangePassword: () => void
 }
 
 export default function ChangePassword ({ toggleChangePassword }: IProps): ReactElement {
@@ -91,9 +91,11 @@ export default function ChangePassword ({ toggleChangePassword }: IProps): React
         <label htmlFor='newPasswordConfirmed'>Confirm new password</label>
         <input {...register('newPasswordConfirmed')} type='password' id='newPasswordConfirmed' name='newPasswordConfirmed' required />
         <div>
-          <div className={style.error_message}>
-            {error !== '' ? <span>{error}</span> : <span></span>}
+        {error !== ''
+          ? <div className={style.error_message}>
+            {error}
           </div>
+          : null}
           <button disabled={disabled} className='button_main' type='submit'>Submit</button>
         </div>
       </form>

components/Account/account.module.css

@@ -1,25 +1,7 @@
-.success_message {
-  color: green;
-  font-size: 16px;
-  width: 100%;
-  height: 100%;
-  background-color: var(--secondary-bg-color);
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-}
-
 .changepw_ctn {
   width: 100%;
-  background-color: var(--secondary-bg-color);
-  max-width: 500px;
-  padding: 20px 25px;
-  margin: 4px 0;
-  border-radius: 10px;
   position: relative;
+  margin-top: 20px;
 }
 
 .changepw_ctn form input {
@@ -37,19 +19,28 @@ body[data-theme='dark'] .changepw_ctn input {
   border-radius: 10px;
 }
 
+.success_message,
+.error_message {
+    background-color: #c5e7ba;
+    font-size: 14px;
+    width: 100%;
+    padding: 5px 10px;
+    border-radius: 5px;
+    text-align: center;
+    margin-top: 0px;
+    color: rgb(0, 99, 0);
+    display: inline-block;
+    font-weight: 400;
+}
+
+.error_message {
+    color: rgb(172, 0, 0);
+    background-color: #e7bfba;
+  }
+
 @media (max-width: 960px) {
   .changepw_ctn {
    max-width: unset;
   }
 }
 
-.error_message {
-  color: red;
-  font-size: 14px;
-  top: -20px;
-  left: 0;
-  background-color: rgba(255, 0, 0, 0.1);
-  padding: 1px 10px;
-  border-radius: 5px;
-}
-

components/Organization/organization.module.css

@@ -1,7 +1,7 @@
 .org_ctn  {
   width: 100%;
   background-color: #fff;
-  max-width: 800px;
+  max-width: 700px;
   padding: 20px;
   border-radius: 10px;
 }

components/Timezone Selector/index.tsx

@@ -49,18 +49,29 @@ const TimezoneSelector: React.FC<TimezoneSelectorProps> = ({ value }) => {
     void updateTimezone()
   }
 
+  const customStyles = {
+    option: (provided, state) => ({
+      ...provided,
+      backgroundColor: state.isFocused === true ? '#669cfe' : '',
+      ':hover': {
+        backgroundColor: '#669cfe'
+      }
+    })
+  }
+
   return (
-    <div className={style.timezone_selector}>
+    <>
       <Select
         value={selectedTimezone}
         onChange={handleChange}
         disabled={false}
         className={style.select_timezone}
         displayValue="UTC"
+        styles={customStyles}
       />
-      {error !== '' && <span className={style.error_message}> {error} </span>}
-      {success !== '' && <span className={style.success_message}> {success} </span>}
-    </div>
+      {error !== '' && <span className={style.error_message}>{error}</span>}
+      {success !== '' && <span className={style.success_message}>{success}</span>}
+    </>
   )
 }
 

components/Timezone Selector/timezone-selector.module.css

@@ -1,40 +1,35 @@
-.timezone_selector {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    margin: 15px 0;
-    padding: 10px;
-    border: 1px solid var(--secondary-bg-color);
-    border-radius: 5px;
-    background-color: var(--secondary-bg-color);
-}
 
 .select_timezone {
+    margin-top: 10px;
+}
+
+.select_timezone > div {
     background-color: var(--secondary-bg-color) !important;
-    color: black;
-    font-family: 'Poppins', sans-serif;
+    border: 1px solid var(--secondary-text-color) !important;
 }
 
-.success_message {
-    color: green;
-    font-size: 16px;
-    width: 100%;
-    height: 100%;
-    background-color: var(--secondary-bg-color);
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 10px;
+body[data-theme='dark'] .select_timezone > div {
+    background-color: var(--primary-bg-color) !important;
+    border-color: #585858 !important;
+  }
+
+.select_timezone div {
+    color: var(--primary-text-color) !important;
 }
 
+.success_message,
 .error_message {
-    color: red;
+    background-color: #c5e7ba;
     font-size: 14px;
-    top: -20px;
-    left: 0;
-    background-color: rgba(255, 0, 0, 0.1);
-    padding: 1px 10px;
+    width: 100%;
+    padding: 5px 10px;
     border-radius: 5px;
+    text-align: center;
+    margin-top: 10px;
+    color: rgb(0, 99, 0);
+}
+
+.error_message {
+    color: rgb(172, 0, 0);
+    background-color: #e7bfba;
   }