cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 07:02:10 -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 { Link } from "react-router-dom";
import styled, { css } from "styled-components";
import styles from "./Home.module.scss";
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 Emoji from "../../components/common/Emoji";
import Tooltip from "../../components/common/Tooltip";
import Header from "../../components/ui/Header";
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";
@ -20,12 +22,13 @@ const IconConainer = styled.div`
cursor: pointer;
color: var(--secondary-foreground);
${!isTouchscreenDevice && css`
${!isTouchscreenDevice &&
css`
&:hover {
color: var(--foreground);
}
`}
`
`;
export default function Home() {
const [showChannels, setChannels] = useState(
@ -34,7 +37,7 @@ export default function Home() {
const toggleChannelSidebar = () => {
if (isTouchscreenDevice) {
return
return;
}
setChannels(!showChannels);
@ -51,12 +54,14 @@ export default function Home() {
id: CHANNELS_SIDEBAR_KEY,
});
}
}
};
return (
<div className={styles.home}>
<Header placement="primary">
<IconConainer onClick={toggleChannelSidebar} ><HomeIcon size={24} /></IconConainer>
<IconConainer onClick={toggleChannelSidebar}>
<HomeIcon size={24} />
</IconConainer>
<Text id="app.navigation.tabs.home" />
</Header>
<h3>
@ -96,7 +101,7 @@ export default function Home() {
<CategoryButton
action="external"
icon={<Emoji emoji="🧭" size={32} />}>
Explore Servers & Bots
Find Servers & Bots
</CategoryButton>
</a>
<Tooltip content="You can also right-click the user icon in the top left, or left click it if you're already home.">