feat(@ui): migrate input box

src/components/common/messaging/MessageBox.tsx

@@ -95,7 +95,7 @@ const Blocked = styled.div`
 `;
 
 const Action = styled.div`
-    > div {
+    > a {
         height: 48px;
         width: 48px;
         display: flex;
@@ -118,7 +118,7 @@ const Action = styled.div`
 `;
 
 const FileAction = styled.div`
-    > div {
+    > a {
         height: 48px;
         width: 62px;
         display: flex;

src/components/navigation/right/Search.tsx

@@ -5,15 +5,13 @@ import styled from "styled-components/macro";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button } from "@revoltchat/ui";
+import { Button, InputBox } from "@revoltchat/ui";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Message from "../../common/messaging/Message";
-import InputBox from "../../ui/InputBox";
 import Overline from "../../ui/Overline";
 import Preloader from "../../ui/Preloader";
-
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 
 type SearchState =

src/components/settings/appearance/ThemeOverrides.tsx

@@ -2,14 +2,14 @@ import { Pencil } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
 import styled from "styled-components/macro";
 
+import { InputBox } from "@revoltchat/ui";
+
 import { useDebounceCallback } from "../../../lib/debounce";
 
 import { useApplicationState } from "../../../mobx/State";
 
 import { Variables } from "../../../context/Theme";
 
-import InputBox from "../../ui/InputBox";
-
 const Container = styled.div`
     row-gap: 8px;
     display: grid;

src/components/ui/InputBox.tsx

@@ -1,41 +0,0 @@
-import styled, { css } from "styled-components/macro";
-
-interface Props {
-    readonly contrast?: boolean;
-}
-
-export default styled.input<Props>`
-    z-index: 1;
-    font-size: 1rem;
-    padding: 8px 16px;
-    border-radius: var(--border-radius);
-
-    font-family: inherit;
-    color: var(--foreground);
-    background: var(--primary-background);
-    transition: 0.2s ease background-color;
-
-    border: none;
-    outline: 2px solid transparent;
-    transition: outline-color 0.2s ease-in-out;
-    transition: box-shadow 0.2s ease-in-out;
-
-    &:hover {
-        background: var(--secondary-background);
-    }
-
-    &:focus {
-        box-shadow: 0 0 0 1.5pt var(--accent);
-    }
-
-    ${(props) =>
-        props.contrast &&
-        css`
-            color: var(--secondary-foreground);
-            background: var(--secondary-background);
-
-            &:hover {
-                background: var(--hover);
-            }
-        `}
-`;