Style scrollbars

Author: devklick

src/programs/Calculator/Calculator.tsx

@@ -15,6 +15,7 @@ import {
   StyledInputOutputContents,
 } from "./styles";
 import { BorderedAppContentHandles } from "../../components/BorderedApp/BorderedApp";
+import useSystemSettings from "../../stores/systemSettingsStore";
 
 export type CalculatorHandles = BorderedAppContentHandles<HTMLDivElement>;
 
@@ -28,6 +29,7 @@ const Calculator = forwardRef<CalculatorHandles, CalculatorProps>(
     const elementRef = useRef<HTMLDivElement>(null);
     const [input, setInput] = useState<string>("");
     const [output, setOutput] = useState<string>("");
+    const [scrollbarColor] = useSystemSettings((s) => [s.iconColor]);
     const appendToInput = (value: string) =>
       setInput((current) => current + value);
     const removeFromEnd = (count: number = 1) =>
@@ -123,7 +125,11 @@ const Calculator = forwardRef<CalculatorHandles, CalculatorProps>(
 
     return (
       <StyledCalc ref={elementRef}>
-        <StyledInputOutput direction="input" roundTop>
+        <StyledInputOutput
+          direction="input"
+          roundTop
+          scrollbarColor={scrollbarColor}
+        >
           <StyledInputOutputContents>{input}</StyledInputOutputContents>
         </StyledInputOutput>
         <StyledInputOutput direction="output">

src/programs/Calculator/styles.ts

@@ -18,6 +18,7 @@ export const StyledCalc = styled.div`
 export const StyledInputOutput = styled.div<{
   direction: "input" | "output";
   roundTop?: boolean;
+  scrollbarColor: string;
 }>`
   box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
   font-size: ${(props) => (props.direction === "input" ? 20 : 16)}px;
@@ -32,6 +33,7 @@ export const StyledInputOutput = styled.div<{
   border-top-left-radius: ${(p) => (p.roundTop ? "10px" : 0)};
   border-top-right-radius: ${(p) => (p.roundTop ? "10px" : 0)};
   overflow: hidden;
+  scrollbar-color: ${(p) => p.scrollbarColor} transparent;
 `;
 
 export const StyledInputOutputContents = styled.div`

src/programs/Calendar/CalendarSidebar/CalendarSidebar.tsx

@@ -13,9 +13,16 @@ interface CalendarSidebarProps {
 // eslint-disable-next-line no-empty-pattern
 export default function CalendarSidebar({}: CalendarSidebarProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const [breakColor] = useSystemSettings((s) => [s.secondaryColor]);
+  const [breakColor, scrollbarColor] = useSystemSettings((s) => [
+    s.secondaryColor,
+    s.iconColor,
+  ]);
   return (
-    <StyledCalendarSidebar className="calendar__side-bar" ref={ref}>
+    <StyledCalendarSidebar
+      scrollbarColor={scrollbarColor}
+      className="calendar__side-bar"
+      ref={ref}
+    >
       {Array.from({ length: 25 }).map((_, i) => (
         <>
           <CalendarTimeSlot hour={i} />

src/programs/Calendar/CalendarSidebar/styles.ts

@@ -1,6 +1,8 @@
 import styled from "@emotion/styled";
 
-interface StyledCalendarSidebarProps {}
+interface StyledCalendarSidebarProps {
+  scrollbarColor: string;
+}
 export const StyledCalendarSidebar = styled.div<StyledCalendarSidebarProps>`
   width: 100%;
   height: 100%;
@@ -9,6 +11,7 @@ export const StyledCalendarSidebar = styled.div<StyledCalendarSidebarProps>`
   overflow-x: hidden; // getting a tiny amount of overflow, I think because of flex gap's sub-pixel rounding
   padding-left: 6px;
   box-sizing: border-box;
+  scrollbar-color: ${(p) => p.scrollbarColor} transparent;
 `;
 
 interface StyledDayBreakProps {

src/programs/FileBrowser/MainContent/MainContent.tsx

@@ -32,6 +32,7 @@ function MainContent({
   const clickPosition = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const [contextMenuOpen, setContextMenuOpen] = useState(false);
   const [promptFor, setPromptFor] = useState<FSObjectType | null>(null);
+  const [scrollbarColor] = useSystemSettings((s) => [s.iconColor]);
 
   function handleRightClick(e: React.MouseEvent) {
     clickPosition.current = { x: e.clientX, y: e.clientY };
@@ -55,7 +56,10 @@ function MainContent({
   }
 
   return (
-    <StyledMainContent onContextMenu={handleRightClick}>
+    <StyledMainContent
+      onContextMenu={handleRightClick}
+      scrollbarColor={scrollbarColor}
+    >
       {contextMenuOpen && (
         <ContextMenu
           position={clickPosition.current}

src/programs/FileBrowser/MainContent/styles.ts

@@ -1,14 +1,18 @@
 import styled from "@emotion/styled";
 
-export const StyledMainContent = styled.div`
+interface StyledMainContentProps {
+  scrollbarColor: string;
+}
+export const StyledMainContent = styled.div<StyledMainContentProps>`
   grid-area: main-content;
   padding: 20px;
   width: 100%;
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   display: grid;
   gap: 20px;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
   grid-template-rows: min-content;
   box-sizing: border-box;
+  scrollbar-color: ${(p) => p.scrollbarColor} transparent;
 `;

src/programs/Settings/Settings.tsx

@@ -117,8 +117,9 @@ export interface SettingsPageProps {
 }
 
 function SettingsPage({ sections }: SettingsPageProps) {
+  const [scrollbarColor] = useSystemSettings((s) => [s.iconColor]);
   return (
-    <StyledPage>
+    <StyledPage scrollbarColor={scrollbarColor}>
       <StyledSections>
         {sections.map((section) => (
           <SettingsSection {...section} key={section.title} />

src/programs/Settings/styles.ts

@@ -9,8 +9,12 @@ export const StyledSettings = styled.div`
   border-radius: 10px;
 `;
 
-export const StyledPage = styled.div`
+interface StyledPageProps {
+  scrollbarColor: string;
+}
+export const StyledPage = styled.div<StyledPageProps>`
   overflow: auto;
+  scrollbar-color: ${(p) => p.scrollbarColor} transparent;
 `;
 
 export const StyledSections = styled.div`

src/programs/TextEditor/TextEditor.tsx

@@ -9,7 +9,10 @@ interface TextEditorProps {}
 const TextEditor = forwardRef<TextEditorHandles, TextEditorProps>(
   (_props, ref) => {
     const elementRef = useRef<HTMLDivElement>(null);
-    const settings = useSystemSettings();
+    const [selectedTextColor, scrollbarColor] = useSystemSettings((s) => [
+      s.secondaryColor,
+      s.iconColor,
+    ]);
 
     useImperativeHandle(ref, () => ({
       element: elementRef.current,
@@ -18,7 +21,8 @@ const TextEditor = forwardRef<TextEditorHandles, TextEditorProps>(
     return (
       <StyledTextEditor className="text-editor" ref={elementRef}>
         <StyledTextArea
-          selectedColor={settings.secondaryColor}
+          selectedColor={selectedTextColor}
+          scrollbarColor={scrollbarColor}
           className="text-editor__content"
         />
       </StyledTextEditor>

src/programs/TextEditor/styles.ts

@@ -5,7 +5,11 @@ export const StyledTextEditor = styled.div`
   width: 100%;
 `;
 
-export const StyledTextArea = styled.textarea<{ selectedColor: string }>`
+interface StyledTextAreaProps {
+  selectedColor: string;
+  scrollbarColor: string;
+}
+export const StyledTextArea = styled.textarea<StyledTextAreaProps>`
   width: 100%;
   height: 100%;
   border: none;
@@ -17,6 +21,7 @@ export const StyledTextArea = styled.textarea<{ selectedColor: string }>`
   border-radius: 10px;
   padding: 10px;
   box-sizing: border-box;
+  scrollbar-color: ${(p) => p.scrollbarColor} transparent;
 
   &:focus-visible {
     outline: none;