frontend: make settings related components responsive

Author: thisconnect

frontends/web/src/components/actionable-item/actionable-item.module.css

@@ -1,5 +1,4 @@
 .container {
-  --size-default: 1.4rem;
   align-items: center;
   background-color: var(--background-secondary);
   border: none;

frontends/web/src/components/message/message.module.css

@@ -19,8 +19,8 @@
 }
 
 .message img {
-    margin-right: 4px;
-    max-width: 30px;
+    margin-right: var(--space-quarter);
+    max-width: var(--size-header);
 }
 
 .message p:last-child {

frontends/web/src/routes/account/add/add.module.css

@@ -1,8 +1,8 @@
 .manageContainer {
-    flex-basis: 490px;
+    /* flex-basis: 490px; */
     flex-shrink: 1;
     margin-bottom: var(--header-height);
-    min-height: 390px;
+    min-height: 490px;
     max-height: 100%;
 }
 

frontends/web/src/routes/settings/components/appearance/activecurrenciesdropdown.module.css

@@ -10,7 +10,8 @@
 }
 
 .defaultLabel {
-    font-size: var(--size-smaller);
+    font-size: var(--size-small);
     margin: 0;
     text-transform: capitalize;
+    word-break: keep-all;
 }

frontends/web/src/routes/settings/components/appearance/languageDropDownSetting.module.css

@@ -3,5 +3,6 @@
 }
 
 .container img {
-    margin-right: var(--space-eight);
+    width: var(--size-default);
+    margin-right: var(--space-quarter);
 }

frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css

@@ -32,7 +32,7 @@
 
 .primaryText {
     color: var(--color-default);
-    font-size: 1.6rem;
+    font-size: var(--size-default);
     margin: 0;
 }
 

frontends/web/src/routes/settings/manage-accounts.module.css

@@ -58,6 +58,7 @@
 }
 
 .coinLogo {
+    display: block;
     position: relative;
     z-index: 2;
 }
@@ -83,20 +84,23 @@
 }
 
 .toggleLabel {
-    align-items: center;
+    align-items: baseline;
     display: flex;
     justify-content: space-between;
 }
 
 .toggleLabelText {
+    align-items: baseline;
     color: var(--color-secondary);
+    display: flex;
 }
 
 .toggleLabelText img {
     color: var(--color-secondary);
     margin-right: var(--space-quarter);
-    max-width: 18px;
-    vertical-align: bottom;
+    max-height: var(--size-default);
+    height: auto;
+    width: var(--size-default);
 }
 
 .toggle {
@@ -150,7 +154,7 @@
 .token::before {
     background-color: #ddd;
     content: "";
-    height: 22px;
+    height: 4.2rem;
     left: 10px;
     position: absolute;
     top: -13px;
@@ -163,6 +167,13 @@
     top: -7px;
 }
 
+.tokenIcon,
+.token img {
+    background: var(--background-secondary);
+    outline: 5px solid var(--background-secondary);
+    position: relative;
+}
+
 .token img:first-child {
     margin-right: 0;
 }

frontends/web/src/routes/settings/manage-accounts.tsx

@@ -186,7 +186,7 @@ export const ManageAccounts = ({ accounts, devices, hasAccounts }: Props) => {
               <span className="unit">({account.coinUnit})</span>
             </span>
           </div>
-          <div className="flex flex-items-center">
+          <div>
             {!account.active ? (
               <p className={`text-small ${style.disabledText || ''}`}>
                 {t('generic.enabled_false')}
@@ -288,7 +288,9 @@ export const ManageAccounts = ({ accounts, devices, hasAccounts }: Props) => {
                         htmlFor={currentlyEditedAccount.code}>
                         <span className={style.toggleLabelText}>
                           <EyeOpenedDark />
-                          {t('newSettings.appearance.enableAccount.title')}
+                          <span>
+                            {t('newSettings.appearance.enableAccount.title')}
+                          </span>
                         </span>
                         <Toggle
                           checked={currentlyEditedAccount.active}

frontends/web/src/style/layout.css

@@ -154,7 +154,7 @@ button, textarea {
 
 .tabs .tab {
     width: 50%;
-    height: 52px;
+    height: min(5.2rem, 100px);
     border: solid 1px var(--color-gray);
     transition: all .2s ease-out;
 }