diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 3aa1a0ef4..648792c13 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -52,6 +52,7 @@ import { AppStateGuard } from './state/app-state.guard'; import { SimpleDoughnutChartComponent } from './components/simple-doughnut-chart/simple-doughnut-chart.component'; import { ManualRedactionDialogComponent } from './screens/file/manual-redaction-dialog/manual-redaction-dialog.component'; import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -134,6 +135,7 @@ export function HttpLoaderFactory(httpClient: HttpClient) { NgpSortModule, MatToolbarModule, MatButtonModule, + MatSlideToggleModule, MatMenuModule, MatIconModule, MatTooltipModule, diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts index 253df0d9d..6c65d0a68 100644 --- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts +++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts @@ -10,7 +10,7 @@ export class InitialsAvatarComponent implements OnInit { public username: string; @Input() - public color: 'red-white' | 'gray-red' | 'gray-dark' = 'gray-dark'; + public color = 'lightgray-dark'; @Input() public size: 'small' | 'large' = 'small'; diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index d4d7495b0..53a51feca 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -1,19 +1,29 @@
-
-
- - -
+ +
+ + +
+
+
+
-
@@ -36,31 +46,49 @@
-
- Quick Navigation +
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+ {{ filters[key].symbol }} +
+ {{filters[key].label | translate }} + +
+ +
-
Page {{ item.pageNumber }}
-
-
- - {{item.redactions}} Redactions -
-
- - {{item.hints}} Hints -
-
- - {{item.ignore}} Ignore -
+
{{ item.pageNumber }}
+
+
{{ filters[key].symbol }}
+ {{item[key]}}
@@ -69,8 +97,12 @@
-
- Annotations +
+
@@ -86,7 +118,7 @@
@@ -95,8 +127,12 @@
-
- Info +
+
@@ -115,25 +151,22 @@
- Assign Reviewer +
-
- Added on +
{{appStateService.activeFile.added | date:'medium'}}
-
- Added by +
{{user.name}}
-
- Last modified on +
{{appStateService.activeFile.lastUpdated | date:'medium'}} diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss index 3688a4a0f..2b6f7c5a8 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss @@ -29,7 +29,28 @@ redaction-pdf-viewer { display: flex; border-bottom: 1px solid $separator; align-items: center; + justify-content: space-between; padding: 0 25px; + + > div { + position: relative; + + .dot { + background: $primary; + height: 10px; + width: 10px; + border-radius: 50%; + position: absolute; + top: 0; + left: 0; + } + } + + .close-icon { + height: 14px; + width: 14px; + cursor: pointer; + } } .tab-content { @@ -84,7 +105,7 @@ redaction-pdf-viewer { } &.active { - border-left: 2px solid $red-1; + border-left: 2px solid $primary; } .annotation-actions { @@ -98,21 +119,48 @@ redaction-pdf-viewer { } .page-navigation { + display: flex; + align-items: center; + gap: 12px; cursor: pointer; border-bottom: 1px solid $separator; padding: 14px; border-left: 4px solid transparent; &:hover { - background-color: #F4F5F7; + background-color: $grey-2; } .page-number { - font-weight: 600; + border: 1px solid $separator; + padding: 7px; + margin-right: 3px; + width: 14px; + text-align: center; + } + + .page-stats { + display: flex; + justify-content: center; + align-items: center; + gap: 6px; + opacity: 1; } &.active { - border-left: 4px solid $red-1; + border-left: 4px solid $primary; } } } + +.filter-menu-header { + display: flex; + justify-content: space-between; + width: 250px; + padding: 7px 15px 15px; + + .actions { + display: flex; + gap: 8px; + } +} diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts index 2b89a7347..6aeb277a1 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts @@ -1,5 +1,5 @@ -import {ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {ActivatedRoute, Router} from '@angular/router'; +import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; import { FileUploadControllerService, ManualRedactionControllerService, @@ -7,20 +7,31 @@ import { ProjectControllerService, StatusControllerService } from '@redaction/red-ui-http'; -import {TranslateService} from '@ngx-translate/core'; -import {NotificationService, NotificationType} from '../../../notification/notification.service'; -import {MatDialog} from '@angular/material/dialog'; -import {AppStateService} from '../../../state/app-state.service'; -import {FileDetailsDialogComponent} from './file-details-dialog/file-details-dialog.component'; -import {ViewerSyncService} from '../service/viewer-sync.service'; -import {Annotations} from '@pdftron/webviewer'; -import {PdfViewerComponent} from '../pdf-viewer/pdf-viewer.component'; -import {AnnotationUtils} from '../../../utils/annotation-utils'; -import {ManualRedactionDialogComponent} from "../manual-redaction-dialog/manual-redaction-dialog.component"; -import {UserService} from "../../../user/user.service"; -import {debounce} from "../../../utils/debounce"; -import scrollIntoView from 'scroll-into-view-if-needed' -import {ConfirmationDialogComponent} from "../../../common/confirmation-dialog/confirmation-dialog.component"; +import { TranslateService } from '@ngx-translate/core'; +import { NotificationService, NotificationType } from '../../../notification/notification.service'; +import { MatDialog } from '@angular/material/dialog'; +import { AppStateService } from '../../../state/app-state.service'; +import { FileDetailsDialogComponent } from './file-details-dialog/file-details-dialog.component'; +import { ViewerSyncService } from '../service/viewer-sync.service'; +import { Annotations } from '@pdftron/webviewer'; +import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'; +import { AnnotationUtils } from '../../../utils/annotation-utils'; +import { ManualRedactionDialogComponent } from '../manual-redaction-dialog/manual-redaction-dialog.component'; +import { UserService } from '../../../user/user.service'; +import { debounce } from '../../../utils/debounce'; +import scrollIntoView from 'scroll-into-view-if-needed'; +import { ConfirmationDialogComponent } from '../../../common/confirmation-dialog/confirmation-dialog.component'; +import { AnnotationFilters } from '../../../utils/types'; +import { FiltersService } from '../service/filters.service'; + +class QuickNavigationItem { + pageNumber: number; + hints: number; + redactions: number; + comments: number; + suggestions: number; + ignored: number; +} @Component({ selector: 'redaction-file-preview-screen', @@ -31,6 +42,7 @@ export class FilePreviewScreenComponent implements OnInit { private _readyViewers: string[] = []; private projectId: string; private _selectedTab: 'NAVIGATION' | 'ANNOTATIONS' | 'INFO' = 'NAVIGATION'; + private _activeViewer: 'ANNOTATED' | 'REDACTED' = 'ANNOTATED'; @ViewChild(PdfViewerComponent) private _viewerComponent: PdfViewerComponent; @@ -44,7 +56,13 @@ export class FilePreviewScreenComponent implements OnInit { public fileId: string; public annotations: Annotations.Annotation[] = []; public selectedAnnotation: Annotations.Annotation; - public quickNavigation: { pageNumber: number, redactions: number, hints: number, ignore: number; }[] = []; + public quickNavigation: QuickNavigationItem[] = []; + + public filters: AnnotationFilters; + + public get filterKeys() { + return Object.keys(this.filters); + } private _manualRedactionEntry: ManualRedactionEntry; @@ -63,18 +81,29 @@ export class FilePreviewScreenComponent implements OnInit { private readonly _manualRedactionControllerService: ManualRedactionControllerService, private readonly _userService: UserService, private readonly _fileUploadControllerService: FileUploadControllerService, - private readonly _projectControllerService: ProjectControllerService) { + private readonly _projectControllerService: ProjectControllerService, + private readonly _filtersService: FiltersService) { this._activatedRoute.params.subscribe(params => { this.projectId = params.projectId; this.fileId = params.fileId; - this.appStateService.activateFile(this.projectId, this.fileId) + this.appStateService.activateFile(this.projectId, this.fileId); }); + this.filters = _filtersService.filters; } get user() { return this._userService.user; } + public get redactedView() { + return this._activeViewer === 'REDACTED'; + } + + public set redactedView(value: boolean) { + this._activeViewer = value ? 'REDACTED' : 'ANNOTATED'; + this._activateViewer(this._activeViewer); + } + public ngOnInit(): void { // PDFTRON cache fix localStorage.clear(); @@ -103,11 +132,14 @@ export class FilePreviewScreenComponent implements OnInit { return this._viewerSyncService.activeViewer; } - public activateViewer(value: string) { + private _activateViewer(value: string) { this._viewerSyncService.activateViewer(value); } - public selectTab(value: 'ANNOTATIONS' | 'INFO' | 'NAVIGATION') { + public selectTab(value: 'ANNOTATIONS' | 'INFO' | 'NAVIGATION', $event?: MouseEvent) { + if ($event) { + $event.stopPropagation(); + } if (value !== this._selectedTab) { this._selectedTab = value; setTimeout(() => { @@ -124,14 +156,14 @@ export class FilePreviewScreenComponent implements OnInit { const pageNumber = annotation.getPageNumber(); let el = this.quickNavigation.find((page) => page.pageNumber === pageNumber); if (!el) { - el = {pageNumber, redactions: 0, hints: 0, ignore: 0} + el = { pageNumber, redactions: 0, hints: 0, ignored: 0, comments: 0, suggestions: 0 }; this.quickNavigation.push(el); } if (annotation.Id.startsWith('hint:')) { el.hints++; } if (annotation.Id.startsWith('ignore:')) { - el.ignore++; + el.ignored++; } if (annotation.Id.startsWith('redaction:')) { el.redactions++; @@ -141,6 +173,16 @@ export class FilePreviewScreenComponent implements OnInit { this.annotations = AnnotationUtils.sortAnnotations(this.annotations); } + public showQuickNavigationItem(item: QuickNavigationItem): boolean { + let showItem = false; + Object.keys(this.filters).map((key) => { + if (this.showAnnotations(item, key)) { + showItem = true; + } + }) + return showItem; + } + public handleAnnotationSelected(annotation: Annotations.Annotation) { this.selectedAnnotation = annotation; this.selectTab('ANNOTATIONS'); @@ -191,7 +233,7 @@ export class FilePreviewScreenComponent implements OnInit { ref.afterClosed().subscribe(() => { this._manualRedactionEntry = null; - }) + }); } viewerPageChanged(pageNumber: number) { @@ -228,8 +270,8 @@ export class FilePreviewScreenComponent implements OnInit { behavior: 'smooth', scrollMode: 'if-needed', block: 'center', - inline: 'center', - }) + inline: 'center' + }); } } @@ -278,12 +320,36 @@ export class FilePreviewScreenComponent implements OnInit { id: annotation.Id, removeFromDictionary: false }] - }, this.appStateService.activeProjectId, this.appStateService.activeFile.fileId).subscribe(ok=>{ - this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.success.label'), null, NotificationType.SUCCESS); - },(err)=>{ - this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.failed.label',err), null, NotificationType.ERROR); - }); + }, this.appStateService.activeProjectId, this.appStateService.activeFile.fileId).subscribe(ok => { + this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.success.label'), null, NotificationType.SUCCESS); + }, (err) => { + this._notificationService.showToastNotification(this._translateService.instant('manual-redaction.remove-annotation.failed.label', err), null, NotificationType.ERROR); + }); } }); } + + public downloadFile(type: 'original' | 'annotated' | 'redacted') { + console.log(`Downloading ${type}...`); + } + + public setAllFilters(value: boolean) { + Object.keys(this.filters).map((key) => { + this.filters[key].value = value; + }); + } + + public get hasActiveFilters(): boolean { + let activeFilters = false; + Object.keys(this.filters).map((key) => { + if (this.filters[key].value) { + activeFilters = true; + } + }); + return activeFilters; + } + + public showAnnotations(item: QuickNavigationItem, type: string): boolean { + return item[type] && (!this.hasActiveFilters || (this.hasActiveFilters && this.filters[type]?.value)); + } } diff --git a/apps/red-ui/src/app/screens/file/service/filters.service.ts b/apps/red-ui/src/app/screens/file/service/filters.service.ts new file mode 100644 index 000000000..cc5a7bf90 --- /dev/null +++ b/apps/red-ui/src/app/screens/file/service/filters.service.ts @@ -0,0 +1,22 @@ +import { Injectable } from '@angular/core'; +import { AnnotationFilters } from '../../../utils/types'; + +@Injectable({ + providedIn: 'root' +}) +export class FiltersService { + constructor() { + } + + private _filters: AnnotationFilters = { + hints: { label: 'file-preview.filter-menu.hint.label', value: false, class: 'oval darkgray-white', symbol: 'H' }, + redactions: { label: 'file-preview.filter-menu.redaction.label', value: false, class: 'square darkgray-white', symbol: 'R' }, + comments: { label: 'file-preview.filter-menu.comment.label', value: false, class: 'oval darkgray-white', symbol: 'C' }, + suggestions: { label: 'file-preview.filter-menu.suggestion.label', value: false, class: 'oval red-white', symbol: 'S' }, + ignored: { label: 'file-preview.filter-menu.ignored.label', value: false, class: 'oval lightgray-white', symbol: 'I' }, + } + + public get filters(): AnnotationFilters { + return JSON.parse(JSON.stringify(this._filters)); + } +} diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html index 0d80afd24..db5058065 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html @@ -7,23 +7,23 @@
-
-
+
- {{'projects.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }} + {{'project-listing.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }}
-
+
@@ -57,7 +57,7 @@
@@ -88,7 +88,7 @@
@@ -96,7 +96,7 @@
{{totalPages}}
-
Analyzed pages
+
@@ -104,7 +104,7 @@
240
-
Total people
+
@@ -112,7 +112,7 @@
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts index 8883bca28..c44752475 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts @@ -20,8 +20,8 @@ export class ProjectListingScreenComponent implements OnInit { public projectsChartData: DoughnutChartConfig [] = []; public documentsChartData: DoughnutChartConfig [] = []; public sortingOptions: SortingOption[] = [ - { label: 'projects.sorting.recent.label', order: 'desc', column: 'projectDate' }, - { label: 'projects.sorting.alphabetically.label', order: 'asc', column: 'project.projectName' } + { label: 'project-listing.sorting.recent.label', order: 'desc', column: 'projectDate' }, + { label: 'project-listing.sorting.alphabetically.label', order: 'asc', column: 'project.projectName' } ]; public sortingOption: SortingOption = this.sortingOptions[0]; diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index ad86c50d7..e705dc45e 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -11,7 +11,7 @@
- @@ -120,7 +120,7 @@
@@ -136,10 +136,10 @@
-
+2
+
+2
-
+
+
+
diff --git a/apps/red-ui/src/app/utils/types.d.ts b/apps/red-ui/src/app/utils/types.d.ts index ec17ca4ad..d68b9a903 100644 --- a/apps/red-ui/src/app/utils/types.d.ts +++ b/apps/red-ui/src/app/utils/types.d.ts @@ -15,3 +15,11 @@ export class SortingOption { column: string; } +export class AnnotationFilters { + [key: string]: { + label: string, + value: boolean, + class: string, + symbol: string + } +} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index f60bf4b26..52aeb5636 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -133,7 +133,7 @@ "label": "Document" } }, - "projects": { + "project-listing": { "table-header": { "title": { "label": "{{length}} active projects" @@ -145,6 +145,22 @@ "label": "Recent" } }, + "stats": { + "analyzed-pages": { + "label": "Analyzed pages" + }, + "total-people": { + "label": "Total people" + }, + "charts": { + "projects": { + "label": "Projects" + }, + "total-documents": { + "label": "Total Documents" + } + } + }, "add-edit-dialog": { "header-new": { "label": "New Project" @@ -323,14 +339,72 @@ } }, "file-preview": { - "annotated": { - "label": "Review Annotations" + "view-toggle": { + "label": "Redacted View" }, - "redacted": { - "label": "Preview Redaction" + "filter-menu": { + "label": "Filter", + "all": { + "label": "All" + }, + "none": { + "label": "None" + }, + "filter-types": { + "label": "Filter types" + }, + "hint": { + "label": "Hint annotation" + }, + "redaction": { + "label": "Redaction" + }, + "comment": { + "label": "Comment" + }, + "suggestion": { + "label": "Suggested redaction" + }, + "ignored": { + "label": "Ignored redaction" + } }, - "download-redacted": { - "label": "Download Redacted" + "tabs": { + "quick-navigation": { + "label": "Quick Navigation" + }, + "annotations": { + "label": "Annotations" + }, + "info": { + "label": "Info", + "assign-reviewer": { + "label": "Assign reviewer" + }, + "added-on": { + "label": "Added on" + }, + "added-by": { + "label": "Added by" + }, + "last-modified-on": { + "label": "Last modified on" + } + } + }, + "download": { + "label": "Download", + "dropdown": { + "original": { + "label": "Original" + }, + "annotated": { + "label": "Annotated" + }, + "redacted": { + "label": "Redacted" + } + } } }, "initials-avatar": { diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss new file mode 100644 index 000000000..013149c7d --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -0,0 +1,20 @@ +@import "red-variables"; + +.mat-button, .mat-flat-button { + font-family: Inter, sans-serif !important; + font-weight: 400 !important; + border-radius: 25px !important; + + .mat-button-wrapper { + display: flex; + align-items: center; + } + + .dropdown-icon { + width: 16px; + } +} + +.mat-button[aria-expanded="true"], .mat-button.overlay { + background: rgba($primary, 0.1); +} diff --git a/apps/red-ui/src/assets/styles/red-checkbox.scss b/apps/red-ui/src/assets/styles/red-checkbox.scss new file mode 100644 index 000000000..919495916 --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-checkbox.scss @@ -0,0 +1,12 @@ +@import "red-variables"; + +.mat-checkbox .mat-checkbox-frame { + border: 1px solid $grey-5; +} + +.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background { + margin-top: 1px; + margin-left: 1px; + width: 18px; + height: 18px; +} diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index 9d836670f..571d0e406 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -1,44 +1,62 @@ @import "red-variables"; -.oval { +.oval, .square { font-weight: 600; display: flex; justify-content: center; align-items: center; height: 24px; width: 24px; - border-radius: 12px; font-size: 10px; - border: 1px solid #E2E4E9; - letter-spacing: 0; line-height: 12px; text-align: center; text-transform: uppercase; - font-family: Inter, sans-serif; + border: none; &.large { height: 32px; width: 32px; - border-radius: 16px; font-size: 13px; } - &.gray-dark { - background-color: $grey-4; - border: none; + &.x-small { + height: 16px; + width: 16px; + font-size: 11px; + line-height: 14px; } - &.gray-red { + &.lightgray-dark { + background-color: $grey-4; + } + + &.lightgray-red { background-color: $grey-4; color: $red-1; - border: none; + } + + &.darkgray-white { + background-color: $grey-1; + color: $white; + } + + &.lightgray-white { + background-color: $grey-5; + color: $white; } &.red-white { background-color: $red-1; color: $white; - border: none; } + + &.white-dark { + border: 1px solid #E2E4E9; + } +} + +.oval { + border-radius: 50%; } .stats-subtitle { diff --git a/apps/red-ui/src/assets/styles/red-logo.scss b/apps/red-ui/src/assets/styles/red-logo.scss index bb61aa598..9629df19d 100644 --- a/apps/red-ui/src/assets/styles/red-logo.scss +++ b/apps/red-ui/src/assets/styles/red-logo.scss @@ -12,13 +12,13 @@ height: 6px; width: 16px; border-radius: 3px; - background-color: $red-1; + background-color: $primary; } .line-2 { height: 6px; width: 22px; border-radius: 6px; - background-color: $red-1; + background-color: $primary; } } diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss new file mode 100644 index 000000000..755380deb --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-menu.scss @@ -0,0 +1,30 @@ +@import "red-variables"; + +.mat-menu-panel { + border-radius: 8px !important; + box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3); + + .mat-menu-item { + font-family: 'Inter', sans-serif; + font-size: 13px; + color: $accent; + + .mat-checkbox-layout { + width: 100%; + + .mat-checkbox-inner-container { + margin-left: 0; + } + + .mat-checkbox-label { + font-family: 'Inter', sans-serif; + font-size: 13px; + color: $accent; + + display: flex; + align-items: center; + gap: 4px; + } + } + } +} diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index f7dc22bf8..4e92e58e2 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -167,7 +167,7 @@ html, body { } &:last-child { - color: $red-1; + color: $primary; } } diff --git a/apps/red-ui/src/assets/styles/red-select.scss b/apps/red-ui/src/assets/styles/red-select.scss index af5f5049f..5a97fd6e4 100644 --- a/apps/red-ui/src/assets/styles/red-select.scss +++ b/apps/red-ui/src/assets/styles/red-select.scss @@ -42,11 +42,11 @@ line-height: 14px; &.mat-selected.mat-active { - color: $red-1; + color: $primary; } &:hover { - background: #F4F5F7 !important; + background: $grey-2 !important; } } } diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss index ecee20c9b..9922075cf 100644 --- a/apps/red-ui/src/assets/styles/red-text-styles.scss +++ b/apps/red-ui/src/assets/styles/red-text-styles.scss @@ -1,17 +1,11 @@ @import "red-variables"; @import "red-mixins"; -button { - font-family: Inter, sans-serif !important; - font-weight: 400 !important; - border-radius: 17px !important; -} - a { - color: $red-1; + color: $primary; &:hover { - color: lighten($red-1, 10%) + color: lighten($primary, 10%) } cursor: pointer; @@ -57,3 +51,8 @@ a { .clamp-2 { @include line-clamp(2); } + +.primary { + color: $primary; + opacity: 1; +} diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 7e92f84ae..61e61229d 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -1,12 +1,17 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600;700&display=swap'); +@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); @import '~ngx-toastr/toastr'; @import "red-material-theme"; @import "red-page-layout"; @import "red-text-styles"; @import "red-dialog"; @import "red-input"; +@import "red-button"; @import "red-select"; +@import "red-checkbox"; +@import "red-toggle"; +@import "red-menu"; @import "red-media-queries"; @import "red-tables"; @import "red-components"; diff --git a/apps/red-ui/src/assets/styles/red-toggle.scss b/apps/red-ui/src/assets/styles/red-toggle.scss new file mode 100644 index 000000000..f8794b753 --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-toggle.scss @@ -0,0 +1,23 @@ +mat-slide-toggle { + display: flex !important; + flex-direction: row-reverse; + gap: 8px; + + .mat-slide-toggle-bar { + height: 16px !important; + width: 30px !important; + border-radius: 16px !important; + } + + .mat-slide-toggle-thumb-container { + top: 2px !important; + left: 2px !important; + height: 12px !important; + width: 12px !important; + } + + .mat-slide-toggle-thumb { + height: 12px !important; + width: 12px !important; + } +} diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss index 46645f5e2..55ef43b4e 100644 --- a/apps/red-ui/src/assets/styles/red-variables.scss +++ b/apps/red-ui/src/assets/styles/red-variables.scss @@ -7,7 +7,7 @@ $light: #FFF; $dark: #000; $grey-1: #283241; -$grey-2: #ECECEE; +$grey-2: #F4F5F7; $grey-3: #AAACB3; $grey-4: #E2E4E9; $grey-5: #D3D5DA; @@ -16,7 +16,7 @@ $blue-1: #4875F7; $blue-2: #48C9F7; $blue-3: #5B97DB; $blue-4: #374C81; -$red-1: #F65757; +$red-1: #DD4D50; $yellow-1: #FFB83B; $green-1: #46CE7D; $green-2: #5CE594;