starting janitorial work

src/components/Tab.tsx

@@ -1,11 +1,17 @@
-import { useTheme } from "../context/ThemeContext"
+import { useTheme } from "../context/ThemeContext";
 
-export type TabId = "feed" | "shows" | "discover" | "search" | "player" | "settings"
+export type TabId =
+  | "feed"
+  | "shows"
+  | "discover"
+  | "search"
+  | "player"
+  | "settings";
 
 export type TabDefinition = {
-  id: TabId
-  label: string
-}
+  id: TabId;
+  label: string;
+};
 
 export const tabs: TabDefinition[] = [
   { id: "feed", label: "Feed" },
@@ -14,27 +20,31 @@ export const tabs: TabDefinition[] = [
   { id: "search", label: "Search" },
   { id: "player", label: "Player" },
   { id: "settings", label: "Settings" },
-]
+];
 
 type TabProps = {
-  tab: TabDefinition
-  active: boolean
-  onSelect: (tab: TabId) => void
-}
+  tab: TabDefinition;
+  active: boolean;
+  onSelect: (tab: TabId) => void;
+};
 
 export function Tab(props: TabProps) {
-  const { theme } = useTheme()
+  const { theme } = useTheme();
   return (
     <box
       border
+      borderColor={theme.border}
       onMouseDown={() => props.onSelect(props.tab.id)}
-      style={{ padding: 1, backgroundColor: props.active ? theme.primary : "transparent" }}
+      style={{
+        padding: 1,
+        backgroundColor: props.active ? theme.primary : "transparent",
+      }}
     >
-      <text>
+      <text style={{ fg: theme.text }}>
         {props.active ? "[" : " "}
         {props.tab.label}
         {props.active ? "]" : " "}
       </text>
     </box>
-  )
+  );
 }