From 374f5d1747fcabcb22ad4b3f4e82239596279575 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 14 Nov 2021 18:29:46 +0000
Subject: [PATCH] fix: accent buttons and allow selection of back

fixes #398
fixes #397
---
 src/components/navigation/right/Search.tsx |  6 +++---
 src/components/ui/Overline.tsx             | 20 ++++++++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/navigation/right/Search.tsx b/src/components/navigation/right/Search.tsx
index e887a053..ec3bc906 100644
--- a/src/components/navigation/right/Search.tsx
+++ b/src/components/navigation/right/Search.tsx
@@ -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()}`}
diff --git a/src/components/ui/Overline.tsx b/src/components/ui/Overline.tsx
index 4edcac23..e102250e 100644
--- a/src/components/ui/Overline.tsx
+++ b/src/components/ui/Overline.tsx
@@ -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`