Base component fixes

src/renderer/components/date-picker/index.tsx

@@ -9,7 +9,32 @@ interface DatePickerProps extends MantineDatePickerProps {
   width?: number | string;
 }
 
-const StyledDatePicker = styled(MantineDatePicker)<DatePickerProps>``;
+const StyledDatePicker = styled(MantineDatePicker)<DatePickerProps>`
+  & .mantine-DatePicker-input {
+    color: var(--input-fg);
+    background: var(--input-bg);
+
+    &::placeholder {
+      color: var(--input-placeholder-fg);
+    }
+  }
+
+  & .mantine-DatePicker-icon {
+    color: var(--input-placeholder-fg);
+  }
+
+  & .mantine-DatePicker-required {
+    color: var(--secondary-color);
+  }
+
+  & .mantine-DatePicker-label {
+    font-family: var(--label-font-faimly);
+  }
+
+  & .mantine-DateRangePicker-disabled {
+    opacity: 0.6;
+  }
+`;
 
 export const DatePicker = ({ width, maxWidth, ...props }: DatePickerProps) => {
   return <StyledDatePicker withinPortal {...props} sx={{ maxWidth, width }} />;

src/renderer/components/dropdown-menu/index.tsx

@@ -61,6 +61,7 @@ const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
   background: var(--dropdown-menu-bg);
   border: var(--dropdown-menu-border);
   border-radius: var(--dropdown-menu-border-radius);
+  filter: drop-shadow(0 0 5px rgb(0, 0, 0, 50%));
 `;
 
 const StyledMenuDivider = styled(MantineMenu.Divider)`
@@ -69,7 +70,15 @@ const StyledMenuDivider = styled(MantineMenu.Divider)`
 
 export const DropdownMenu = ({ children, ...props }: MenuProps) => {
   return (
-    <StyledMenu withinPortal radius="sm" transition="scale" {...props}>
+    <StyledMenu
+      withinPortal
+      radius="sm"
+      styles={{
+        dropdown: { filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))' },
+      }}
+      transition="scale"
+      {...props}
+    >
       {children}
     </StyledMenu>
   );

src/renderer/components/input/index.tsx

@@ -80,6 +80,18 @@ const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
     }
   }
 
+  /* & .mantine-NumberInput-rightSection {
+    color: var(--input-placeholder-fg);
+    background: var(--input-bg);
+  } */
+
+  & .mantine-NumberInput-controlUp {
+    svg {
+      color: white;
+      fill: white;
+    }
+  }
+
   & .mantine-Input-icon {
     color: var(--input-placeholder-fg);
   }
@@ -146,7 +158,7 @@ const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
     font-family: var(--label-font-faimly);
   }
 
-  & .mantine-PasswordInput-disabled {
+  & .mantine-FileInput-disabled {
     opacity: 0.6;
   }
 `;
@@ -171,6 +183,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     return (
       <StyledNumberInput
         ref={ref}
+        hideControls
         spellCheck={false}
         {...props}
         sx={{ maxWidth, width }}
@@ -184,12 +197,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
 export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
   ({ children, width, maxWidth, ...props }: PasswordInputProps, ref) => {
     return (
-      <StyledPasswordInput
+      <StyledPasswordInput ref={ref} {...props} sx={{ maxWidth, width }}>
-        ref={ref}
-        spellCheck={false}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
         {children}
       </StyledPasswordInput>
     );
@@ -199,12 +207,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
 export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
   ({ children, width, maxWidth, ...props }: FileInputProps, ref) => {
     return (
-      <StyledFileInput
+      <StyledFileInput ref={ref} {...props} sx={{ maxWidth, width }}>
-        ref={ref}
-        spellCheck={false}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
         {children}
       </StyledFileInput>
     );

src/renderer/components/popover/index.tsx

@@ -15,15 +15,20 @@ const StyledDropdown = styled(MantinePopover.Dropdown)<PopoverDropdownProps>`
   font-size: 0.9em;
   font-family: var(--content-font-family);
   background-color: var(--dropdown-menu-bg);
-
-  & .mantine-Menu-itemIcon {
-    margin-right: 0.5rem;
-  }
 `;
 
 export const Popover = ({ children, ...props }: PopoverProps) => {
   return (
-    <StyledPopover withArrow withinPortal {...props}>
+    <StyledPopover
+      withArrow
+      withinPortal
+      styles={{
+        dropdown: {
+          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
+        },
+      }}
+      {...props}
+    >
       {children}
     </StyledPopover>
   );

src/renderer/components/select/index.tsx

@@ -33,6 +33,7 @@ export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
       styles={{
         dropdown: {
           background: 'var(--dropdown-menu-bg)',
+          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
         },
         input: {
           background: 'var(--input-bg)',

src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx

@@ -1,6 +1,6 @@
 import React, { MouseEvent } from 'react';
 import { Group, UnstyledButtonProps } from '@mantine/core';
-import { motion } from 'framer-motion';
+import { motion, Variants } from 'framer-motion';
 import {
   RiPlayFill,
   RiMore2Fill,
@@ -8,7 +8,7 @@ import {
   RiHeartLine,
 } from 'react-icons/ri';
 import styled from 'styled-components';
-import { Button } from '@/renderer/components/button';
+import { _Button } from '@/renderer/components/button';
 import { DropdownMenu } from '@/renderer/components/dropdown-menu';
 import { LibraryItem, Play, PlayQueueAddOptions } from '@/renderer/types';
 
@@ -33,6 +33,13 @@ const PlayButton = styled(motion.button)<PlayButtonType>`
   }
 `;
 
+const SecondaryButton = styled(motion(_Button))`
+  fill: white !important;
+  svg: {
+    fill: white !important;
+  }
+`;
+
 const GridCardControlsContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -100,15 +107,30 @@ export const GridCardControls = ({
   itemType: LibraryItem;
   playButtonBehavior: Play;
 }) => {
+  const buttonVariants: Variants = {
+    hover: {
+      opacity: 1,
+      scale: 1.1,
+    },
+    initial: {
+      opacity: 0.6,
+      scale: 1,
+    },
+    pressed: {
+      scale: 1,
+    },
+  };
+
   return (
     <GridCardControlsContainer>
       <TopControls />
       <CenterControls animate={{ opacity: 1 }} initial={{ opacity: 0 }} />
       <BottomControls>
         <PlayButton
-          animate={{ opacity: 0.6 }}
+          initial="initial"
-          whileHover={{ opacity: 1, scale: 1.1 }}
+          variants={buttonVariants}
-          whileTap={{ scale: 1 }}
+          whileHover="hover"
+          whileTap="pressed"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -124,7 +146,15 @@ export const GridCardControls = ({
           <RiPlayFill size={25} />
         </PlayButton>
         <Group spacing="xs">
-          <Button disabled p={5} variant="subtle">
+          <SecondaryButton
+            disabled
+            p={5}
+            sx={{ svg: { fill: 'white !important' } }}
+            variant="subtle"
+            variants={buttonVariants}
+            whileHover="hover"
+            whileTap="pressed"
+          >
             <FavoriteWrapper isFavorite={itemData?.isFavorite}>
               {itemData?.isFavorite ? (
                 <RiHeartFill size={20} />
@@ -132,19 +162,24 @@ export const GridCardControls = ({
                 <RiHeartLine color="white" size={20} />
               )}
             </FavoriteWrapper>
-          </Button>
+          </SecondaryButton>
           <DropdownMenu withinPortal position="bottom-start">
             <DropdownMenu.Target>
-              <Button
+              <SecondaryButton
+                initial="initial"
                 p={5}
+                sx={{ svg: { fill: 'white !important' } }}
                 variant="subtle"
+                variants={buttonVariants}
+                whileHover="hover"
+                whileTap="pressed"
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
                 }}
               >
                 <RiMore2Fill color="white" size={20} />
-              </Button>
+              </SecondaryButton>
             </DropdownMenu.Target>
             <DropdownMenu.Dropdown>
               {PLAY_TYPES.filter(