diff --git a/src/frontend/src/app/app-routing.module.ts b/src/frontend/src/app/app-routing.module.ts
index d425c6f..8458c35 100644
--- a/src/frontend/src/app/app-routing.module.ts
+++ b/src/frontend/src/app/app-routing.module.ts
@@ -1,10 +1,102 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-const routes: Routes = [];
-
-@NgModule({
- imports: [RouterModule.forRoot(routes)],
- exports: [RouterModule]
-})
-export class AppRoutingModule { }
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { NotFoundComponent } from './modules/shared/components/not-found/not-found.component';
+
+interface AppMenuEntry {
+ label: string;
+ icon: string;
+ path?: string;
+ matchExact?: boolean;
+ level?: number;
+}
+
+interface AppRoute extends Route {
+ menuEntries?: AppMenuEntry[];
+}
+
+export const appRoutes: AppRoute[] = [
+ {
+ path: '',
+ component: NotFoundComponent,
+ menuEntries: [
+ {
+ label: 'MENU.HOME',
+ icon: 'fa fa-home',
+ matchExact: true,
+ },
+ ],
+ },
+ {
+ path: 'profile',
+ component: NotFoundComponent,
+ menuEntries: [
+ {
+ label: 'MENU.PROFILE',
+ icon: 'fa fa-user',
+ },
+ ],
+ },
+ {
+ path: 'community',
+ component: NotFoundComponent,
+ menuEntries: [
+ {
+ label: 'MENU.COMMUNITY',
+ icon: 'fa fa-users',
+ },
+ ],
+ },
+ {
+ path: 'messages',
+ component: NotFoundComponent,
+ menuEntries: [
+ {
+ label: 'MENU.MESSAGES',
+ icon: 'fa fa-comments',
+ },
+ ],
+ },
+ {
+ path: 'tests',
+ component: NotFoundComponent,
+ menuEntries: [
+ {
+ label: 'MENU.TESTS',
+ icon: 'fa fa-heartbeat',
+ },
+ ],
+ },
+ {
+ path: 'research',
+ component: NotFoundComponent,
+ menuEntries: [
+ {
+ label: 'MENU.RESEARCH',
+ icon: 'fa fa-flask',
+ },
+ ],
+ },
+ {
+ path: 'admin',
+ loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule),
+ menuEntries: [
+ {
+ label: 'MENU.ADMIN',
+ icon: 'fa fa-id-card',
+ matchExact: true,
+ },
+ {
+ path: 'admin/users',
+ label: 'MENU.USERS',
+ icon: 'fa fa-users',
+ level: 1,
+ }
+ ],
+ },
+];
+
+@NgModule({
+ imports: [RouterModule.forRoot(appRoutes)],
+ exports: [RouterModule]
+})
+export class AppRoutingModule { }
diff --git a/src/frontend/src/app/app.component.html b/src/frontend/src/app/app.component.html
index d0de35f..175f57e 100644
--- a/src/frontend/src/app/app.component.html
+++ b/src/frontend/src/app/app.component.html
@@ -4,11 +4,8 @@
- My App
+ {{ 'APP.NAME' | translate }}
-
@@ -17,21 +14,51 @@
+
\ No newline at end of file
diff --git a/src/frontend/src/app/app.component.scss b/src/frontend/src/app/app.component.scss
index 2b2b8e2..844bf98 100644
--- a/src/frontend/src/app/app.component.scss
+++ b/src/frontend/src/app/app.component.scss
@@ -1,3 +1,4 @@
+$sidebar-width: 250px;
:host{
position: fixed;
top: 0px;
@@ -8,7 +9,7 @@
flex-direction: column;
}
.menu{
- width: 250px;
+ width: $sidebar-width;
flex-grow: 1;
display: flex;
flex-direction: column;
@@ -16,4 +17,75 @@
> :first-child{
flex-grow: 1;
}
+ > * {
+ width: $sidebar-width;
+ }
+}
+.avatar{
+ width: 48px;
+ height: 48px;
+ border-radius: 10px;
+ background-color: rgba(0,0,0, 0.25);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+.menu-item{
+ display: flex;
+ position: relative;
+ cursor: pointer;
+ padding: 10px;
+ transition-duration: 400ms !important;
+ transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+ transition-property: all !important;
+ &:after{
+ display: block;
+ content: "";
+ position: absolute;
+ top: 50%;
+ right: 0px;
+ width: 3px;
+ height: 0%;
+ background: var(--primary-color);
+ transition-duration: 400ms !important;
+ transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+ transition-property: all !important;
+ }
+ &.active{
+ &:after{
+ top: 0%;
+ height: 100%;
+ }
+ }
+ i {
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 10px;
+ transition: all 0.4s ease;
+ }
+ span{
+ display: flex;
+ align-items: center;
+ flex-grow: 1;
+ opacity: 0.75;
+ }
+}
+.user-box{
+ padding: 6px;
+}
+.user-menu-container{
+ width: 46px;
+ .user-menu{
+ position: absolute;
+ bottom: 6px;
+ right: 6px;
+ height: 48px;
+ width: 46px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
\ No newline at end of file
diff --git a/src/frontend/src/app/app.component.ts b/src/frontend/src/app/app.component.ts
index 2e120bb..446080d 100644
--- a/src/frontend/src/app/app.component.ts
+++ b/src/frontend/src/app/app.component.ts
@@ -1,7 +1,10 @@
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
+import { appRoutes } from './app-routing.module';
import { AppService, WindowSize } from './modules/shared/services/app/app.service';
+import { BrowserStorageService } from './modules/shared/services/browser-storage/browser-storage.service';
import { ThemeService } from './modules/shared/services/theme/theme.service';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
enum SidebarOpenEnum {
Default,
@@ -26,6 +29,12 @@ export class AppComponent {
themeControl = new FormControl();
langControl = new FormControl();
isDark = true;
+ appRoutes = appRoutes;
+ user = {
+ name: 'Name',
+ surname: 'Surname',
+ avatar: 'https://www.gravatar.com/avatar/81b206a89f89d5b1123b87606075c6a8?s=514&d=robohash',
+ };
get isSidebarOpen() {
switch (this.sidebarOpen) {
@@ -40,9 +49,12 @@ export class AppComponent {
break;
}
}
+
constructor(
appService: AppService,
themeService: ThemeService,
+ private browserStorageService: BrowserStorageService,
+ private sanitizer: DomSanitizer,
) {
this.themes = themeService.getThemes();
this.langs = appService.getLangs();
@@ -51,6 +63,7 @@ export class AppComponent {
this.themeControl.valueChanges.subscribe(theme => {
themeService.setTheme(theme);
});
+ appService.changeLang(this.lang);
this.langControl.valueChanges.subscribe(lang => {
appService.changeLang(lang);
});
@@ -66,6 +79,11 @@ export class AppComponent {
appService.langChange.subscribe(lang => {
this.onLangChanged(lang);
});
+
+ const sidebarUserPrefference = this.browserStorageService.getItem('sidebar.open');
+ if (sidebarUserPrefference !== null) {
+ this.sidebarOpen = sidebarUserPrefference;
+ }
}
onThemeChanged(theme: string) {
@@ -82,7 +100,7 @@ export class AppComponent {
return;
}
this.isMobile = size.isMobile;
- this.defaultSidebarOpen = !this.isMobile;
+ this.defaultSidebarOpen = !size.isMobile;
this.sidebarMode = this.isMobile ? 'over' : 'side';
}
@@ -96,9 +114,14 @@ export class AppComponent {
toggleSidebar() {
this.sidebarOpen = this.isSidebarOpen ? SidebarOpenEnum.Closed : SidebarOpenEnum.Open;
+ this.browserStorageService.setItem('sidebar.open', this.sidebarOpen);
}
onSidebarOpenedChange(opened: boolean) {
this.sidebarOpen = opened ? SidebarOpenEnum.Open : SidebarOpenEnum.Closed;
}
+
+ url(url: string): SafeStyle {
+ return this.sanitizer.bypassSecurityTrustStyle(`url('${url}')`);
+ }
}
\ No newline at end of file
diff --git a/src/frontend/src/app/modules/admin/admin-routing.module.ts b/src/frontend/src/app/modules/admin/admin-routing.module.ts
new file mode 100644
index 0000000..af0b82e
--- /dev/null
+++ b/src/frontend/src/app/modules/admin/admin-routing.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Route } from '@angular/router';
+import { NotFoundComponent } from '../shared/components/not-found/not-found.component';
+
+const routes: Route[] = [
+ {
+ path: '',
+ component: NotFoundComponent,
+ },
+ {
+ path: 'users',
+ component: NotFoundComponent,
+ },
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class AdminRoutingModule { }
diff --git a/src/frontend/src/app/modules/admin/admin.module.ts b/src/frontend/src/app/modules/admin/admin.module.ts
new file mode 100644
index 0000000..6261d17
--- /dev/null
+++ b/src/frontend/src/app/modules/admin/admin.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AdminRoutingModule } from './admin-routing.module';
+import { SharedModule } from '../shared/shared.module';
+
+
+@NgModule({
+ declarations: [],
+ imports: [
+ CommonModule,
+ AdminRoutingModule,
+ SharedModule,
+ ]
+})
+export class AdminModule { }
diff --git a/src/frontend/src/app/modules/material/material.module.ts b/src/frontend/src/app/modules/material/material.module.ts
index 5e504e5..99357e6 100644
--- a/src/frontend/src/app/modules/material/material.module.ts
+++ b/src/frontend/src/app/modules/material/material.module.ts
@@ -1,15 +1,17 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatButtonModule} from '@angular/material/button';
-import {MatSidenavModule} from '@angular/material/sidenav';
-import {MatSelectModule} from '@angular/material/select';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatSelectModule} from '@angular/material/select';
+import {MatMenuModule} from '@angular/material/menu';
const itemsToExport = [
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatSelectModule,
+ MatMenuModule,
];
@NgModule({
diff --git a/src/frontend/src/app/modules/shared/components/not-found/not-found.component.html b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.html
new file mode 100644
index 0000000..a8a991b
--- /dev/null
+++ b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.html
@@ -0,0 +1,3 @@
+
+ {{ 'ERROR.PAGE_NOT_FOUND' | translate }}
+
\ No newline at end of file
diff --git a/src/frontend/src/app/modules/shared/components/not-found/not-found.component.scss b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/frontend/src/app/modules/shared/components/not-found/not-found.component.ts b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.ts
new file mode 100644
index 0000000..7cb4124
--- /dev/null
+++ b/src/frontend/src/app/modules/shared/components/not-found/not-found.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-not-found',
+ templateUrl: './not-found.component.html',
+ styleUrls: ['./not-found.component.scss']
+})
+export class NotFoundComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/frontend/src/app/modules/shared/services/app/app.service.ts b/src/frontend/src/app/modules/shared/services/app/app.service.ts
index 69d4fff..40ae29e 100644
--- a/src/frontend/src/app/modules/shared/services/app/app.service.ts
+++ b/src/frontend/src/app/modules/shared/services/app/app.service.ts
@@ -45,9 +45,8 @@ export class AppService {
if (!lang) {
lang = this.defaultLang;
}
- this.lang = lang;
this.translate.setDefaultLang(this.defaultLang);
- this.changeLang(this.lang);
+ this.changeLang(lang);
fromEvent(window, 'resize').subscribe(e => {
this.sizeChange.next(WindowSize.generate());
})
diff --git a/src/frontend/src/app/modules/shared/services/theme/theme.service.ts b/src/frontend/src/app/modules/shared/services/theme/theme.service.ts
index f9b46e9..080d21c 100644
--- a/src/frontend/src/app/modules/shared/services/theme/theme.service.ts
+++ b/src/frontend/src/app/modules/shared/services/theme/theme.service.ts
@@ -4,38 +4,38 @@ import { BrowserStorageService } from '../browser-storage/browser-storage.servic
@Injectable()
export class ThemeService {
- private theme: string;
- themeChange = new Subject();
+ private theme: string;
+ themeChange = new Subject();
- constructor(
- browserStorageService: BrowserStorageService,
- ) {
- this.themeChange.subscribe(theme => {
- this.theme = theme;
- browserStorageService.setItem('current-theme', theme);
- });
- let userTheme = browserStorageService.getItem('current-theme');
- if (!userTheme) {
- userTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+ constructor(
+ browserStorageService: BrowserStorageService
+ ) {
+ this.themeChange.subscribe(theme => {
+ this.theme = theme;
+ browserStorageService.setItem('current-theme', theme);
+ });
+ let userTheme = browserStorageService.getItem('current-theme');
+ if (!userTheme) {
+ userTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+ }
+ this.setTheme(userTheme);
}
- this.setTheme(userTheme);
- }
- getTheme() {
- return this.theme;
- }
-
- setTheme(theme: string) {
- if (theme !== this.theme) {
- this.themeChange.next(theme);
- document.getElementById('current-theme').setAttribute('href', `/${theme}.css`);
+ getTheme() {
+ return this.theme;
}
- }
- getThemes(): string[] {
- return [
- 'light',
- 'dark',
- ];
- };
+ setTheme(theme: string) {
+ if (theme !== this.theme) {
+ this.themeChange.next(theme);
+ document.getElementById('current-theme').setAttribute('href', `/${theme}.css`);
+ }
+ }
+
+ getThemes(): string[] {
+ return [
+ 'light',
+ 'dark',
+ ];
+ };
}
diff --git a/src/frontend/src/app/modules/shared/shared.module.ts b/src/frontend/src/app/modules/shared/shared.module.ts
index 76cf203..344df7e 100644
--- a/src/frontend/src/app/modules/shared/shared.module.ts
+++ b/src/frontend/src/app/modules/shared/shared.module.ts
@@ -1,12 +1,24 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
-
-
+import { NotFoundComponent } from './components/not-found/not-found.component';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpLoaderFactory } from 'src/app/app.module';
+import { HttpClient } from '@angular/common/http';
@NgModule({
- declarations: [],
+ declarations: [
+ NotFoundComponent
+ ],
imports: [
- CommonModule
- ]
+ CommonModule,
+ TranslateModule.forRoot({
+ defaultLanguage: 'en',
+ loader: {
+ provide: TranslateLoader,
+ useFactory: HttpLoaderFactory,
+ deps: [HttpClient]
+ }
+ }),
+ ],
})
export class SharedModule { }
diff --git a/src/frontend/src/app/styles/_base.scss b/src/frontend/src/app/styles/_base.scss
new file mode 100644
index 0000000..300670b
--- /dev/null
+++ b/src/frontend/src/app/styles/_base.scss
@@ -0,0 +1,6 @@
+@use 'sass:map';
+
+$primary-color: map.get($theme, color, primary, 500);
+body {
+ --primary-color: #{$primary-color};
+}
\ No newline at end of file
diff --git a/src/frontend/src/app/styles/_template.scss b/src/frontend/src/app/styles/_template.scss
new file mode 100644
index 0000000..8d184f4
--- /dev/null
+++ b/src/frontend/src/app/styles/_template.scss
@@ -0,0 +1,398 @@
+$theme: (
+ color: (
+ primary: (
+ 50: #e8eaf6,
+ 100: #c5cae9,
+ 200: #9fa8da,
+ 300: #7986cb,
+ 400: #5c6bc0,
+ 500: #3f51b5,
+ 600: #3949ab,
+ 700: #303f9f,
+ 800: #283593,
+ 900: #1a237e,
+ A100: #8c9eff,
+ A200: #536dfe,
+ A400: #3d5afe,
+ A700: #304ffe,
+ contrast: (
+ 50: rgba(0, 0, 0, 0.87),
+ 100: rgba(0, 0, 0, 0.87),
+ 200: rgba(0, 0, 0, 0.87),
+ 300: white,
+ 400: white,
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: white,
+ 900: white,
+ A100: rgba(0, 0, 0, 0.87),
+ A200: white,
+ A400: white,
+ A700: white,
+ ),
+ default: #3f51b5,
+ lighter: #c5cae9,
+ darker: #303f9f,
+ text: #3f51b5,
+ default-contrast: white,
+ lighter-contrast: rgba(0, 0, 0, 0.87),
+ darker-contrast: white,
+ "50-contrast": rgba(0, 0, 0, 0.87),
+ "100-contrast": rgba(0, 0, 0, 0.87),
+ "200-contrast": rgba(0, 0, 0, 0.87),
+ "300-contrast": white,
+ "400-contrast": white,
+ "500-contrast": white,
+ "600-contrast": white,
+ "700-contrast": white,
+ "800-contrast": white,
+ "900-contrast": white,
+ "A100-contrast": rgba(0, 0, 0, 0.87),
+ "A200-contrast": white,
+ "A400-contrast": white,
+ "A700-contrast": white,
+ "contrast-contrast": null,
+ ),
+ accent: (
+ 50: #fce4ec,
+ 100: #f8bbd0,
+ 200: #f48fb1,
+ 300: #f06292,
+ 400: #ec407a,
+ 500: #e91e63,
+ 600: #d81b60,
+ 700: #c2185b,
+ 800: #ad1457,
+ 900: #880e4f,
+ A100: #ff80ab,
+ A200: #ff4081,
+ A400: #f50057,
+ A700: #c51162,
+ contrast: (
+ 50: rgba(0, 0, 0, 0.87),
+ 100: rgba(0, 0, 0, 0.87),
+ 200: rgba(0, 0, 0, 0.87),
+ 300: rgba(0, 0, 0, 0.87),
+ 400: rgba(0, 0, 0, 0.87),
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: white,
+ 900: white,
+ A100: rgba(0, 0, 0, 0.87),
+ A200: white,
+ A400: white,
+ A700: white,
+ ),
+ default: #ff4081,
+ lighter: #ff80ab,
+ darker: #f50057,
+ text: #ff4081,
+ default-contrast: white,
+ lighter-contrast: rgba(0, 0, 0, 0.87),
+ darker-contrast: white,
+ "50-contrast": rgba(0, 0, 0, 0.87),
+ "100-contrast": rgba(0, 0, 0, 0.87),
+ "200-contrast": rgba(0, 0, 0, 0.87),
+ "300-contrast": rgba(0, 0, 0, 0.87),
+ "400-contrast": rgba(0, 0, 0, 0.87),
+ "500-contrast": white,
+ "600-contrast": white,
+ "700-contrast": white,
+ "800-contrast": white,
+ "900-contrast": white,
+ "A100-contrast": rgba(0, 0, 0, 0.87),
+ "A200-contrast": white,
+ "A400-contrast": white,
+ "A700-contrast": white,
+ "contrast-contrast": null,
+ ),
+ warn: (
+ 50: #ffebee,
+ 100: #ffcdd2,
+ 200: #ef9a9a,
+ 300: #e57373,
+ 400: #ef5350,
+ 500: #f44336,
+ 600: #e53935,
+ 700: #d32f2f,
+ 800: #c62828,
+ 900: #b71c1c,
+ A100: #ff8a80,
+ A200: #ff5252,
+ A400: #ff1744,
+ A700: #d50000,
+ contrast: (
+ 50: rgba(0, 0, 0, 0.87),
+ 100: rgba(0, 0, 0, 0.87),
+ 200: rgba(0, 0, 0, 0.87),
+ 300: rgba(0, 0, 0, 0.87),
+ 400: rgba(0, 0, 0, 0.87),
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: white,
+ 900: white,
+ A100: rgba(0, 0, 0, 0.87),
+ A200: white,
+ A400: white,
+ A700: white,
+ ),
+ default: #f44336,
+ lighter: #ffcdd2,
+ darker: #d32f2f,
+ text: #f44336,
+ default-contrast: white,
+ lighter-contrast: rgba(0, 0, 0, 0.87),
+ darker-contrast: white,
+ "50-contrast": rgba(0, 0, 0, 0.87),
+ "100-contrast": rgba(0, 0, 0, 0.87),
+ "200-contrast": rgba(0, 0, 0, 0.87),
+ "300-contrast": rgba(0, 0, 0, 0.87),
+ "400-contrast": rgba(0, 0, 0, 0.87),
+ "500-contrast": white,
+ "600-contrast": white,
+ "700-contrast": white,
+ "800-contrast": white,
+ "900-contrast": white,
+ "A100-contrast": rgba(0, 0, 0, 0.87),
+ "A200-contrast": white,
+ "A400-contrast": white,
+ "A700-contrast": white,
+ "contrast-contrast": null,
+ ),
+ is-dark: true,
+ foreground: (
+ base: white,
+ divider: rgba(255, 255, 255, 0.12),
+ dividers: rgba(255, 255, 255, 0.12),
+ disabled: rgba(255, 255, 255, 0.5),
+ disabled-button: rgba(255, 255, 255, 0.3),
+ disabled-text: rgba(255, 255, 255, 0.5),
+ elevation: black,
+ hint-text: rgba(255, 255, 255, 0.5),
+ secondary-text: rgba(255, 255, 255, 0.7),
+ icon: white,
+ icons: white,
+ text: white,
+ slider-min: white,
+ slider-off: rgba(255, 255, 255, 0.3),
+ slider-off-active: rgba(255, 255, 255, 0.3),
+ ),
+ background: (
+ status-bar: black,
+ app-bar: #212121,
+ background: #303030,
+ hover: rgba(255, 255, 255, 0.04),
+ card: #424242,
+ dialog: #424242,
+ disabled-button: rgba(255, 255, 255, 0.12),
+ raised-button: #424242,
+ focused-button: rgba(255, 255, 255, 0.12),
+ selected-button: #212121,
+ selected-disabled-button: #424242,
+ disabled-button-toggle: black,
+ unselected-chip: #616161,
+ disabled-list-option: black,
+ tooltip: #616161,
+ ),
+ ),
+ primary: (
+ 50: #e8eaf6,
+ 100: #c5cae9,
+ 200: #9fa8da,
+ 300: #7986cb,
+ 400: #5c6bc0,
+ 500: #3f51b5,
+ 600: #3949ab,
+ 700: #303f9f,
+ 800: #283593,
+ 900: #1a237e,
+ A100: #8c9eff,
+ A200: #536dfe,
+ A400: #3d5afe,
+ A700: #304ffe,
+ contrast: (
+ 50: rgba(0, 0, 0, 0.87),
+ 100: rgba(0, 0, 0, 0.87),
+ 200: rgba(0, 0, 0, 0.87),
+ 300: white,
+ 400: white,
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: white,
+ 900: white,
+ A100: rgba(0, 0, 0, 0.87),
+ A200: white,
+ A400: white,
+ A700: white,
+ ),
+ default: #3f51b5,
+ lighter: #c5cae9,
+ darker: #303f9f,
+ text: #3f51b5,
+ default-contrast: white,
+ lighter-contrast: rgba(0, 0, 0, 0.87),
+ darker-contrast: white,
+ "50-contrast": rgba(0, 0, 0, 0.87),
+ "100-contrast": rgba(0, 0, 0, 0.87),
+ "200-contrast": rgba(0, 0, 0, 0.87),
+ "300-contrast": white,
+ "400-contrast": white,
+ "500-contrast": white,
+ "600-contrast": white,
+ "700-contrast": white,
+ "800-contrast": white,
+ "900-contrast": white,
+ "A100-contrast": rgba(0, 0, 0, 0.87),
+ "A200-contrast": white,
+ "A400-contrast": white,
+ "A700-contrast": white,
+ "contrast-contrast": null,
+ ),
+ accent: (
+ 50: #fce4ec,
+ 100: #f8bbd0,
+ 200: #f48fb1,
+ 300: #f06292,
+ 400: #ec407a,
+ 500: #e91e63,
+ 600: #d81b60,
+ 700: #c2185b,
+ 800: #ad1457,
+ 900: #880e4f,
+ A100: #ff80ab,
+ A200: #ff4081,
+ A400: #f50057,
+ A700: #c51162,
+ contrast: (
+ 50: rgba(0, 0, 0, 0.87),
+ 100: rgba(0, 0, 0, 0.87),
+ 200: rgba(0, 0, 0, 0.87),
+ 300: rgba(0, 0, 0, 0.87),
+ 400: rgba(0, 0, 0, 0.87),
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: white,
+ 900: white,
+ A100: rgba(0, 0, 0, 0.87),
+ A200: white,
+ A400: white,
+ A700: white,
+ ),
+ default: #ff4081,
+ lighter: #ff80ab,
+ darker: #f50057,
+ text: #ff4081,
+ default-contrast: white,
+ lighter-contrast: rgba(0, 0, 0, 0.87),
+ darker-contrast: white,
+ "50-contrast": rgba(0, 0, 0, 0.87),
+ "100-contrast": rgba(0, 0, 0, 0.87),
+ "200-contrast": rgba(0, 0, 0, 0.87),
+ "300-contrast": rgba(0, 0, 0, 0.87),
+ "400-contrast": rgba(0, 0, 0, 0.87),
+ "500-contrast": white,
+ "600-contrast": white,
+ "700-contrast": white,
+ "800-contrast": white,
+ "900-contrast": white,
+ "A100-contrast": rgba(0, 0, 0, 0.87),
+ "A200-contrast": white,
+ "A400-contrast": white,
+ "A700-contrast": white,
+ "contrast-contrast": null,
+ ),
+ warn: (
+ 50: #ffebee,
+ 100: #ffcdd2,
+ 200: #ef9a9a,
+ 300: #e57373,
+ 400: #ef5350,
+ 500: #f44336,
+ 600: #e53935,
+ 700: #d32f2f,
+ 800: #c62828,
+ 900: #b71c1c,
+ A100: #ff8a80,
+ A200: #ff5252,
+ A400: #ff1744,
+ A700: #d50000,
+ contrast: (
+ 50: rgba(0, 0, 0, 0.87),
+ 100: rgba(0, 0, 0, 0.87),
+ 200: rgba(0, 0, 0, 0.87),
+ 300: rgba(0, 0, 0, 0.87),
+ 400: rgba(0, 0, 0, 0.87),
+ 500: white,
+ 600: white,
+ 700: white,
+ 800: white,
+ 900: white,
+ A100: rgba(0, 0, 0, 0.87),
+ A200: white,
+ A400: white,
+ A700: white,
+ ),
+ default: #f44336,
+ lighter: #ffcdd2,
+ darker: #d32f2f,
+ text: #f44336,
+ default-contrast: white,
+ lighter-contrast: rgba(0, 0, 0, 0.87),
+ darker-contrast: white,
+ "50-contrast": rgba(0, 0, 0, 0.87),
+ "100-contrast": rgba(0, 0, 0, 0.87),
+ "200-contrast": rgba(0, 0, 0, 0.87),
+ "300-contrast": rgba(0, 0, 0, 0.87),
+ "400-contrast": rgba(0, 0, 0, 0.87),
+ "500-contrast": white,
+ "600-contrast": white,
+ "700-contrast": white,
+ "800-contrast": white,
+ "900-contrast": white,
+ "A100-contrast": rgba(0, 0, 0, 0.87),
+ "A200-contrast": white,
+ "A400-contrast": white,
+ "A700-contrast": white,
+ "contrast-contrast": null,
+ ),
+ is-dark: true,
+ foreground: (
+ base: white,
+ divider: rgba(255, 255, 255, 0.12),
+ dividers: rgba(255, 255, 255, 0.12),
+ disabled: rgba(255, 255, 255, 0.5),
+ disabled-button: rgba(255, 255, 255, 0.3),
+ disabled-text: rgba(255, 255, 255, 0.5),
+ elevation: black,
+ hint-text: rgba(255, 255, 255, 0.5),
+ secondary-text: rgba(255, 255, 255, 0.7),
+ icon: white,
+ icons: white,
+ text: white,
+ slider-min: white,
+ slider-off: rgba(255, 255, 255, 0.3),
+ slider-off-active: rgba(255, 255, 255, 0.3),
+ ),
+ background: (
+ status-bar: black,
+ app-bar: #212121,
+ background: #303030,
+ hover: rgba(255, 255, 255, 0.04),
+ card: #424242,
+ dialog: #424242,
+ disabled-button: rgba(255, 255, 255, 0.12),
+ raised-button: #424242,
+ focused-button: rgba(255, 255, 255, 0.12),
+ selected-button: #212121,
+ selected-disabled-button: #424242,
+ disabled-button-toggle: black,
+ unselected-chip: #616161,
+ disabled-list-option: black,
+ tooltip: #616161,
+ ),
+);
diff --git a/src/frontend/src/app/styles/dark.scss b/src/frontend/src/app/styles/dark.scss
index 7a5ce35..df3b111 100644
--- a/src/frontend/src/app/styles/dark.scss
+++ b/src/frontend/src/app/styles/dark.scss
@@ -11,23 +11,25 @@
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
-$frontend-primary: mat.define-palette(mat.$indigo-palette);
-$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$theme-primary: mat.define-palette(mat.$blue-palette);
+$theme-accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
-$frontend-warn: mat.define-palette(mat.$red-palette);
+$theme-warn: mat.define-palette(mat.$red-palette);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
-$frontend-theme: mat.define-dark-theme((
+$theme: mat.define-dark-theme((
color: (
- primary: $frontend-primary,
- accent: $frontend-accent,
- warn: $frontend-warn,
+ primary: $theme-primary,
+ accent: $theme-accent,
+ warn: $theme-warn,
)
));
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
-@include mat.all-component-themes($frontend-theme);
\ No newline at end of file
+@include mat.all-component-themes($theme);
+
+@import "./base";
diff --git a/src/frontend/src/app/styles/light.scss b/src/frontend/src/app/styles/light.scss
index d6c36cc..423617d 100644
--- a/src/frontend/src/app/styles/light.scss
+++ b/src/frontend/src/app/styles/light.scss
@@ -11,23 +11,25 @@
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
-$frontend-primary: mat.define-palette(mat.$indigo-palette);
-$frontend-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$theme-primary: mat.define-palette(mat.$indigo-palette);
+$theme-accent: mat.define-palette(mat.$light-blue-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
-$frontend-warn: mat.define-palette(mat.$red-palette);
+$theme-warn: mat.define-palette(mat.$red-palette);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
-$frontend-theme: mat.define-light-theme((
+$theme: mat.define-light-theme((
color: (
- primary: $frontend-primary,
- accent: $frontend-accent,
- warn: $frontend-warn,
+ primary: $theme-primary,
+ accent: $theme-accent,
+ warn: $theme-warn,
)
));
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
-@include mat.all-component-themes($frontend-theme);
\ No newline at end of file
+@include mat.all-component-themes($theme);
+
+@import "./base";
\ No newline at end of file
diff --git a/src/frontend/src/assets/lang/en.json b/src/frontend/src/assets/lang/en.json
index b9e76de..58dc61a 100644
--- a/src/frontend/src/assets/lang/en.json
+++ b/src/frontend/src/assets/lang/en.json
@@ -1,4 +1,12 @@
{
+ "APP": {
+ "NAME": "CureNet",
+ "THEME": "Theme",
+ "LANGUAGE": "Language"
+ },
+ "ERROR": {
+ "PAGE_NOT_FOUND": "Page not found or not implemented yet!"
+ },
"THEME": {
"LIGHT": "Light",
"DARK": "Dark"
@@ -7,8 +15,14 @@
"PL": "Polish",
"EN": "English"
},
- "APP": {
- "THEME": "Theme",
- "LANGUAGE": "Language"
+ "MENU": {
+ "HOME": "Dashboard",
+ "PROFILE": "Profile",
+ "COMMUNITY": "Community",
+ "MESSAGES": "Messages",
+ "TESTS": "Laboratory tests",
+ "RESEARCH": "Research",
+ "ADMIN": "Admin",
+ "USERS": "Users"
}
}
\ No newline at end of file
diff --git a/src/frontend/src/assets/lang/pl.json b/src/frontend/src/assets/lang/pl.json
index 50e7c97..6855253 100644
--- a/src/frontend/src/assets/lang/pl.json
+++ b/src/frontend/src/assets/lang/pl.json
@@ -1,4 +1,12 @@
{
+ "APP": {
+ "NAME": "CureNet",
+ "THEME": "Motyw",
+ "LANGUAGE": "Język"
+ },
+ "ERROR": {
+ "PAGE_NOT_FOUND": "Nie znaleziono strony lub nie została ona jeszcze zaimplementowana!"
+ },
"THEME": {
"LIGHT": "Jasny",
"DARK": "Ciemny"
@@ -7,8 +15,14 @@
"PL": "Polski",
"EN": "Angielski"
},
- "APP": {
- "THEME": "Motyw",
- "LANGUAGE": "Język"
+ "MENU": {
+ "HOME": "Kokpit",
+ "PROFILE": "Profil",
+ "COMMUNITY": "Społeczność",
+ "MESSAGES": "Wiadomości",
+ "TESTS": "Wyniki badań",
+ "RESEARCH": "Badania naukowe",
+ "ADMIN": "Panel administratora",
+ "USERS": "Użytkownicy"
}
}
\ No newline at end of file
diff --git a/src/frontend/src/index.html b/src/frontend/src/index.html
index 2cb199a..0b791e2 100644
--- a/src/frontend/src/index.html
+++ b/src/frontend/src/index.html
@@ -2,7 +2,7 @@
- Frontend
+ CureNet
diff --git a/src/frontend/src/styles.scss b/src/frontend/src/styles.scss
index 291f5ae..ef52523 100644
--- a/src/frontend/src/styles.scss
+++ b/src/frontend/src/styles.scss
@@ -22,6 +22,16 @@ body .mat-drawer.mat-drawer-side {
}
&:not(.mat-drawer-opened) {
width: 60px;
+ .menu-item{
+ margin-left: 0px !important;
+ &:after{
+ right: 190px;
+ }
+ & > i{
+ width: 40px;
+ font-size: 120%;
+ }
+ }
.hide-on-side-opened{
display: none;
}
@@ -29,4 +39,7 @@ body .mat-drawer.mat-drawer-side {
margin-left: 60px !important;
}
}
+}
+.w-220{
+ width: 220px;
}
\ No newline at end of file