mirror of
https://github.com/revoltchat/revite.git
synced 2025-02-21 07:42:52 -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;
|
transition: transform ease-in-out 0.1s;
|
||||||
filter: brightness(1);
|
filter: brightness(1);
|
||||||
|
|
||||||
|
> span > p {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
filter: brightness(2);
|
filter: brightness(2);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,53 @@
|
||||||
.home {
|
.home {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
h3 {
|
.homeScreen {
|
||||||
margin: 1em 0;
|
|
||||||
font-size: 48px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
gap: 8px;
|
|
||||||
width: 236px;
|
|
||||||
|
|
||||||
margin: auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
width: fit-content;
|
|
||||||
align-items: stretch;
|
|
||||||
flex-direction: column;
|
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 {
|
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 { Link } from "react-router-dom";
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
|
|
||||||
|
|
@ -103,72 +112,110 @@ export default function Home() {
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div className="content">
|
||||||
<Header placement="primary">
|
<Header placement="primary">
|
||||||
<IconConainer onClick={toggleChannelSidebar}>
|
<IconConainer onClick={toggleChannelSidebar}>
|
||||||
<HomeIcon size={24} />
|
<HomeIcon size={24} />
|
||||||
</IconConainer>
|
</IconConainer>
|
||||||
<Text id="app.navigation.tabs.home" />
|
<Text id="app.navigation.tabs.home" />
|
||||||
</Header>
|
</Header>
|
||||||
<h3>
|
<div className={styles.homeScreen}>
|
||||||
<Text id="app.special.modals.onboarding.welcome" />
|
<h3>
|
||||||
<br />
|
<Text id="app.special.modals.onboarding.welcome" />
|
||||||
<img src={wideSVG} />
|
<br />
|
||||||
</h3>
|
<img src={wideSVG} />
|
||||||
<div className={styles.actions}>
|
</h3>
|
||||||
<Link to="/invite/Testers">
|
<div className={styles.actions}>
|
||||||
<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" />}>
|
|
||||||
<Link to="/settings">
|
<Link to="/settings">
|
||||||
<CategoryButton
|
<CategoryButton
|
||||||
action="chevron"
|
action="chevron"
|
||||||
icon={<Emoji emoji="🔧" size={32} />}>
|
icon={<PlusCircle size={32} />}
|
||||||
<Text id="app.home.settings" />
|
description={
|
||||||
|
"Invite all of your friends, some cool bots, and throw a big party."
|
||||||
|
}>
|
||||||
|
Create a group
|
||||||
</CategoryButton>
|
</CategoryButton>
|
||||||
</Link>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</Overlay>
|
</Overlay>{" "}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
// Pure CSS Snowfall
|
// Pure CSS Snowfall
|
||||||
// Released by Artimon under MIT license
|
// Released by Artimon under MIT license
|
||||||
|
//
|
||||||
|
// Source: https://github.com/Artimon/pure-css-snowfall
|
||||||
|
|
||||||
$count: 36;
|
$count: 36;
|
||||||
$screenOffset: 0px;
|
$screenOffset: 0px;
|
||||||
|
|
|
||||||
|
|
@ -149,11 +149,21 @@
|
||||||
|
|
||||||
.badgePicker {
|
.badgePicker {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
//padding-bottom: 8px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.check {
|
.check {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
flex-shrink: 0;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
background: var(--secondary-background);
|
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 {
|
.row {
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
.pfp {
|
.pfp {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -74,10 +74,15 @@ export const Profile = observer(() => {
|
||||||
</div>
|
</div>
|
||||||
{/*<h3>Badges</h3>
|
{/*<h3>Badges</h3>
|
||||||
<div className={styles.badgePicker}>
|
<div className={styles.badgePicker}>
|
||||||
<div className={styles.check}>a</div>
|
<div className={styles.overlay} />
|
||||||
<div className={styles.check}>b</div>
|
<div className={styles.container}>
|
||||||
<div className={styles.check}>c</div>
|
<div className={styles.check}>a</div>
|
||||||
|
<div className={styles.check}>b</div>
|
||||||
|
<div className={styles.check}>c</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.overlay2} />
|
||||||
</div>*/}
|
</div>*/}
|
||||||
|
<hr />
|
||||||
<div className={styles.row}>
|
<div className={styles.row}>
|
||||||
<div className={styles.pfp}>
|
<div className={styles.pfp}>
|
||||||
<h3>
|
<h3>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos";
|
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 {
|
import {
|
||||||
Safari,
|
Safari,
|
||||||
Firefoxbrowser,
|
Firefoxbrowser,
|
||||||
|
|
@ -24,6 +24,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||||
import Button from "../../../components/ui/Button";
|
import Button from "../../../components/ui/Button";
|
||||||
import Preloader from "../../../components/ui/Preloader";
|
import Preloader from "../../../components/ui/Preloader";
|
||||||
import Tip from "../../../components/ui/Tip";
|
import Tip from "../../../components/ui/Tip";
|
||||||
|
import CategoryButton from "../../../components/ui/fluent/CategoryButton";
|
||||||
|
|
||||||
dayjs.extend(relativeTime);
|
dayjs.extend(relativeTime);
|
||||||
|
|
||||||
|
|
@ -207,7 +208,7 @@ export function Sessions() {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<Button
|
{/*<Button
|
||||||
error
|
error
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
// ! FIXME: add to rAuth
|
// ! FIXME: add to rAuth
|
||||||
|
|
@ -230,7 +231,37 @@ export function Sessions() {
|
||||||
setSessions(sessions.filter((x) => x._id === deviceId));
|
setSessions(sessions.filter((x) => x._id === deviceId));
|
||||||
}}>
|
}}>
|
||||||
<Text id="app.settings.pages.sessions.logout" />
|
<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>
|
<Tip>
|
||||||
<span>
|
<span>
|
||||||
<Text id="app.settings.tips.sessions.a" />
|
<Text id="app.settings.tips.sessions.a" />
|
||||||
|
|
|
||||||
|
|
@ -296,6 +296,7 @@ export function ThemeShop() {
|
||||||
<Tip warning hideSeparator>
|
<Tip warning hideSeparator>
|
||||||
The Theme Shop is currently under construction.
|
The Theme Shop is currently under construction.
|
||||||
</Tip>
|
</Tip>
|
||||||
|
<hr />
|
||||||
{/* FIXME INTEGRATE WITH MOBX */}
|
{/* FIXME INTEGRATE WITH MOBX */}
|
||||||
{/*<ActiveTheme>
|
{/*<ActiveTheme>
|
||||||
<div class="active-indicator">
|
<div class="active-indicator">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue