Optimize settings view

.gitignore

@@ -1,2 +1,4 @@
 node_modules/
 .idea
+.yarn
+yarn.lock

packages/app/src/Pages/settings/Index.css

@@ -3,33 +3,31 @@
 }
 
 .settings-row {
-  display: flex;
+  display: grid;
-  flex-direction: row;
+  grid-template-columns: 22px 1fr 8px;
   align-items: center;
   font-weight: 600;
   font-size: 16px;
-  line-height: 19px;
+  padding: 0.8em 1em;
-  padding: 12px 16px;
   background: var(--note-bg);
   border-radius: 10px;
   cursor: pointer;
-  margin-bottom: 10px;
+  gap: 10px;
 }
 
 .settings-row:hover {
   color: var(--highlight);
 }
 
+.settings-row + .settings-row {
+  margin-top: 10px;
+}
+
 .align-end {
   margin-left: auto;
 }
 
-.settings-row > svg {
+.settings-row svg {
-  width: 22px;
+  width: 100%;
-  height: 22px;
+  height: 100%;
-}
-
-.settings-row div:last-child svg {
-  width: 8px;
-  height: 14px;
 }

packages/app/src/Pages/settings/Index.tsx

@@ -20,41 +20,29 @@ const SettingsIndex = () => {
     <>
       <div className="settings-nav">
         <div className="settings-row" onClick={() => navigate("profile")}>
-          <Icon name="profile" className="mr10" />
+          <Icon name="profile" />
-          <span>
+          <FormattedMessage {...messages.Profile} />
-            <FormattedMessage {...messages.Profile} />
+          <Icon name="arrowFront" />
-          </span>
-          <div className="align-end">
-            <Icon name="arrowFront" />
-          </div>
         </div>
         <div className="settings-row" onClick={() => navigate("relays")}>
-          <Icon name="relay" className="mr10" />
+          <Icon name="relay" />
           <FormattedMessage {...messages.Relays} />
-          <div className="align-end">
+          <Icon name="arrowFront" />
-            <Icon name="arrowFront" />
-          </div>
         </div>
         <div className="settings-row" onClick={() => navigate("preferences")}>
-          <Icon name="gear" className="mr10" />
+          <Icon name="gear" />
           <FormattedMessage {...messages.Preferences} />
-          <div className="align-end">
+          <Icon name="arrowFront" />
-            <Icon name="arrowFront" />
-          </div>
         </div>
         <div className="settings-row" onClick={() => navigate("/donate")}>
-          <Icon name="heart" className="mr10" />
+          <Icon name="heart" />
           <FormattedMessage {...messages.Donate} />
-          <div className="align-end">
+          <Icon name="arrowFront" />
-            <Icon name="arrowFront" />
-          </div>
         </div>
         <div className="settings-row" onClick={handleLogout}>
-          <Icon name="logout" className="mr10" />
+          <Icon name="logout" />
           <FormattedMessage {...messages.LogOut} />
-          <div className="align-end">
+          <Icon name="arrowFront" />
-            <Icon name="arrowFront" />
-          </div>
         </div>
       </div>
     </>