diff --git a/index.html b/index.html
index 9bef75d37c3599bd57159672e742ae5fa91c51a3..70ebae87429c89d8bc8f9926d43277af2b79391c 100644
--- a/index.html
+++ b/index.html
@@ -1,37 +1,82 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8" />
- <title>Revolt</title>
- <meta name="apple-mobile-web-app-title" content="Revolt">
+ <head>
+ <meta charset="UTF-8" />
+ <title>Revolt</title>
+ <meta name="apple-mobile-web-app-title" content="Revolt" />
- <!--<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />-->
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0, user-scalable=no"
+ />
+ <meta name="apple-mobile-web-app-capable" content="yes" />
- <!--App Icons-->
- <link rel="apple-touch-icon" href="public/assets/icons/apple-touch.png">
- <link rel="icon" type="image/png" href="/src/assets/logo_round.png" />
+ <!--App Icons-->
+ <link
+ rel="apple-touch-icon"
+ href="public/assets/icons/apple-touch.png"
+ />
+ <link rel="icon" type="image/png" href="/src/assets/logo_round.png" />
- <!--Splash Screens for iOS Devices-->
- <link href="public/assets/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
- <link href="public/assets/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
- <link href="public/assets/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
- <link href="public/assets/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
- <link href="public/assets/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
- <link href="public/assets/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
- <link href="public/assets/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
- <link href="public/assets/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
- <link href="public/assets/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
- <link href="public/assets/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
-</head>
-<body>
- <div id="app"></div>
- <script type="module" src="/src/main.tsx"></script>
-</body>
-<style>
- html {
- background-color: #191919;
- }
-</style>
-</html>
\ No newline at end of file
+ <!--Splash Screens for iOS Devices-->
+ <link
+ href="public/assets/splashscreens/iphone5_splash.png"
+ media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
+ rel="apple-touch-startup-image"
+ />
+ <link
+ href="public/assets/splashscreens/iphone6_splash.png"
+ media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
+ rel="apple-touch-startup-image"
+ />
+ <link
+ href="public/assets/splashscreens/iphoneplus_splash.png"
+ media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
+ rel="apple-touch-startup-image"
+ />
+ <link
+ href="public/assets/splashscreens/iphonex_splash.png"
+ media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
+ rel="apple-touch-startup-image"
+ />
+ <link
+ href="public/assets/splashscreens/iphonexr_splash.png"
+ media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
+ rel="apple-touch-startup-image"
+ />
+ <link
+ href="public/assets/splashscreens/iphonexsmax_splash.png"
+ media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
+ rel="apple-touch-startup-image"
+ />
+ <link
+ href="public/assets/splashscreens/ipad_splash.png"
+ media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
+ rel="apple-touch-startup-image"
+ />
+ <link
+ href="public/assets/splashscreens/ipadpro1_splash.png"
+ media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
+ rel="apple-touch-startup-image"
+ />
+ <link
+ href="public/assets/splashscreens/ipadpro3_splash.png"
+ media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
+ rel="apple-touch-startup-image"
+ />
+ <link
+ href="public/assets/splashscreens/ipadpro2_splash.png"
+ media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
+ rel="apple-touch-startup-image"
+ />
+ </head>
+ <body ontouchstart="">
+ <div id="app"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+ <style>
+ html {
+ background-color: #191919;
+ }
+ </style>
+</html>
diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index b9c9f5463f5f5b1aebadfa74fdfce0377514ae38..c2b0dfee18980b645f027c7f800521a624a63762 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/src/pages/settings/GenericSettings.tsx
@@ -3,8 +3,9 @@ import { Helmet } from "react-helmet";
import { Switch, useHistory, useParams } from "react-router-dom";
import styles from "./Settings.module.scss";
+import classNames from "classnames";
import { Text } from "preact-i18n";
-import { useContext, useEffect } from "preact/hooks";
+import { useContext, useEffect, useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
@@ -25,6 +26,7 @@ interface Props {
id: string;
icon: Children;
title: Children;
+ hidden?: boolean;
hideTitle?: boolean;
}[];
custom?: Children;
@@ -48,9 +50,14 @@ export function GenericSettings({
const theme = useContext(ThemeContext);
const { page } = useParams<{ page: string }>();
+ const [closing, setClosing] = useState(false);
function exitSettings() {
- if (history.length > 0) {
- history.goBack();
+ if (history.length > 1) {
+ setClosing(true);
+
+ setTimeout(() => {
+ history.goBack();
+ }, 100);
} else {
history.push("/");
}
@@ -68,7 +75,12 @@ export function GenericSettings({
}, []);
return (
- <div className={styles.settings} data-mobile={isTouchscreenDevice}>
+ <div
+ className={classNames(styles.settings, {
+ [styles.closing]: closing,
+ [styles.native]: window.isNative,
+ })}
+ data-mobile={isTouchscreenDevice}>
<Helmet>
<meta
name="theme-color"
@@ -111,28 +123,30 @@ export function GenericSettings({
{(!isTouchscreenDevice || typeof page === "undefined") && (
<div className={styles.sidebar}>
<div className={styles.container}>
- {pages.map((entry, i) => (
- <>
- {entry.category && (
- <Category
- variant="uniform"
- text={entry.category}
- />
- )}
- <ButtonItem
- active={
- page === entry.id ||
- (i === 0 &&
- !isTouchscreenDevice &&
- typeof page === "undefined")
- }
- onClick={() => switchPage(entry.id)}
- compact>
- {entry.icon} {entry.title}
- </ButtonItem>
- {entry.divider && <LineDivider />}
- </>
- ))}
+ {pages.map((entry, i) =>
+ entry.hidden ? undefined : (
+ <>
+ {entry.category && (
+ <Category
+ variant="uniform"
+ text={entry.category}
+ />
+ )}
+ <ButtonItem
+ active={
+ page === entry.id ||
+ (i === 0 &&
+ !isTouchscreenDevice &&
+ typeof page === "undefined")
+ }
+ onClick={() => switchPage(entry.id)}
+ compact>
+ {entry.icon} {entry.title}
+ </ButtonItem>
+ {entry.divider && <LineDivider />}
+ </>
+ ),
+ )}
{custom}
</div>
</div>
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index b34ddd975d42e8e8c136675a308ed103e3dbd81d..7dc73b2fbdd288b403ec2df16677d621c8044046 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -69,6 +69,10 @@
height: 100%;
position: fixed;
animation: open 0.18s ease-out, opacity 0.18s;
+
+ &.closing {
+ animation: close 0.18s ease-in;
+ }
}
.settings {
diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx
index c5911dd4b4df0b42bac0ef9da3c82729ac7c82ba..01c6e500df9b0baf88d2b1bd248fbe4420af3d37 100644
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@@ -104,6 +104,7 @@ export default function Settings() {
},
{
id: "native",
+ hidden: !window.isNative,
icon: <Desktop size={20} />,
title: <Text id="app.settings.pages.native.title" />,
},
@@ -140,11 +141,9 @@ export default function Settings() {
<Route path="/settings/sync">
<Sync />
</Route>,
- window.isNative && (
- <Route path="/settings/native">
- <Native />
- </Route>
- ),
+ <Route path="/settings/native">
+ <Native />
+ </Route>,
<Route path="/settings/experiments">
<ExperimentsPage />
</Route>,