Browse Source

adjust styling

drawing-pad
Stephanie Gredell 1 month ago
parent
commit
d018d1ab92
  1. 3
      frontend/src/components/Navbar/Navbar.css
  2. 4
      frontend/src/components/Navbar/Navbar.tsx
  3. 1
      frontend/src/components/VideoCard/VideoCard.css
  4. 2
      frontend/src/components/VideoGrid/VideoGrid.css
  5. 13
      frontend/src/pages/HomePage.tsx

3
frontend/src/components/Navbar/Navbar.css

@ -10,7 +10,7 @@
.navbar-container { .navbar-container {
max-width: 1600px; max-width: 1600px;
margin: 0 auto; margin: 0 auto;
padding: 12px 24px; padding: 12px 0px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -109,7 +109,6 @@
flex: 1; flex: 1;
padding: 8px 12px; padding: 8px 12px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 20px;
font-size: 14px; font-size: 14px;
background-color: #fff; background-color: #fff;
} }

4
frontend/src/components/Navbar/Navbar.tsx

@ -64,8 +64,7 @@ export function Navbar() {
<nav className="navbar"> <nav className="navbar">
<div className="navbar-container"> <div className="navbar-container">
<Link to="/" className="navbar-logo"> <Link to="/" className="navbar-logo">
<span className="logo-icon">📺</span> <span className="logo-text">Rainbows, Cupcakes and Unicorns</span>
<span className="logo-text">Kiddos</span>
</Link> </Link>
<div className="navbar-menu"> <div className="navbar-menu">
@ -81,7 +80,6 @@ export function Navbar() {
{isAuthenticated ? ( {isAuthenticated ? (
<div className="navbar-user"> <div className="navbar-user">
<span className="navbar-username">{user?.username}</span>
<button onClick={handleLogout} className="navbar-button"> <button onClick={handleLogout} className="navbar-button">
Logout Logout
</button> </button>

1
frontend/src/components/VideoCard/VideoCard.css

@ -12,7 +12,6 @@
width: 100%; width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
overflow: hidden; overflow: hidden;
border-radius: 12px;
background-color: #f0f0f0; background-color: #f0f0f0;
} }

2
frontend/src/components/VideoGrid/VideoGrid.css

@ -2,7 +2,7 @@
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px; gap: 24px;
padding: 24px; padding: 24px 0px;
max-width: 1600px; max-width: 1600px;
margin: 0 auto; margin: 0 auto;
} }

13
frontend/src/pages/HomePage.tsx

@ -33,19 +33,6 @@ export function HomePage() {
return ( return (
<div> <div>
{refreshing && (
<div style={{
padding: '12px',
backgroundColor: '#e3f2fd',
border: '1px solid #2196f3',
borderRadius: '4px',
margin: '16px 24px',
textAlign: 'center',
color: '#1976d2'
}}>
🔄 Fetching latest videos from YouTube...
</div>
)}
<VideoGrid <VideoGrid
videos={videos} videos={videos}

Loading…
Cancel
Save