From 34d195bbbe1a15326fa0d043df71a04f48a78600 Mon Sep 17 00:00:00 2001 From: Aditya Chandel <8075870+adityachandelgit@users.noreply.github.com> Date: Mon, 13 Oct 2025 13:02:27 -0600 Subject: [PATCH] Improve login and initial user setup screen appearance (#1336) --- .../book-browser/book-browser.component.scss | 2 +- .../book-notes/book-notes-component.scss | 2 +- .../book-reviews/book-reviews.component.scss | 2 +- .../book-searcher.component.html | 41 ++- .../book-searcher.component.scss | 246 +++++++++++++-- .../book-searcher/book-searcher.component.ts | 41 ++- .../series-page/series-page.component.html | 2 +- .../src/app/features/book/model/book.model.ts | 3 - .../main-dashboard.component.scss | 2 +- .../book-metadata-center.component.html | 2 +- .../cover-search/cover-search.component.scss | 4 +- .../metadata-manager.component.scss | 6 +- .../stats/component/stats-component.scss | 18 +- .../change-password.component.html | 101 ++++-- .../change-password.component.scss | 68 ++++- .../change-password.component.ts | 7 +- .../duplicate-files-dialog.component.scss | 4 +- .../icon-picker/icon-picker-component.scss | 4 +- .../components/login/login.component.html | 94 +++--- .../components/login/login.component.scss | 169 +++++++++++ .../components/setup/setup.component.html | 137 +++++---- .../components/setup/setup.component.scss | 73 +++++ .../src/app/shared/styles/_auth-shared.scss | 287 ++++++++++++++++++ .../assets/layout/styles/layout/_main.scss | 37 ++- .../assets/layout/styles/layout/_topbar.scss | 2 +- .../styles/layout/variables/main/_dark.scss | 1 + 26 files changed, 1136 insertions(+), 219 deletions(-) create mode 100644 booklore-ui/src/app/shared/styles/_auth-shared.scss diff --git a/booklore-ui/src/app/features/book/components/book-browser/book-browser.component.scss b/booklore-ui/src/app/features/book/components/book-browser/book-browser.component.scss index ea261132d..ed51163b5 100644 --- a/booklore-ui/src/app/features/book/components/book-browser/book-browser.component.scss +++ b/booklore-ui/src/app/features/book/components/book-browser/book-browser.component.scss @@ -94,7 +94,7 @@ top: 50%; left: 10px; transform: translateY(-50%); - color: var(--text-color-secondary); + color: var(--text-secondary-color); font-size: 1.0rem; pointer-events: none; } diff --git a/booklore-ui/src/app/features/book/components/book-notes/book-notes-component.scss b/booklore-ui/src/app/features/book/components/book-notes/book-notes-component.scss index 1ad32a5ef..a3bcfbd8f 100644 --- a/booklore-ui/src/app/features/book/components/book-notes/book-notes-component.scss +++ b/booklore-ui/src/app/features/book/components/book-notes/book-notes-component.scss @@ -82,7 +82,7 @@ flex-direction: column; overflow: hidden; position: relative; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid var(--p-content-border-color); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); diff --git a/booklore-ui/src/app/features/book/components/book-reviews/book-reviews.component.scss b/booklore-ui/src/app/features/book/components/book-reviews/book-reviews.component.scss index 53f5fe972..87343f657 100644 --- a/booklore-ui/src/app/features/book/components/book-reviews/book-reviews.component.scss +++ b/booklore-ui/src/app/features/book/components/book-reviews/book-reviews.component.scss @@ -124,7 +124,7 @@ flex-direction: column; overflow: hidden; position: relative; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid var(--p-content-border-color); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); @media (max-width: 768px) { diff --git a/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.html b/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.html index c581c21a8..b53dc5045 100644 --- a/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.html +++ b/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.html @@ -1,14 +1,15 @@ -
- - - +
+ + @if (searchQuery) { } - @if (books.length > 0 || searchQuery) {
@if (books.length > 0) { @for (book of books; track book) { -
-
+
+
Book Cover
-
-

+

+

{{ book.metadata?.title | slice: 0:70 }}

- @if (book.metadata?.authors?.length ?? 0 > 0) { -

by: {{ getAuthorNames(book.metadata?.authors) }}

+
+ @if (book.metadata?.authors?.length ?? 0 > 0) { +

by {{ getAuthorNames(book.metadata?.authors) }}

+ } + @if (getPublishedYear(book.metadata?.publishedDate)) { + {{ getPublishedYear(book.metadata?.publishedDate) }} + } +
+ @if (getSeriesInfo(book.metadata?.seriesName, book.metadata?.seriesNumber)) { +
+ + {{ getSeriesInfo(book.metadata?.seriesName, book.metadata?.seriesNumber) }} +
}
@@ -52,7 +63,7 @@
} } @else { -
+
No results found
} diff --git a/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.scss b/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.scss index c1705f367..143d78add 100644 --- a/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.scss +++ b/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.scss @@ -1,65 +1,265 @@ -.search-icon { - position: absolute; - top: 50%; - left: 10px; - transform: translateY(-50%); - color: var(--text-color-secondary); - font-size: 1.0rem; - pointer-events: none; +.book-searcher-container { + margin-left: 0.5rem; + position: relative; + width: 100%; + + @media (min-width: 768px) { + margin-left: 1.25rem; + max-width: 315px; + transition: max-width 0.3s ease; + } + + &:has(.search-iconfield.focused), + &:has(.search-iconfield.has-results) { + @media (min-width: 768px) { + max-width: 100%; + } + } +} + +.search-iconfield { + width: 100%; + + @media (min-width: 640px) { + display: flex; + } + + @media (min-width: 768px) { + transition: all 0.3s ease; + } } .search-input { width: 100%; - padding-left: 30px; + padding-right: 2.5rem; height: 2.5rem; line-height: 2.5rem; font-size: 1rem; } -.clear-btn { - color: var(--text-color-secondary); +.clear-search-btn { position: absolute; - right: 10px; + right: 0.5rem; top: 50%; transform: translateY(-50%); + display: none; + + @media (min-width: 1024px) { + display: inline-flex; + } } .search-dropdown { position: absolute; + top: calc(100% + 0.5rem); left: 0; - background-color: var(--code-background); + width: 300px; + background-color: var(--card-background); border: 1px solid var(--border-color); - border-radius: var(--card-border); + border-radius: 8px; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06), + 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 1000; - max-height: 500px; + max-height: 70vh; overflow-y: auto; opacity: 0; height: 0; - transition: opacity 0.3s ease, height 0.3s ease; + transform: translateY(-10px); + transition: opacity 0.2s ease, transform 0.2s ease, height 0.2s ease; + + @media (min-width: 640px) { + width: 100%; + max-width: 600px; + } + + &::-webkit-scrollbar { + width: 8px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background: var(--border-color); + border-radius: 4px; + } + + &::-webkit-scrollbar-thumb:hover { + background: var(--text-secondary-color); + } } .search-dropdown.show { opacity: 1; height: auto; + transform: translateY(0); } .search-dropdown-item { display: flex; - align-items: center; + flex-direction: column; cursor: pointer; - transition: background-color 0.3s; + transition: background-color 0.2s ease; + + &:first-child { + border-radius: 8px 8px 0 0; + } + + &:last-child { + border-radius: 0 0 8px 8px; + + ::ng-deep .p-divider { + display: none; + } + } &:hover { background-color: var(--surface-hover); } + + &.no-results { + padding: 2rem 1rem; + text-align: center; + color: var(--text-secondary-color); + font-style: italic; + } + + ::ng-deep .p-divider { + margin: 0; + + &::before { + border-top-color: var(--border-color); + opacity: 0.5; + } + } +} + +.search-item-content { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 1rem; + width: 100%; + padding: 0.75rem 1rem; } .search-book-cover { - width: 35px; - height: 47px; + width: 50px; + height: 67px; + min-width: 50px; object-fit: cover; - max-width: 100px; - max-height: 150px; border-radius: 4px; - margin-right: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + background-color: var(--surface-ground); +} + +.search-book-details { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.search-book-title-container { + display: flex; + align-items: flex-start; +} + +.search-book-name { + font-weight: 600; + font-size: 0.95rem; + line-height: 1.4; + color: var(--text-color); + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + word-break: break-word; + margin: 0; +} + +.search-book-meta-line { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; +} + +.search-book-authors { + font-size: 0.9rem; + font-style: italic; + color: var(--text-secondary-color); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin: 0; + flex: 1; + min-width: 0; +} + +.search-book-year { + font-size: 0.8rem; + color: var(--text-secondary-color); + background-color: var(--surface-ground); + padding: 0.125rem 0.5rem; + border-radius: 4px; + white-space: nowrap; + font-weight: 500; +} + +.search-book-series { + display: flex; + align-items: center; + gap: 0.375rem; + font-size: 0.8rem; + color: var(--primary-color); + background-color: rgba(var(--primary-color-rgb, 59, 130, 246), 0.1); + padding: 0.075rem 0.125rem; + border-radius: 4px; + width: fit-content; + + i { + font-size: 0.75rem; + } + + span { + font-weight: 500; + } +} + +.search-book-metadata { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + align-items: center; +} + +.metadata-badge { + display: inline-flex; + align-items: center; + gap: 0.25rem; + font-size: 0.8rem; + padding: 0.1rem 0.25rem; + border-radius: 4px; + background-color: var(--surface-hover); + color: var(--text-secondary-color); + white-space: nowrap; + + i { + font-size: 0.7rem; + } + + &.series-badge { + background-color: rgba(59, 130, 246, 0.1); + color: rgb(59, 130, 246); + } + + &.year-badge { + background-color: rgba(34, 197, 94, 0.1); + color: rgb(34, 197, 94); + } } diff --git a/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.ts b/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.ts index 9c9b73252..0cb7d30a9 100644 --- a/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.ts +++ b/booklore-ui/src/app/features/book/components/book-searcher/book-searcher.component.ts @@ -1,5 +1,5 @@ import {Component, inject, OnDestroy, OnInit} from '@angular/core'; -import {BehaviorSubject, of, Subject, Subscription} from 'rxjs'; +import {BehaviorSubject, of, Subscription} from 'rxjs'; import {catchError, switchMap} from 'rxjs/operators'; import {Book} from '../../model/book.model'; import {FormsModule} from '@angular/forms'; @@ -34,6 +34,7 @@ export class BookSearcherComponent implements OnInit, OnDestroy { books: Book[] = []; #searchSubject = new BehaviorSubject(''); #subscription!: Subscription; + isSearchFocused = false; private bookService = inject(BookService); private router = inject(Router); @@ -41,24 +42,16 @@ export class BookSearcherComponent implements OnInit, OnDestroy { private headerFilter = new HeaderFilter(this.#searchSubject.asObservable()); ngOnInit(): void { - this.initializeSearch(); - } - - initializeSearch(): void { this.#subscription = this.bookService.bookState$.pipe( switchMap(bookState => this.headerFilter.filter(bookState)), - catchError((error) => { - console.error('Error while searching books:', error); - return of({books: [], loaded: true, error: null}); - }) + catchError(() => of({books: [], loaded: true, error: null})) ).subscribe({ next: (filteredState) => { const term = this.searchQuery.trim(); this.books = term.length >= 2 ? (filteredState.books || []).slice(0, 50) : []; - }, - error: (error) => console.error('Subscription error:', error) + } }); } @@ -66,6 +59,20 @@ export class BookSearcherComponent implements OnInit, OnDestroy { return authors?.join(', ') || 'Unknown Author'; } + getPublishedYear(publishedDate: string | undefined): string | null { + if (!publishedDate) return null; + const year = publishedDate.split('-')[0]; + return year && year.length === 4 ? year : null; + } + + getSeriesInfo(seriesName: string | undefined, seriesNumber: number | null | undefined): string | null { + if (!seriesName) return null; + if (seriesNumber) { + return `${seriesName} #${seriesNumber}`; + } + return seriesName; + } + onSearchInputChange(): void { this.#searchSubject.next(this.searchQuery.trim()); } @@ -82,6 +89,18 @@ export class BookSearcherComponent implements OnInit, OnDestroy { this.books = []; } + get isDropdownOpen(): boolean { + return this.books.length > 0; + } + + onSearchBlur(): void { + setTimeout(() => { + if (!this.isDropdownOpen) { + this.isSearchFocused = false; + } + }, 200); + } + ngOnDestroy(): void { if (this.#subscription) { this.#subscription.unsubscribe(); diff --git a/booklore-ui/src/app/features/book/components/series-page/series-page.component.html b/booklore-ui/src/app/features/book/components/series-page/series-page.component.html index a06743426..e640dbdee 100644 --- a/booklore-ui/src/app/features/book/components/series-page/series-page.component.html +++ b/booklore-ui/src/app/features/book/components/series-page/series-page.component.html @@ -1,5 +1,5 @@ @if (filteredBooks$ | async; as books) { -
+
diff --git a/booklore-ui/src/app/features/book/model/book.model.ts b/booklore-ui/src/app/features/book/model/book.model.ts index a4693146b..207c1e932 100644 --- a/booklore-ui/src/app/features/book/model/book.model.ts +++ b/booklore-ui/src/app/features/book/model/book.model.ts @@ -102,7 +102,6 @@ export interface BookMetadata { providerBookId?: string; thumbnailUrl?: string | null; reviews?: BookReview[]; - titleLocked?: boolean; subtitleLocked?: boolean; publisherLocked?: boolean; @@ -134,7 +133,6 @@ export interface BookMetadata { tagsLocked?: boolean; coverLocked?: boolean; reviewsLocked?: boolean; - [key: string]: any; } @@ -203,7 +201,6 @@ export interface BookSetting { epubSettings?: EpubViewerSetting; cbxSettings?: CbxViewerSetting; newPdfSettings?: NewPdfReaderSetting; - [key: string]: any; } diff --git a/booklore-ui/src/app/features/dashboard/components/main-dashboard/main-dashboard.component.scss b/booklore-ui/src/app/features/dashboard/components/main-dashboard/main-dashboard.component.scss index d6042863b..614a05216 100644 --- a/booklore-ui/src/app/features/dashboard/components/main-dashboard/main-dashboard.component.scss +++ b/booklore-ui/src/app/features/dashboard/components/main-dashboard/main-dashboard.component.scss @@ -62,7 +62,7 @@ padding: 3rem; background: var(--p-surface-900); border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid var(--p-content-border-color); backdrop-filter: blur(20px); position: relative; overflow: hidden; diff --git a/booklore-ui/src/app/features/metadata/component/book-metadata-center/book-metadata-center.component.html b/booklore-ui/src/app/features/metadata/component/book-metadata-center/book-metadata-center.component.html index 1012b0ffe..f03afe52e 100644 --- a/booklore-ui/src/app/features/metadata/component/book-metadata-center/book-metadata-center.component.html +++ b/booklore-ui/src/app/features/metadata/component/book-metadata-center/book-metadata-center.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/booklore-ui/src/app/features/metadata/component/cover-search/cover-search.component.scss b/booklore-ui/src/app/features/metadata/component/cover-search/cover-search.component.scss index 6f3764d51..f986d9ae4 100644 --- a/booklore-ui/src/app/features/metadata/component/cover-search/cover-search.component.scss +++ b/booklore-ui/src/app/features/metadata/component/cover-search/cover-search.component.scss @@ -58,7 +58,7 @@ p { margin-top: 1rem; - color: var(--text-color-secondary); + color: var(--text-secondary-color); } } @@ -67,7 +67,7 @@ flex-direction: column; align-items: center; padding: 3rem; - color: var(--text-color-secondary); + color: var(--text-secondary-color); background: var(--surface-card); border-radius: 8px; border: 1px solid var(--surface-border); diff --git a/booklore-ui/src/app/features/metadata/component/metadata-manager/metadata-manager.component.scss b/booklore-ui/src/app/features/metadata/component/metadata-manager/metadata-manager.component.scss index 15dfba565..aa916796d 100644 --- a/booklore-ui/src/app/features/metadata/component/metadata-manager/metadata-manager.component.scss +++ b/booklore-ui/src/app/features/metadata/component/metadata-manager/metadata-manager.component.scss @@ -9,7 +9,7 @@ } .description { - color: var(--text-color-secondary); + color: var(--text-secondary-color); margin-bottom: 1.5rem; } @@ -89,7 +89,7 @@ margin-bottom: 0.5rem; .count { - color: var(--text-color-secondary); + color: var(--text-secondary-color); font-size: 0.875rem; } } @@ -107,7 +107,7 @@ small { display: block; margin-top: 0.5rem; - color: var(--text-color-secondary); + color: var(--text-secondary-color); } } } diff --git a/booklore-ui/src/app/features/stats/component/stats-component.scss b/booklore-ui/src/app/features/stats/component/stats-component.scss index 00d15eb15..e1a6651e0 100644 --- a/booklore-ui/src/app/features/stats/component/stats-component.scss +++ b/booklore-ui/src/app/features/stats/component/stats-component.scss @@ -12,7 +12,7 @@ padding: 25px; margin-bottom: 30px; backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid var(--p-content-border-color); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: visible; } @@ -48,7 +48,7 @@ align-items: center; margin-top: 8px; font-size: 0.95rem; - color: var(--text-color-secondary, #cccccc); + color: var(--text-secondary-color); flex-wrap: wrap; .total-item { @@ -67,7 +67,7 @@ } .total-label { - color: var(--text-color-secondary, #cccccc); + color: var(--text-secondary-color); font-size: 0.9rem; white-space: nowrap; } @@ -309,7 +309,7 @@ } label { - color: var(--text-color-secondary, #cccccc); + color: var(--text-secondary-color); font-size: 0.9rem; cursor: pointer; user-select: none; @@ -426,7 +426,7 @@ border-radius: 8px; padding: 15px; backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid var(--p-content-border-color); transition: all 0.3s ease; &:hover { @@ -472,7 +472,7 @@ .chart-description { text-align: center; - color: var(--text-color-secondary, #cccccc); + color: var(--text-secondary-color); font-size: 0.9rem; margin-bottom: 15px; line-height: 1.4; @@ -546,7 +546,7 @@ .no-data-message { text-align: center; padding: 50px; - color: var(--text-color-secondary, #cccccc); + color: var(--text-secondary-color); font-size: 16px; } @@ -625,7 +625,7 @@ } .insight-description { - color: var(--text-color-secondary, #cccccc); + color: var(--text-secondary-color); font-size: 0.85rem; line-height: 1.4; margin: 0; @@ -702,7 +702,7 @@ } .insight-description { - color: var(--text-color-secondary, #cccccc); + color: var(--text-secondary-color); font-size: 0.85rem; line-height: 1.4; margin: 0; diff --git a/booklore-ui/src/app/shared/components/change-password/change-password.component.html b/booklore-ui/src/app/shared/components/change-password/change-password.component.html index 80630d135..bfb233af8 100644 --- a/booklore-ui/src/app/shared/components/change-password/change-password.component.html +++ b/booklore-ui/src/app/shared/components/change-password/change-password.component.html @@ -1,37 +1,100 @@
-
- +
+
+
+
+
+
+ +
+
+

Change Password

+

Update your password to keep your account secure

+
- -
-
- - + +
+ +
-
- - +
+ +
-
- - +
+ + @if (!passwordsMatch && confirmNewPassword) { - + + + New passwords do not match + }
- + @if (errorMessage) { - +
+ {{ errorMessage }} +
} + @if (successMessage) { - +
+ {{ successMessage }} +
} - - +
+
diff --git a/booklore-ui/src/app/shared/components/change-password/change-password.component.scss b/booklore-ui/src/app/shared/components/change-password/change-password.component.scss index 49fb210b3..58e92cbb7 100644 --- a/booklore-ui/src/app/shared/components/change-password/change-password.component.scss +++ b/booklore-ui/src/app/shared/components/change-password/change-password.component.scss @@ -1,28 +1,90 @@ +@use '../../styles/auth-shared' as auth; + .change-password-container { - @apply flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-900 via-cyan-600 to-blue-400 relative; + @include auth.auth-container; } .change-password-wrapper { @apply flex flex-col items-center gap-6 absolute top-1/4 transform -translate-y-1/4; } +.change-password-card-wrapper { + @include auth.auth-card-wrapper(500px, -6rem); +} + +.change-password-card-border { + @include auth.auth-card-border; +} + +.change-password-card { + @include auth.auth-card; +} + .app-title { @apply text-5xl font-extrabold text-white drop-shadow-lg; text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); } -.change-password-card { - @apply w-96 shadow-lg rounded-xl bg-opacity-90 backdrop-blur-lg; +.change-password-header { + @include auth.auth-header; +} + +.logo-wrapper { + @include auth.auth-logo; +} + +.icon-circle { + @include auth.auth-icon-circle; +} + +.change-password-title { + @include auth.auth-title; +} + +.change-password-subtitle { + @include auth.auth-subtitle; } form { @apply flex flex-col gap-4; } +.change-password-form { + @include auth.auth-form; +} + .p-field { @apply flex flex-col gap-2; } +.form-field { + @include auth.form-field; +} + +.form-label { + @include auth.form-label; +} + +.field-error { + @include auth.field-error; +} + p-button { @apply mt-4; } + +.change-password-button { + @include auth.auth-button; +} + +.message-container { + @include auth.message-container; +} + +.error-message { + @include auth.error-message; +} + +.success-message { + @include auth.success-message; +} diff --git a/booklore-ui/src/app/shared/components/change-password/change-password.component.ts b/booklore-ui/src/app/shared/components/change-password/change-password.component.ts index aca0805bb..bacfadd93 100644 --- a/booklore-ui/src/app/shared/components/change-password/change-password.component.ts +++ b/booklore-ui/src/app/shared/components/change-password/change-password.component.ts @@ -1,11 +1,10 @@ import {Component, inject} from '@angular/core'; import {Button} from 'primeng/button'; -import {Card} from 'primeng/card'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {Message} from 'primeng/message'; import {Password} from 'primeng/password'; -import {MessageService, PrimeTemplate} from 'primeng/api'; +import {MessageService} from 'primeng/api'; import {UserService} from '../../../features/settings/user-management/user.service'; import {AuthService} from '../../service/auth.service'; @@ -14,13 +13,11 @@ import {AuthService} from '../../service/auth.service'; standalone: true, imports: [ Button, - Card, FormsModule, Message, Password, - PrimeTemplate, ReactiveFormsModule -], + ], templateUrl: './change-password.component.html', styleUrl: './change-password.component.scss' }) diff --git a/booklore-ui/src/app/shared/components/duplicate-files-notification/duplicate-files-dialog/duplicate-files-dialog.component.scss b/booklore-ui/src/app/shared/components/duplicate-files-notification/duplicate-files-dialog/duplicate-files-dialog.component.scss index 3be2e8d3b..c46d17cc2 100644 --- a/booklore-ui/src/app/shared/components/duplicate-files-notification/duplicate-files-dialog/duplicate-files-dialog.component.scss +++ b/booklore-ui/src/app/shared/components/duplicate-files-notification/duplicate-files-dialog/duplicate-files-dialog.component.scss @@ -58,7 +58,7 @@ .hash-group { background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid var(--p-content-border-color); border-radius: 8px; padding: 1rem; margin: 0.5rem 0; @@ -120,7 +120,7 @@ padding: 0.75rem; border-radius: 6px; background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid var(--p-content-border-color); transition: all 0.2s ease; margin-left: 1rem; } diff --git a/booklore-ui/src/app/shared/components/icon-picker/icon-picker-component.scss b/booklore-ui/src/app/shared/components/icon-picker/icon-picker-component.scss index 1e7731398..5052a82f3 100644 --- a/booklore-ui/src/app/shared/components/icon-picker/icon-picker-component.scss +++ b/booklore-ui/src/app/shared/components/icon-picker/icon-picker-component.scss @@ -15,7 +15,7 @@ width: 100%; padding: 8px 12px; font-size: 16px; - border: 1px solid var(--text-color-secondary); + border: 1px solid var(--text-secondary-color); border-radius: 4px; margin-bottom: 15px; box-sizing: border-box; @@ -27,6 +27,6 @@ } .icon-search::placeholder { - color: var(--text-color-secondary); + color: var(--text-secondary-color); opacity: 1; } diff --git a/booklore-ui/src/app/shared/components/login/login.component.html b/booklore-ui/src/app/shared/components/login/login.component.html index ca8d4ab5b..61a5edbd5 100644 --- a/booklore-ui/src/app/shared/components/login/login.component.html +++ b/booklore-ui/src/app/shared/components/login/login.component.html @@ -1,31 +1,30 @@ -
-
-
-
-
- - - - -
Welcome to Booklore
- Sign in to continue +