more styled-components implementation

src/App.js

@@ -8,6 +8,7 @@ import { ReactComponent as Logo1 } from "./assets/logo2.svg";
 import { RoutesContainer } from "./routes/Routes";
 import {
   FixedMainContainer,
+  LogoContainerLink,
   LogoSwitchContainer,
   MainContainer,
   SwitchContainer,
@@ -21,7 +22,11 @@ function App() {
   const [results, setResults] = useState([]);
   const [breed, setBreed] = useState(false);
 
+  // const defaultDarkTheme =
+  //   window.matchMedia?.("(prefers-color-scheme:dark)")?.matches ?? false;
+
   const toggleThemeHandler = () => {
+    console.log("theme");
     if (theme === "light") {
       document.documentElement.style.setProperty(
         "--background",
@@ -83,11 +88,14 @@ function App() {
     <React.Fragment>
       <MainContainer>
         {/* <img className="logo" src={logo} alt="Logo"></img> */}
-        <LogoSwitchContainer to={"/"}>
-          <Logo1></Logo1>
-          <TextLogoContainer />
+        <LogoSwitchContainer>
+          <LogoContainerLink to={"/"}>
+            <Logo1></Logo1>
+            <TextLogoContainer />
+          </LogoContainerLink>
+
           <SwitchContainer>
-            <input type="checkbox" onClick={toggleThemeHandler}></input>
+            <input type="checkbox" onClick={toggleThemeHandler} />
             <span></span>
           </SwitchContainer>
         </LogoSwitchContainer>

src/App.styles.js

@@ -20,7 +20,7 @@ export const FixedMainContainer = styled.div`
   }
 `;
 
-export const LogoSwitchContainer = styled(Link)`
+export const LogoSwitchContainer = styled.div`
   display: flex;
   gap: 0.5vw;
   justify-content: center;
@@ -36,6 +36,13 @@ export const LogoSwitchContainer = styled(Link)`
   }
 `;
 
+export const LogoContainerLink = styled(Link)`
+  display: flex;
+  gap: 0.5vw;
+  justify-content: center;
+  align-items: center;
+`;
+
 export const TextLogoContainer = styled(TextLogo)`
   path {
     fill: var(--textBlack);
@@ -51,17 +58,16 @@ export const SwitchContainer = styled.label`
 
   input {
     opacity: 0;
-    width: 0;
-    height: 0;
-    &:checked + span {
+    width: 4.4rem;
+    &:checked ~ span {
       background-color: var(--btnColor);
     }
-    &:checked + span:before {
+    &:checked ~ span:before {
       -webkit-transform: translateX(1.4vw);
       -ms-transform: translateX(1.4vw);
       transform: translateX(1.4vw);
     }
-    &:focus + span {
+    &:focus ~ span {
       box-shadow: 0 0 1px var(--btnColor);
     }
   }
@@ -90,3 +96,8 @@ export const SwitchContainer = styled.label`
     }
   }
 `;
+
+export const SearchParagraph = styled.p`
+  margin-left: 1vw;
+  align-self: flex-start;
+`;

src/Components/FavouritesPage.js

@@ -1,16 +1,10 @@
-import classes from "./FavouritesPage.module.css";
-import Button from "./UI/Button";
-import CardButton from "./UI/CardButton";
-
-import UserLogItem from "./UserLogItem";
 import { MainContentContainer } from "./styles/globalstyles.styles";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useFetch } from "../hooks/useFetch";
 import Grid from "./UI/Grid";
-import { ReactComponent as Back } from "../assets/back.svg";
+
 import BounceLoader from "react-spinners/BounceLoader";
-import { useNavigate } from "react-router-dom";
-import { useCallback } from "react";
+
 import UserLog from "../pages/UserLog";
 import { PageNavBar } from "./PageNavBar/PageNavBar";
 
@@ -32,14 +26,9 @@ const FavouritesPage = (props) => {
     postAction(`favourites/${id}`, {}, null, "delete");
   };
 
-  let navigate = useNavigate();
-  const backHandler = () => {
-    navigate(-1);
-  };
-
   return (
     <MainContentContainer>
-      <PageNavBar backHandler={backHandler} title={"FAVOURITES"} />
+      <PageNavBar title={"FAVOURITES"} />
 
       <BounceLoader
         color={"var(--main)"}

src/Components/FinalUploadMessage/FinalUploadMessage.js

@@ -1,5 +1,7 @@
-import imgSuccess from "../assets/success.png";
-import imgFailure from "../assets/failure.png";
+import imgSuccess from "../../assets/success.png";
+import imgFailure from "../../assets/failure.png";
+import { UploadBtn, UploadImageButton } from "../UI/Button.styles";
+import { FinalMessageWrapper } from "./FinalUploadMessage.styles";
 
 export const FinalUploadMessage = ({ img, status, uploadingHandler }) => {
   let finalMessage; // separate this logic to its own component
@@ -10,34 +12,38 @@ export const FinalUploadMessage = ({ img, status, uploadingHandler }) => {
     status !== "failure" &&
     status !== "loading"
   ) {
-    finalMessage = <button onClick={uploadingHandler}>UPLOAD PHOTO</button>;
+    finalMessage = (
+      <UploadImageButton onClick={uploadingHandler}>
+        UPLOAD PHOTO
+      </UploadImageButton>
+    );
   }
 
   if (status === "loading") {
     finalMessage = (
-      <button onClick={uploadingHandler} className={classes.uploadBtnloading}>
+      <UploadBtn onClick={uploadingHandler}>
         {" "}
         <div class="loader"></div>
         UPLOAD PHOTO
-      </button>
+      </UploadBtn>
     );
   }
 
   if (status === "success") {
     finalMessage = (
-      <div className={classes.finalMessage}>
+      <FinalMessageWrapper>
         <img src={imgSuccess} alt="asd"></img>
         <p>Thanks for the Upload - Cat found!</p>
-      </div>
+      </FinalMessageWrapper>
     );
   }
   if (status === "failure") {
     finalMessage = (
-      <div className={classes.finalMessage}>
+      <FinalMessageWrapper>
         <img src={imgFailure} alt="asd"></img>
         <p>No Cat found - try a different one</p>
-      </div>
+      </FinalMessageWrapper>
     );
   }
-  return { finalMessage };
+  return finalMessage;
 };

src/Components/FinalUploadMessage/FinalUploadMessage.styles.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+export const FinalMessageWrapper = styled.div`
+  width: 97%;
+  padding: 1vw;
+  gap: 1vw;
+  background-color: white;
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+
+  @media (max-width: 860px) {
+    width: 90%;
+    margin-left: 2vw;
+    padding: 1vw;
+    margin-top: 5vw;
+    gap: 1vw;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+  }
+`;

src/Components/LikedPage.js

@@ -1,6 +1,4 @@
-import classes from "./FavouritesPage.module.css";
 import Button from "./UI/Button";
-import CardButton from "./UI/CardButton";
 import { useEffect } from "react";
 import Grid from "./UI/GridLikes";
 import { ReactComponent as Back } from "../assets/back.svg";
@@ -24,14 +22,9 @@ const LikedPage = (props) => {
     fetchData();
   }, [props.value]);
 
-  let navigate = useNavigate();
-  const backHandler = () => {
-    navigate(-1);
-  };
-
   return (
     <MainContentContainer>
-      <PageNavBar backHandler={backHandler} title={props.text} />
+      <PageNavBar title={props.text} />
 
       <BounceLoader
         color={"var(--main)"}