src/components/ui/Category.tsx

@@ -44,7 +44,7 @@ type Props = Omit<
 };
 
 export default function Category(props: Props) {
-    let { text, action, ...otherProps } = props;
+    const { text, action, ...otherProps } = props;
 
     return (
         <CategoryBase {...otherProps}>

src/components/ui/Checkbox.tsx

@@ -4,12 +4,12 @@ import styled, { css } from "styled-components";
 import { Children } from "../../types/Preact";
 
 const CheckboxBase = styled.label`
-    margin-top: 20px;
     gap: 4px;
     z-index: 1;
     display: flex;
-    border-radius: 4px;
+    margin-top: 20px;
     align-items: center;
+    border-radius: var(--border-radius);
 
     cursor: pointer;
     font-size: 18px;
@@ -57,9 +57,9 @@ const Checkmark = styled.div<{ checked: boolean }>`
     height: 24px;
     display: grid;
     flex-shrink: 0;
-    border-radius: 4px;
     place-items: center;
     transition: 0.2s ease all;
+    border-radius: var(--border-radius);
     background: var(--secondary-background);
 
     svg {

src/components/ui/ColourSwatches.tsx

@@ -55,7 +55,11 @@ const SwatchesBase = styled.div`
         div {
             width: 8px;
             height: 68px;
-            background: linear-gradient(to right, var(--primary-background), transparent);
+            background: linear-gradient(
+                to right,
+                var(--primary-background),
+                transparent
+            );
         }
     }
 `;
@@ -63,7 +67,7 @@ const SwatchesBase = styled.div`
 const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
     flex-shrink: 0;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     background-color: ${(props) => props.colour};
 
     display: grid;
@@ -127,8 +131,10 @@ export default function ColourSwatches({ value, onChange }: Props) {
                 <Palette size={32} />
             </Swatch>
 
-            <div class="overlay"><div /></div>
-            
+            <div class="overlay">
+                <div />
+            </div>
+
             <Rows>
                 {presets.map((row, i) => (
                     <div key={i}>
@@ -144,8 +150,6 @@ export default function ColourSwatches({ value, onChange }: Props) {
                     </div>
                 ))}
             </Rows>
-            
-            
         </SwatchesBase>
     );
 }