Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Settings page and UI tweaks (#200)

Browse Source
This commit is contained in:
Alejandro
2023-02-05 23:44:31 +01:00
committed by GitHub
parent a1d42fa9fb
commit 40a5e00dc5
17 changed files with 235 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/Pages/ProfilePage.css
View File

@ -9,11 +9,50 @@
height: 160px;
object-fit: cover;
margin-bottom: -60px;
mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
-webkit-mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
z-index: 0;
}
.profile .profile-actions {
position: absolute;
top: 80px;
right: 0;
display: flex;
flex-direction: row;
align-items: center;
}
.profile .icon-actions {
display: flex;
flex-direction: row;
align-items: center;
}
@media (min-width: 520px) {
.profile .profile-actions {
top: 120px;
}
}
.profile .profile-actions button:not(:last-child) {
margin-right: 8px;
}
.profile .profile-actions button.icon:not(:last-child) {
margin-right: 0;
}
@media (min-width: 520px) {
.profile .banner {
width: 100%;
max-width: 720px;
height: 300px;
}
.profile .profile-actions button.icon:not(:last-child) {
margin-right: 2px;
}
}
.profile .profile-wrapper {
margin: 0 16px;
width: calc(100% - 32px);
@ -61,13 +100,12 @@
}
.profile .details {
width: 100%;
margin-top: 12px;
background-color: var(--note-bg);
padding: 12px 16px;
border-radius: 16px;
margin: 0 auto;
margin-bottom: 12px;
width: 100%;
color: var(--font-secondary-color);
margin-bottom: 12px;
font-weight: 400;
font-size: 14px;
line-height: 22px;
}
.profile .details p {
@ -105,16 +143,6 @@
margin-bottom: 12px;
}
.profile h3 {
color: var(--font-secondary-color);
font-size: 10px;
letter-spacing: .11em;
font-weight: 600;
line-height: 12px;
text-transform: uppercase;
margin-left: 12px;
}
.profile .website {
margin: 4px 0;
display: flex;
@ -163,47 +191,6 @@
height: 12px;
}
.profile .profile-actions {
position: absolute;
top: 80px;
right: 0;
display: flex;
flex-direction: row;
align-items: center;
}
.profile .icon-actions {
display: flex;
flex-direction: row;
align-items: center;
}
@media (min-width: 520px) {
.profile .profile-actions {
top: 120px;
}
}
.profile .profile-actions button:not(:last-child) {
margin-right: 8px;
}
.profile .profile-actions button.icon:not(:last-child) {
margin-right: 0;
}
@media (min-width: 520px) {
.profile .banner {
width: 100%;
max-width: 720px;
height: 300px;
margin-bottom: -100px;
}
.profile .profile-actions button.icon:not(:last-child) {
margin-right: 2px;
}
}
.profile .npub {
display: flex;
flex-direction: row;

1
src/Pages/ProfilePage.tsx
View File

@ -108,7 +108,6 @@ export default function ProfilePage() {
function bio() {
return aboutText.length > 0 && (
<>
<h3>Bio</h3>
<div className="details">
{about}
</div>

24
src/Pages/settings/Index.css
View File

@ -1,3 +1,25 @@
.settings-nav .card {
cursor: pointer;
}
}
.settings-row {
display: flex;
flex-direction: row;
align-items: center;
font-weight: 600;
font-size: 16px;
line-height: 19px;
padding: 12px 16px;
background: var(--note-bg);
border-radius: 10px;
cursor: pointer;
margin-bottom: 10px;
}
.settings-row:hover {
color: var(--highlight);
}
.align-end {
margin-left: auto;
}

65
src/Pages/settings/Index.tsx
View File

@ -2,8 +2,12 @@ import "./Index.css";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { faRightFromBracket, faCircleDollarToSlot, faGear, faPlug, faUser } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
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 { logout } from "State/Login";
@ -19,29 +23,56 @@ const SettingsIndex = () => {
return (
<>
<div className="settings-nav">
<div className="card" onClick={() => navigate("profile")}>
<FontAwesomeIcon icon={faUser} size="xl" className="mr10" />
<div className="settings-row" onClick={() => navigate("profile")}>
<div className="mr10">
<Profile />
</div>
<span>
Profile
</span>
<div className="align-end">
<ArrowFront />
</div>
</div>
<div className="card" onClick={() => navigate("relays")}>
<FontAwesomeIcon icon={faPlug} size="xl" className="mr10" />
Relays
<div className="settings-row" onClick={() => navigate("relays")}>
<div className="mr10">
<Relay />
</div>
Relays
<div className="align-end">
<ArrowFront />
</div>
</div>
<div className="card" onClick={() => navigate("preferences")}>
<FontAwesomeIcon icon={faGear} size="xl" className="mr10" />
Preferences
<div className="settings-row" onClick={() => navigate("preferences")}>
<div className="mr10">
<Gear />
</div>
Preferences
<div className="align-end">
<ArrowFront />
</div>
</div>
<div className="card" onClick={() => navigate("/donate")}>
<FontAwesomeIcon icon={faCircleDollarToSlot} size="xl" className="mr10" />
Donate
<div className="settings-row" onClick={() => navigate("/donate")}>
<div className="mr10">
<Heart />
</div>
Donate
<div className="align-end">
<ArrowFront />
</div>
</div>
<div className="card" onClick={handleLogout}>
<FontAwesomeIcon icon={faRightFromBracket} size="xl" className="mr10" />
Log Out
<div className="settings-row" onClick={handleLogout}>
<div className="mr10">
<Logout />
</div>
Log Out
<div className="align-end">
<ArrowFront />
</div>
</div>
</div>
</>
)
}
export default SettingsIndex;
export default SettingsIndex;