add glow effects (#490)

* add glow effects * make navbar glow
ScottyLabs · May 11, 2024 · 889a244 · 889a244
1 parent c956371
commit 889a244
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 19 deletions.
diff --git a/src/components/EateryCard.tsx b/src/components/EateryCard.tsx
@@ -14,6 +14,7 @@ import {
 	CardActions,
 	Avatar,
 	Dialog,
+	keyframes,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
@@ -30,13 +31,30 @@ const colors: Record<LocationState, string> = {
 	[LocationState.OPENS_SOON]: '#f6cc5d',
 	[LocationState.CLOSES_SOON]: '#f3f65d',
 };
+
+const glowAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 5px rgba(238, 111, 82, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(238, 111, 82, 0.7);
+  }
+  100% {
+    box-shadow: 0 0 5px rgba(238, 111, 82, 0.7);
+  }
+`;
+
 const StyledCard = styled(Card)({
 	backgroundColor: '#23272A',
 	border: '2px solid rgba(0, 0, 0, 0.2)',
 	textAlign: 'left',
 	borderRadius: 7,
 	height: '100%',
 	justifyContent: 'flex-start',
+	transition: 'box-shadow 0.3s ease-in-out',
+	'&:hover': {
+		animation: `${glowAnimation} 1.5s infinite`,
+	},
 });
 
 const StyledCardHeader = styled(CardHeader)({

diff --git a/src/components/Navbar.css b/src/components/Navbar.css
@@ -19,11 +19,9 @@
 .Navbar-links a {
 	position: relative;
 	z-index: 5;
-
 	display: flex;
 	align-items: center;
 	justify-content: center;
-
 	font-family: 'Zilla Slab', sans-serif;
 	font-weight: 500;
 	color: white;
@@ -44,17 +42,20 @@
 	top: 0;
 	width: 50%;
 	height: 100%;
-
 	background-color: #2b2f33;
 	border-radius: 999px;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-	.Navbar-active {
-		transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) transform;
-	}
+	transition:
+		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+		box-shadow 0.3s ease-in-out;
 }
 
 .Navbar-active_map {
 	transform: translateX(100%);
 }
+
+.Navbar-active_glow {
+	box-shadow:
+		0 0 5px #ee6f52,
+		0 0 10px #ee6f52,
+		0 0 15px #ee6f52;
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -2,7 +2,7 @@ import { Link, useLocation } from 'react-router-dom';
 import './Navbar.css';
 
 function Navbar() {
-	const isMap = useLocation().pathname === '/map';
+	const location = useLocation();
 
 	return (
 		<nav className="Navbar">
@@ -47,7 +47,7 @@ function Navbar() {
 					Map
 				</Link>
 				<div
-					className={`Navbar-active ${isMap ? 'Navbar-active_map' : ''}`}
+					className={`Navbar-active ${location.pathname === '/map' ? 'Navbar-active_map' : ''} Navbar-active_glow`}
 				/>
 			</div>
 		</nav>

diff --git a/src/pages/ListPage.css b/src/pages/ListPage.css
@@ -31,21 +31,17 @@
 	padding-left: 3rem;
 	border-radius: 1rem;
 	background: #23272a;
-
 	outline: none;
-	border: none;
+	border: 1px solid transparent;
 	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
-	transition: 0.1s ease-in-out box-shadow;
-
+	transition: all 0.2s;
 	font-family: inherit;
 	font-size: 1.2rem;
-
 	/* Heroicons v2.0.12 by Refactoring UI Inc., used under MIT license */
-	background-image: url("data: image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255, 255, 255, .6)' class='w-5 h-5' %3E%3Cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z' clip-rule='evenodd' /%3E%3C/svg%3E");
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255, 255, 255, .6)' class='w-5 h-5'%3E%3Cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z' clip-rule='evenodd'/%3E%3C/svg%3E");
 	background-size: 20px;
 	background-repeat: no-repeat;
 	background-position: 1rem center;
-
 	color: white;
 	font-weight: 500;
 }
@@ -55,5 +51,8 @@
 }
 
 .Locations-search:focus {
-	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
+	transition: all 0.5s;
+	box-shadow: 0 0 40px #ee6f52;
+	border-color: #ee6f52;
+	outline: none;
 }