FIX: hamburger flipped, cahpter title not visible on white mode, and …

…animated on hover cards
code100x · Feb 2, 2024 · 15f7dbc · 15f7dbc
1 parent bef4641
commit 15f7dbc
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
@@ -8,7 +8,7 @@ export const ContentCard = ({
   onClick: () => void
 }) => {
   return (
-    <div onClick={onClick}>
+    <div onClick={onClick} className="hover:scale-105 ease-in duration-200">
       <img src={image} alt={title} className="rounded-md" />
       <div className="flex justify-between mt-2 text-gray-900 dark:text-white">
         <div>{title}</div>

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -127,18 +127,18 @@ export function ToggleButton({
       className="flex flex-col justify-center items-center"
     >
       <span
-        className={`dark:bg-white bg-black block transition-all duration-300 ease-out  h-0.5 w-6 rounded-sm ${sidebarOpen ? 'rotate-45 translate-y-1' : '-translate-y-0.5'}`}
+        className={`dark:bg-white bg-black block transition-all duration-300 ease-out  h-0.5 w-6 rounded-sm ${!sidebarOpen ? 'rotate-45 translate-y-1' : '-translate-y-0.5'}`}
       ></span>
       <span
         className={`dark:bg-white bg-black block transition-all duration-300 ease-out 
                     h-0.5 w-6 rounded-sm my-0.5 ${
-    sidebarOpen ? 'opacity-0' : 'opacity-100'
+    !sidebarOpen ? 'opacity-0' : 'opacity-100'
     }`}
       ></span>
       <span
         className={`dark:bg-white bg-black block transition-all duration-300 ease-out 
                     h-0.5 w-6 rounded-sm ${
-    sidebarOpen
+    !sidebarOpen
       ? '-rotate-45 -translate-y-1'
       : 'translate-y-0.5'
     }`}

diff --git a/src/components/VideoContentChapters.tsx b/src/components/VideoContentChapters.tsx
@@ -44,7 +44,7 @@ const VideoContentChapters = ({
           return (
             <>
               <div
-                className={`p-2 py-3 flex items-center gap-3 justify-between cursor-pointer ${currentTime >= start && currentTime < end ? 'bg-[#27272A]' : ''}`}
+                className={`dark:text-white text-black p-2 py-3 flex items-center gap-3 justify-between cursor-pointer ${currentTime >= start && currentTime < end ? 'bg-[#27272A]' : ''}`}
                 onClick={() => {
                   player.currentTime(start);
                   player.play();