fix: accent buttons and allow selection of back

fixes #398
fixes #397

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>
+                    <Overline type="accent" block hover>
-                        « back to members
+                        <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()}`}

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`