updated the general style to golden-grey

src/app/character/character-picker/deletion-confirm/deletion-confirm.component.scss

@@ -2,6 +2,6 @@
   width: 15rem;
   background-color: var(--modal-background);
   border-radius: 10px;
-  border: 1px solid var(--border-color);
+  border: var(--border);
   padding: 1rem;
 }

src/app/journal/journal-character/general/general.component.scss

@@ -40,7 +40,7 @@
   width: 24rem;
   height: 24rem;
   position: relative;
-  border: 1px solid var(--border-color);
+  border: var(--border);
   border-radius: 10px;
   box-shadow: var(--shadow);
   background-image: url("/assets/images/texture-0.jpg");

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

@@ -21,7 +21,7 @@
       ngbNav
       #nav="ngbNav"
       [(activeId)]="activeTab"
-      class="flex-column navigation-bar"
+      class="column navigation-bar"
       orientation="vertical"
     >
       <ng-container ngbNavItem="general">

src/app/journal/journal-home/details-panel/details-panel.component.scss

@@ -20,9 +20,11 @@
   right: 0;
   bottom: 0;
   width: 30rem;
-  background-color: var(--background-color);
+  background-image: url("/assets/images/texture-0.jpg");
   z-index: 999;
   padding: 1.5rem;
+  border-left: var(--gold-3);
+  box-shadow: var(--shadow-left);
   transform: translateX(100%);
   transition: transform 0.3s ease-in-out;
   overflow: auto;

src/app/journal/journal-home/navigation-panel/navigation-panel.component.scss

@@ -51,15 +51,15 @@ ul {
   }
 
   border: var(--gold-3);
-  background-image: url("/assets/images/texture-30.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   cursor: pointer;
+  background-image: url("/assets/images/texture-10.jpg");
   &:hover {
     background-image: url("/assets/images/texture-20.jpg");
   }
   &.active {
-    background-image: url("/assets/images/texture-0.jpg");
+    background-image: url("/assets/images/texture-30.jpg");
   }
 }
 
@@ -76,15 +76,15 @@ ul {
   width: 9rem;
   font-weight: 500;
   padding: 0.5rem;
-  border: solid 1px var(--border-color);
+  border: var(--border);
   box-shadow: var(--shadow);
   border-radius: 10px;
   border: var(--gold-3);
-  background-image: url("/assets/images/texture-30.jpg");
+  background-image: url("/assets/images/texture-10.jpg");
   &:hover {
     background-image: url("/assets/images/texture-20.jpg");
   }
   &.active {
-    background-image: url("/assets/images/texture-0.jpg");
+    background-image: url("/assets/images/texture-30.jpg");
   }
 }

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

@@ -36,12 +36,8 @@
     }
 
     <div class="footer">
-      <ui-button
-        [color]="'green'"
-        [width]="'w22'"
-        [type]="'addEntry'"
-        (click)="addItem('items')"
-      >
+      <ui-button [width]="'w22'" (click)="addItem('items')"
+        >{{ "buttons.addEntry" | translate }}
       </ui-button>
     </div>
   </div>
@@ -88,12 +84,8 @@
       }
 
       <div class="footer">
-        <ui-button
-          [color]="'green'"
-          [width]="'w22'"
-          [type]="'addEntry'"
-          (click)="addItem('consumables')"
-        >
+        <ui-button [width]="'w22'" (click)="addItem('consumables')"
+          >{{ "buttons.addEntry" | translate }}
         </ui-button>
       </div>
     </div>

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

@@ -25,13 +25,13 @@
   color: black;
   border: none;
   transition: filter 0.25s ease-in-out;
-  background-image: url("/assets/images/texture-15.jpg");
+  background-color: var(--tab);
   filter: brightness(0.85);
   &:hover {
-    background-image: url("/assets/images/texture-25.jpg");
+    background-color: var(--tab-hover);
   }
   &.active {
-    background-image: url("/assets/images/texture-40.jpg");
+    background-color: var(--tab-active);
   }
 }
 
@@ -51,7 +51,7 @@
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     padding: 10px 20px;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: var(--border);
     box-shadow: var(--shadow);
   }
 
@@ -77,16 +77,6 @@
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     align-items: center;
-    box-sizing: border-box;
-    cursor: pointer;
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    transition: all 0.2 ease-in-out;
-    border: var(--gold-2);
-    background-image: url("/assets/images/texture-15.jpg");
-    &:hover {
-      background-image: url("/assets/images/texture-40.jpg");
-    }
   }
 
   .item-property {
@@ -120,7 +110,7 @@
     display: grid;
     grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
     padding: 10px 10px;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: var(--border);
     box-shadow: var(--shadow);
   }
 
@@ -142,16 +132,6 @@
     margin: 0 0.5rem;
     display: grid;
     align-items: center;
-    box-sizing: border-box;
-    cursor: pointer;
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    transition: all 0.2s ease-in-out;
-    border: var(--gold-2);
-    background-image: url("/assets/images/texture-15.jpg");
-    &:hover {
-      background-image: url("/assets/images/texture-40.jpg");
-    }
   }
 
   .item-property {
@@ -169,7 +149,7 @@
   align-items: center;
   height: 6rem;
   width: 100%;
-  // border: 1px solid var(--border-color);
+  // border: var(--border);;
   border-radius: 10px;
   // background-color: var(--field-background-color);
   background-image: url("/assets/images/texture-0.jpg");
@@ -187,7 +167,7 @@
     font-size: 1.5rem;
     position: relative;
     border-radius: 10px;
-    background-image: url("/assets/images/texture-15.jpg");
+    background-color: white;
     box-shadow: var(--shadow);
     border: var(--gold-2);
   }
