From ee092a8d0921528a5ab8cc91a1eabdf1d1960fdc Mon Sep 17 00:00:00 2001
From: Elar Saks <elarsaks@gmail.com>
Date: Thu, 3 Aug 2023 04:28:55 +0300
Subject: [PATCH] Fix styles.

---
 .github/workflows/deploy.yml |   2 +-
 src/App.css                  | 145 -----------------------------------
 src/App.js                   |   4 +-
 src/components/AppHeader.jsx |  15 ++--
 src/pages/UseEffect.jsx      |   1 -
 5 files changed, 11 insertions(+), 156 deletions(-)
 delete mode 100644 src/App.css

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 0929209..0a1bb5c 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -1,4 +1,4 @@
-name: Full Stack Deployment
+name: Deploy Rect Hooks App
 
 on:
   push:
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 1b4b355..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,145 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-  background-color: #222;
-}
-
-.App {
-  text-align: center;
-  color: white;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 50px;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.App-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  background-color: #282c34;
-  color: #fff;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-}
-
-.header-content h1 {
-  font-size: 24px;
-  margin: 0;
-}
-
-.logo-title {
-  display: flex;
-  align-items: center;
-}
-
-.App-logo {
-  width: 40px;
-  height: 40px;
-  margin-right: 10px;
-}
-
-.header-selector {
-  background-color: #61dafb;
-  color: #282c34;
-  border: none;
-  padding: 10px;
-  border-radius: 5px;
-  font-size: 1.2em;
-  outline: none;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-}
-
-/* Media query for mobile responsiveness */
-@media screen and (max-width: 600px) {
-  .logo-title {
-    align-items: center;
-  }
-
-  .header-content h1  {
-    font-size: 18px;
-  }
-}
-
-h1 {
-  font-size: 36px;
-  font-weight: normal;
-  margin: 0;
-  margin-top: 20px;
-  color: #61dafb;
-}
-
-.info-style {
-  font-size: 24px;
-  font-weight: normal;
-  line-height: 1.5;
-  color: #ffffff;
-  margin: 20px;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 10px;
-  padding-bottom: 10px;
-}
-
-.border-top {
-  padding-top: 20px;
-  border-top: 5px solid #61dafb;
-}
-
-.border-bottom {
-  padding-bottom: 20px;
-  border-bottom: 5px solid #61dafb;
-}
-
-.info-style span {
-  font-weight: bold;
-  color: #61dafb;
-}
-
-@media screen and (max-width: 600px) {
-  .info-style {
-    font-size: 18px;
-    margin: 10px;
-  }
-}
-
-.button-style {
-  margin: 5px;
-  margin-top: 20px;
-  color: white;
-  background-color: #282c34;
-  border-radius: 5px;
-  padding: 10px 20px;
-  font-size: 18px;
-  cursor: pointer;
-  border: 2px solid #61dafb;
-}
-
-.active-button-style {
-  margin: 5px;
-  margin-top: 20px;
-  color: white;
-  background-color: #282c34;
-  border-radius: 5px;
-  padding: 10px 20px;
-  font-size: 18px;
-  cursor: pointer;
-  border: 2px solid #fbda61;
-}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 144b685..5cd7719 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import "./App.css";
+import app from "./styles/App.module.css";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 
 import UseCallback from "./pages/UseCallback";
@@ -17,7 +17,7 @@ export default function App() {
 
   return (
     <BrowserRouter basename={baseUrl}>
-      <div className="App">
+      <div className={app["App"]}>
         <AppHeader />
         <Routes>
           <Route>
diff --git a/src/components/AppHeader.jsx b/src/components/AppHeader.jsx
index 4f62a30..60c0a59 100644
--- a/src/components/AppHeader.jsx
+++ b/src/components/AppHeader.jsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import logo from "../logo.svg";
-import styles from "./AppHeader.module.css";
+import header from "../styles/AppHeader.module.css";
+import app from "../styles/App.module.css";
 
 export default function AppHeader() {
   const navigate = useNavigate();
@@ -18,14 +19,14 @@ export default function AppHeader() {
   }, [location]);
 
   return (
-    <div className={styles["App-header"]}>
-      <div className={styles["logo-title"]}>
-        <img src={logo} className={styles["App-logo"]} alt="logo" />
-        <h1 className={styles["header-content"]}>React Hooks</h1>
+    <div className={header["App-header"]}>
+      <div className={header["logo-title"]}>
+        <img src={logo} className={app["App-logo"]} alt="logo" />
+        <h1 className={header["header-content"]}>React Hooks</h1>
       </div>
 
       <select
-        className={styles["header-selector"]}
+        className={header["header-selector"]}
         onChange={handleRouteChange}
         value={selectedOption}
       >
diff --git a/src/pages/UseEffect.jsx b/src/pages/UseEffect.jsx
index 3bee38c..45cfb5b 100644
--- a/src/pages/UseEffect.jsx
+++ b/src/pages/UseEffect.jsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import styles from "../styles/Info.module.css";
 import info from "../styles/Info.module.css";
 import util from "../styles/Util.module.css";