From 1b4cd7c0595e5bf1c12abf831636eccbfc92fc84 Mon Sep 17 00:00:00 2001
From: Ana Alves <anafalves999@gmail.com>
Date: Sat, 27 Dec 2025 15:33:43 +0000
Subject: [PATCH 1/2] Improved class filters visibility

---
 src/components/planner/ScheduleType.tsx | 72 ++++++++++++++-----------
 1 file changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/components/planner/ScheduleType.tsx b/src/components/planner/ScheduleType.tsx
index 4bdd145cd..f28239b13 100644
--- a/src/components/planner/ScheduleType.tsx
+++ b/src/components/planner/ScheduleType.tsx
@@ -1,4 +1,5 @@
-import { getClassType } from '../../utils'
+import { getClassType, cn } from '../../utils'
+import { Badge } from '../ui/badge'
 
 type Props = {
   types: string[],
@@ -7,40 +8,49 @@ type Props = {
 }
 
 const ScheduleTypes = ({ types, hiddenLessonsTypes, setHiddenLessonsTypes }: Props) => {
+  const toggleType = (lessonType: string) => {
+    if (hiddenLessonsTypes.includes(lessonType)) {
+      setHiddenLessonsTypes(hiddenLessonsTypes.filter(t => t !== lessonType))
+    } else {
+      setHiddenLessonsTypes([...hiddenLessonsTypes, lessonType])
+    }
+  }
   return (
     <>
-      {types.map((lessonType) => (
-        <label
-          className="group relative flex items-center gap-1.5 overflow-x-hidden rounded-lg hover:cursor-pointer lg:gap-1"
-          key={`lesson-type-${lessonType}`}
-        >
-          <input
-            type="checkbox"
-            className="peer hidden"
-            checked={hiddenLessonsTypes.includes(lessonType)}
-            onChange={(e) => {
-              if (e.target.checked) {
-                setHiddenLessonsTypes([...hiddenLessonsTypes, lessonType])
-              } else {
-                setHiddenLessonsTypes(hiddenLessonsTypes.filter((type) => type !== lessonType))
-              }
-            }}
-          />
+      <div className="flex flex-wrap gap-2">
+        {types.map((lessonType) => {
+          const isHidden = hiddenLessonsTypes.includes(lessonType)
 
-          <span
-            className={`flex h-4 w-4 items-center justify-center rounded 2xl:h-4 2xl:w-4 peer-checked:opacity-50
-          ${'bg-schedule-' + lessonType.toLowerCase() + '/80'}`}
-            style={{ marginRight: '5px' }}
-          />
-
-          <span className="cursor-pointer select-none peer-checked:line-through peer-checked:opacity-50">{getClassType(lessonType)}</span>
-
-          {/* Shine box */}
-          <div className="z-5 absolute -inset-full top-0 block h-full w-1/2 -skew-x-12 transform bg-gradient-to-r from-transparent to-white opacity-40 group-hover:animate-shine" />
-        </label>
-      ))}
+          return (
+            <Badge
+              key={lessonType}
+              onClick={() => toggleType(lessonType)}
+              variant={isHidden ? 'outline' : 'secondary'}
+              className={`
+                cursor-pointer select-none transition-all
+                hover:opacity-90
+              `}
+            >
+              <span
+                className={`
+                  flex h-4 w-4 items-center justify-center rounded mr-2
+                  ${'bg-schedule-' + lessonType.toLowerCase() + '/80'}
+                  peer-checked:opacity-50
+                `}
+              >
+                {!isHidden &&    
+                (<span className="absolute text-white text-[11px] font-semibold leading-none">
+                  ✓
+                </span>)
+                }
+              </span>
+              {getClassType(lessonType)}
+            </Badge>
+          )
+        })}
+      </div>
     </>
   )
 }
 
-export default ScheduleTypes
+export default ScheduleTypes
\ No newline at end of file

From b592635747c8d713421357a267254b359c767d59 Mon Sep 17 00:00:00 2001
From: Ana Alves <anafalves999@gmail.com>
Date: Sat, 27 Dec 2025 16:12:17 +0000
Subject: [PATCH 2/2] Removed unused cn

---
 src/components/planner/ScheduleType.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/planner/ScheduleType.tsx b/src/components/planner/ScheduleType.tsx
index f28239b13..422d59347 100644
--- a/src/components/planner/ScheduleType.tsx
+++ b/src/components/planner/ScheduleType.tsx
@@ -1,4 +1,4 @@
-import { getClassType, cn } from '../../utils'
+import { getClassType} from '../../utils'
 import { Badge } from '../ui/badge'
 
 type Props = {