Response header buttons

Author: codypearce

src/ui/QuestionsHeader/HeaderButtons/HeaderButtons.css

@@ -1,38 +1,70 @@
 .HeaderButtons {
   display: flex;
   flex-direction: row;
+
+  justify-content: flex-end;
+}
+
+.question__header__fixed .HeaderButtons {
+  flex: 1;
 }
 
-.question__header__fixed--show .questions__header__reset {
-  background-color: #e74c3c;
+.question__header__fixed--show .HeaderButtons__button {
+  background-color: rgba(231, 77, 60, 1);
   color: white;
-  right: 16px;
-  top: 13px;
+
   font-size: 14px;
   padding: 6px;
 }
 
-.questions__header__reset {
+.HeaderButtons__button {
   background-color: transparent;
-  color: #e74c3c;
+  color: rgba(231, 77, 60, 1);
   border-radius: 4px;
   border: none;
   outline: none;
   font-size: 16px;
 
   padding: 8px;
+  transition: 0.5s ease all;
+}
+
+.question__header__fixed--show .HeaderButtons__button--completed {
+  background-color: rgba(243, 157, 18, 1);
 }
 
-.questions__header__hide {
-  color: #e67e22;
+.HeaderButtons__button--completed {
+  color: rgba(243, 157, 18, 1);
+  margin-left: 8px;
 }
 
-.questions__header__reset:hover {
+/* Hover */
+.question__header__fixed--show .HeaderButtons__button:hover {
+  background: rgba(231, 77, 60, 1);
+}
+.HeaderButtons__button:hover {
+  cursor: pointer;
+  background: rgba(231, 77, 60, 0.2);
+}
+.question__header__fixed--show .HeaderButtons__button--completed:hover {
+  background: rgba(243, 157, 18, 1);
+}
+.HeaderButtons__button--completed:hover {
   cursor: pointer;
+  background: rgba(243, 157, 18, 0.2);
 }
 
-@media (max-width: 350px) {
-  .questions__header__reset {
-    right: 8px;
+@media (max-width: 600px) {
+  .question__header__fixed .HeaderButtons {
+    flex: auto;
+  }
+  .HeaderButtons {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .HeaderButtons__button {
+    margin: 0 8px;
+    width: 100%;
   }
 }

src/ui/QuestionsHeader/HeaderButtons/HeaderButtons.js

@@ -4,11 +4,11 @@ import "./HeaderButtons.css";
 const HeaderButtons = ({ resetItems }) => {
   return (
     <div className="HeaderButtons">
-      <button className="questions__header__reset" onClick={resetItems}>
+      <button className="HeaderButtons__button" onClick={resetItems}>
         Reset
       </button>
       <button
-        className="questions__header__reset questions__header__hide"
+        className="HeaderButtons__button HeaderButtons__button--completed"
         onClick={resetItems}
       >
         Hide Completed

src/ui/QuestionsHeader/QuestionsHeader.css

@@ -6,7 +6,7 @@
   margin-bottom: 24px;
   font-size: 28px;
   font-weight: bold;
-  text-align: center;
+  justify-content: flex-start;
   position: relative;
 
   box-sizing: border-box;
@@ -24,7 +24,6 @@
 .question__header__fixed {
   position: fixed;
   background: #27ae60;
-
   color: white;
   top: 0px;
   left: 0px;
@@ -36,7 +35,7 @@
   transition: 0.3s all ease;
   padding: 16px;
   border-radius: 0px;
-  font-size: 20px;
+  font-size: 28px;
   line-height: 22px;
 }
 
@@ -45,3 +44,33 @@
   z-index: 100;
   pointer-events: all;
 }
+
+.questions__header_text {
+  justify-content: flex-start;
+}
+
+.question__header__fixed .questions__header_text {
+  flex: 1;
+  justify-content: center;
+  text-align: center;
+}
+
+.questions__header__spacer {
+  flex: 1;
+}
+
+@media (max-width: 600px) {
+  .questions__header {
+    flex-direction: column;
+    justify-content: center;
+    padding: 12px;
+  }
+  .questions__header__spacer {
+    flex: 0;
+  }
+  .questions__header_text {
+    flex: auto;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+}

src/ui/QuestionsHeader/QuestionsHeader.js

@@ -14,9 +14,10 @@ const QuestionsHeader = ({ items, questions, isFixed, resetItems }) => {
     <div
       className={`questions__header ${fixedClass} ${showFixed} ${hideNoneFixed}`}
     >
-      <span>
+      {isFixed ? <div className="questions__header__spacer"></div> : null}
+      <div className="questions__header_text">
         {!items ? 0 : items.length}/{questions.length}
-      </span>
+      </div>
       <HeaderButtons resetItems={resetItems} />
     </div>
   );