Create HeaderButtons

Author: codypearce

src/ui/QuestionsHeader/HeaderButtons/HeaderButtons.css

@@ -0,0 +1,38 @@
+.HeaderButtons {
+  display: flex;
+  flex-direction: row;
+}
+
+.question__header__fixed--show .questions__header__reset {
+  background-color: #e74c3c;
+  color: white;
+  right: 16px;
+  top: 13px;
+  font-size: 14px;
+  padding: 6px;
+}
+
+.questions__header__reset {
+  background-color: transparent;
+  color: #e74c3c;
+  border-radius: 4px;
+  border: none;
+  outline: none;
+  font-size: 16px;
+
+  padding: 8px;
+}
+
+.questions__header__hide {
+  color: #e67e22;
+}
+
+.questions__header__reset:hover {
+  cursor: pointer;
+}
+
+@media (max-width: 350px) {
+  .questions__header__reset {
+    right: 8px;
+  }
+}

src/ui/QuestionsHeader/HeaderButtons/HeaderButtons.js

@@ -0,0 +1,20 @@
+import React from "react";
+import "./HeaderButtons.css";
+
+const HeaderButtons = ({ resetItems }) => {
+  return (
+    <div className="HeaderButtons">
+      <button className="questions__header__reset" onClick={resetItems}>
+        Reset
+      </button>
+      <button
+        className="questions__header__reset questions__header__hide"
+        onClick={resetItems}
+      >
+        Hide Completed
+      </button>
+    </div>
+  );
+};
+
+export default HeaderButtons;

src/ui/QuestionsHeader/QuestionsHeader.css

@@ -10,6 +10,11 @@
   position: relative;
 
   box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  padding-left: 56px;
 }
 
 .question__header--hide {
@@ -40,35 +45,3 @@
   z-index: 100;
   pointer-events: all;
 }
-
-.question__header__fixed--show .questions__header__reset {
-  background-color: #e74c3c;
-  color: white;
-  right: 16px;
-  top: 13px;
-  font-size: 14px;
-  padding: 6px;
-}
-
-.questions__header__reset {
-  background-color: transparent;
-  color: #e74c3c;
-  border-radius: 4px;
-  border: none;
-  outline: none;
-  font-size: 16px;
-  position: absolute;
-  right: 24px;
-  top: 24px;
-  padding: 8px;
-}
-
-.questions__header__reset:hover {
-  cursor: pointer;
-}
-
-@media (max-width: 350px) {
-  .questions__header__clear {
-    right: 8px;
-  }
-}

src/ui/QuestionsHeader/QuestionsHeader.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import useWindowScroll from "@react-hook/window-scroll";
 import "./QuestionsHeader.css";
+import HeaderButtons from "./HeaderButtons/HeaderButtons";
 
 const QuestionsHeader = ({ items, questions, isFixed, resetItems }) => {
   const scrollY = useWindowScroll(60);
@@ -16,9 +17,7 @@ const QuestionsHeader = ({ items, questions, isFixed, resetItems }) => {
       <span>
         {!items ? 0 : items.length}/{questions.length}
       </span>
-      <button className="questions__header__reset" onClick={resetItems}>
-        Reset
-      </button>
+      <HeaderButtons resetItems={resetItems} />
     </div>
   );
 };