Add prettier.

src/components/ui/Banner.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export default styled.div`
-	padding: 8px;
+    padding: 8px;
     font-size: 14px;
     text-align: center;
 

src/components/ui/Button.tsx

@@ -6,24 +6,24 @@ interface Props {
 }
 
 export default styled.button<Props>`
-	z-index: 1;
-	padding: 8px;
-	font-size: 16px;
-	text-align: center;
+    z-index: 1;
+    padding: 8px;
+    font-size: 16px;
+    text-align: center;
 
-	transition: 0.2s ease opacity;
-	transition: 0.2s ease background-color;
+    transition: 0.2s ease opacity;
+    transition: 0.2s ease background-color;
 
-	background: var(--primary-background);
+    background: var(--primary-background);
     color: var(--foreground);
 
-	border-radius: 6px;
-	cursor: pointer;
+    border-radius: 6px;
+    cursor: pointer;
     border: none;
 
-	&:hover {
-		background: var(--secondary-header);
-	}
+    &:hover {
+        background: var(--secondary-header);
+    }
 
     &:disabled {
         background: var(--primary-background);
@@ -33,33 +33,37 @@ export default styled.button<Props>`
         background: var(--secondary-background);
     }
 
-    ${props => props.contrast && css`
-        padding: 4px 8px;
-        background: var(--secondary-header);
-
-        &:hover {
-            background: var(--primary-header);
-        }
-
-        &:disabled {
+    ${(props) =>
+        props.contrast &&
+        css`
+            padding: 4px 8px;
             background: var(--secondary-header);
-        }
 
-        &:active {
-            background: var(--secondary-background);
-        }
-    `}
+            &:hover {
+                background: var(--primary-header);
+            }
 
-    ${props => props.error && css`
-        color: white;
-        background: var(--error);
+            &:disabled {
+                background: var(--secondary-header);
+            }
 
-        &:hover {
-            filter: brightness(1.2)
-        }
+            &:active {
+                background: var(--secondary-background);
+            }
+        `}
 
-        &:disabled {
+    ${(props) =>
+        props.error &&
+        css`
+            color: white;
             background: var(--error);
-        }
-    `}
+
+            &:hover {
+                filter: brightness(1.2);
+            }
+
+            &:disabled {
+                background: var(--error);
+            }
+        `}
 `;

src/components/ui/Checkbox.tsx

@@ -1,9 +1,9 @@
-import { Check } from '@styled-icons/feather';
+import { Check } from "@styled-icons/feather";
 import { Children } from "../../types/Preact";
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
 
 const CheckboxBase = styled.label`
-	gap: 4px;
+    gap: 4px;
     z-index: 1;
     padding: 4px;
     display: flex;
@@ -13,8 +13,8 @@ const CheckboxBase = styled.label`
     cursor: pointer;
     font-size: 18px;
     user-select: none;
-    
-    transition: .2s ease all;
+
+    transition: 0.2s ease all;
 
     p {
         margin: 0;
@@ -53,9 +53,11 @@ const Checkmark = styled.div<{ checked: boolean }>`
         stroke-width: 2;
     }
 
-    ${ props => props.checked && css`
-        background: var(--accent);
-    ` }
+    ${(props) =>
+        props.checked &&
+        css`
+            background: var(--accent);
+        `}
 `;
 
 interface Props {
@@ -71,7 +73,7 @@ export default function Checkbox(props: Props) {
     return (
         <CheckboxBase disabled={props.disabled}>
             <CheckboxContent>
-                <span>{ props.children }</span>
+                <span>{props.children}</span>
                 {props.description && (
                     <CheckboxDescription>
                         {props.description}
@@ -89,5 +91,5 @@ export default function Checkbox(props: Props) {
                 <Check size={20} />
             </Checkmark>
         </CheckboxBase>
-    )
+    );
 }

src/components/ui/ColourSwatches.tsx

@@ -1,7 +1,7 @@
-import { useRef } from 'preact/hooks';
-import { Check } from '@styled-icons/feather';
-import styled, { css } from 'styled-components';
-import { Pencil } from '@styled-icons/bootstrap';
+import { useRef } from "preact/hooks";
+import { Check } from "@styled-icons/feather";
+import styled, { css } from "styled-components";
+import { Pencil } from "@styled-icons/bootstrap";
 
 interface Props {
     value: string;
@@ -17,7 +17,7 @@ const presets = [
         "#FF7F50",
         "#FD6671",
         "#E91E63",
-        "#D468EE"
+        "#D468EE",
     ],
     [
         "#594CAD",
@@ -27,8 +27,8 @@ const presets = [
         "#CD5B45",
         "#FF424F",
         "#AD1457",
-        "#954AA8"
-    ]
+        "#954AA8",
+    ],
 ];
 
 const SwatchesBase = styled.div`
@@ -43,35 +43,38 @@ const SwatchesBase = styled.div`
     }
 `;
 
-const Swatch = styled.div<{ type: 'small' | 'large', colour: string }>`
+const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
     flex-shrink: 0;
     cursor: pointer;
     border-radius: 4px;
-    background-color: ${ props => props.colour };
+    background-color: ${(props) => props.colour};
 
     display: grid;
     place-items: center;
 
     &:hover {
         border: 3px solid var(--foreground);
-        transition: border ease-in-out .07s;
+        transition: border ease-in-out 0.07s;
     }
 
     svg {
         color: white;
     }
 
-    ${ props => props.type === 'small' ? css`
-        width: 30px;
-        height: 30px;
+    ${(props) =>
+        props.type === "small"
+            ? css`
+                  width: 30px;
+                  height: 30px;
 
-        svg {
-            stroke-width: 2;
-        }
-    ` : css`
-        width: 68px;
-        height: 68px;
-    ` }
+                  svg {
+                      stroke-width: 2;
+                  }
+              `
+            : css`
+                  width: 68px;
+                  height: 68px;
+              `}
 `;
 
 const Rows = styled.div`
@@ -91,28 +94,37 @@ export default function ColourSwatches({ value, onChange }: Props) {
 
     return (
         <SwatchesBase>
-            <Swatch colour={value} type='large'
-                onClick={() => ref.current.click()}>
+            <Swatch
+                colour={value}
+                type="large"
+                onClick={() => ref.current.click()}
+            >
                 <Pencil size={32} />
             </Swatch>
             <input
                 type="color"
                 value={value}
                 ref={ref}
-                onChange={ev => onChange(ev.currentTarget.value)}
+                onChange={(ev) => onChange(ev.currentTarget.value)}
             />
             <Rows>
                 {presets.map((row, i) => (
                     <div key={i}>
-                        { row.map((swatch, i) => (
-                            <Swatch colour={swatch} type='small' key={i}
-                                onClick={() => onChange(swatch)}>
-                                {swatch === value && <Check size={18} strokeWidth={2} />}
+                        {row.map((swatch, i) => (
+                            <Swatch
+                                colour={swatch}
+                                type="small"
+                                key={i}
+                                onClick={() => onChange(swatch)}
+                            >
+                                {swatch === value && (
+                                    <Check size={18} strokeWidth={2} />
+                                )}
                             </Swatch>
-                        )) }
+                        ))}
                     </div>
                 ))}
             </Rows>
         </SwatchesBase>
-    )
+    );
 }

src/components/ui/ComboBox.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export default styled.select`
-	padding: 8px;
+    padding: 8px;
     border-radius: 2px;
     color: var(--secondary-foreground);
     background: var(--secondary-background);

src/components/ui/InputBox.tsx

@@ -12,7 +12,7 @@ export default styled.input<Props>`
     border: 2px solid transparent;
     background: var(--primary-background);
     transition: 0.2s ease background-color;
-    transition: border-color .2s ease-in-out;
+    transition: border-color 0.2s ease-in-out;
 
     &:hover {
         background: var(--secondary-background);
@@ -22,12 +22,14 @@ export default styled.input<Props>`
         border: 2px solid var(--accent);
     }
 
-    ${ props => props.contrast && css`
-        color: var(--secondary-foreground);
-        background: var(--secondary-background);
+    ${(props) =>
+        props.contrast &&
+        css`
+            color: var(--secondary-foreground);
+            background: var(--secondary-background);
 
-        &:hover {
-            background: var(--hover);
-        }
-    ` }
+            &:hover {
+                background: var(--hover);
+            }
+        `}
 `;

src/components/ui/LineDivider.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export default styled.div`
     height: 0px;

src/components/ui/Overline.tsx

@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components';
-import { Children } from '../../types/Preact';
+import styled, { css } from "styled-components";
+import { Children } from "../../types/Preact";
 
 interface Props {
     block?: boolean;
@@ -8,7 +8,7 @@ interface Props {
     type?: "default" | "subtle" | "error";
 }
 
-const OverlineBase = styled.div<Omit<Props, 'children' | 'error'>>`
+const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
     display: inline;
     margin: 0.4em 0;
     margin-top: 0.8em;
@@ -18,30 +18,34 @@ const OverlineBase = styled.div<Omit<Props, 'children' | 'error'>>`
     color: var(--foreground);
     text-transform: uppercase;
 
-    ${ props => props.type === 'subtle' && css`
-        font-size: 12px;
-        color: var(--secondary-foreground);
-    ` }
+    ${(props) =>
+        props.type === "subtle" &&
+        css`
+            font-size: 12px;
+            color: var(--secondary-foreground);
+        `}
 
-    ${ props => props.type === 'error' && css`
-        font-size: 12px;
-        font-weight: 400;
-        color: var(--error);
-    ` }
+    ${(props) =>
+        props.type === "error" &&
+        css`
+            font-size: 12px;
+            font-weight: 400;
+            color: var(--error);
+        `}
 
-    ${ props => props.block && css`display: block;` }
+    ${(props) =>
+        props.block &&
+        css`
+            display: block;
+        `}
 `;
 
 export default function Overline(props: Props) {
     return (
         <OverlineBase {...props}>
-            { props.children }
-            { props.children && props.error && <> &middot; </> }
-            { props.error && (
-                <Overline type="error">
-                    { props.error }
-                </Overline>
-            ) }
+            {props.children}
+            {props.children && props.error && <> &middot; </>}
+            {props.error && <Overline type="error">{props.error}</Overline>}
         </OverlineBase>
-    )
+    );
 }

src/components/ui/Preloader.tsx

@@ -1,3 +1,3 @@
 export default function Preloader() {
-    return <span>LOADING</span>
+    return <span>LOADING</span>;
 }

src/components/ui/Radio.tsx

@@ -1,18 +1,18 @@
 import { Children } from "../../types/Preact";
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
 import { CircleFill } from "@styled-icons/bootstrap";
 
 interface Props {
     children: Children;
     description?: Children;
-    
+
     checked: boolean;
     disabled?: boolean;
     onSelect: () => void;
 }
 
 interface BaseProps {
-    selected: boolean
+    selected: boolean;
 }
 
 const RadioBase = styled.label<BaseProps>`
@@ -22,12 +22,12 @@ const RadioBase = styled.label<BaseProps>`
     display: flex;
     cursor: pointer;
     align-items: center;
-    
+
     font-size: 1rem;
     font-weight: 600;
     user-select: none;
     border-radius: 4px;
-    transition: .2s ease all;
+    transition: 0.2s ease all;
 
     &:hover {
         background: var(--hover);
@@ -52,23 +52,25 @@ const RadioBase = styled.label<BaseProps>`
         }
     }
 
-    ${ props => props.selected && css`
-        color: white;
-        cursor: default;
-        background: var(--accent);
-
-        > div {
-            background: white;
-        }
-
-        > div svg {
-            color: var(--accent);
-        }
-
-        &:hover {
+    ${(props) =>
+        props.selected &&
+        css`
+            color: white;
+            cursor: default;
             background: var(--accent);
-        }
-    ` }
+
+            > div {
+                background: white;
+            }
+
+            > div svg {
+                color: var(--accent);
+            }
+
+            &:hover {
+                background: var(--accent);
+            }
+        `}
 `;
 
 const RadioDescription = styled.span<BaseProps>`
@@ -76,9 +78,11 @@ const RadioDescription = styled.span<BaseProps>`
     font-weight: 400;
     color: var(--secondary-foreground);
 
-    ${ props => props.selected && css`
-        color: white;
-    ` }
+    ${(props) =>
+        props.selected &&
+        css`
+            color: white;
+        `}
 `;
 
 export default function Radio(props: Props) {
@@ -86,15 +90,14 @@ export default function Radio(props: Props) {
         <RadioBase
             selected={props.checked}
             disabled={props.disabled}
-            onClick={() => !props.disabled && props.onSelect && props.onSelect()}
+            onClick={() =>
+                !props.disabled && props.onSelect && props.onSelect()
+            }
         >
             <div>
                 <CircleFill size={12} />
             </div>
-            <input
-                type="radio"
-                checked={props.checked}
-            />
+            <input type="radio" checked={props.checked} />
             <span>
                 <span>{props.children}</span>
                 {props.description && (
@@ -105,4 +108,4 @@ export default function Radio(props: Props) {
             </span>
         </RadioBase>
     );
-}
+}

src/components/ui/Tip.tsx

@@ -3,7 +3,7 @@ import { Info } from "@styled-icons/feather";
 import { Children } from "../../types/Preact";
 
 export const TipBase = styled.div`
-	display: flex;
+    display: flex;
     padding: 12px;
     overflow: hidden;
     align-items: center;
@@ -19,7 +19,7 @@ export const TipBase = styled.div`
             text-decoration: underline;
         }
     }
-    
+
     svg {
         flex-shrink: 0;
         margin-right: 10px;
@@ -30,7 +30,7 @@ export default function Tip(props: { children: Children }) {
     return (
         <TipBase>
             <Info size={20} strokeWidth={2} />
-            <span>{ props.children }</span>
+            <span>{props.children}</span>
         </TipBase>
-    )
+    );
 }