@@ -239,7 +219,7 @@
     justify-content: center;
     align-items: center;
     border-radius: 10px;
-    background-image: url("/assets/images/texture-15.jpg");
+    background-color: white;
     border: var(--gold-2);
     box-shadow: var(--shadow);
   }

src/app/journal/journal-inventory/simple-item-modal/simple-item-modal.component.html

@@ -15,7 +15,7 @@
       </mat-form-field>
     </div>
 
-    <div class="flex-row numbers">
+    <div class="flex numbers">
       <div>
         <div class="input-label">{{ "inventory.weight" | translate }}</div>
         <mat-form-field appearance="outline" style="width: 7rem">
@@ -64,28 +64,16 @@
 
   <div class="horizontal-buttons">
     @if (isUpdate) {
-      <ui-button
-        [color]="'green'"
-        [type]="'confirm'"
-        style="width: 40%"
-        (click)="update()"
-      >
+      <ui-button style="width: 40%" (click)="update()"
+        >{{ "buttons.confirm" | translate }}
       </ui-button>
     } @else {
-      <ui-button
-        [color]="'green'"
-        [type]="'confirm'"
-        style="width: 40%"
-        (click)="add()"
-      >
+      <ui-button style="width: 40%" (click)="add()"
+        >{{ "buttons.confirm" | translate }}
       </ui-button>
     }
-    <ui-button
-      [color]="'red'"
-      [type]="'cancel'"
-      style="width: 40%"
-      (click)="cancel()"
-    >
+    <ui-button style="width: 40%" (click)="cancel()"
+      >{{ "buttons.cancel" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/journal-inventory/simple-item-modal/simple-item-modal.component.scss

@@ -1,6 +1,5 @@
 .dimensions {
   width: 35rem;
-  background-image: url("/assets/images/background-0.jpg");
 }
 
 .numbers {

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

@@ -27,10 +27,6 @@
   <hr />
   <div class="settings-entry">
     Aktuellen Charakter exportieren (coming soon)
-    <ui-button
-      [color]="'neutral'"
-      [type]="'export'"
-      [width]="'w15'"
-    ></ui-button>
+    <ui-button [width]="'w15'">{{ "buttons.export" | translate }} </ui-button>
   </div>
 </div>

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

@@ -2,10 +2,10 @@
   margin: 2rem auto 0 auto;
   width: 600px;
   padding: 2rem;
-  border: var(--border);
+  border: var(--gold-2);
   border-radius: 10px;
   box-shadow: var(--shadow);
-  font-family: var(--bs-body-font-family) !important;
+  background-image: url("/assets/images/texture-0.jpg");
 }
 
 .settings-entry {

src/app/journal/journal-spellbook/custom-spells-modal/custom-spells-modal.component.html

@@ -23,6 +23,8 @@
             {{ "schools." + spell.school | translate }}
           </div>
         </div>
+      } @empty {
+        <div class="empty-list">{{ "spellbook.empty" | translate }}</div>
       }
     </div>
   </div>

src/app/journal/journal-spellbook/custom-spells-modal/custom-spells-modal.component.scss

@@ -2,8 +2,6 @@
   width: 35rem;
   height: 45rem;
   padding: 0;
-  overflow: hidden;
-  background-image: url("/assets/images/background-0.jpg");
 }
 
 .content {
@@ -14,8 +12,6 @@
   box-shadow: var(--shadow-bottom);
   padding: 1.5rem 0 1rem 0;
   margin-top: 0;
-  // color: #58180d;
-  // font-family: "Bookinsanity", serif;
 }
 
 .spell-list {
@@ -69,6 +65,13 @@
   }
 }
 
