new icons and slightly style changes for notes

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

@@ -44,7 +44,7 @@
         }
       </div>
       <div class="control-button-wrapper">
-        <icon-button [icon]="'edit'" (click)="editEntry()"></icon-button>
+        <icon-button [icon]="'edit-large'" (click)="editEntry()"></icon-button>
         <icon-button [icon]="'delete'" (click)="deleteEntry()"></icon-button>
       </div>
     </div>
@@ -89,13 +89,16 @@
         ></ngx-editor>
       </div>
     } @else {
-      <div class="title-row">
-        <div class="title-read">{{ entries[currentEntryIndex].title }}</div>
-        <div class="date-read">
-          {{ currentEntry.created | date: "longDate" : "" : "de" }}
+      <div class="read-container">
+        <div class="title-row">
+          <div class="title-read">{{ entries[currentEntryIndex].title }}</div>
+          <div class="date-read">
+            {{ currentEntry.created | date: "longDate" : "" : "de" }}
+          </div>
         </div>
+        <divider appearance="gold-2"></divider>
+        <div class="content-read" [innerHTML]="currentEntry.content"></div>
       </div>
-      <div class="read-container" [innerHTML]="currentEntry.content"></div>
     }
     <div class="button-row">
       @if (isInEditMode) {

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

@@ -25,17 +25,24 @@
     &:hover {
       background-image: url("../../../assets/images/texture-5.jpg");
     }
+
+    &.active {
+      background-image: url("../../../assets/images/texture-30.jpg") !important;
+    }
     .entry-title {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+      font-weight: 500;
     }
 
     .entry-date {
     }
 
     .unsaved {
-      color: rgb(46, 35, 35);
+      margin-top: 0.375rem;
+      text-align: center;
+      color: rgb(52, 33, 33);
       font-size: 0.75rem;
       font-weight: 600;
     }
@@ -45,11 +52,11 @@
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    // justify-content: space-between;
   }
 
   .entry-wrapper {
     display: flex;
+    gap: 0.5rem;
     align-items: center;
     .control-button-wrapper {
       display: none;
@@ -91,6 +98,7 @@
     box-shadow: var(--shadow);
     ::ng-deep .mat-mdc-text-field-wrapper {
       width: 26rem !important;
+      background-image: url("../../../assets/images/texture-0.jpg") !important;
     }
   }
   .date-write {
@@ -100,6 +108,7 @@
     box-shadow: var(--shadow);
     ::ng-deep .mat-mdc-text-field-wrapper {
       width: 10rem !important;
+      background-image: url("../../../assets/images/texture-0.jpg") !important;
     }
   }
 
@@ -125,6 +134,17 @@
 
   // READ VIEW
 
+  .read-container {
+    margin-top: 1.5rem;
+    height: calc(100vh - 6rem);
+    padding: 1rem 2rem 2rem;
+    overflow: auto;
+    border-radius: 6px;
+    border: var(--gold-3);
+    background-image: url("/assets/images/texture-0.jpg");
+    box-shadow: var(--shadow);
+  }
+
   .title-row {
     display: flex;
     justify-content: space-between;
@@ -136,13 +156,8 @@
     height: 3.75rem;
     display: flex;
     align-items: center;
-    padding-left: 1rem;
-    font-size: 1.25rem;
+    font-size: 1.75rem;
     font-weight: 500;
-    border: var(--gold-3);
-    border-radius: 6px;
-    box-shadow: var(--shadow);
-    background-image: url("../../../assets/images/texture-0.jpg");
   }
 
   .date-read {
@@ -150,25 +165,13 @@
     text-align: center;
     display: flex;
     align-items: center;
-    padding: 0 1rem;
     font-size: 1.25rem;
     font-weight: 500;
     height: 3.75rem;
-    border: var(--gold-3);
-    border-radius: 6px;
-    box-shadow: var(--shadow);
-    background-image: url("../../../assets/images/texture-0.jpg");
   }
 
-  .read-container {
-    margin-top: 1.5rem;
-    height: calc(100vh - 10rem);
-    padding: 2rem 2rem;
-    overflow: auto;
-    border-radius: 6px;
-    border: var(--gold-3);
-    background-image: url("/assets/images/texture-0.jpg");
-    box-shadow: var(--shadow);
+  .content-read {
+    margin-top: 1rem;
   }
 
   .button-row {

src/app/shared-components/icon-button/icon-button.component.scss

@@ -13,6 +13,6 @@ button {
 }
 
 .hover-effect:hover {
-  background-color: rgba(211, 211, 211, 0.5);
+  background-color: rgba(138, 138, 138, 0.5);
   cursor: pointer;
 }

src/assets/icons/UIIcons/edit-large.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h357l-80 80H200v560h560v-278l80-80v358q0 33-23.5 56.5T760-120H200Zm280-360ZM360-360v-170l367-367q12-12 27-18t30-6q16 0 30.5 6t26.5 18l56 57q11 12 17 26.5t6 29.5q0 15-5.5 29.5T897-728L530-360H360Zm481-424-56-56 56 56ZM440-440h56l232-232-28-28-29-28-231 231v57Zm260-260-29-28 29 28 28 28-28-28Z"/></svg>

src/assets/icons/UIIcons/warn.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>