Refractor

src/components/clusters.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from 'react';
+
 import LinkCard from '../components/linkCard';
 import ClearFilter from '../utils/clearFilter';
 import { fetchAndFilterData } from '../services/dataFetcher';
-import '../styles/clusters.css';
-import '../styles/loading.css';
+
+import '../styles/components/clusters.css';
+import '../styles/popups/loading.css';
 
 interface ClustersProps {
   dataKey: string;
@@ -57,4 +59,4 @@ function Clusters({ dataKey, searchTerm, setSearchTerm, isLogedIn, token, messag
   );
 }
 
-export default Clusters;
+export default Clusters;

src/components/content.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
+
 import Cluster from '../components/clusters';
-import '../styles/content.css';
+
+import '../styles/components/content.css';
 
 interface ContentProps {
   routes: { [key: string]: string };
@@ -12,9 +14,10 @@ interface ContentProps {
   setToken: (value: string) => void;
   message: string | null;
   setMessage: (value: string | null) => void;
+	setShowOverlay: (value: boolean) => void;
 }
 
-function Content({ routes, searchTerm, setSearchTerm, isLogedIn, token, setToken, message, setMessage }: ContentProps) {
+function Content({ routes, searchTerm, setSearchTerm, isLogedIn, token, setToken, message, setMessage, setShowOverlay }: ContentProps) {
   return (
     <div className="App-content">
       <Routes>
@@ -31,4 +34,4 @@ function Content({ routes, searchTerm, setSearchTerm, isLogedIn, token, setToken
   );
 }
 
-export default Content;
+export default Content;

src/components/footer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import '../styles/footer.css';
+
+import '../styles/components/footer.css';
 
 function Footer() {
   return (
@@ -12,4 +13,4 @@ function Footer() {
   )
 }
 
-export default Footer;
+export default Footer;

src/components/header.tsx

@@ -1,8 +1,10 @@
-import { Icon } from '@iconify/react';
 import React, { useState, useEffect, useRef } from 'react';
+import { Icon } from '@iconify/react';
 import { Link } from 'react-router-dom';
+
 import Login from '../popups/login';
-import '../styles/header.css';
+
+import '../styles/components/header.css';
 
 interface HeaderProps {
   routes: { [key: string]: string };
@@ -14,9 +16,10 @@ interface HeaderProps {
   setToken: (value: string) => void;
   message: string | null;
   setMessage: (value: string | null) => void;
+	setShowOverlay: (value: boolean) => void;
 }
 
-function Header({ routes, searchTerm, setSearchTerm, isLogedIn, setIsLogedIn, token, setToken, message, setMessage }: HeaderProps) {
+function Header({ routes, searchTerm, setSearchTerm, isLogedIn, setIsLogedIn, token, setToken, message, setMessage, setShowOverlay }: HeaderProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     localStorage.removeItem('colorMap');
@@ -81,12 +84,12 @@ function Header({ routes, searchTerm, setSearchTerm, isLogedIn, setIsLogedIn, to
         )}
       </nav>
       <div className={`overlay ${(isOpen || showLogin) ? 'open' : ''}`} onClick={() => {
-        if (isOpen) toggleMenu(); 
+        if (isOpen) toggleMenu();
         if (showLogin) toggleLogin();
       }}></div>
       {showLogin && <Login setShowLogin={setShowLogin} setIsLogedIn={setIsLogedIn} token={token} setToken={setToken} message={message} setMessage={setMessage} /> }
     </header>
   )
 }
 
-export default Header;
+export default Header;

src/components/linkCard.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import { Icon } from '@iconify/react';
 import { v4 as uuidv4 } from 'uuid';
+
 import { getRandomColor, getContrastColor } from '../utils/randomColor';
 import Confirm from '../popups/confirm';
 import deleteCardHandler from '../services/deleteCardHandler';
-import '../styles/linkCard.css';
+
+import '../styles/components/linkCard.css';
 
 interface LinkCardProps {
   item: ClusterProps;
@@ -63,7 +65,7 @@ function LinkCard({ item, setSelectedCategory, isLogedIn, token, message, setMes
           }
         </div>
 
-        <a 
+        <a
           className="link-card-right"
           href={item.Url ? item.Url : '#'}
           target="_blank"
@@ -103,4 +105,4 @@ function LinkCard({ item, setSelectedCategory, isLogedIn, token, message, setMes
   );
 }
 
-export default LinkCard;
+export default LinkCard;

src/popups/confirm.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import '../styles/popup.css';
-import '../styles/confirm.css';
+
+import '../styles/popups/popup.css';
+import '../styles/popups/confirm.css';
 
 interface ConfirmProps {
   message: string | null;
@@ -13,9 +14,9 @@ function Confirm({ message, setShowConfirm, actionHandler }: ConfirmProps) {
     <>
       <div className="Popup">
         <div className="Confirm-message">{ message }</div>
-        <div className="Confirm-button">
-          <button type="button" className="Confirm-button-cancel" onClick={() => {setShowConfirm(false);}}>cancel</button>
-          <button type="button" className="Confirm-button-ok" onClick={() => {
+        <div className="Confirm-button-pair">
+          <button type="button" className="Confirm-button Confirm-button-cancel" onClick={() => {setShowConfirm(false);}}>cancel</button>
+					<button type="button" className="Confirm-button Confirm-button-ok" onClick={() => {
             actionHandler();
             setShowConfirm(false);
           }} >confirm</button>
@@ -25,4 +26,4 @@ function Confirm({ message, setShowConfirm, actionHandler }: ConfirmProps) {
   );
 }
 
-export default Confirm;
+export default Confirm;

src/popups/login.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Icon } from '@iconify/react';
+
 import loginHandler from '../services/loginHandler';
-import '../styles/popup.css';
-import '../styles/login.css';
+
+import '../styles/popups/popup.css';
+import '../styles/popups/login.css';
 
 interface LoginProps {
   setShowLogin: (value: boolean) => void;
@@ -49,4 +51,4 @@ function Login({ setShowLogin, setIsLogedIn, token, setToken, message, setMessag
   );
 }
 
-export default Login;
+export default Login;

src/popups/notification.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import '../styles/notification.css';
+
+import '../styles/popups/notification.css';
 
 interface NotificationProps {
     message: string | null;
@@ -33,4 +34,4 @@ function Notification({ message, setMessage }: NotificationProps) {
     );
 }
 
-export default Notification;
+export default Notification;

src/popups/overlay.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import "../styles/popups/overlay.css";
+
+interface OverlayProps {
+	showOverlay: boolean;
+	setShowOverlay: (value: boolean) => void;
+}
+
+function Overlay({ showOverlay, setShowOverlay }: OverlayProps) {
+	return (
+		<>
+			<div className={`overlay ${showOverlay ? 'open' : ''}`} onClick={() => {
+				if (showOverlay) {
+					setShowOverlay(false);
+				}
+			}}></div>
+		</>
+	);
+}
+
+export default Overlay;

src/routers/router.tsx

@@ -6,17 +6,21 @@ import Header from '../components/header';
 import Content from '../components/content';
 import Footer from '../components/footer';
 import Notification from '../popups/notification';
+import Overlay from '../popups/overlay';
 
-import '../styles/loading.css';
+import '../styles/popups/loading.css';
 
 function Router() {
-  const [searchTerm, setSearchTerm] = useState('');
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [isLogedIn, setIsLogedIn] = useState<boolean>(false);
+
+	const [routes, setRoutes] = useState({});
+
   const [token, setToken] = useState<string>('');
   const [message, setMessage] = useState<string | null>(null);
+	const [showOverlay, setShowOverlay] = useState<boolean>(false)
 
-  const [routes, setRoutes] = useState({});
+	const [searchTerm, setSearchTerm] = useState('');
 
   useEffect(() => {
     setIsLoading(true);
@@ -40,15 +44,16 @@ function Router() {
   return (
     <>
       <BrowserRouter>
-        <Header routes={routes} searchTerm={searchTerm} setSearchTerm={setSearchTerm} isLogedIn={isLogedIn} setIsLogedIn={setIsLogedIn} token={token} setToken={setToken} message={message} setMessage={setMessage} />
+        <Header routes={routes} searchTerm={searchTerm} setSearchTerm={setSearchTerm} isLogedIn={isLogedIn} setIsLogedIn={setIsLogedIn} token={token} setToken={setToken} message={message} setMessage={setMessage} setShowOverlay={setShowOverlay} />
 
-        <Content routes={routes} searchTerm={searchTerm} setSearchTerm={setSearchTerm} isLogedIn={isLogedIn} token={token} setToken={setToken} message={message} setMessage={setMessage} />
+				<Content routes={routes} searchTerm={searchTerm} setSearchTerm={setSearchTerm} isLogedIn={isLogedIn} token={token} setToken={setToken} message={message} setMessage={setMessage} setShowOverlay={setShowOverlay} />
 
         <Footer />
       </BrowserRouter>
       <Notification message={message} setMessage={setMessage} />
+			<Overlay showOverlay={showOverlay} setShowOverlay={setShowOverlay} />
     </>
   );
 }
 
-export default Router;
+export default Router;

src/styles/clusters.css → src/styles/components/clusters.css

@@ -13,7 +13,7 @@
     gap: 20px;
 }
 
-.Clusters-list>* {
+.Clusters-list .link-card {
     flex: 0 0 350px;
     height: 375px;
 }
@@ -52,4 +52,4 @@
         bottom: 30px;
         right: 30px;
     }
-}
+}

src/styles/popups/confirm.css

@@ -0,0 +1,38 @@
+.Confirm-message {
+	font-size: 1.2rem;
+	font-weight: 700;
+}
+
+.Confirm-button-pair {
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	gap: 1rem;
+}
+
+.Confirm-button {
+	font-size: 1rem;
+	padding: 0.5rem;
+	border: 2px solid #333333;
+	border-radius: 5px;
+	cursor: pointer;
+	width: 50%;
+	margin: 0 auto;
+	text-transform: uppercase;
+	font-weight: 700;
+}
+
+.Confirm-button:hover {
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+	transition: box-shadow 0.1s;
+}
+
+.Confirm-button-cancel {
+	background-color: #333333;
+	color: #fff;
+}
+
+.Confirm-button-ok {
+	background-color: #f0f0f0;
+	color: #333333;
+}

src/styles/popups/overlay.css

@@ -0,0 +1,14 @@
+.overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 1;
+	display: none;
+}
+
+.overlay.open {
+	display: block;
+}