+.empty-list {
+  text-align: center;
+  margin: 5rem auto;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
 .button-container {
   box-shadow: var(--shadow-top);
   height: 5.5rem;

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

@@ -17,6 +17,8 @@
   gap: 1rem;
   width: 100%;
   height: 8rem;
+  border: var(--gold-2);
+
   div.class:first-child {
     margin-right: 2rem;
   }
@@ -73,22 +75,26 @@
 }
 
 .nav-link {
-  background-color: var(--new-tab);
+  background-color: var(--tab);
   color: black;
   font-size: 1.123rem;
   font-weight: 500;
   width: 8rem;
   height: 4rem;
   border-radius: 10px 10px 0 0;
-  transition: all 0.2s ease-in-out;
   border: var(--border);
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    background-color: var(--tab-hover);
+  }
 }
 
 .nav-link.active {
-  background-color: var(--new-tab-active);
+  background-color: var(--tab-active);
   width: 9.25rem;
   font-size: 1.25rem;
   font-weight: 550;
+  border: var(--border);
 }
 
 .card-container {
@@ -102,6 +108,7 @@
   background-image: url("/assets/images/texture-0.jpg");
   border-radius: 0 0 10px 10px;
   box-shadow: var(--shadow);
+  border: var(--gold-1);
 }
 
 spellcard {

src/app/journal/journal-spellcards/add-card/add-card.component.scss

@@ -2,23 +2,22 @@
   position: relative;
   height: 20rem;
   width: 15rem;
-  border: var(--border);
   border-radius: 10px;
+  border: var(--gold-2);
   box-shadow: var(--shadow);
   overflow: hidden;
   transition: all 0.3s ease-in-out;
+  background-image: url("/assets/images/texture-5.jpg");
 
   .clickable-card {
     width: 100%;
     height: 100%;
     position: relative;
     cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    background-image: url("/assets/images/background-0.jpg");
-    filter: brightness(0.8);
-
+    border-radius: 10px;
+    background-image: url("/assets/images/texture-5.jpg");
     &:hover {
-      filter: brightness(0.9);
+      background-image: url("/assets/images/texture-10.jpg");
     }
 
     .add-icon {
@@ -50,10 +49,6 @@
   font-weight: 600;
 }
 
-.active {
-  // font-size: 1.125rem;
-}
-
 .inactive {
   color: rgb(124, 124, 124);
 }
@@ -61,9 +56,7 @@
 .spell-selection {
   width: 100%;
   height: 100%;
-  // background-color: var(--background-color);
-  background-image: url("/assets/images/background-0.jpg");
-  filter: brightness(0.9);
+  background-image: url("/assets/images/texture-5.jpg");
   padding-top: 0.375rem;
 }
 
@@ -96,7 +89,7 @@
     box-shadow: var(--shadow);
     cursor: pointer;
     background-image: url("/assets/images/texture-0.jpg");
-    border: 1px solid var(--border-brown);
+    border: var(--gold-2);
     &:hover {
       filter: brightness(0.9);
     }

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

@@ -13,7 +13,7 @@
   gap: 1rem;
   padding: 0.25rem 1rem;
   background-image: url("/assets/images/texture-0.jpg");
-  border: solid 1px var(--border-color);
+  border: var(--border);
   border-bottom: none;
   border-radius: 10px 10px 0 0;
   cursor: pointer;
@@ -26,15 +26,15 @@
 
 @keyframes borders {
   0% {
-    border: solid 1px var(--border-color);
+    border: var(--border);
     border-radius: 10px 10px 0 0;
   }
   50% {
-    border: solid 1px var(--border-color);
+    border: var(--border);
     border-radius: 10px 10px 0 0;
   }
   100% {
-    border: 1px solid var(--border-color);
+    border: var(--border);
     border-radius: 10px;
   }
 }
@@ -62,7 +62,7 @@
 }
 
 .spell-list {
-  border: solid 1px var(--border-color);
+  border: var(--border);
   height: 22rem;
   background-image: url("/assets/images/texture-0.jpg");
   border-radius: 0 10px 10px 10px;
@@ -109,7 +109,7 @@ spellcard {
   width: 15rem;
   font-size: 1.25rem;
   font-weight: 600;
-  border: solid 1px var(--border-color);
+  border: var(--border);
   border-radius: 10px;
   display: flex;
   justify-content: center;

src/app/journal/journal-stats/ability-panel/ability-panel.component.scss

@@ -18,19 +18,19 @@
   }
   > :first-child {
     border-radius: 8px 0 0 0;
-    border-right: 1px solid var(--border-color);
+    border-right: var(--border);
   }
   > :nth-child(2) {
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
+    border-left: var(--border);
+    border-right: var(--border);
   }
   > :nth-child(3) {
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
+    border-left: var(--border);
+    border-right: var(--border);
   }
   > :last-child {
     border-radius: 0 8px 0 0;
-    border-left: 1px solid var(--border-color);
+    border-left: var(--border);
   }
 }
 
@@ -39,7 +39,7 @@
   font-size: 1.375rem;
   font-weight: 600;
   color: black;
-  border-bottom: solid 1px var(--border-color);
+  border-bottom: var(--border);
   border-right: 0;
   border-left: 0;
   border-top: 0;
@@ -49,7 +49,7 @@
 
   &.active {
     background-color: var(--tab-active);
-    border-bottom: 3px solid var(--border-color);
+    border-bottom: 3var (--border);
   }
 }
 

src/app/journal/journal-stats/ability-panel/ability-table/ability-details/ability-details.component.html

@@ -1,5 +1,7 @@
 <div class="title">{{ ability?.name }}</div>
 
+<divider [appearance]="'gold-2'" class="t-0625"></divider>
+
 <div class="content" [innerHTML]="ability?.longDescription"></div>
 
 <div class="details-cost-charge">
@@ -11,18 +13,10 @@
 </div>
 
 <div class="vertical-buttons bottom">
-  <ui-button
-    [color]="'green'"
-    [width]="'w20'"
-    [type]="'edit'"
-    (click)="close('update')"
-  >
+  <ui-button [width]="'w20'" (click)="close('update')"
+    >{{ "buttons.edit" | translate }}
   </ui-button>
-  <ui-button
-    [color]="'red'"
-    [width]="'w20'"
-    [type]="'delete'"
-    (click)="close('delete')"
-  >
+  <ui-button [width]="'w20'" (click)="close('delete')"
+    >{{ "buttons.delete" | translate }}
   </ui-button>
 </div>

src/app/journal/journal-stats/ability-panel/ability-table/ability-details/ability-details.component.scss

@@ -1,9 +1,11 @@
 .details-cost-charge {
   display: flex;
-  background-color: var(--secondary-color);
   justify-content: space-between;
-  margin: 0, 875rem;
-  font-size: 600;
+  background-image: url("/assets/images/texture-10.jpg");
+  font-weight: 600;
+  font-size: 1.125rem;
   padding: 0.5rem 2rem;
+  margin-top: 1rem;
+  border: var(--gold-3);
   border-radius: 10px;
 }

src/app/journal/journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component.html

@@ -7,8 +7,6 @@
     }
   </div>
 
-  <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
-
   <div class="flex-form t-15">
     <div>
       <div class="input-label">{{ "modal.name" | translate }}</div>
@@ -45,7 +43,7 @@
       <div class="hint">{{ "modal.longHint" | translate }}</div>
     </div>
 
