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

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

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

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

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

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

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

13
frontend/src/pages/HomePage.tsx

@ -33,19 +33,6 @@ export function HomePage() { @@ -33,19 +33,6 @@ export function HomePage() {
return (
<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
videos={videos}

Loading…
Cancel
Save