Merge pull request #304 from TaloDev/events-filter

Add new events filter to overview page

package.json

@@ -32,7 +32,7 @@
     "react-hook-form": "^7.43.8",
     "react-router-dom": "^6.23.1",
     "react-select": "^5.8.0",
-    "recharts": "^2.1.15",
+    "recharts": "^2.13.0",
     "recoil": "^0.7.6",
     "swr": "^2.0.0",
     "use-debounce": "^9.0.0",

src/components/CheckboxButton.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react'
+import clsx from 'clsx'
+import { IconCheck } from '@tabler/icons-react'
+import { hiddenInputStyle, labelFocusStyle } from '../styles/theme'
+
+type CheckboxButtonProps = {
+  id: string
+  checked: boolean
+  onChange: (checked: boolean) => void
+  label: string
+}
+
+export default function CheckboxButton({ id, checked, label, onChange }: CheckboxButtonProps) {
+  const [focus, setFocus] = useState(false)
+
+  return (
+    <>
+      <input
+        id={id}
+        type='checkbox'
+        className={hiddenInputStyle}
+        onFocus={() => setFocus(true)}
+        onBlur={() => setFocus(false)}
+        onChange={() => onChange(!checked)}
+      />
+
+      <label
+        htmlFor={id}
+        className={clsx('p-1 rounded hover:bg-gray-200 flex items-center space-x-2 cursor-pointer transition-all', { [labelFocusStyle]: focus })}
+      >
+        <span className='inline-block rounded w-6 h-6 bg-white border border-black/30 align-text-bottom text-black active:bg-gray-200 transition-colors'>
+          {checked &&
+            <span className='flex items-center justify-center h-full'>
+              <IconCheck size={16} stroke={3} />
+            </span>
+          }
+        </span>
+        <span>{label}</span>
+      </label>
+    </>
+  )
+}

src/components/DateInput.tsx

@@ -63,6 +63,7 @@ export default function DateInput({
               onFocus: () => setOpen(true),
               name: id
             }}
+            inputClassName='caret-transparent cursor-pointer'
             {...textInputProps}
           />
         </div>

src/components/GameSwitcher.tsx

@@ -49,13 +49,13 @@ export default function GameSwitcher() {
             <motion.ul
               animate={{ opacity: isOpen ? 1 : 0 }}
               transition={{ duration: 0.2 }}
-              className='bg-white text-black rounded-b w-60 md:w-80 shadow'
+              className='bg-white text-black rounded-b w-60 md:w-80 shadow divide-y divide-gray-300'
             >
               {games.map((game) => {
                 const disabled = activeGame.id === game.id
 
                 return (
-                  <li key={game.name} className={clsx('border-b border-gray-300', dropdownButtonStyle, { ['!bg-transparent']: disabled })}>
+                  <li key={game.name} className={clsx(dropdownButtonStyle, { ['!bg-transparent']: disabled })}>
                     <Button
                       variant='bare'
                       disabled={disabled}

src/components/RadioGroup.tsx

@@ -49,12 +49,12 @@ function RadioGroup<T>({
               <label
                 htmlFor={`${name}${idx}`}
                 className={clsx(
-                  'block font-semibold border border-gray-300 p-2 rounded cursor-pointer transition-colors hover:bg-gray-100',
+                  'block font-semibold border border-black/30 p-2 rounded cursor-pointer transition-colors hover:bg-gray-100',
                   { 'bg-indigo-500 hover:!bg-indigo-500 border-indigo-500': selected },
                   { [labelFocusStyle]: option.value === focusedValue }
                 )}
               >
-                <span className={clsx('inline-block relative rounded-full w-4 h-4 bg-white align-text-bottom border border-gray-300', { 'border-indigo-500': selected })}>
+                <span className={clsx('inline-block relative rounded-full w-4 h-4 bg-white align-text-bottom border border-black/30', { 'border-indigo-500': selected })}>
                   {selected &&
                     <span className='absolute inset-0 rounded-full bg-indigo-300 m-0.5' />
                   }

src/components/TextInput.tsx

@@ -52,7 +52,7 @@ export default function TextInput({
   `, {
     'bg-gray-600': !variant,
     'bg-gray-100 text-black': variant === 'light',
-    'bg-white border border-gray-300 focus:border-opacity-0': variant === 'modal'
+    'bg-white border border-black/30 focus:border-black/0': variant === 'modal'
   })
 
   return (