-    <div class="flex-row">
+    <div class="row">
       <div class="w-100">
         <div class="input-label">{{ "modal.cost" | translate }}</div>
 

src/app/journal/journal-stats/ability-panel/proficiencies-table/proficiencies-table.component.scss

@@ -14,7 +14,7 @@ mat-expansion-panel {
   margin-left: 10px;
   margin-bottom: 1rem !important;
   // background-color: var(--items);
-  // border: var(--border) !important;
+  // border: var(--border); !important;
   border: var(--gold-2) !important;
   background-image: url("/assets/images/texture-0.jpg");
   border-radius: 10px !important;

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.scss

@@ -11,7 +11,7 @@
 .spell-container {
   margin: 15px 10px;
   // background-color: var(--items);
-  // border: var(--border);
+  // border: var(--border);;
   border-radius: 10px;
   box-shadow: var(--shadow);
   padding-bottom: 1.25rem;
@@ -60,7 +60,7 @@ input[type="checkbox"]:checked::after {
   left: 50%;
   width: 12px;
   height: 12px;
-  background: var(--gold-active);
+  background: var(--gold-dark);
   transform: translate(-50%, -50%);
 }
 
@@ -74,7 +74,6 @@ input[type="checkbox"]:checked::after {
   border: var(--gold-2);
   box-shadow: var(--shadow);
   background-color: white;
-  // background-image: url("/assets/images/texture-15.jpg");
   display: flex;
   justify-content: center;
   align-items: center;

src/app/journal/journal-stats/ability-panel/trait-table/trait-details/trait-details.component.html

@@ -1,20 +1,14 @@
 <div class="title">{{ trait?.name }}</div>
 
+<divider [appearance]="'gold-2'" class="t-0625"></divider>
+
 <div class="content" [innerHTML]="trait?.longDescription"></div>
 
 <div class="vertical-buttons bottom">
-  <ui-button
-    [color]="'green'"
-    [type]="'edit'"
-    [width]="'w20'"
-    (click)="close('update')"
-  >
+  <ui-button [width]="'w20'" (click)="close('update')"
+    >{{ "buttons.edit" | translate }}
   </ui-button>
-  <ui-button
-    [color]="'red'"
-    [type]="'delete'"
-    [width]="'w20'"
-    (click)="close('delete')"
-  >
+  <ui-button [width]="'w20'" (click)="close('delete')"
+    >{{ "buttons.delete" | translate }}
   </ui-button>
 </div>

src/app/journal/journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component.html

@@ -6,7 +6,6 @@
       {{ "traits.modal.addTrait" | translate }}
     }
   </div>
-  <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
   <div class="flex-form t-15">
     <div>
       <div class="input-label">{{ "modal.name" | translate }}</div>

src/app/journal/journal-stats/attribute-panel/attribute-field/attribute-details/attribute-details.component.scss

@@ -44,7 +44,7 @@
 }
 
 mat-expansion-panel {
-  border: var(--border) !important;
+  border: var(--gold-2) !important;
   border-radius: 10px !important;
   box-shadow: var(--shadow) !important;
   margin-top: 2.5rem;

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.html

@@ -80,18 +80,10 @@
 
 <!-- NAVIGATION BUTTONS -->
 <div class="vertical-buttons bottom">
-  <ui-button
-    [color]="'green'"
-    [type]="'save'"
-    [width]="'w20'"
-    (click)="close('update')"
-  >
+  <ui-button [width]="'w20'" (click)="close('update')"
+    >{{ "buttons.apply" | translate }}
   </ui-button>
-  <ui-button
-    [color]="'red'"
-    [type]="'discard'"
-    [width]="'w20'"
-    (click)="close('cancel')"
-  >
+  <ui-button [width]="'w20'" (click)="close('cancel')"
+    >{{ "buttons.discard" | translate }}
   </ui-button>
 </div>

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.scss

@@ -24,7 +24,7 @@
   }
 }
 mat-expansion-panel {
-  border: var(--border) !important;
+  border: var(--gold-1) !important;
   box-shadow: none !important;
   mat-expansion-panel-header {
     font-size: 1.25rem;

src/app/journal/journal-stats/life/hit-dice/hit-dice.component.scss

@@ -30,8 +30,8 @@ input[type="checkbox"]:checked::after {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 12px;
-  height: 12px;
-  background: #815139;
+  width: 11px;
+  height: 11px;
+  background: var(--gold);
   transform: translate(-50%, -50%);
 }

src/app/journal/journal-stats/life/life-details/life-details.component.scss

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
-  // gap: 1.5rem;
   margin-top: 3rem;
   margin-bottom: 2rem;
 }
@@ -42,12 +41,12 @@
   background-color: var(--tab);
   border-top: 0;
   border-left: 0;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: var(--border);
   border-right: 0;
 
   &.active {
     background-color: var(--tab-active);
-    border-bottom: 3px solid var(--border-color);
+    border-bottom: 3var (--border);
   }
 }
 
@@ -60,22 +59,22 @@
   > :first-child {
     border-radius: 10px 0 0 0;
     &.active {
-      border-right: 1px solid var(--border-color);
+      border-right: var(--border);
     }
   }
   > :last-child {
     border-radius: 0 10px 0 0;
-    border-right: 1px solid var(--border-color);
+    border-right: var(--border);
     &.active {
-      border-left: 1px solid var(--border-color);
+      border-left: var(--border);
     }
   }
 }
 
 .life-data-container {
   height: calc(100% - 30rem);
-  background-color: var(--field-background-color);
-  border: var(--border);
+  background-image: url("/assets/images/texture-10.jpg");
+  border: var(--gold-2);
   border-radius: 0 0 10px 10px;
   padding: 0.5rem;
 }

