mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-21 22:50:59 -05:00
fix(home,settings): updated homepage, settings
* new home screen * cleaned up settings
This commit is contained in:
trashtemp
Paul Makles
parent
73d99e4518
commit
d2d7083542
9 changed files with 238 additions and 80 deletions
2
external/lang
vendored
2
external/lang
vendored
|
|
@ -1 +1 @@
|
|||
Subproject commit 84d711fc721b125df3bedd8d2194494cc0666286
|
||||
Subproject commit 026f884b54f515d3e47f2dbd410c2386b5fa68a9
|
||||
|
|
@ -98,6 +98,12 @@ export const ReplyBase = styled.div<{
|
|||
transition: transform ease-in-out 0.1s;
|
||||
filter: brightness(1);
|
||||
|
||||
> span > p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,53 @@
|
|||
.home {
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
h3 {
|
||||
margin: 1em 0;
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
gap: 8px;
|
||||
width: 236px;
|
||||
|
||||
margin: auto;
|
||||
.homeScreen {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 95%;
|
||||
padding: 12px;
|
||||
|
||||
h3 {
|
||||
margin: 20px 0;
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
//grid-template-columns: repeat(2, 300px);
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
grid-column: span 2;
|
||||
gap: 16px;
|
||||
//margin: auto;
|
||||
display: grid;
|
||||
width: fit-content;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
|
||||
&:nth-child(4) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,13 @@
|
|||
import { Home as HomeIcon } from "@styled-icons/boxicons-solid";
|
||||
import { Money } from "@styled-icons/boxicons-regular";
|
||||
import {
|
||||
Home as HomeIcon,
|
||||
PlusCircle,
|
||||
Compass,
|
||||
Megaphone,
|
||||
Group,
|
||||
Cog,
|
||||
RightArrowCircle,
|
||||
} from "@styled-icons/boxicons-solid";
|
||||
import { Link } from "react-router-dom";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
|
|
@ -103,72 +112,110 @@ export default function Home() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div class="content">
|
||||
<div className="content">
|
||||
<Header placement="primary">
|
||||
<IconConainer onClick={toggleChannelSidebar}>
|
||||
<HomeIcon size={24} />
|
||||
</IconConainer>
|
||||
<Text id="app.navigation.tabs.home" />
|
||||
</Header>
|
||||
<h3>
|
||||
<Text id="app.special.modals.onboarding.welcome" />
|
||||
<br />
|
||||
<img src={wideSVG} />
|
||||
</h3>
|
||||
<div className={styles.actions}>
|
||||
<Link to="/invite/Testers">
|
||||
<CategoryButton
|
||||
action="chevron"
|
||||
icon={<Emoji emoji="😁" size={32} />}>
|
||||
{client.servers.get(
|
||||
"01F7ZSBSFHQ8TA81725KQCSDDP",
|
||||
) ? (
|
||||
<Text id="app.home.goto-testers" />
|
||||
) : (
|
||||
<Text id="app.home.join-testers" />
|
||||
)}
|
||||
</CategoryButton>
|
||||
</Link>
|
||||
<a
|
||||
href="https://insrt.uk/donate"
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<CategoryButton
|
||||
action="external"
|
||||
icon={<Emoji emoji="💷" size={32} />}>
|
||||
<Text id="app.home.donate" />
|
||||
</CategoryButton>
|
||||
</a>
|
||||
<Link to="/settings/feedback">
|
||||
<CategoryButton
|
||||
action="chevron"
|
||||
icon={<Emoji emoji="🎉" size={32} />}>
|
||||
<Text id="app.home.feedback" />
|
||||
</CategoryButton>
|
||||
</Link>
|
||||
<a
|
||||
href="https://revolt.social"
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<CategoryButton
|
||||
action="external"
|
||||
icon={<Emoji emoji="🧭" size={32} />}>
|
||||
<Text id="app.home.social" />
|
||||
</CategoryButton>
|
||||
</a>
|
||||
<Tooltip
|
||||
content={<Text id="app.home.settings-tooltip" />}>
|
||||
<div className={styles.homeScreen}>
|
||||
<h3>
|
||||
<Text id="app.special.modals.onboarding.welcome" />
|
||||
<br />
|
||||
<img src={wideSVG} />
|
||||
</h3>
|
||||
<div className={styles.actions}>
|
||||
<Link to="/settings">
|
||||
<CategoryButton
|
||||
action="chevron"
|
||||
icon={<Emoji emoji="🔧" size={32} />}>
|
||||
<Text id="app.home.settings" />
|
||||
icon={<PlusCircle size={32} />}
|
||||
description={
|
||||
"Invite all of your friends, some cool bots, and throw a big party."
|
||||
}>
|
||||
Create a group
|
||||
</CategoryButton>
|
||||
</Link>
|
||||
</Tooltip>
|
||||
<a
|
||||
href="https://revolt.social"
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<CategoryButton
|
||||
action="external"
|
||||
icon={<Compass size={32} />}
|
||||
description={
|
||||
"Find a community based on your hobbies or interests."
|
||||
}>
|
||||
Join a community
|
||||
</CategoryButton>
|
||||
</a>
|
||||
|
||||
{client.servers.get(
|
||||
"01F7ZSBSFHQ8TA81725KQCSDDP",
|
||||
) ? (
|
||||
<Link to="/server/01F7ZSBSFHQ8TA81725KQCSDDP">
|
||||
<CategoryButton
|
||||
action="chevron"
|
||||
icon={<RightArrowCircle size={32} />}
|
||||
description={
|
||||
"You can report issues and discuss improvements with us directly here."
|
||||
}>
|
||||
<Text id="app.home.goto-testers" />
|
||||
</CategoryButton>
|
||||
</Link>
|
||||
) : (
|
||||
<Link to="/invite/Testers">
|
||||
<CategoryButton
|
||||
action="chevron"
|
||||
icon={<Group size={32} />}
|
||||
description={
|
||||
"You can report issues and discuss improvements with us directly here."
|
||||
}>
|
||||
<Text id="app.home.join-testers" />
|
||||
</CategoryButton>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Link to="/settings/feedback">
|
||||
<CategoryButton
|
||||
action="chevron"
|
||||
icon={<Megaphone size={32} />}
|
||||
description={
|
||||
"Let us know how we can improve our app by giving us feedback."
|
||||
}>
|
||||
<Text id="app.home.feedback" />
|
||||
</CategoryButton>
|
||||
</Link>
|
||||
<a
|
||||
href="https://insrt.uk/donate"
|
||||
target="_blank"
|
||||
rel="noreferrer">
|
||||
<CategoryButton
|
||||
action="external"
|
||||
icon={<Money size={32} />}>
|
||||
<Text id="app.home.donate" />
|
||||
</CategoryButton>
|
||||
</a>
|
||||
|
||||
<Tooltip
|
||||
content={
|
||||
<Text id="app.home.settings-tooltip" />
|
||||
}>
|
||||
<Link to="/settings">
|
||||
<CategoryButton
|
||||
action="chevron"
|
||||
icon={<Cog size={32} />}>
|
||||
<Text id="app.home.settings" />
|
||||
</CategoryButton>
|
||||
</Link>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Link to="/settings/appearance">
|
||||
<a>Turn off homescreen effects</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Overlay>
|
||||
</Overlay>{" "}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
// Pure CSS Snowfall
|
||||
// Released by Artimon under MIT license
|
||||
//
|
||||
// Source: https://github.com/Artimon/pure-css-snowfall
|
||||
|
||||
$count: 36;
|
||||
$screenOffset: 0px;
|
||||
|
|
|
|||
|
|
@ -149,11 +149,21 @@
|
|||
|
||||
.badgePicker {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
//padding-bottom: 8px;
|
||||
position: relative;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.check {
|
||||
cursor: pointer;
|
||||
|
||||
flex-shrink: 0;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background: var(--secondary-background);
|
||||
|
|
@ -173,9 +183,41 @@
|
|||
}
|
||||
}
|
||||
|
||||
// TOFIX: need to merge overlay 1 and 2 later
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
flex-shrink: 0;
|
||||
width: 8px;
|
||||
background: red;
|
||||
height: 100%;
|
||||
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--primary-background),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.overlay2 {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
flex-shrink: 0;
|
||||
width: 8px;
|
||||
background: red;
|
||||
height: 100%;
|
||||
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
var(--primary-background),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.row {
|
||||
gap: 20px;
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.pfp {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -74,10 +74,15 @@ export const Profile = observer(() => {
|
|||
</div>
|
||||
{/*<h3>Badges</h3>
|
||||
<div className={styles.badgePicker}>
|
||||
<div className={styles.check}>a</div>
|
||||
<div className={styles.check}>b</div>
|
||||
<div className={styles.check}>c</div>
|
||||
<div className={styles.overlay} />
|
||||
<div className={styles.container}>
|
||||
<div className={styles.check}>a</div>
|
||||
<div className={styles.check}>b</div>
|
||||
<div className={styles.check}>c</div>
|
||||
</div>
|
||||
<div className={styles.overlay2} />
|
||||
</div>*/}
|
||||
<hr />
|
||||
<div className={styles.row}>
|
||||
<div className={styles.pfp}>
|
||||
<h3>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos";
|
||||
import { HelpCircle, Desktop } from "@styled-icons/boxicons-regular";
|
||||
import { HelpCircle, Desktop, LogOut } from "@styled-icons/boxicons-regular";
|
||||
import {
|
||||
Safari,
|
||||
Firefoxbrowser,
|
||||
|
|
@ -24,6 +24,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
|||
import Button from "../../../components/ui/Button";
|
||||
import Preloader from "../../../components/ui/Preloader";
|
||||
import Tip from "../../../components/ui/Tip";
|
||||
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
|
||||
|
||||
dayjs.extend(relativeTime);
|
||||
|
||||
|
|
@ -207,7 +208,7 @@ export function Sessions() {
|
|||
</div>
|
||||
);
|
||||
})}
|
||||
<Button
|
||||
{/*<Button
|
||||
error
|
||||
onClick={async () => {
|
||||
// ! FIXME: add to rAuth
|
||||
|
|
@ -230,7 +231,37 @@ export function Sessions() {
|
|||
setSessions(sessions.filter((x) => x._id === deviceId));
|
||||
}}>
|
||||
<Text id="app.settings.pages.sessions.logout" />
|
||||
</Button>
|
||||
</Button>*/}
|
||||
|
||||
<CategoryButton
|
||||
onClick={async () => {
|
||||
// ! FIXME: add to rAuth
|
||||
const del: string[] = [];
|
||||
render.forEach((session) => {
|
||||
if (deviceId !== session._id) {
|
||||
del.push(session._id);
|
||||
}
|
||||
});
|
||||
|
||||
setDelete(del);
|
||||
|
||||
for (const id of del) {
|
||||
await client.req(
|
||||
"DELETE",
|
||||
`/auth/session/${id}` as "/auth/session/id",
|
||||
);
|
||||
}
|
||||
|
||||
setSessions(sessions.filter((x) => x._id === deviceId));
|
||||
}}
|
||||
icon={<LogOut size={24} color={"var(--error)"} />}
|
||||
action={"chevron"}
|
||||
description={
|
||||
"Logs you out of all sessions except this device."
|
||||
}>
|
||||
<Text id="app.settings.pages.sessions.logout" />
|
||||
</CategoryButton>
|
||||
|
||||
<Tip>
|
||||
<span>
|
||||
<Text id="app.settings.tips.sessions.a" />
|
||||
|
|
|
|||
|
|
@ -296,6 +296,7 @@ export function ThemeShop() {
|
|||
<Tip warning hideSeparator>
|
||||
The Theme Shop is currently under construction.
|
||||
</Tip>
|
||||
<hr />
|
||||
{/* FIXME INTEGRATE WITH MOBX */}
|
||||
{/*<ActiveTheme>
|
||||
<div class="active-indicator">
|
||||
|
|
|
|||
Loading…
Reference in a new issue