From dd1278ba7cc34c5947232da08c340011b02e44ff Mon Sep 17 00:00:00 2001
From: Jeremy Karlsson <jeremy.karlsson@tidal.com>
Date: Thu, 2 Mar 2023 18:47:15 +0100
Subject: [PATCH] Fix settings styles

---
 packages/app/src/Pages/settings/Index.css | 10 ++++++
 packages/app/src/Pages/settings/Index.tsx | 37 +++++++----------------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/packages/app/src/Pages/settings/Index.css b/packages/app/src/Pages/settings/Index.css
index ee6b1b62..729733c9 100644
--- a/packages/app/src/Pages/settings/Index.css
+++ b/packages/app/src/Pages/settings/Index.css
@@ -23,3 +23,13 @@
 .align-end {
   margin-left: auto;
 }
+
+.settings-row > svg {
+  width: 22px;
+  height: 22px;
+}
+
+.settings-row div:last-child svg {
+  width: 8px;
+  height: 14px;
+}
\ No newline at end of file
diff --git a/packages/app/src/Pages/settings/Index.tsx b/packages/app/src/Pages/settings/Index.tsx
index 595f9ff4..d38d07a3 100644
--- a/packages/app/src/Pages/settings/Index.tsx
+++ b/packages/app/src/Pages/settings/Index.tsx
@@ -2,12 +2,7 @@ import "./Index.css";
 import { FormattedMessage } from "react-intl";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import ArrowFront from "Icons/ArrowFront";
-import Gear from "Icons/Gear";
-import Profile from "Icons/Profile";
-import Relay from "Icons/Relay";
-import Heart from "Icons/Heart";
-import Logout from "Icons/Logout";
+import Icon from "Icons/Icon";
 import { logout } from "State/Login";
 
 import messages from "./messages";
@@ -25,50 +20,40 @@ const SettingsIndex = () => {
     <>
       <div className="settings-nav">
         <div className="settings-row" onClick={() => navigate("profile")}>
-          <div className="mr10">
-            <Profile />
-          </div>
+          <Icon name="profile" className="mr10" />
           <span>
             <FormattedMessage {...messages.Profile} />
           </span>
           <div className="align-end">
-            <ArrowFront />
+            <Icon name="arrowFront" />
           </div>
         </div>
         <div className="settings-row" onClick={() => navigate("relays")}>
-          <div className="mr10">
-            <Relay />
-          </div>
+          <Icon name="relay" className="mr10" />
           <FormattedMessage {...messages.Relays} />
           <div className="align-end">
-            <ArrowFront />
+            <Icon name="arrowFront" />
           </div>
         </div>
         <div className="settings-row" onClick={() => navigate("preferences")}>
-          <div className="mr10">
-            <Gear />
-          </div>
+          <Icon name="gear" className="mr10" />
           <FormattedMessage {...messages.Preferences} />
           <div className="align-end">
-            <ArrowFront />
+            <Icon name="arrowFront" />
           </div>
         </div>
         <div className="settings-row" onClick={() => navigate("/donate")}>
-          <div className="mr10">
-            <Heart />
-          </div>
+          <Icon name="heart" className="mr10" />
           <FormattedMessage {...messages.Donate} />
           <div className="align-end">
-            <ArrowFront />
+            <Icon name="arrowFront" />
           </div>
         </div>
         <div className="settings-row" onClick={handleLogout}>
-          <div className="mr10">
-            <Logout />
-          </div>
+          <Icon name="logout" className="mr10" />
           <FormattedMessage {...messages.LogOut} />
           <div className="align-end">
-            <ArrowFront />
+            <Icon name="arrowFront" />
           </div>
         </div>
       </div>