From a7d8613dd67b5a5968a2994cdf17229bb531f257 Mon Sep 17 00:00:00 2001 From: retoor Date: Sat, 8 Nov 2025 20:33:53 +0100 Subject: [PATCH] Made forms beautiful. --- retoors/static/css/base.css | 103 ++++++++++++++++++- retoors/static/css/components/dashboard.css | 35 +++++++ retoors/templates/components/navigation.html | 12 ++- retoors/templates/pages/dashboard.html | 35 +++++-- tests/test_site.py | 2 +- 5 files changed, 169 insertions(+), 18 deletions(-) diff --git a/retoors/static/css/base.css b/retoors/static/css/base.css index 62ea16a..a17287e 100644 --- a/retoors/static/css/base.css +++ b/retoors/static/css/base.css @@ -36,7 +36,7 @@ html, body { /* General typography */ h1 { - font-size: 2.8rem; + font-size: 2.2rem; /* Slightly larger heading */ font-weight: 700; margin-bottom: 1rem; color: var(--text-color); @@ -64,10 +64,10 @@ p { /* Card-like styling for sections */ .card { background-color: var(--card-background); - border-radius: 8px; - box-shadow: 0 4px 12px var(--shadow-color); - padding: 2rem; - margin-bottom: 1.5rem; + border-radius: 12px; /* Slightly more rounded corners */ + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Softer, more prominent shadow */ + padding: 3rem; /* Increased padding */ + margin-bottom: 35px; /* Increased margin */ } .container { @@ -211,6 +211,23 @@ nav .nav-links a:hover { background-color: var(--btn-primary-hover-bg); } +.btn-outline-nav { + background-color: transparent; + color: var(--primary-color); + border: 1px solid var(--primary-color); + padding: 10px 20px; + border-radius: 5px; + text-decoration: none; + font-weight: 500; + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; +} + +.btn-outline-nav:hover { + background-color: rgba(74, 144, 226, 0.1); + color: var(--primary-color); + border-color: var(--primary-color); +} + /* Main content area */ main { flex-grow: 1; /* Allow main content to take available space */ @@ -222,6 +239,82 @@ main { background-color: var(--background-color); /* Light background for main content */ } +/* Form specific styles */ +.form-container { + max-width: 450px; + margin: 50px auto; + background-color: var(--card-background); + border-radius: 12px; /* Slightly more rounded corners */ + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Softer, more prominent shadow */ + padding: 3rem; /* Increased padding */ + text-align: left; +} + +.form-container h2 { + text-align: center; + margin-bottom: 35px; /* Increased margin */ + color: var(--text-color); + font-size: 2.2rem; /* Slightly larger heading */ + font-weight: 700; +} + +.form-group { + margin-bottom: 25px; /* Increased margin */ +} + +.form-group label { + display: block; + margin-bottom: 10px; /* Increased margin */ + font-weight: 600; /* Slightly bolder label */ + color: var(--text-color); + font-size: 1rem; /* Slightly larger font size */ +} + +.form-group input[type="email"], +.form-group input[type="password"], +.form-group input[type="text"], +.form-group input[type="number"] { + width: 100%; + padding: 14px 16px; /* Increased padding */ + border: 1px solid var(--border-color); + border-radius: 8px; /* More rounded input fields */ + font-size: 1rem; /* Consistent font size */ + color: var(--text-color); /* Ensure text color is readable */ + background-color: var(--background-color); /* Light background for inputs */ + box-sizing: border-box; + transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; +} + +.form-group input[type="email"]:focus, +.form-group input[type="password"]:focus, +.form-group input[type="text"]:focus, +.form-group input[type="number"]:focus { + border-color: var(--primary-color); /* Focus color */ + box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2); /* Softer focus shadow */ + outline: none; +} + +.form-container .btn-primary { + width: 100%; + padding: 16px; /* Increased padding */ + font-size: 1.1rem; /* Slightly larger font size */ + margin-top: 30px; /* Increased margin */ + border-radius: 8px; /* More rounded button */ + font-weight: 600; +} + +.error { + color: #D32F2F; /* Red for errors */ + background-color: #FFEBEE; /* Light red background */ + border: 1px solid #EF9A9A; /* Red border */ + padding: 1rem 1.5rem; /* Increased padding */ + margin-bottom: 1.5rem; /* Increased margin */ + border-radius: 8px; /* Rounded error box */ + font-size: 0.95rem; + font-weight: 500; + text-align: center; +} + /* Responsive adjustments for base.css */ @media (max-width: 768px) { nav { diff --git a/retoors/static/css/components/dashboard.css b/retoors/static/css/components/dashboard.css index 42fe109..b0b890a 100644 --- a/retoors/static/css/components/dashboard.css +++ b/retoors/static/css/components/dashboard.css @@ -72,6 +72,41 @@ margin-bottom: 10px; } +.sidebar-notifications { + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid var(--border-color); +} + +.sidebar-notifications h4 { + font-size: 1rem; + color: var(--text-color); + margin-bottom: 10px; +} + +.sidebar-notifications ul { + list-style: none; + padding: 0; + margin: 0; +} + +.sidebar-notifications ul li { + font-size: 0.9rem; + color: var(--light-text-color); + margin-bottom: 5px; +} + +.sidebar-notifications p { + font-size: 0.9rem; + color: var(--light-text-color); +} + +.sidebar-help { + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid var(--border-color); +} + .dashboard-content { flex: 1; background-color: var(--card-background); diff --git a/retoors/templates/components/navigation.html b/retoors/templates/components/navigation.html index 268dc44..0a731c7 100644 --- a/retoors/templates/components/navigation.html +++ b/retoors/templates/components/navigation.html @@ -5,11 +5,17 @@ HomeBase Storage - Start Your Free Trial diff --git a/retoors/templates/pages/dashboard.html b/retoors/templates/pages/dashboard.html index bc11766..d24e262 100644 --- a/retoors/templates/pages/dashboard.html +++ b/retoors/templates/pages/dashboard.html @@ -11,11 +11,11 @@
-

Your Data, Organized and Accessible

+

Welcome back, {{ user.full_name }}!

@@ -59,21 +76,21 @@ - Folder Icon documents.zip {# Placeholder icon #} + Folder Icon documents.zip {{ user.email }} 2025-11-08 256 MB ... - File Icon photos.zip {# Placeholder icon #} + File Icon photos.zip {{ user.email }} 2025-11-07 1.2 GB ... - File Icon project_alpha.zip {# Placeholder icon #} + File Icon project_alpha.zip {{ user.email }} 2025-11-05 512 MB diff --git a/tests/test_site.py b/tests/test_site.py index 267dc36..085abf1 100644 --- a/tests/test_site.py +++ b/tests/test_site.py @@ -30,7 +30,7 @@ async def test_dashboard_get_authorized(client): resp = await client.get("/dashboard") assert resp.status == 200 text = await resp.text() - assert "Your Data, Organized and Accessible" in text + assert "Welcome back, Test User!" in text assert "My Files" in text