cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 23:22:06 -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 { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useApplicationState } from "../../../mobx/State"; import { useApplicationState } from "../../../mobx/State";
import { SIDEBAR_CHANNELS } from "../../../mobx/stores/Layout";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient"; import { useClient } from "../../../context/revoltjs/RevoltClient";
@ -168,6 +169,14 @@ const SettingsButton = styled.div`
`; `;
function Swoosh() { function Swoosh() {
const sidebarOpen = useApplicationState().layout.getSectionState(
SIDEBAR_CHANNELS,
true,
);
const fill = sidebarOpen
? "var(--sidebar-active)"
: "var(--primary-background)";
return ( return (
<span> <span>
<svg <svg
@ -177,15 +186,15 @@ function Swoosh() {
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path <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" 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 <path
d="M27 80C4.5 80 54 53 54 53L54.0001 106C54.0001 106 49.5 80 27 80Z" 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 <path
d="M27 26C4.5 26 54 53 54 53L53.9999 0C53.9999 0 49.5 26 27 26Z" 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> </svg>
</span> </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 MessageBox from "../../components/common/messaging/MessageBox";
import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom"; import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator"; 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 RightSidebar from "../../components/navigation/RightSidebar";
import ChannelHeader from "./ChannelHeader"; import ChannelHeader from "./ChannelHeader";
@ -145,12 +145,11 @@ function VoiceChannel({ channel }: { channel: ChannelI }) {
function ChannelPlaceholder() { function ChannelPlaceholder() {
return ( return (
<PlaceholderBase> <PlaceholderBase>
<Header placement="primary"> <PageHeader icon={<Hash size={24} />}>
<Hash size={24} />
<span className="name"> <span className="name">
<Text id="app.main.channel.errors.nochannel" /> <Text id="app.main.channel.errors.nochannel" />
</span> </span>
</Header> </PageHeader>
<div className="placeholder"> <div className="placeholder">
<Ghost width={80} /> <Ghost width={80} />