cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-06 15:35:52 -05:00
Code Issues Projects Releases Packages Wiki Activity

feat(sidebar): change swoosh colour depending on sidebar collapse

Browse source
This commit is contained in:
Paul 2021-12-24 13:06:52 +00:00
parent d8d002cc4a
commit a46fbcf409
2 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/navigation/left/ServerListSidebar.tsx
View file

@ -13,6 +13,7 @@ import PaintCounter from "../../../lib/PaintCounter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useApplicationState } from "../../../mobx/State";
import { SIDEBAR_CHANNELS } from "../../../mobx/stores/Layout";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
@ -168,6 +169,14 @@ const SettingsButton = styled.div`
`;
function Swoosh() {
const sidebarOpen = useApplicationState().layout.getSectionState(
SIDEBAR_CHANNELS,
true,
);
const fill = sidebarOpen
? "var(--sidebar-active)"
: "var(--primary-background)";
return (
<span>
<svg
@ -177,15 +186,15 @@ function Swoosh() {
xmlns="http://www.w3.org/2000/svg">
<path
d="M54 53C54 67.9117 41.9117 80 27 80C12.0883 80 0 67.9117 0 53C0 38.0883 12.0883 26 27 26C41.9117 26 54 38.0883 54 53Z"
fill="var(--sidebar-active)"
fill={fill}
/>
<path
d="M27 80C4.5 80 54 53 54 53L54.0001 106C54.0001 106 49.5 80 27 80Z"
fill="var(--sidebar-active)"
fill={fill}
/>
<path
d="M27 26C4.5 26 54 53 54 53L53.9999 0C53.9999 0 49.5 26 27 26Z"
fill="var(--sidebar-active)"
fill={fill}
/>
</svg>
</span>

7
src/pages/channels/Channel.tsx
View file

@ -20,7 +20,7 @@ import AgeGate from "../../components/common/AgeGate";
import MessageBox from "../../components/common/messaging/MessageBox";
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
import Header from "../../components/ui/Header";
import Header, { PageHeader } from "../../components/ui/Header";
import RightSidebar from "../../components/navigation/RightSidebar";
import ChannelHeader from "./ChannelHeader";
@ -145,12 +145,11 @@ function VoiceChannel({ channel }: { channel: ChannelI }) {
function ChannelPlaceholder() {
return (
<PlaceholderBase>
<Header placement="primary">
<Hash size={24} />
<PageHeader icon={<Hash size={24} />}>
<span className="name">
<Text id="app.main.channel.errors.nochannel" />
</span>
</Header>
</PageHeader>
<div className="placeholder">
<Ghost width={80} />