center "clear completed" btn

mate-academy · Sep 19, 2023 · b27c62a · b27c62a
1 parent bd4ddcd
commit b27c62a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/src/components/TodoFooter/TodoFooter.tsx b/src/components/TodoFooter/TodoFooter.tsx
@@ -28,7 +28,6 @@ export const TodoFooter: React.FC<Props> = ({
         )}
       </span>
 
-      {/* Active filter should have a 'selected' class */}
       <nav className="filter">
         <a
           href="#/"
@@ -64,15 +63,15 @@ export const TodoFooter: React.FC<Props> = ({
         </a>
       </nav>
 
-      {todosCompleted && (
-        <button
-          type="button"
-          className="todoapp__clear-completed"
-          onClick={deleteCompletedTodo}
-        >
-          Clear completed
-        </button>
-      )}
+      <button
+        type="button"
+        className={classNames('todoapp__clear-completed', {
+          hidden: !todosCompleted,
+        })}
+        onClick={deleteCompletedTodo}
+      >
+        Clear completed
+      </button>
     </footer>
   );
 };
diff --git a/src/styles/filter.scss b/src/styles/filter.scss
@@ -20,3 +20,8 @@
     }
   }
 }
+
+.hidden {
+  visibility: hidden;
+  opacity: 0;
+}