src/components/navigation/right/ChannelDebugInfo.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
 import { useRenderState } from "../../../lib/renderer/Singleton";
 
 interface Props {
@@ -6,7 +7,7 @@ interface Props {
 
 export function ChannelDebugInfo({ id }: Props) {
     if (process.env.NODE_ENV !== "development") return null;
-    let view = useRenderState(id);
+    const view = useRenderState(id);
     if (!view) return null;
 
     return (

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/ComboBox.tsx

 import styled from "styled-components";
 
 export default styled.select`
-    padding: 8px;
-    border-radius: 6px;
+    width: 100%;
+    padding: 10px;
+    cursor: pointer;
+    border-radius: var(--border-radius);
+
     font-family: inherit;
+    font-size: var(--text-size);
     color: var(--secondary-foreground);
     background: var(--secondary-background);
-    font-size: 0.875rem;
+
     border: none;
     outline: 2px solid transparent;
+    transition: box-shadow 0.2s ease-in-out;
     transition: outline-color 0.2s ease-in-out;
-    transition: box-shadow 0.3s;
-    cursor: pointer;
-    width: 100%;
 
     &:focus {
-        box-shadow: 0 0 0 2pt var(--accent);
+        box-shadow: 0 0 0 1.5pt var(--accent);
     }
 `;