cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-13 18:59:22 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fix overflow on home tab.

Browse source
This commit is contained in:
Paul 2021-09-15 14:53:40 +01:00
parent 7d5911c96d
commit 1614d7a739
1 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/pages/home/Home.tsx
View file

@ -1,18 +1,20 @@
import { Home as HomeIcon } from "@styled-icons/boxicons-solid"; import { Home as HomeIcon } from "@styled-icons/boxicons-solid";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import styled, { css } from "styled-components";
import styles from "./Home.module.scss"; import styles from "./Home.module.scss";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { dispatch, getState } from "../../redux";
import wideSVG from "../../assets/wide.svg"; import wideSVG from "../../assets/wide.svg";
import Emoji from "../../components/common/Emoji"; import Emoji from "../../components/common/Emoji";
import Tooltip from "../../components/common/Tooltip"; import Tooltip from "../../components/common/Tooltip";
import Header from "../../components/ui/Header"; import Header from "../../components/ui/Header";
import CategoryButton from "../../components/ui/fluent/CategoryButton"; import CategoryButton from "../../components/ui/fluent/CategoryButton";
import { dispatch, getState } from "../../redux";
import { useState } from "preact/hooks";
import styled, { css } from "styled-components";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
const CHANNELS_SIDEBAR_KEY = "sidebar_channels"; const CHANNELS_SIDEBAR_KEY = "sidebar_channels";
@ -20,12 +22,13 @@ const IconConainer = styled.div`
cursor: pointer; cursor: pointer;
color: var(--secondary-foreground); color: var(--secondary-foreground);
${!isTouchscreenDevice && css` ${!isTouchscreenDevice &&
css`
&:hover { &:hover {
color: var(--foreground); color: var(--foreground);
} }
`} `}
` `;
export default function Home() { export default function Home() {
const [showChannels, setChannels] = useState( const [showChannels, setChannels] = useState(
@ -34,7 +37,7 @@ export default function Home() {
const toggleChannelSidebar = () => { const toggleChannelSidebar = () => {
if (isTouchscreenDevice) { if (isTouchscreenDevice) {
return return;
} }
setChannels(!showChannels); setChannels(!showChannels);
@ -51,12 +54,14 @@ export default function Home() {
id: CHANNELS_SIDEBAR_KEY, id: CHANNELS_SIDEBAR_KEY,
}); });
} }
} };
return ( return (
<div className={styles.home}> <div className={styles.home}>
<Header placement="primary"> <Header placement="primary">
<IconConainer onClick={toggleChannelSidebar} ><HomeIcon size={24} /></IconConainer> <IconConainer onClick={toggleChannelSidebar}>
<HomeIcon size={24} />
</IconConainer>
<Text id="app.navigation.tabs.home" /> <Text id="app.navigation.tabs.home" />
</Header> </Header>
<h3> <h3>
@ -96,7 +101,7 @@ export default function Home() {
<CategoryButton <CategoryButton
action="external" action="external"
icon={<Emoji emoji="🧭" size={32} />}> icon={<Emoji emoji="🧭" size={32} />}>
Explore Servers & Bots Find Servers & Bots
</CategoryButton> </CategoryButton>
</a> </a>
<Tooltip content="You can also right-click the user icon in the top left, or left click it if you're already home."> <Tooltip content="You can also right-click the user icon in the top left, or left click it if you're already home.">