src/app/journal/journal-stats/save-throw-panel/save-throw-details/save-throw-details.component.html

@@ -25,19 +25,11 @@
 
 @if (showButtonsContainer) {
   <div class="vertical-buttons bottom">
-    <ui-button
-      [color]="'green'"
-      [type]="'apply'"
-      [width]="'w20'"
-      (click)="close('update')"
-    >
+    <ui-button [width]="'w20'" (click)="close('update')"
+      >{{ "buttons.apply" | translate }}
     </ui-button>
-    <ui-button
-      [color]="'red'"
-      [type]="'discard'"
-      [width]="'w20'"
-      (click)="close('cancel')"
-    >
+    <ui-button [width]="'w20'" (click)="close('cancel')"
+      >{{ "buttons.discard" | translate }}
     </ui-button>
   </div>
 }

src/app/journal/journal-stats/skill-panel/skill-details/skill-details.component.html

@@ -18,19 +18,11 @@
 
 @if (showButtonsContainer) {
   <div class="vertical-buttons bottom">
-    <ui-button
-      [color]="'green'"
-      [type]="'apply'"
-      [width]="'w20'"
-      (click)="close('update')"
-    >
+    <ui-button [width]="'w20'" (click)="close('update')"
+      >{{ "buttons.apply" | translate }}
     </ui-button>
-    <ui-button
-      [color]="'red'"
-      [type]="'discard'"
-      [width]="'w20'"
-      (click)="close('cancel')"
-    >
+    <ui-button [width]="'w20'" (click)="close('cancel')"
+      >{{ "buttons.discard" | translate }}
     </ui-button>
   </div>
 }

src/app/journal/journal-stats/weapons-container/spell-table/spell-table.component.scss

