aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/app/components/ui/Button.css
diff options
context:
space:
mode:
authorAriel Costas Guerrero <ariel@costas.dev>2025-11-19 15:04:55 +0100
committerAriel Costas Guerrero <ariel@costas.dev>2025-11-19 15:05:34 +0100
commitd51169f6411b68a226d76d2d39826904de484929 (patch)
tree4d8a403dfcc5b17671a92b8cc1e5d71d20ed9537 /src/frontend/app/components/ui/Button.css
parentd434204860fc0409ad6343e815d0057b97ce3573 (diff)
feat: Add About and Favourites pages, update routing and context management
- Added new routes for About and Favourites pages. - Implemented About page with version information and credits. - Created Favourites page with a placeholder message for empty favourites. - Refactored RegionConfig import paths for consistency. - Introduced PageTitleContext to manage page titles dynamically. - Updated various components to utilize the new context for setting page titles. - Enhanced AppShell layout with a responsive Drawer for navigation. - Added CSS styles for new components and pages. - Integrated commit hash display in the About page for version tracking.
Diffstat (limited to 'src/frontend/app/components/ui/Button.css')
-rw-r--r--src/frontend/app/components/ui/Button.css39
1 files changed, 39 insertions, 0 deletions
diff --git a/src/frontend/app/components/ui/Button.css b/src/frontend/app/components/ui/Button.css
new file mode 100644
index 0000000..bf02a7c
--- /dev/null
+++ b/src/frontend/app/components/ui/Button.css
@@ -0,0 +1,39 @@
+.ui-button {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem;
+ font-size: 0.9rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background-color 0.2s ease, transform 0.1s ease;
+ border: none;
+}
+
+.ui-button:active {
+ transform: translateY(1px);
+}
+
+.ui-button--primary {
+ background: var(--button-background-color);
+ color: white;
+}
+
+.ui-button--primary:hover {
+ background: var(--button-hover-background-color);
+}
+
+.ui-button--secondary {
+ background: var(--border-color);
+ color: var(--text-color);
+}
+
+.ui-button--secondary:hover {
+ background: #e0e0e0;
+}
+
+.ui-button__icon {
+ display: flex;
+ align-items: center;
+}