cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 06:32:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix: accent buttons and allow selection of back

Browse source 
fixes #398
fixes #397
This commit is contained in:
Paul 2021-11-14 18:29:46 +00:00
parent 94fb1c6d71
commit 374f5d1747
2 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/navigation/right/Search.tsx
View file

@ -102,8 +102,8 @@ export function SearchSidebar({ close }: Props) {
<GenericSidebarBase>
<GenericSidebarList>
<SearchBase>
<Overline type="error" onClick={close} block hoverEnabled>
« back to members
<Overline type="accent" block hover>
<a onClick={close}>« back to members</a>
</Overline>
<Overline type="subtle" block>
<Text id="app.main.channel.search.title" />
@ -118,7 +118,7 @@ export function SearchSidebar({ close }: Props) {
<Button
key={key}
compact
error={sort === key}
accent={sort === key}
onClick={() => setSort(key as Sort)}>
<Text
id={`app.main.channel.search.sort.${key.toLowerCase()}`}

20
src/components/ui/Overline.tsx
View file

@ -5,13 +5,13 @@ import { Text } from "preact-i18n";
import { Children } from "../../types/Preact";
type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
hoverEnabled?: boolean;
error?: string;
hover?: boolean;
block?: boolean;
spaced?: boolean;
noMargin?: boolean;
children?: Children;
type?: "default" | "subtle" | "error";
type?: "default" | "subtle" | "error" | "accent";
};
const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
@ -19,13 +19,13 @@ const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
transition: 0.2s ease filter;
${(props) =>
props.hoverEnabled &&
props.hover &&
css`
cursor: pointer;
transition: 0.2s ease filter;
&:hover {
filter: brightness(1.2);
cursor: pointer;
transition: 0.2s ease filter;
}
`}
@ -61,6 +61,14 @@ const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
color: var(--error);
`}
${(props) =>
props.type === "accent" &&
css`
font-size: 12px;
font-weight: 400;
color: var(--accent);
`}
${(props) =>
props.block &&
css`