@@ -6,7 +6,7 @@
   text-align: center;
   font-weight: 700;
   box-shadow: var(--shadow-bottom);
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: var(--border);
 }
 
 .item-list {

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component.html

@@ -2,14 +2,14 @@
 
 <div class="subheading left">{{ "weapons.attack" | translate }}</div>
 
-<div class="flex-row">
+<div class="row">
   <div class="label">{{ "general.modifier" | translate }}:</div>
   <span>{{ weapon?.attackBonus }}</span>
 </div>
 
 <!-- Singel Damage -->
 @if (!weapon?.isVersatile) {
-  <div class="flex-row">
+  <div class="row">
     <div class="label">{{ "weapons.header.damage" | translate }}:</div>
     @for (damage of weapon?.damage; let index = $index; track damage) {
       {{ damage.diceNumber }} {{ "general.dice" | translate

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-modal/weapon-modal.component.html

@@ -14,7 +14,7 @@
     </mat-form-field>
     <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
 
-    <div class="flex-row t-1">
+    <div class="row t-1">
       <div class="checkbox-column">
         <div class="checkbox-row">
           <input id="proficient" type="checkbox" [(ngModel)]="proficient" />
@@ -85,13 +85,13 @@
         ngbNav
         #nav="ngbNav"
         [(activeId)]="active"
-        class="flex-column navigation-bar"
+        class="column navigation-bar"
         orientation="vertical"
       >
         <ng-container ngbNavItem="damage">
           <button ngbNavLink>Schaden</button>
           <ng-template ngbNavContent>
-            <div class="flex-row">
+            <div class="row">
               <div class="w-50">
                 <div class="input-label">
                   {{ "weapons.modal.attackBonus" | translate }}
@@ -125,7 +125,7 @@
               }
             </div>
 
-            <div class="flex-row t-05">
+            <div class="row t-05">
               @for (
                 damageEntry of damage;
                 let index = $index;
@@ -236,7 +236,7 @@
           <ng-template ngbNavContent>
             <div class="numbers">
               @if (isRanged) {
-                <div class="flex-row t-1">
+                <div class="row t-1">
                   <div class="w-50">
                     <div class="input-label">
                       {{ "weapons.modal.normalRange" | translate }}
@@ -272,7 +272,7 @@
                 </div>
               }
               @if (canBeThrown) {
-                <div class="flex-row t-2">
+                <div class="row t-2">
                   <div class="w-50">
                     <div class="input-label">
                       {{ "weapons.modal.normalThrowRange" | translate }}

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-modal/weapon-modal.component.scss

@@ -58,7 +58,7 @@
   }
 }
 
-div.nav-pills.flex-column.nav {
+div.nav-pills.column.nav {
   border-right: 1px solid darkgray;
   padding-right: 4px;
 }

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.scss

@@ -6,7 +6,7 @@
   text-align: center;
   font-weight: 700;
   box-shadow: var(--shadow);
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: var(--border);
 }
 
 .item-list {

src/app/journal/journal-stats/weapons-container/weapons-container.component.scss

@@ -31,14 +31,14 @@
   > :first-child {
     border-radius: 8px 0 0 0;
     &.active {
-      // border-right: 1px solid var(--border-color);
+      // border-right: var(--border);;
     }
   }
   > :last-child {
     border-radius: 0 8px 0 0;
-    // border-right: 1px solid var(--border-color);
+    // border-right: var(--border);;
     &.active {
-      // border-left: 1px solid var(--border-color);
+      // border-left: var(--border);;
     }
   }
 }

src/app/journal/spell-modal/spell-modal.component.html

@@ -12,9 +12,10 @@
     <mat-form-field appearance="outline" class="w-100">
       <input matInput [(ngModel)]="name" />
     </mat-form-field>
-    <hr />
+    <!-- <hr /> -->
+    <divider [appearance]="'gold-1'" class="t-05"></divider>
 
-    <div class="flex-row t-1">
+    <div class="row t-1">
       <div class="checkbox-column">
         <div class="checkbox-row">
           <input id="verbal" type="checkbox" [(ngModel)]="needsVerbal" />
@@ -189,7 +190,7 @@
       </div>
     </div>
 
-    <hr />
+    <divider [appearance]="'gold-1'" class="b-05 t-05"></divider>
 
     <!-- TAB-PANEL -->
     <div class="d-flex">
@@ -197,7 +198,7 @@
         ngbNav
         #nav="ngbNav"
         [(activeId)]="active"
-        class="flex-column navigation-bar"
+        class="column navigation-bar"
         orientation="vertical"
       >
         <!-- DAMAGE -->
@@ -210,7 +211,7 @@
             </button>
           }
           <ng-template ngbNavContent>
-            <div class="tab-content flex-row t-05">
+            <div class="tab-content row t-05">
               @for (
                 damageEntry of damage;
                 let index = $index;
@@ -397,24 +398,20 @@
       ></div>
     </div>
 
-    <hr class="b-0" />
+    <divider [appearance]="'gold-1'" class="t-05"></divider>
   </div>
 
   <!-- Button section -->
   <div class="horizontal-buttons">
-    <ui-button
-      [color]="'green'"
-      [type]="isModification ? 'apply' : 'add'"
-      style="width: 40%"
-      (click)="isModification ? update() : add()"
-    >
+    <ui-button style="width: 40%" (click)="isModification ? update() : add()">
+      @if (isModification) {
+        {{ "buttons.apply" | translate }}
+      } @else {
+        {{ "buttons.add" | translate }}
+      }
     </ui-button>
-    <ui-button
-      [color]="'red'"
-      [type]="'cancel'"
-      style="width: 40%"
-      (click)="cancel()"
-    >
+    <ui-button style="width: 40%" (click)="cancel()"
+      >{{ "buttons.cancel" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/spell-modal/spell-modal.component.scss

@@ -1,9 +1,5 @@
 @import "../../../responsive";
 
-.dimensions {
-  background-image: url("/assets/images/background-0.jpg");
-}
-
 .checkbox-column {
   width: 33.3%;
   display: flex;
@@ -38,7 +34,7 @@
   }
 }
 
-.flex-row,
+.row,
 .range-container {
   ::ng-deep .mat-mdc-text-field-wrapper {
     width: 11rem !important;
@@ -85,7 +81,7 @@
   }
 }
 
-div.nav-pills.flex-column.nav {
+div.nav-pills.column.nav {
   border-right: 1px solid darkgray;
   padding-right: 4px;
 }
@@ -100,7 +96,7 @@ div.nav-pills.flex-column.nav {
   gap: 1rem;
   height: 20rem;
   align-items: center;
-  border-right: 1px solid rgba(0, 0, 0, 0.125);
+  border-right: var(--gold-1);
   padding-right: 4px;
   width: 11rem;
 
@@ -109,12 +105,11 @@ div.nav-pills.flex-column.nav {
     border-radius: 10px;
     transition: all 0.25s ease-in-out;
     font-weight: 600;
-    color: var(--text);
-
+    color: black;
     &.active,
     &:hover {
-      background-color: var(--tab-active);
-      background-color: var(--new-tab);
+      background-color: var(--gold);
+      background-color: var(--gold);
 
       box-shadow: var(--shadow);
     }

src/assets/i18n/de.json

@@ -800,6 +800,7 @@
       "9": "9. Grad"
     },
     "manage": "Eigene Zauber verwalten",
+    "empty": "Noch keine Zauber erstellt",
     "add": "Neuen Zauber erstellen",
     "noSpells": "Für diesen Filter gibt es keine Zauber",
     "delete": "Ausgewählte Zauber löschen",

src/assets/i18n/en.json

@@ -795,6 +795,7 @@
       "9": "9th Level"
     },
     "manage": "Manage custom spells",
+    "empty": "No spells created",
     "add": "Create new spell",
     "noSpells": "No spells found for this filter",
     "delete": "Delete selected spells",

src/colors.scss

@@ -1,4 +1,5 @@
 :root {
+  // BUTTON COLORS
   --accept: #84a36f;
   --accept-hover: #6f9158;
   --delete: #a45a52;
@@ -7,71 +8,13 @@
   --edit-hover: #6f8e9f;
   --neutral: #b9835d;
   --neutral-hover: #a76b43;
-  --tab: #c1ae75;
-  --tab-active: #98895c;
-
-  --abjuration-background: #cab8de;
-  --abjuration-border: 0 0 0 2px #171314, 0 0 0 5px #9586a5;
-  --abjuration-border-small: 0 0 0 1px #171314, 0 0 0 3px #9586a5;
-  --abjuration-border-large: 0 0 0 3px #171314, 0 0 0 8px #9586a5;
-  --conjuration-background: #714c81;
-  --conjuration-border: 0 0 0 2px #171314, 0 0 0 5px #744987;
-  --conjuration-border-small: 0 0 0 1px #171314, 0 0 0 3px #744987;
-  --conjuration-border-large: 0 0 0 3px #171314, 0 0 0 8px #744987;
-  --divination-background: #f0e3ce;
-  --divination-border: 0 0 0 2px #171314, 0 0 0 5px #ffffff;
-  --divination-border-small: 0 0 0 1px #171314, 0 0 0 3px #ffffff;
-  --divination-border-large: 0 0 0 3px #171314, 0 0 0 8px #ffffff;
-  --enchantment-background: #629179;
-  --enchantment-border: 0 0 0 2px #171314, 0 0 0 5px #26714a;
-  --enchantment-border-small: 0 0 0 1px #171314, 0 0 0 3px #26714a;
-  --enchantment-border-large: 0 0 0 3px #171314, 0 0 0 8px #26714a;
-  --evocation-background: #a46a7d;
-  --evocation-border: 0 0 0 2px #171314, 0 0 0 5px #863f57;
-  --evocation-border-small: 0 0 0 1px #171314, 0 0 0 3px #863f57;
-  --evocation-border-large: 0 0 0 3px #171314, 0 0 0 8px #863f57;
-  --illusion-background: #69a;
-  --illusion-border: 0 0 0 2px #171314, 0 0 0 5px #2d6475;
-  --illusion-border-small: 0 0 0 1px #171314, 0 0 0 3px #2d6475;
-  --illusion-border-large: 0 0 0 3px #171314, 0 0 0 8px #2d6475;
-  --necromancy-background: #000000;
-  --necromancy-border: 0 0 0 2px #171314, 0 0 0 5px #36353a;
-  --necromancy-border-small: 0 0 0 1px #171314, 0 0 0 3px #36353a;
-  --necromancy-border-large: 0 0 0 3px #171314, 0 0 0 8px #36353a;
-  --transmutation-background: rgb(51, 52, 138);
-  --transmutation-border-small: 0 0 0 1px #171314, 0 0 2px #8f088f,
-    0 0 3px #7f088f, 0 0 4px #69088f, 0 0 5px #3a088f, 0 0 6px #080a8f;
-  --transmutation-border: 0 0 0 2px #171314, 0 0 3px #8f088f, 0 0 6px #7f088f,
-    0 0 9px #69088f, 0 0 12px #3a088f, 0 0 15px #080a8f;
-  --transmutation-border-large: 0 0 0 3px #171314, 0 0 4px #8f088f,
-    0 0 5px #7f088f, 0 0 11px #69088f, 0 0 14px #3a088f, 0 0 17px #080a8f;
-
-  --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
-  --shadow-inverted: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
-  --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
-  --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
-  --shadow-right: 5px 0px 10px 0px rgba(0, 0, 0, 0.5);
-  --shadow-left: -5px 0px 10px 0px rgba(0, 0, 0, 0.5);
-
-  --primary-old: #b0826b;
-  --primary: #c1ae75;
-  --border-color: #8d8c8c;
 
   // Deprecated
   --background-color: #fff2e9;
   --field-background-color: #efc8af;
   --border-brown: #9b8559;
 
-  --new-tab: #b5a27d;
-  --new-tab-active: #9b8559;
-  --new-border: 1.5px solid #9b8559;
-
-  --header: #ffdec6;
-  --items: #fff2e9;
-  --items-hover: #f7e3d7;
-  --border: 1px solid var(--border-color);
-
-  //
+  // General Colors
   --gold: #c1ae75;
   --gold-dark: #c0a042;
   --gold-active: #98895c;
@@ -79,8 +22,15 @@
   --grey: #8d8c8c;
   --grey-dark: #6e6d6d;
 
-  // BORDERS
+  --primary: #c1ae75;
+  --border-color: #8d8c8c;
 
+  --tab: #c1ae75;
+  --tab-hover: #b5a36e;
+  --tab-active: #a29263;
+
+  // BORDERS
+  --border: 1px solid var(--border-color);
   --gold-1: 1px solid var(--gold);
   --gold-2: 2px solid var(--gold);
   --gold-3: 3px solid var(--gold);
@@ -104,4 +54,48 @@
   --grey-dark-3: 3px solid var(--grey-dark);
   --grey-dark-4: 4px solid var(--grey-dark);
   --grey-dark-5: 5px solid var(--grey-dark);
+
+  // SHADOWS
+  --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-inverted: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-right: 5px 0px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-left: -5px 0px 10px 0px rgba(0, 0, 0, 0.5);
+
+  --abjuration-background: #cab8de;
+  --abjuration-border: 0 0 0 2px #171314, 0 0 0 5px #9586a5;
+  --abjuration-border-small: 0 0 0 1px #171314, 0 0 0 3px #9586a5;
+  --abjuration-border-large: 0 0 0 3px #171314, 0 0 0 8px #9586a5;
+  --conjuration-background: #714c81;
+  --conjuration-border: 0 0 0 2px #171314, 0 0 0 5px #744987;
+  --conjuration-border-small: 0 0 0 1px #171314, 0 0 0 3px #744987;
+  --conjuration-border-large: 0 0 0 3px #171314, 0 0 0 8px #744987;
+  --divination-background: #f0e3ce;
+  --divination-border: 0 0 0 2px #171314, 0 0 0 5px #ffffff;
+  --divination-border-small: 0 0 0 1px #171314, 0 0 0 3px #ffffff;
+  --divination-border-large: 0 0 0 3px #171314, 0 0 0 8px #ffffff;
+  --enchantment-background: #629179;
+  --enchantment-border: 0 0 0 2px #171314, 0 0 0 5px #26714a;
+  --enchantment-border-small: 0 0 0 1px #171314, 0 0 0 3px #26714a;
+  --enchantment-border-large: 0 0 0 3px #171314, 0 0 0 8px #26714a;
+  --evocation-background: #a46a7d;
+  --evocation-border: 0 0 0 2px #171314, 0 0 0 5px #863f57;
+  --evocation-border-small: 0 0 0 1px #171314, 0 0 0 3px #863f57;
+  --evocation-border-large: 0 0 0 3px #171314, 0 0 0 8px #863f57;
+  --illusion-background: #69a;
+  --illusion-border: 0 0 0 2px #171314, 0 0 0 5px #2d6475;
+  --illusion-border-small: 0 0 0 1px #171314, 0 0 0 3px #2d6475;
+  --illusion-border-large: 0 0 0 3px #171314, 0 0 0 8px #2d6475;
+  --necromancy-background: #000000;
+  --necromancy-border: 0 0 0 2px #171314, 0 0 0 5px #36353a;
+  --necromancy-border-small: 0 0 0 1px #171314, 0 0 0 3px #36353a;
+  --necromancy-border-large: 0 0 0 3px #171314, 0 0 0 8px #36353a;
+  --transmutation-background: rgb(51, 52, 138);
+  --transmutation-border-small: 0 0 0 1px #171314, 0 0 2px #8f088f,
+    0 0 3px #7f088f, 0 0 4px #69088f, 0 0 5px #3a088f, 0 0 6px #080a8f;
+  --transmutation-border: 0 0 0 2px #171314, 0 0 3px #8f088f, 0 0 6px #7f088f,
+    0 0 9px #69088f, 0 0 12px #3a088f, 0 0 15px #080a8f;
+  --transmutation-border-large: 0 0 0 3px #171314, 0 0 4px #8f088f,
+    0 0 5px #7f088f, 0 0 11px #69088f, 0 0 14px #3a088f, 0 0 17px #080a8f;
 }

src/info-row.scss

@@ -0,0 +1,59 @@
+.responsive-small {
+  display: block;
+}
+
+.responsive-large {
+  display: none;
+}
+.responsive-large {
+  @include width-small {
+    display: block;
+  }
+}
+
+.responsive-small {
+  @include width-small {
+    display: none;
+  }
+}
+
+.info-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  border: var(--gold-2);
+  background-image: url("/assets/images/texture-0.jpg");
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  height: 6rem;
+  width: 7rem;
+
+  @include width-small {
+    width: 10rem;
+  }
+}
+
+.info-input {
+  border: none;
+  outline: none;
+  text-align: center;
+  background-color: transparent;
+  width: 5rem;
+  margin-top: 0.375rem;
+  font-size: 2rem;
+  font-weight: 600;
+}
+.info-input::-webkit-outer-spin-button,
+.info-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+.info-label {
+  font-size: 1.25rem;
+  font-weight: 600;
+  text-align: center;
+  padding: 0.25rem 0.5rem;
+}

src/responsive.scss

@@ -46,6 +46,7 @@
   }
 }
 
+// BLOEW ARE TESTLINES TO SIMULATE DIFFERENT SCREEN SIZES
 .h840 {
   position: absolute;
   border-top: 2px solid green;

src/styles.scss

@@ -9,10 +9,11 @@
 @import "colors";
 @import "responsive";
 @import "fonts";
+@import "info-row";
 
 // #region new styles
 
-// Wraps all journal components and gives general layout and styling
+// Wraps journal components that have a limited centered layout.
 .journal-content {
   position: relative;
   width: 1332px;
@@ -86,7 +87,6 @@
   border-radius: 10px;
   box-shadow: var(--shadow);
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
   border: var(--gold-2);
   background-image: url("/assets/images/texture-5.jpg");
   &:hover {
@@ -140,18 +140,20 @@
 //  Checkbox
 
 input[type="checkbox"] {
-  accent-color: var(--accept) !important;
+  accent-color: var(--gold) !important;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
 // Scrollbar
 ::-webkit-scrollbar {
-  width: 0.5rem;
+  width: 0.375rem;
   margin: 0.125rem 0;
   height: 0.5rem;
 }
 
 ::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: #e6e6e6;
   border-radius: 10px;
 }
 
@@ -179,75 +181,6 @@ input[type="checkbox"] {
   align-items: center;
 }
 
-// TODO: Check which of the below are still used
-
-//  Info Row
-
-.info-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  border: var(--gold-2);
-  background-image: url("/assets/images/texture-0.jpg");
-  box-shadow: var(--shadow);
-  border-radius: 10px;
-  height: 6rem;
-  width: 7rem;
-
-  @include width-small {
-    width: 10rem;
-  }
-}
-// // Responsive styles
-.responsive-small {
-  display: block;
-}
-
-.responsive-large {
-  display: none;
-}
-.responsive-large {
-  @include width-small {
-    display: block;
-  }
-}
-
-.responsive-small {
-  @include width-small {
-    display: none;
-  }
-}
-
-.info-input {
-  border: none;
-  outline: none;
-  text-align: center;
-  background-color: transparent;
-  width: 5rem;
-  margin-top: 0.375rem;
-  font-size: 2rem;
-  font-weight: 600;
-}
-.info-input::-webkit-outer-spin-button,
-.info-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-}
-
-.info-label {
-  font-size: 1.25rem;
-  font-weight: 600;
-  text-align: center;
-  padding: 0.25rem 0.5rem;
-}
-
-input[type="checkbox"] {
-  height: 1.25rem;
-  width: 1.25rem;
-}
-
 // DETAILS + MODAL
 
 .dimensions {
@@ -306,7 +239,7 @@ input[type="checkbox"] {
   flex-direction: column;
   gap: 1.5rem;
 
-  .flex-row {
+  .row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -339,16 +272,6 @@ body {
   font-family: var(--bs-body-font-family) !important;
 }
 
-.flex-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
 // Overriding the default styles of angular material
 
 .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled)