From 1a2ae0d607990ff678189c20b64b28411594d8a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= Date: Tue, 14 Apr 2026 13:35:40 +0200 Subject: [PATCH] fixes --- docker-data/README.md | 1 + frontend/src/app/app.component.ts | 2 +- .../dashboard/dashboard-page.component.html | 2 +- .../features/files/files-page.component.html | 8 +- .../routers/routers-page.component.html | 2 +- .../settings/settings-page.component.html | 2 +- frontend/src/styles.css | 1 + frontend/src/styles/pages.css | 180 ++++++++++++++---- 8 files changed, 152 insertions(+), 46 deletions(-) create mode 100644 docker-data/README.md diff --git a/docker-data/README.md b/docker-data/README.md new file mode 100644 index 0000000..58b4586 --- /dev/null +++ b/docker-data/README.md @@ -0,0 +1 @@ +docker data \ No newline at end of file diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 5201797..404065c 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -33,7 +33,7 @@ export class AppComponent { pageLabel = 'dashboard.title'; readonly author = 'Mateusz Gruszczyński'; readonly authorHandle = '@linuxiarz.pl'; - readonly authorUrl = 'https://linuxiarz.pl'; + readonly authorUrl = 'https://www.linuxiarz.pl'; readonly apiSnapshot = this.apiStatus.snapshot; readonly languageOptions: TopbarLanguageOption[] = APP_LANGUAGE_OPTIONS; readonly apiStateLabelKey = computed(() => { diff --git a/frontend/src/app/features/dashboard/dashboard-page.component.html b/frontend/src/app/features/dashboard/dashboard-page.component.html index 183f1ed..7fb06d5 100644 --- a/frontend/src/app/features/dashboard/dashboard-page.component.html +++ b/frontend/src/app/features/dashboard/dashboard-page.component.html @@ -15,7 +15,7 @@
- +
diff --git a/frontend/src/app/features/files/files-page.component.html b/frontend/src/app/features/files/files-page.component.html index 3d40990..afecc08 100644 --- a/frontend/src/app/features/files/files-page.component.html +++ b/frontend/src/app/features/files/files-page.component.html @@ -24,12 +24,12 @@ - + - + @@ -39,12 +39,12 @@ - + - +
diff --git a/frontend/src/app/features/routers/routers-page.component.html b/frontend/src/app/features/routers/routers-page.component.html index 5a36481..68b1927 100644 --- a/frontend/src/app/features/routers/routers-page.component.html +++ b/frontend/src/app/features/routers/routers-page.component.html @@ -96,7 +96,7 @@ - + diff --git a/frontend/src/app/features/settings/settings-page.component.html b/frontend/src/app/features/settings/settings-page.component.html index 3136701..d84228e 100644 --- a/frontend/src/app/features/settings/settings-page.component.html +++ b/frontend/src/app/features/settings/settings-page.component.html @@ -1,7 +1,7 @@
- +
diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 5b12ce5..5915729 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,3 +1,4 @@ +@import url('https://cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css'); @import './styles/pages.css'; @import './styles/layout.css'; @import './styles/auth.css'; diff --git a/frontend/src/styles/pages.css b/frontend/src/styles/pages.css index 4023813..f52755d 100644 --- a/frontend/src/styles/pages.css +++ b/frontend/src/styles/pages.css @@ -538,19 +538,35 @@ body.dark-theme .metric-tile, .empty-state{ } .p-button.p-button-secondary, .p-button.p-button-help, .p-button.p-button-outlined, .p-button.p-button-text{ - background: transparent; + background: color-mix(in srgb, var(--surface-1) 88%, white 12%); color: var(--text-main); - border-color: var(--border-strong); + border-color: color-mix(in srgb, var(--border-strong) 86%, transparent); +} + +.p-button.p-button-secondary:not(.p-disabled):hover, .p-button.p-button-help:not(.p-disabled):hover, .p-button.p-button-outlined:not(.p-disabled):hover{ + background: color-mix(in srgb, var(--surface-2) 82%, white 18%); + border-color: color-mix(in srgb, var(--border-strong) 96%, transparent); } .p-button.p-button-text{ border-color: transparent; + background: transparent; } body.dark-theme .p-button.p-button-secondary, body.dark-theme .p-button.p-button-help, body.dark-theme .p-button.p-button-outlined, body.dark-theme .p-button.p-button-text{ color: var(--text-main); } +body.dark-theme .p-button.p-button-secondary, body.dark-theme .p-button.p-button-help, body.dark-theme .p-button.p-button-outlined{ + background: color-mix(in srgb, var(--surface-1) 90%, white 10%); + border-color: rgba(146, 170, 194, 0.22); +} + +body.dark-theme .p-button.p-button-secondary:not(.p-disabled):hover, body.dark-theme .p-button.p-button-help:not(.p-disabled):hover, body.dark-theme .p-button.p-button-outlined:not(.p-disabled):hover{ + background: color-mix(in srgb, var(--surface-1) 84%, white 16%); + border-color: rgba(146, 170, 194, 0.34); +} + .p-button.p-button-danger{ background: transparent; border-color: rgba(194, 70, 70, 0.5); @@ -606,10 +622,14 @@ body.dark-theme .p-inputtext, body.dark-theme .p-inputtextarea, body.dark-theme .p-tag{ border-radius: 999px; - font-size: 0.72rem; + font-size: 0.6rem; font-weight: 700; - letter-spacing: 0.12em; + letter-spacing: 0.04em; text-transform: uppercase; + line-height: 1.15; + padding: 0.28rem 0.72rem; + min-width: max-content; + max-width: 100%; } @@ -712,10 +732,6 @@ body.dark-theme .app-table .p-datatable-tbody > tr:hover > td{ border-top: 1px solid var(--border-color); } - - - - .empty-state, .compact-empty{ padding: 1.2rem; border: 1px dashed var(--border-strong); @@ -1146,7 +1162,7 @@ body.dark-theme .topbar{ .p-tag{ - font-size: 0.66rem; + font-size: 0.6rem; } .app-table{ @@ -1929,6 +1945,50 @@ body.dark-theme .inline-summary{ justify-content: center; } +.operations-center__actions .btn-binary-accent{ + background: rgba(141, 89, 58, 0.1); + border-color: rgba(141, 89, 58, 0.34); + color: #6f452d; +} + +.operations-center__actions .btn-binary-accent:not(.p-disabled):hover{ + background: rgba(141, 89, 58, 0.14); + border-color: rgba(141, 89, 58, 0.42); +} + +body.dark-theme .operations-center__actions .btn-binary-accent{ + background: rgba(75, 144, 217, 0.09); + border-color: rgba(75, 144, 217, 0.3); + color: #dbe8f5; +} + +body.dark-theme .operations-center__actions .btn-binary-accent:not(.p-disabled):hover{ + background: rgba(75, 144, 217, 0.13); + border-color: rgba(75, 144, 217, 0.4); +} + +.header-actions-row .btn-pushover-neutral{ + background: rgba(75, 144, 217, 0.08); + border-color: rgba(75, 144, 217, 0.26); + color: #2f5f8f; +} + +.header-actions-row .btn-pushover-neutral:not(.p-disabled):hover{ + background: rgba(75, 144, 217, 0.12); + border-color: rgba(75, 144, 217, 0.34); +} + +body.dark-theme .header-actions-row .btn-pushover-neutral{ + background: rgba(75, 144, 217, 0.08); + border-color: rgba(75, 144, 217, 0.28); + color: #dbe8f5; +} + +body.dark-theme .header-actions-row .btn-pushover-neutral:not(.p-disabled):hover{ + background: rgba(75, 144, 217, 0.12); + border-color: rgba(75, 144, 217, 0.38); +} + .operations-center__stats{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); @@ -2499,8 +2559,8 @@ app-page-header{ } .repository-table .p-tag{ - font-size: 0.68rem; - padding: 0.22rem 0.48rem; + font-size: 0.62rem; + padding: 0.24rem 0.58rem; } @@ -3115,29 +3175,52 @@ body.dark-theme .p-button:not(.p-button-secondary):not(.p-button-help):not(.p-bu } .p-select, .p-textarea, .p-inputtextarea, .p-inputtext, textarea.p-inputtextarea, textarea.p-textarea{ - border-radius: 12px; - border: 1px solid var(--border-strong); - background: color-mix(in srgb, var(--surface-1) 90%, white 10%); + border-radius: 14px; + border: 1px solid rgba(126, 142, 158, 0.24); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 245, 241, 0.98) 100%); color: var(--text-main); - box-shadow: none; + box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05); + transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; } body.dark-theme .p-select, body.dark-theme .p-textarea, body.dark-theme .p-inputtextarea, body.dark-theme .p-inputtext, body.dark-theme textarea.p-inputtextarea, body.dark-theme textarea.p-textarea{ - background: rgba(255, 255, 255, 0.03); + background: linear-gradient(180deg, rgba(28, 38, 50, 0.98) 0%, rgba(23, 33, 44, 0.98) 100%); color: var(--text-main); - border-color: var(--border-color); + border-color: rgba(146, 170, 194, 0.18); + box-shadow: 0 12px 24px rgba(5, 10, 18, 0.26); } .p-select{ display: flex; align-items: center; - min-height: 2.95rem; + min-height: 3rem; + overflow: hidden; +} + +.p-select:not(.p-disabled):hover{ + border-color: rgba(141, 89, 58, 0.42); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 241, 236, 0.98) 100%); +} + +body.dark-theme .p-select:not(.p-disabled):hover{ + border-color: rgba(75, 144, 217, 0.24); + background: linear-gradient(180deg, rgba(29, 39, 51, 0.985) 0%, rgba(24, 34, 45, 0.985) 100%); +} + +.p-select.p-focus, .p-select.p-inputwrapper-focus{ + border-color: rgba(141, 89, 58, 0.62); + box-shadow: 0 0 0 3px rgba(141, 89, 58, 0.12), 0 10px 24px rgba(15, 23, 42, 0.06); +} + +body.dark-theme .p-select.p-focus, body.dark-theme .p-select.p-inputwrapper-focus{ + border-color: #4f95df; + box-shadow: 0 0 0 3px rgba(79, 149, 223, 0.16), 0 16px 30px rgba(5, 10, 18, 0.28); } .p-select .p-select-label, .p-select .p-select-label.p-placeholder{ width: 100%; min-height: 0; - padding: 0.78rem 0 0.78rem 1rem; + padding: 0.84rem 0 0.84rem 1rem; border: 0; border-radius: 0; background: transparent; @@ -3145,9 +3228,9 @@ body.dark-theme .p-select, body.dark-theme .p-textarea, body.dark-theme .p-input display: flex; align-items: center; font-family: var(--font-body); - font-size: 0.96rem; + font-size: 0.94rem; font-weight: 500; - line-height: 1.35; + line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--text-main); @@ -3170,6 +3253,12 @@ body.dark-theme .p-select, body.dark-theme .p-textarea, body.dark-theme .p-input align-self: stretch; color: var(--text-soft); flex: 0 0 2.85rem; + background: transparent; +} + +.p-select .p-select-dropdown .p-icon{ + width: 0.95rem; + height: 0.95rem; } .p-inputtext:enabled:focus, .p-textarea:enabled:focus, .p-inputtextarea:enabled:focus, textarea.p-inputtextarea:enabled:focus, textarea.p-textarea:enabled:focus{ @@ -3192,22 +3281,26 @@ body.dark-theme .auth-card .p-inputtext:enabled:focus, body.dark-theme .auth-car box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); } -.p-select-overlay, .p-component-overlay{ - backdrop-filter: blur(12px); - background: color-mix(in srgb, var(--surface-1) 97%, white 3%); - border: 1px solid var(--border-color); +.p-select-overlay{ + backdrop-filter: blur(18px); + background: linear-gradient(180deg, rgba(251, 250, 247, 0.98) 0%, rgba(244, 242, 238, 0.98) 100%); + border: 1px solid rgba(126, 142, 158, 0.16); color: var(--text-main); - box-shadow: var(--shadow-lg); + box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); + border-radius: 16px; + overflow: hidden; } -body.dark-theme .p-select-overlay, body.dark-theme .p-component-overlay{ - background: #1f2935; - border-color: rgba(146, 170, 194, 0.2); +body.dark-theme .p-select-overlay{ + background: linear-gradient(180deg, rgba(34, 46, 61, 0.98) 0%, rgba(24, 34, 45, 0.98) 100%); + border-color: rgba(146, 170, 194, 0.12); + box-shadow: 0 22px 48px rgba(5, 10, 18, 0.38); } .p-select-list{ - padding: 0.35rem; + padding: 0.35rem 0; background: transparent; + gap: 0; } body.dark-theme .p-select-list{ @@ -3215,7 +3308,8 @@ body.dark-theme .p-select-list{ } .p-select-option{ - border-radius: 10px; + border-radius: 0; + padding: 0.82rem 1rem; font-size: 0.92rem; line-height: 1.35; color: var(--text-main); @@ -3223,13 +3317,18 @@ body.dark-theme .p-select-list{ } .p-select-option:hover{ - background: #dbe5f0; - color: #13202c; + background: rgba(17, 20, 23, 0.045); + color: #111417; +} + +.p-select-option.p-focus{ + background: rgba(17, 20, 23, 0.055); + color: #111417; } .p-select-option.p-select-option-selected{ - background: #c8d8ea; - color: #13202c; + background: rgba(141, 89, 58, 0.09); + color: #6f452d; font-weight: 600; } @@ -3238,13 +3337,18 @@ body.dark-theme .p-select-option{ } body.dark-theme .p-select-option:hover{ - background: #314355; + background: rgba(255, 255, 255, 0.03); + color: #f4f8fb; +} + +body.dark-theme .p-select-option.p-focus{ + background: rgba(255, 255, 255, 0.04); color: #f4f8fb; } body.dark-theme .p-select-option.p-select-option-selected{ - background: #d9e1ea; - color: #13202c; + background: rgba(75, 144, 217, 0.22); + color: #f4f8fb; font-weight: 600; }