Fix file browser input styles

Author: devklick

src/programs/FileBrowser/FileBrowser.tsx

@@ -12,6 +12,7 @@ import {
   StyledTopBarButtons,
   StyledTopBarPath,
 } from "./styles";
+import useSystemSettings from "../../stores/systemSettingsStore";
 
 const defaultPath = "/home/user";
 
@@ -33,6 +34,10 @@ function TopBar({
   navForward,
   navBack,
 }: TopBarProps) {
+  const [backgroundColor, fontColor] = useSystemSettings((s) => [
+    s.accentColor,
+    s.fontColor,
+  ]);
   return (
     <StyledTopBar>
       <StyledTopBarButtons>
@@ -43,6 +48,8 @@ function TopBar({
         value={pathSearch}
         onChange={onPathInputChange}
         onKeyDown={onPathInputSubmit}
+        backgroundColor={backgroundColor}
+        color={fontColor}
       />
     </StyledTopBar>
   );
@@ -53,7 +60,7 @@ function FileBrowser({ path = defaultPath }: FileBrowserProps) {
   const appRef = useRef<HTMLDivElement>(null);
 
   const [pathSearch, setPathSearch] = useState<string>(
-    fs.currentDirectory.path
+    fs.currentDirectory.path,
   );
 
   useEffect(() => {

src/programs/FileBrowser/styles.ts

@@ -48,13 +48,19 @@ export const StyledTopBarButton = styled.div`
   }
 `;
 
-export const StyledTopBarPath = styled.input`
+interface StyledTopBarPathProps {
+  backgroundColor: string;
+  color: string;
+}
+export const StyledTopBarPath = styled.input<StyledTopBarPathProps>`
   height: 30px;
   width: 100%;
   padding: 5px 10px;
   border-radius: 50px;
   border: none;
   box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor};
+  color: ${(props) => props.color};
 
   &:focus-visible {
     outline: none;