Format code.

src/components/ui/Button.tsx

@@ -8,7 +8,8 @@ interface Props {
     readonly error?: boolean;
 }
 
-export type ButtonProps = Props & Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'as'>;
+export type ButtonProps = Props &
+    Omit<JSX.HTMLAttributes<HTMLButtonElement>, "as">;
 
 export default styled.button<Props>`
     z-index: 1;
@@ -18,7 +19,7 @@ export default styled.button<Props>`
     align-items: center;
     justify-content: center;
     padding: 2px 16px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     font-family: inherit;
     font-weight: 500;
 
@@ -69,7 +70,7 @@ export default styled.button<Props>`
 
             &:disabled {
                 cursor: not-allowed;
-                opacity: .5;
+                opacity: 0.5;
             }
 
             &:active {

src/components/ui/ColourSwatches.tsx

@@ -2,8 +2,8 @@ import { Check } from "@styled-icons/boxicons-regular";
 import { Palette } from "@styled-icons/boxicons-solid";
 import styled, { css } from "styled-components";
 
-import { useRef } from "preact/hooks";
 import { RefObject } from "preact";
+import { useRef } from "preact/hooks";
 
 interface Props {
     value: string;

src/components/ui/ComboBox.tsx

@@ -10,7 +10,7 @@ export default styled.select`
     border: none;
     outline: 2px solid transparent;
     transition: outline-color 0.2s ease-in-out;
-    transition: box-shadow .2s ease-in-out;
+    transition: box-shadow 0.2s ease-in-out;
     cursor: pointer;
     width: 100%;
 

src/components/ui/DateDivider.tsx

@@ -1,5 +1,5 @@
-
 import styled, { css } from "styled-components";
+
 import { dayjs } from "../../context/Locale";
 
 const Base = styled.div<{ unread?: boolean }>`

src/components/ui/IconButton.tsx

@@ -49,9 +49,11 @@ export default styled.div<Props>`
             }
         `}
 
-    ${(props) => props.rotate && css`
-        svg {
-            transform: rotateZ(${props.rotate});
-        }
-    ` }
+    ${(props) =>
+        props.rotate &&
+        css`
+            svg {
+                transform: rotateZ(${props.rotate});
+            }
+        `}
 `;

src/components/ui/InputBox.tsx

@@ -18,7 +18,7 @@ export default styled.input<Props>`
     border: none;
     outline: 2px solid transparent;
     transition: outline-color 0.2s ease-in-out;
-    transition: box-shadow .2s ease-in-out;
+    transition: box-shadow 0.2s ease-in-out;
 
     &:hover {
         background: var(--secondary-background);

src/components/ui/Modal.tsx

@@ -99,10 +99,10 @@ const ModalActions = styled.div`
     background: var(--secondary-background);
 `;
 
-export type Action = Omit<ButtonProps, 'onClick'> & {
+export type Action = Omit<ButtonProps, "onClick"> & {
     confirmation?: boolean;
     onClick: () => void;
-}
+};
 
 interface Props {
     children?: Children;
@@ -177,9 +177,9 @@ export default function Modal(props: Props) {
                 {content}
                 {props.actions && (
                     <ModalActions>
-                        {props.actions.map((x) =>
+                        {props.actions.map((x) => (
                             <Button {...x} disabled={props.disabled} />
-                        )}
+                        ))}
                     </ModalActions>
                 )}
             </ModalContainer>

src/components/ui/TextArea.tsx

@@ -17,8 +17,9 @@ export default styled.textarea<TextAreaProps>`
     display: block;
     color: var(--foreground);
     background: var(--secondary-background);
-    padding: ${(props) => (props.padding) ?? 'var(--textarea-padding)'};
-    line-height: ${(props) => (props.lineHeight) ?? 'var(--textarea-line-height)'};
+    padding: ${(props) => props.padding ?? "var(--textarea-padding)"};
+    line-height: ${(props) =>
+        props.lineHeight ?? "var(--textarea-line-height)"};
 
     ${(props) =>
         props.hideBorder &&