Add i18n to replies.

Add Fluent design category button.
Update Account page with new design.

src/components/ui/Overline.tsx

@@ -8,13 +8,19 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
     error?: string;
     block?: boolean;
     spaced?: boolean;
+    noMargin?: boolean;
     children?: Children;
     type?: "default" | "subtle" | "error";
 };
 
 const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
     display: inline;
-    margin: 0.4em 0;
+
+    ${(props) =>
+        !props.noMargin &&
+        css`
+            margin: 0.4em 0;
+        `}
 
     ${(props) =>
         props.spaced &&

src/components/ui/fluent/CategoryButton.tsx

@@ -1,4 +1,5 @@
-import styled from "styled-components";
+import { ChevronRight } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
 
 import { Children } from "../../../types/Preact";
 
@@ -14,13 +15,69 @@ const CategoryBase = styled.div`
     display: flex;
     align-items: center;
     flex-direction: row;
+
+    .content {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        font-weight: 600;
+        font-size: 14px;
+
+        .description {
+            font-size: 11px;
+            font-weight: 400;
+
+            a:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    ${(props) =>
+        typeof props.onClick !== "undefined" &&
+        css`
+            transition: 0.1s ease background-color;
+
+            &:hover {
+                background: var(--tertiary-background);
+            }
+
+            a {
+                cursor: pointer;
+            }
+        `}
 `;
 
 interface Props {
     icon?: Children;
     children?: Children;
+    description?: Children;
+
+    onClick?: () => void;
+    action?: "chevron" | Children;
 }
 
-export default function CategoryButton({ icon, children }: Props) {
-    return <CategoryBase>{icon}</CategoryBase>;
+export default function CategoryButton({
+    icon,
+    children,
+    description,
+    onClick,
+    action,
+}: Props) {
+    return (
+        <CategoryBase onClick={onClick}>
+            {icon}
+            <div class="content">
+                {children}
+                <div className="description">{description}</div>
+            </div>
+            <div class="action">
+                {typeof action === "string" ? (
+                    <ChevronRight size={24} />
+                ) : (
+                    action
+                )}
+            </div>
+        </CategoryBase>
+    );
 }