Kieran
/
snort
5
14
Fork 14
Code Issues 52 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

Fix settings styles

This commit is contained in:
Jeremy Karlsson 2023-03-02 18:47:15 +01:00
parent b4a132d4a2
commit dd1278ba7c
No known key found for this signature in database
GPG Key ID: 58E2A72093092D1C
2 changed files with 21 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app/src/Pages/settings/Index.css
View File

@ -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;
}

37
packages/app/src/Pages/settings/Index.tsx
View File

@ -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>