first layout tests for the notes component

src/app/journal/journal-notes/journal-notes.component.html

@@ -1,16 +1,29 @@
-<!-- <div
-  style="
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-  "
->
-  <img style="height: 100%" src="assets/images/notes_coming_soon.jpeg" alt="" />
-</div> -->
+<div class="entries-container">
+  <div class="entry">ENtry1</div>
+  <div class="entry">entry 2</div>
+  <div class="entry"></div>
+  <div class="entry"></div>
+  <div class="entry"></div>
+</div>
+
+<!-- Title -->
+<!-- <mat-label>{{ "notes.title" | translate }}</mat-label> -->
+<mat-form-field class="title" appearance="outline">
+  <input matInput name="name" />
+</mat-form-field>
+
+<!-- Datepicker -->
+<mat-form-field class="date" appearance="outline">
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepicker]="picker" />
+  <mat-hint>MM/DD/YYYY</mat-hint>
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker #picker></mat-datepicker>
+</mat-form-field>
+<!-- Entry -->
+<div class="entry-container"></div>
 
-<div class="NgxEditor__Wrapper">
+<!-- <div class="NgxEditor__Wrapper">
   <ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
   <ngx-editor
     [editor]="editor"
@@ -21,4 +34,4 @@
 </div>
 <p [innerHTML]="htmlString"></p>
 
-<div [innerHTML]="html"></div>
+<div [innerHTML]="html"></div> -->

src/app/journal/journal-notes/journal-notes.component.scss

@@ -0,0 +1,56 @@
+.entries-container {
+  width: 18rem;
+  height: 100%;
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-image: url("../../../assets/images/texture-10.jpg");
+  border-right: var(--gold-3);
+  box-shadow: var(--shadow);
+  padding-top: 3rem;
+
+  .entry {
+    width: 15rem;
+    margin: 0 auto 1rem;
+    padding: 1rem;
+    border: var(--gold-2);
+    border-radius: 10px;
+    background-image: url("../../../assets/images/texture-0.jpg");
+    &:hover {
+      background-image: url("../../../assets/images/texture-5.jpg");
+    }
+  }
+}
+
+.title {
+  margin-left: calc(50vw - 400px + 9rem);
+  ::ng-deep .mat-mdc-text-field-wrapper {
+    width: 26rem !important;
+    // border: var(--gold-2);
+  }
+}
+.date {
+  margin-left: 11.75rem;
+  ::ng-deep .mat-mdc-text-field-wrapper {
+    width: 12rem !important;
+  }
+}
+
+
+mdc-text-field{
+    border: 1px solid red
+}
+
+.entry-container {
+  width: 800px;
+  margin-left: calc(50vw - 400px + 9rem);
+  margin-top: 1rem;
+  height: calc(100vh - 10.5rem);
+  padding: 2rem 2rem;
+  overflow: auto;
+  border-radius: 10px;
+  border: var(--gold-3);
+  background-image: url("/assets/images/texture-0.jpg");
+  box-shadow: var(--shadow);
+}

src/app/journal/journal.module.ts

@@ -18,6 +18,11 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatDividerModule } from '@angular/material/divider';
+import {
+  MatCalendarCellClassFunction,
+  MatDatepickerModule,
+} from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
 
 import { JournalRoutingModule } from './journal-routing.module';
 import { JournalHomeComponent } from './journal-home/journal-home.component';
@@ -195,6 +200,8 @@ import { DividerComponent } from '../shared-components/divider/divider.component
     MatDividerModule,
     DurationPipe,
     DividerComponent,
+    MatDatepickerModule,
+    MatNativeDateModule,
   ],
 })
 export class JournalModule {}

src/assets/i18n/de.json

@@ -820,6 +820,9 @@
       }
     }
   },
+  "notes": {
+    "title": "Titel"
+  },
 
   "creator": {
     "new": "Neuen Charakter erstellen",

src/assets/i18n/en.json

@@ -815,6 +815,9 @@
       }
     }
   },
+  "notes": {
+    "title": "Title"
+  },
   "creator": {
     "new": "Create New Character",
     "name": "Name",