Port friends menu over.

src/components/ui/Header.tsx

@@ -17,7 +17,7 @@ export default styled.div<Props>`
     flex-shrink: 0;
     align-items: center;
 
-    background-color: var(--primary-background);
+    background-color: var(--primary-header);
     background-size: cover !important;
     background-position: center !important;
 
@@ -27,6 +27,7 @@ export default styled.div<Props>`
     ` }
 
     ${ props => props.placement === 'secondary' && css`
+        background-color: var(--secondary-header);
         padding: 14px;
     ` }
 `;

src/components/ui/IconButton.tsx

@@ -0,0 +1,43 @@
+import styled, { css } from "styled-components";
+
+interface Props {
+    type?: 'default' | 'circle'
+}
+
+const normal = `var(--secondary-foreground)`;
+const hover = `var(--foreground)`;
+
+export default styled.div<Props>`
+    z-index: 1;
+    display: grid;
+    cursor: pointer;
+    place-items: center;
+
+    fill: ${normal};
+    color: ${normal};
+    stroke: ${normal};
+
+    a {
+        color: ${normal};
+    }
+
+    &:hover {
+        fill: ${hover};
+        color: ${hover};
+        stroke: ${hover};
+
+        a {
+            color: ${hover};
+        }
+    }
+
+    ${ props => props.type === 'circle' && css`
+        padding: 4px;
+        border-radius: 50%;
+        background-color: var(--secondary-header);
+
+        &:hover {
+            background-color: var(--primary-header);
+        }
+    ` }
+`;

src/components/ui/Modal.tsx

@@ -2,7 +2,7 @@ import Button from "./Button";
 import classNames from "classnames";
 import { Children } from "../../types/Preact";
 import { createPortal, useEffect } from "preact/compat";
-import styled, { keyframes } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 
 const open = keyframes`
     0% {opacity: 0;}
@@ -48,6 +48,26 @@ const ModalContainer = styled.div`
 `;
 
 const ModalContent = styled.div<{ [key in 'attachment' | 'noBackground' | 'border']?: boolean }>`
+    border-radius: 8px;
+    text-overflow: ellipsis;
+
+    h3 {
+        margin-top: 0;
+    }
+
+    ${ props => !props.noBackground && css`
+        padding: 1.5em;
+        background: var(--secondary-header);
+    ` }
+
+    ${ props => props.attachment && css`
+        border-radius: 8px 8px 0 0;
+    ` }
+
+    ${ props => props.border && css`
+        border-radius: 10px;
+        border: 2px solid var(--secondary-background);
+    ` }
 `;
 
 const ModalActions = styled.div`
@@ -64,7 +84,8 @@ export interface Action {
     text: Children;
     onClick: () => void;
     confirmation?: boolean;
-    style?: 'default' | 'contrast' | 'error' | 'contrast-error';
+    contrast?: boolean;
+    error?: boolean;
 }
 
 interface Props {
@@ -123,7 +144,9 @@ export default function Modal(props: Props) {
                 {props.actions && (
                     <ModalActions>
                         {props.actions.map(x => (
-                            <Button style={x.style ?? "contrast"}
+                            <Button
+                                contrast={x.contrast ?? true}
+                                error={x.error ?? false}
                                 onClick={x.onClick}
                                 disabled={props.disabled}>
                                 {x.text}

src/components/ui/Overline.tsx

@@ -1,9 +1,10 @@
 import styled, { css } from "styled-components";
 import { Children } from "../../types/Preact";
+import { Text } from 'preact-i18n';
 
 interface Props {
+    error?: string;
     block?: boolean;
-    error?: Children;
     children?: Children;
     type?: "default" | "subtle" | "error";
 }
@@ -45,7 +46,9 @@ export default function Overline(props: Props) {
         <OverlineBase {...props}>
             {props.children}
             {props.children && props.error && <> &middot; </>}
-            {props.error && <Overline type="error">{props.error}</Overline>}
+            {props.error && <Overline type="error">
+                <Text id={`error.${props.error}`}>{props.error}</Text>
+            </Overline>}
         </OverlineBase>
     );
 }