SP-07: Update focus button

Tihi321 · Aug 8, 2024 · 2628917 · 2628917
1 parent 1fadfbf
commit 2628917
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 79 deletions.
diff --git a/src/blocks/inputs/Search.tsx b/src/blocks/inputs/Search.tsx
@@ -26,8 +26,7 @@ const Container = styled("div")`
   flex-direction: column;
   justify-content: center;
   gap: 8px;
-  height: 120px;
-  margin-top: 24px;
+  margin: 48px 0;
 `;
 
 const SearchContainer = styled("div")`
@@ -187,7 +186,7 @@ export const Search = () => {
     }
   };
   return (
-    <Container class="search-container">
+    <Container>
       <SearchContainer>
         <Input
           onInput={(e) => {

diff --git a/src/layouts/Footer.astro b/src/layouts/Footer.astro
@@ -1,35 +1,3 @@
-<script>
-  const toggleFocus = () => {
-    const focus = localStorage.getItem("focus");
-    if (focus === "true") {
-      localStorage.setItem("focus", "false");
-      document.body.classList.remove("focus");
-    } else {
-      localStorage.setItem("focus", "true");
-      document.body.classList.add("focus");
-    }
-  };
-  document.addEventListener("DOMContentLoaded", () => {
-    const focusButton = document.querySelector("#focus-button");
-    focusButton?.addEventListener("click", () => {
-      toggleFocus();
-    });
-
-    document.addEventListener("keydown", function (event) {
-      if (event.ctrlKey && event.code === "Quote") {
-        toggleFocus();
-      }
-    });
-
-    const focus = localStorage.getItem("focus");
-    if (focus === "true") {
-      document.body.classList.add("focus");
-    } else {
-      document.body.classList.remove("focus");
-    }
-  });
-</script>
-
 <footer class="footer">
   <div class="info">
     <div class="websites">
@@ -39,25 +7,6 @@
   </div>
 
   <div class="socials">
-    <button id="focus-button" class="focus-button">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <circle cx="12" cy="12" r="10"></circle>
-        <line x1="22" y1="12" x2="18" y2="12"></line>
-        <line x1="6" y1="12" x2="2" y2="12"></line>
-        <line x1="12" y1="6" x2="12" y2="2"></line>
-        <line x1="12" y1="22" x2="12" y2="18"></line>
-      </svg>
-    </button>
     <a href="mailto:tihomir.selak@outlook.com" target="_blank">
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -159,16 +108,4 @@
       height: 18px;
     }
   }
-
-  .focus-button {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    color: var(--link-color);
-    padding: 0;
-
-    &:hover {
-      color: var(--link-hover);
-    }
-  }
 </style>
diff --git a/src/layouts/Header.astro b/src/layouts/Header.astro
@@ -7,10 +7,39 @@ import { DateTime } from "../blocks/info/DateTime.tsx";
   import { get, capitalize } from "lodash-es";
   import { getRandomQuote, getRandomWord, getEnglishQuote } from "../utils/random";
 
+  const toggleFocus = () => {
+    const focus = localStorage.getItem("focus");
+    if (focus === "true") {
+      localStorage.setItem("focus", "false");
+      document.body.classList.remove("focus");
+    } else {
+      localStorage.setItem("focus", "true");
+      document.body.classList.add("focus");
+    }
+  };
+
   document.addEventListener("DOMContentLoaded", () => {
     const openMenu = document.getElementById("open-menu");
     const getNewQuote = document.getElementById("get-new-quote");
 
+    const focusButton = document.querySelector("#focus-button");
+    focusButton?.addEventListener("click", () => {
+      toggleFocus();
+    });
+
+    document.addEventListener("keydown", function (event) {
+      if (event.ctrlKey && event.code === "Quote") {
+        toggleFocus();
+      }
+    });
+
+    const focus = localStorage.getItem("focus");
+    if (focus === "true") {
+      document.body.classList.add("focus");
+    } else {
+      document.body.classList.remove("focus");
+    }
+
     document.addEventListener("keydown", function (event) {
       if (event.ctrlKey && event.code === "Comma") {
         const menuContainer = document.querySelector(".menu-container");
@@ -109,7 +138,10 @@ import { DateTime } from "../blocks/info/DateTime.tsx";
   <div class="quote-of-the-day">
     <div class="quote" id="quote"></div>
     <div class="author" id="author"></div>
-    <button class="get-new-quote" id="get-new-quote" title="Get new quote"> </button>
+    <div class="quote-buttons">
+      <button id="focus-button" class="quote-button light-button"></button>
+      <button class="quote-button white-button" id="get-new-quote" title="Get new quote"></button>
+    </div>
   </div>
   <div class="info">
     <div class="weather">
@@ -208,14 +240,19 @@ import { DateTime } from "../blocks/info/DateTime.tsx";
       font-weight: bold;
     }
 
-    .get-new-quote {
-      position: absolute;
-      right: 10px;
-      bottom: 10px;
-      width: 15px;
-      height: 15px;
+    .quote-buttons {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    .quote-button {
+      color: var(--light);
+      position: relative;
+      width: 20px;
+      height: 20px;
       background: none;
-      border: 2px solid var(--light);
+      border: 2px solid currentColor;
       cursor: pointer;
       border-radius: 50%;
       overflow: hidden;
@@ -227,7 +264,7 @@ import { DateTime } from "../blocks/info/DateTime.tsx";
         left: 50%;
         width: 0;
         height: 0;
-        background-color: var(--light);
+        background-color: currentColor;
         border-radius: 50%;
         transform: translate(-50%, -50%);
         transition:
@@ -240,6 +277,14 @@ import { DateTime } from "../blocks/info/DateTime.tsx";
         height: 80%;
       }
     }
+
+    .white-button {
+      color: var(--light);
+    }
+
+    .light-button {
+      color: var(--link-color);
+    }
   }
 
   .info {

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -59,10 +59,6 @@ body {
 			display: none;
 			pointer-events: none;
 		}
-
-		.search-container {
-			height: 500px;
-		}
 	}
 
 	@media (min-width: 769px) {