Merge branch 'feature/restyling' into develop

.nx/cache/d/daemon.log

@@ -466711,3 +466711,472 @@ To fix this, set a unique name for each project in a project.json inside the pro
     at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
 [NX Daemon Server] - 2024-02-11T18:59:56.509Z - Time taken for 'hash changed files from watcher' 379.8712999820709ms
 [NX Daemon Server] - 2024-02-11T18:59:56.509Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-12T16:32:22.402Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-12T16:32:22.404Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-12T16:32:22.409Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-12T16:32:22.410Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-12T16:32:22.410Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-12T16:32:22.416Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-12T16:32:23.464Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-12T16:32:23.464Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-12T16:32:23.465Z - Time taken for 'hash changed files from watcher' 330.7449999451637ms
+[NX Daemon Server] - 2024-02-12T16:32:23.465Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-12T17:20:12.543Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-12T17:20:12.546Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-12T17:20:12.557Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-12T17:20:12.558Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-12T17:20:12.559Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-12T17:20:12.561Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-12T17:20:12.642Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-12T17:20:12.643Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-12T17:20:12.643Z - Time taken for 'hash changed files from watcher' 27.236500024795532ms
+[NX Daemon Server] - 2024-02-12T17:20:12.643Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-13T06:38:43.989Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-13T06:38:43.992Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-13T06:38:44.001Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-13T06:38:44.002Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-13T06:38:44.015Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-13T06:38:44.017Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-13T06:38:45.073Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-13T06:38:45.073Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-13T06:38:45.073Z - Time taken for 'hash changed files from watcher' 313.7829999923706ms
+[NX Daemon Server] - 2024-02-13T06:38:45.073Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-13T06:38:54.832Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-13T06:38:54.835Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-13T06:38:54.836Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-13T06:38:54.837Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-13T06:38:54.837Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-13T06:38:54.841Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-13T06:38:54.929Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-13T06:38:54.929Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-13T06:38:54.930Z - Time taken for 'hash changed files from watcher' 44.179800033569336ms
+[NX Daemon Server] - 2024-02-13T06:38:54.930Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-13T10:42:10.357Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-13T10:42:10.362Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-13T10:42:10.363Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-13T10:42:10.364Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2024-02-13T10:42:10.364Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-13T10:42:10.367Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-13T10:42:10.453Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-13T10:42:10.453Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-13T10:42:10.453Z - Time taken for 'hash changed files from watcher' 28.785999953746796ms
+[NX Daemon Server] - 2024-02-13T10:42:10.454Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-14T08:34:46.415Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-14T08:34:46.417Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-14T08:34:46.429Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-14T08:34:46.430Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-14T08:34:46.430Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-14T08:34:46.434Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-14T08:34:47.971Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-14T08:34:47.972Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-14T08:34:47.972Z - Time taken for 'hash changed files from watcher' 520.9082000255585ms
+[NX Daemon Server] - 2024-02-14T08:34:47.972Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-14T08:35:23.416Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-14T08:35:23.418Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-14T08:35:23.426Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-14T08:35:23.427Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-14T08:35:23.427Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-14T08:35:23.428Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-14T08:35:23.503Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-14T08:35:23.503Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-14T08:35:23.504Z - Time taken for 'hash changed files from watcher' 31.13840001821518ms
+[NX Daemon Server] - 2024-02-14T08:35:23.504Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-14T09:52:22.208Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-14T09:52:22.212Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-14T09:52:22.223Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-14T09:52:22.224Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-14T09:52:22.224Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-14T09:52:22.228Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-14T09:52:22.334Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-14T09:52:22.334Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-14T09:52:22.334Z - Time taken for 'hash changed files from watcher' 28.218699991703033ms
+[NX Daemon Server] - 2024-02-14T09:52:22.335Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-14T14:37:09.282Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-14T14:37:09.285Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-14T14:37:09.288Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-14T14:37:09.289Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2024-02-14T14:37:09.289Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-14T14:37:09.291Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-14T14:37:10.689Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-14T14:37:10.689Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-14T14:37:10.689Z - Time taken for 'hash changed files from watcher' 424.6177000403404ms
+[NX Daemon Server] - 2024-02-14T14:37:10.690Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-15T16:12:32.778Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-15T16:12:32.787Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-15T16:12:32.789Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-15T16:12:32.789Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2024-02-15T16:12:32.790Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-15T16:12:32.794Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-15T16:12:34.972Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-15T16:12:34.972Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-15T16:12:34.973Z - Time taken for 'hash changed files from watcher' 598.3834999999963ms
+[NX Daemon Server] - 2024-02-15T16:12:34.974Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-15T17:16:46.920Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-15T17:16:46.926Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-15T17:16:46.927Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-15T17:16:46.927Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2024-02-15T17:16:46.928Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-15T17:16:46.930Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-15T17:16:47.043Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-15T17:16:47.043Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-15T17:16:47.043Z - Time taken for 'hash changed files from watcher' 45.21750000026077ms
+[NX Daemon Server] - 2024-02-15T17:16:47.043Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-16T07:05:12.711Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-16T07:05:12.713Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-16T07:05:12.724Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-16T07:05:12.725Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-16T07:05:12.725Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-16T07:05:12.728Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-16T07:05:13.825Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-16T07:05:13.825Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-16T07:05:13.826Z - Time taken for 'hash changed files from watcher' 369.80250000208616ms
+[NX Daemon Server] - 2024-02-16T07:05:13.826Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2024-02-16T07:05:13.826Z - Done responding to the client null
+[NX Daemon Server] - 2024-02-16T07:05:26.430Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\83d14e7134fc08a15480\d.sock
+[NX Daemon Server] - 2024-02-16T07:05:26.432Z - [WATCHER]: Subscribed to changes within: c:\Softwareprojekte\DnD (native)
+[NX Daemon Server] - 2024-02-16T07:05:26.441Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-16T07:05:26.441Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2024-02-16T07:05:26.441Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2024-02-16T07:05:26.443Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2024-02-16T07:05:26.518Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2024-02-16T07:05:26.518Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Softwareprojekte\DnD\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Softwareprojekte\DnD\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Softwareprojekte\DnD\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2024-02-16T07:05:26.518Z - Time taken for 'hash changed files from watcher' 29.85249999910593ms
+[NX Daemon Server] - 2024-02-16T07:05:26.519Z - Done responding to the client null

.nx/cache/d/server-process.json

@@ -1 +1 @@
-{"processId":18404}
+{"processId":12564}

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

@@ -42,101 +42,99 @@
       </div>
       <div class="looks-entry">
         <div class="looks-label">Alter</div>
-        <input
-          type="text"
-          class="looks-input"
-          [(ngModel)]="data.age"
-          (change)="updateData()"
-        />
+        <mat-form-field appearance="outline" class="looks-input">
+          <input matInput [(ngModel)]="data.age" (change)="updateData()" />
+        </mat-form-field>
       </div>
       <div class="looks-entry">
         <div class="looks-label">Größe</div>
-        <input
-          type="text"
-          class="looks-input"
-          [(ngModel)]="data.height"
-          (change)="updateData()"
-        />
+        <mat-form-field appearance="outline" class="looks-input">
+          <input matInput [(ngModel)]="data.height" (change)="updateData()" />
+        </mat-form-field>
       </div>
       <div class="looks-entry">
         <div class="looks-label">Gewicht</div>
-        <input
-          type="text"
-          class="looks-input"
-          [(ngModel)]="data.weight"
-          (change)="updateData()"
-        />
+        <mat-form-field appearance="outline" class="looks-input">
+          <input matInput [(ngModel)]="data.weight" (change)="updateData()" />
+        </mat-form-field>
       </div>
       <div class="looks-entry">
         <div class="looks-label">Haarfarbe</div>
-        <input
-          type="text"
-          class="looks-input"
-          [(ngModel)]="data.hair"
-          (change)="updateData()"
-        />
+        <mat-form-field appearance="outline" class="looks-input">
+          <input matInput [(ngModel)]="data.hair" (change)="updateData()" />
+        </mat-form-field>
       </div>
       <div class="looks-entry">
         <div class="looks-label">Augenfarbe</div>
-        <input
-          type="text"
-          class="looks-input"
-          [(ngModel)]="data.eyes"
-          (change)="updateData()"
-        />
+        <mat-form-field appearance="outline" class="looks-input">
+          <input matInput [(ngModel)]="data.eyes" (change)="updateData()" />
+        </mat-form-field>
       </div>
       <div class="looks-entry">
         <div class="looks-label">Hautfarbe</div>
-        <input
-          type="text"
-          class="looks-input"
-          [(ngModel)]="data.skin"
-          (change)="updateData()"
-        />
+
+        <mat-form-field appearance="outline" class="looks-input">
+          <input matInput [(ngModel)]="data.skin" (change)="updateData()" />
+        </mat-form-field>
       </div>
     </div>
     <!-- DESCRIPTION -->
     <div class="description">
-      <textarea
-        class="description-area"
-        [(ngModel)]="data.description"
-        (change)="updateData()"
-      ></textarea>
+      <mat-form-field appearance="outline" class="description-wrapper">
+        <textarea
+          class="description-input"
+          matInput
+          [(ngModel)]="data.description"
+          (change)="updateData()"
+        ></textarea>
+      </mat-form-field>
       <label class="description-label">Beschreibung</label>
     </div>
   </div>
   <!-- PERSONALITY -->
   <div class="personality">
     <div class="personality-box">
-      <textarea
-        class="personality-area"
-        [(ngModel)]="data.personalityTraits"
-        (change)="updateData()"
-      ></textarea>
+      <mat-form-field appearance="outline" class="personality-wrapper">
+        <textarea
+          matInput
+          class="personality-input"
+          [(ngModel)]="data.personalityTraits"
+          (change)="updateData()"
+        ></textarea>
+      </mat-form-field>
       <label class="personality-label">Persönlichkeitsmerkmale</label>
     </div>
     <div class="personality-box">
-      <textarea
-        class="personality-area"
-        [(ngModel)]="data.ideals"
-        (change)="updateData()"
-      ></textarea>
+      <mat-form-field appearance="outline" class="personality-wrapper">
+        <textarea
+          matInput
+          class="personality-input"
+          [(ngModel)]="data.ideals"
+          (change)="updateData()"
+        ></textarea>
+      </mat-form-field>
       <label class="personality-label">Ideale</label>
     </div>
     <div class="personality-box">
-      <textarea
-        class="personality-area"
-        [(ngModel)]="data.bonds"
-        (change)="updateData()"
-      ></textarea>
+      <mat-form-field appearance="outline" class="personality-wrapper">
+        <textarea
+          matInput
+          class="personality-input"
+          [(ngModel)]="data.bonds"
+          (change)="updateData()"
+        ></textarea>
+      </mat-form-field>
       <label class="personality-label">Bindungen</label>
     </div>
     <div class="personality-box">
-      <textarea
-        class="personality-area"
-        [(ngModel)]="data.flaws"
-        (change)="updateData()"
-      ></textarea>
+      <mat-form-field appearance="outline" class="personality-wrapper">
+        <textarea
+          matInput
+          class="personality-input"
+          [(ngModel)]="data.flaws"
+          (change)="updateData()"
+        ></textarea>
+      </mat-form-field>
       <label class="personality-label">Makel</label>
     </div>
   </div>

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

@@ -86,12 +86,12 @@
         display: flex;
         justify-content: space-between;
 
-        .looks-input {
-            border-radius: 4px;
-            border: 1px solid var(--border-color);
-            box-shadow: var(--shadow);
-            padding-left: 1rem;
-        }
+        // .looks-input {
+        //     border-radius: 4px;
+        //     border: 1px solid var(--border-color);
+        //     box-shadow: var(--shadow);
+        //     padding-left: 1rem;
+        // }
 
         .looks-field {
             width: 12.5rem;
@@ -103,6 +103,19 @@
             padding-left: 1rem;
         }
     }
+
+    .looks-input {
+        width: 12.5rem;
+        box-shadow: var(--shadow);
+        border-radius: 4px;
+        overflow: hidden;
+    }
+
+    ::ng-deep .mat-mdc-form-field-infix {
+        height: 32px !important;
+        min-height: 32px !important;
+        padding-top: 4px !important;
+    }
 }
 
 .description {
@@ -111,18 +124,22 @@
     align-items: center;
     gap: 1rem;
 
-    .description-area {
-        width: 20rem;
-        height: 90%;
-        border: 1px solid var(--border-color);
-        border-radius: 10px;
-        box-shadow: var(--shadow);
+    .description-label {
+        font-weight: 500;
+    }
+
+    .description-input {
         resize: none;
-        padding: 1rem;
+        height: 90%;
+        width: 20rem;
     }
 
-    .description-label {
-        font-weight: 500;
+    .description-wrapper {
+        height: 100%;
+        width: 20rem;
+        box-shadow: var(--shadow);
+        overflow: hidden;
+        border-radius: 4px;
     }
 }
 
@@ -145,6 +162,19 @@
             height: 15rem;
         }
 
+        .personality-wrapper {
+            width: 100%;
+            height: 90%;
+            box-shadow: var(--shadow);
+            overflow: hidden;
+            border-radius: 4px;
+        }
+
+        .personality-input {
+            resize: none;
+            height: 100%;
+        }
+
         .personality-area {
             width: 100%;
             height: 100%;

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

@@ -6,7 +6,7 @@
       <div
         class="navigation-entry"
         [ngClass]="active === 1 ? 'active' : ''"
-        (click)="setActiveProperty(1)"
+        (click)="setActiveProperty(1); closeAll()"
         [routerLink]="'./stats'"
       >
         Übersicht
@@ -16,7 +16,7 @@
       <div
         class="navigation-entry"
         [ngClass]="active === 2 ? 'active' : ''"
-        (click)="setActiveProperty(2)"
+        (click)="setActiveProperty(2); closeAll()"
         [routerLink]="'./character'"
       >
         Charakter
@@ -26,7 +26,7 @@
       <div
         class="navigation-entry"
         [class]="active === 3 ? 'active' : ''"
-        (click)="setActiveProperty(3)"
+        (click)="setActiveProperty(3); closeAll()"
         [routerLink]="'./inventory'"
       >
         Inventar
@@ -36,7 +36,7 @@
       <div
         class="navigation-entry"
         [class]="active === 4 ? 'active' : ''"
-        (click)="setActiveProperty(4)"
+        (click)="setActiveProperty(4); closeAll()"
         [routerLink]="'./spellcards'"
       >
         Zauber
@@ -46,7 +46,7 @@
       <div
         class="navigation-entry"
         [class]="active === 5 ? 'active' : ''"
-        (click)="setActiveProperty(5)"
+        (click)="setActiveProperty(5); closeAll()"
         [routerLink]="'./notes'"
       >
         Notizen
@@ -56,7 +56,7 @@
       <div
         class="navigation-entry"
         [class]="active === 6 ? 'active' : ''"
-        (click)="setActiveProperty(6)"
+        (click)="setActiveProperty(6); closeAll()"
         [routerLink]="'./spellbook'"
       >
         Zauberbuch
@@ -66,7 +66,7 @@
       <div
         class="navigation-entry"
         [class]="active === 7 ? 'active' : ''"
-        (click)="setActiveProperty(7)"
+        (click)="setActiveProperty(7); closeAll()"
         [routerLink]="'./quests'"
       >
         Aufträge
@@ -76,7 +76,7 @@
       <div
         class="navigation-entry"
         [class]="active === 8 ? 'active' : ''"
-        (click)="setActiveProperty(8)"
+        (click)="setActiveProperty(8); closeAll()"
         [routerLink]="'./npcs'"
       >
         NPCs
@@ -86,7 +86,7 @@
       <div
         class="navigation-entry"
         [class]="active === 9 ? 'active' : ''"
-        (click)="setActiveProperty(9)"
+        (click)="setActiveProperty(9); closeAll()"
         [routerLink]="'./places'"
       >
         Orte
@@ -96,7 +96,7 @@
       <div
         class="navigation-entry"
         [class]="active === 10 ? 'active' : ''"
-        (click)="setActiveProperty(10)"
+        (click)="setActiveProperty(10); closeAll()"
         [routerLink]="'./maps'"
       >
         Karten
@@ -107,7 +107,7 @@
       <div
         class="navigation-entry"
         [class]="active === 11 ? 'active' : ''"
-        (click)="setActiveProperty(11)"
+        (click)="setActiveProperty(11); closeAll()"
         [routerLink]="'./ruleset'"
       >
         Regelwerk
@@ -116,13 +116,18 @@
   </ul>
 
   <div class="settings-container">
-    <button class="settings-button" [routerLink]="'../'">
+    <button class="settings-button" (click)="closeAll()" [routerLink]="'../'">
       <icon [size]="'s'" [type]="'UI'" [icon]="'characters'"></icon>
       <div>Charaktere</div>
     </button>
 
     <button class="settings-button">
-      <icon [size]="'s'" [type]="'UI'" [icon]="'settings'"></icon>
+      <icon
+        [size]="'s'"
+        [type]="'UI'"
+        (click)="closeAll()"
+        [icon]="'settings'"
+      ></icon>
       <div>Einstellungen</div>
     </button>
   </div>

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

@@ -52,7 +52,7 @@ ul {
 
     &:hover,
     &.active {
-        background-color: var(--primary-color);
+        background-color: var(--primary);
         transform: scale(1.05);
         cursor: pointer;
     }
@@ -79,6 +79,6 @@ ul {
 }
 
 .settings-button:hover {
-    background-color: var(--primary-color);
+    background-color: var(--tab-active);
     transform: scale(1.05);
 }

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

@@ -1,6 +1,8 @@
 import { Component, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
+import { DetailsService } from 'src/services/details/details.service';
+import { ModalService } from 'src/services/modal/modal.service';
 
 @Component({
   selector: 'navigation-panel',
@@ -14,7 +16,9 @@ export class NavigationPanelComponent {
 
   constructor(
     private navigation: NavigationPanelService,
-    private router: Router
+    private router: Router,
+    private detailsAccessor: DetailsService,
+    private modalAccessor: ModalService
   ) {}
 
   public ngOnInit(): void {
@@ -38,6 +42,11 @@ export class NavigationPanelComponent {
     this.panel?.nativeElement.classList.remove('panel--open');
   }
 
+  public closeAll() {
+    this.detailsAccessor.closePanel('cancel');
+    this.modalAccessor.handleModalClosing('cancel');
+  }
+
   private checkForActiveTab(): void {
     const tab = this.router.url.split('/')[2];
     switch (tab) {

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

@@ -1,41 +0,0 @@
-<div class="details-title">{{ item.name }}</div>
-
-<div class="details-flex-row top-2">
-  <div>
-    <div class="details-value">{{ item.isReady }}</div>
-    <div class="details-label">Verzehrfertig</div>
-  </div>
-
-  <div>
-    <div class="details-value">{{ item.weight }}</div>
-    <div class="details-label">Gewicht</div>
-  </div>
-
-  <div>
-    <div class="details-value">{{ item.quantity }}</div>
-    <div class="details-label">Anzahl</div>
-  </div>
-</div>
-
-<div class="details-content">{{ item.description }}</div>
-
-<div class="vertical-button-wrapper-3">
-  <ui-button
-    [type]="'edit'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('update')"
-  ></ui-button>
-  <ui-button
-    [type]="'delete'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('delete')"
-  ></ui-button>
-  <ui-button
-    [type]="'cancel'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('cancel')"
-  ></ui-button>
-</div>

src/app/journal/journal-inventory/food-details/food-details.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FoodDetailsComponent } from './food-details.component';
-
-describe('FoodDetailsComponent', () => {
-  let component: FoodDetailsComponent;
-  let fixture: ComponentFixture<FoodDetailsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FoodDetailsComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(FoodDetailsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/journal/journal-inventory/food-details/food-details.component.ts

@@ -1,23 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { Food } from 'src/interfaces/food';
-import { DetailsService } from 'src/services/details/details.service';
-
-@Component({
-  selector: 'app-food-details',
-  templateUrl: './food-details.component.html',
-  styleUrl: './food-details.component.scss',
-})
-export class FoodDetailsComponent {
-  public constructor(public detailsAccessor: DetailsService) {}
-
-  @Input() item: Food = {
-    name: '',
-    weight: 0,
-    quantity: 0,
-    isReady: false,
-  };
-
-  public close(result: string): void {
-    this.detailsAccessor.closePanel(result);
-  }
-}

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

@@ -19,10 +19,10 @@
     </div>
 
     <div class="heading-row">
-      <div class="heading">Name</div>
-      <div class="heading">Wert</div>
-      <div class="heading">Gewicht</div>
-      <div class="heading">Anzahl</div>
+      <div class="table-heading">Name</div>
+      <div class="table-heading">Wert</div>
+      <div class="table-heading">Gewicht</div>
+      <div class="table-heading">Anzahl</div>
     </div>
 
     @switch(active) { @case(1){
@@ -32,7 +32,9 @@
     }}
 
     <div class="footer">
-      <button (click)="addItem('items')">Eintrag hinzufügen</button>
+      <ui-button [color]="'green'" [width]="'w22'" (click)="addItem('items')">
+        Eintrag hinzufügen
+      </ui-button>
     </div>
   </div>
   <div class="right-column">
@@ -56,12 +58,12 @@
         </button>
       </div>
       <div class="heading-row">
-        <div class="heading">Name</div>
-        <div class="heading">
+        <div class="table-heading">Name</div>
+        <div class="table-heading">
           {{ foodActive === 1 ? "Verzehrfertig" : "Wert" }}
         </div>
-        <div class="heading">Gewicht</div>
-        <div class="heading">Anzahl</div>
+        <div class="table-heading">Gewicht</div>
+        <div class="table-heading">Anzahl</div>
       </div>
       @switch(foodActive) { @case(1){
       <ng-container [ngTemplateOutlet]="foodTemplate"></ng-container>
@@ -70,7 +72,13 @@
       } }
 
       <div class="footer">
-        <button (click)="addItem('consumables')">Eintrag hinzufügen</button>
+        <ui-button
+          [color]="'green'"
+          [width]="'w22'"
+          (click)="addItem('consumables')"
+        >
+          Eintrag hinzufügen
+        </ui-button>
       </div>
     </div>
 
@@ -195,7 +203,8 @@
       (cdkDropListDropped)="drop($event, food, 'food')"
     >
       @for (item of food; let index = $index; track item) {
-      <div class="item" cdkDrag (click)="openFoodDetails(index)">
+      <!-- <div class="item" cdkDrag (click)="openFoodDetails(index)"> -->
+      <div class="item" cdkDrag (click)="openItemsDetails(food, index, 'food')">
         <div class="item-property">{{ item.name }}</div>
         <div class="item-property">@if(item.isReady){Ja} @else {Nein}</div>
         <div class="item-property">{{ item.weight }} lb.</div>

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

@@ -66,7 +66,7 @@
     margin: 1rem 0rem;
   }
 
-  .heading {
+  .table-heading {
     font-size: 1.5rem;
     font-weight: 600;
     padding-left: 2rem;
@@ -124,7 +124,7 @@
     box-shadow: var(--shadow);
   }
 
-  .heading {
+  .table-heading {
     font-size: 1.375rem;
     font-weight: 600;
     padding-left: 1rem;
@@ -249,7 +249,7 @@
 
 .footer {
   button {
-    width: 22rem;
+    padding: 1rem 0;
   }
 }
 

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

@@ -12,7 +12,6 @@ import { Food } from 'src/interfaces/food';
 import { SimpleItemDetailsComponent } from './simple-item-details/simple-item-details.component';
 import { ModalService } from 'src/services/modal/modal.service';
 import { SimpleItemModalComponent } from './simple-item-modal/simple-item-modal.component';
-import { FoodDetailsComponent } from './food-details/food-details.component';
 
 @Component({
   selector: 'app-journal-inventory',
@@ -100,25 +99,6 @@ export class JournalInventoryComponent {
     );
   }
 
-  public openFoodDetails(index: number): void {
-    this.detailsAccessor.openPanel(FoodDetailsComponent, {
-      item: this.food[index],
-    });
-    const resultSubscription = this.detailsAccessor.result$.subscribe(
-      (result) => {
-        if (result.state === 'delete') {
-          this.food.splice(index, 1);
-          this.dataAccessor.food = this.food;
-        } else if (result.state === 'update') {
-          this.openFoodModal(true, index);
-        } else if (result.state === 'cancel') {
-          // Do nothing
-        }
-        resultSubscription.unsubscribe();
-      }
-    );
-  }
-
   public openFoodModal(isUpdate: boolean, index?: number): void {
     this.modalAccessor.openModal(SimpleItemModalComponent, {
       item:
@@ -198,6 +178,8 @@ export class JournalInventoryComponent {
       this.dataAccessor.consumables = this.consumables;
     } else if (listname === 'miscellaneous') {
       this.dataAccessor.miscellaneous = this.miscellaneous;
+    } else if (listname === 'food') {
+      this.dataAccessor.food = this.food;
     }
     this.updateWeight();
   }

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

@@ -1,41 +1,32 @@
-<div class="details-title">{{ item.name }}</div>
+<div class="title">{{ item.name }}</div>
 
-<div class="details-flex-row top-2">
-  <div>
-    <div class="details-value">{{ item.value }}</div>
-    <div class="details-label">Wert</div>
-  </div>
-
-  <div>
-    <div class="details-value">{{ item.weight }}</div>
-    <div class="details-label">Gewicht</div>
-  </div>
-
-  <div>
-    <div class="details-value">{{ item.quantity }}</div>
-    <div class="details-label">Anzahl</div>
-  </div>
+<div class="value-row t-2">
+  <value-box
+    [value]="isSimpleItem(item) ? item.value : item.isReady ? 'Ja' : 'Nein'"
+    [label]="isSimpleItem(item) ? 'Wert' : 'Verzehrbereit'"
+  ></value-box>
+  <value-box [value]="item.weight" [label]="'Gewicht'"></value-box>
+</div>
+<div class="value-row t-2">
+  <value-box [value]="item.quantity" [label]="'Anzahl'"></value-box>
+  <value-box
+    [value]="item.quantity * item.weight"
+    [label]="'Gesamtgewicht'"
+  ></value-box>
 </div>
 
-<div class="details-content">{{ item.description }}</div>
+<div class="input-label t-2">Beschreibung</div>
+<div
+  class="t-1"
+  style="padding-left: 0.25rem"
+  [innerHTML]="item.description"
+></div>
 
-<div class="vertical-button-wrapper-3">
-  <ui-button
-    [type]="'edit'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('update')"
-  ></ui-button>
-  <ui-button
-    [type]="'delete'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('delete')"
-  ></ui-button>
-  <ui-button
-    [type]="'cancel'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('cancel')"
-  ></ui-button>
+<div class="vertical-buttons bottom">
+  <ui-button [color]="'green'" [width]="'w22'" (click)="close('update')">
+    Bearbeiten
+  </ui-button>
+  <ui-button [color]="'red'" [width]="'w22'" (click)="close('delete')">
+    Löschen
+  </ui-button>
 </div>

src/app/journal/journal-inventory/simple-item-details/simple-item-details.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { Food } from 'src/interfaces/food';
 import { SimpleItem } from 'src/interfaces/simple-item';
 import { DetailsService } from 'src/services/details/details.service';
 
@@ -9,15 +10,12 @@ import { DetailsService } from 'src/services/details/details.service';
 })
 export class SimpleItemDetailsComponent {
   public constructor(public detailsAccessor: DetailsService) {}
-  @Input() item: SimpleItem = {
-    name: '',
-    weight: 0,
-    value: 0,
-    quantity: 0,
-    description: '',
-  };
+  @Input() item!: any;
 
   public close(result: string): void {
     this.detailsAccessor.closePanel(result);
   }
+  isSimpleItem(item: any): item is SimpleItem {
+    return item && (item as SimpleItem).value !== undefined;
+  }
 }

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

@@ -1,45 +1,73 @@
-<div class="modal-dimensions">
-  <div class="details-title">
+<div class="dimensions">
+  <div class="title">
     @if(!isUpdate){Gegenstand erstellen}@else{Gegenstand bearbeiten}
   </div>
 
-  <input type="text" placeholder="Name" [(ngModel)]="name" />
-  <label>Name</label><br />
-  @if(isFood){
-  <input type="checkbox" [(ngModel)]="isReady" />
-  <label>Verzehrfertig</label><br />
-  }@else {
-  <input type="number" placeholder="Wert" [(ngModel)]="value" />
-  <label>Wert</label><br />
-  }
-  <input type="number" placeholder="Gewicht" [(ngModel)]="weight" />
-  <label>Gewicht</label><br />
-  <input type="number" placeholder="Anzahl" [(ngModel)]="quantity" />
-  <label>Anzahl</label><br />
-  <textarea placeholder="Beschreibung" [(ngModel)]="description"></textarea
-  ><label>Beschreibung</label>
-  <div class="button-wrapper-2-block">
+  <div class="flex-form t-15">
+    <div>
+      <div class="input-label">Name</div>
+      <mat-form-field appearance="outline" style="width: 18.9rem">
+        <input matInput [(ngModel)]="name" />
+      </mat-form-field>
+    </div>
+
+    <div class="flex-row numbers">
+      <div>
+        <div class="input-label">Gewicht</div>
+        <mat-form-field appearance="outline" style="width: 7rem">
+          <input type="number" class="right" matInput [(ngModel)]="weight" />
+          <span class="input-value" matTextSuffix>Lb.</span>
+        </mat-form-field>
+      </div>
+      <div>
+        <div class="input-label">Anzahl</div>
+        <mat-form-field appearance="outline" style="width: 7rem">
+          <input type="number" class="right" matInput [(ngModel)]="quantity" />
+          <span class="input-value" matTextSuffix>Stk.</span>
+        </mat-form-field>
+      </div>
+      @if(isFood){
+      <div>
+        <div class="input-label">Verzehrfertig</div>
+        <input
+          type="checkbox"
+          style="margin: 0.5rem 0 0 2.5rem"
+          [(ngModel)]="isReady"
+        />
+      </div>
+      } @else {
+      <div>
+        <div class="input-label">Wert</div>
+        <mat-form-field appearance="outline" style="width: 7rem">
+          <input type="number" class="right" matInput [(ngModel)]="value" />
+          <span class="input-value" matTextSuffix>Gold</span>
+        </mat-form-field>
+      </div>
+      }
+    </div>
+  </div>
+
+  <div class="NgxEditor__Wrapper t-15">
+    <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
+    <ngx-editor
+      [editor]="editor"
+      [(ngModel)]="description"
+      placeholder="Beschreibung des Gegenstandes"
+    ></ngx-editor>
+  </div>
+
+  <div class="horizontal-buttons">
     @if(isUpdate){
-    <ui-button
-      [type]="'update'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="update()"
-    ></ui-button>
+    <ui-button [color]="'green'" style="width: 40%" (click)="update()">
+      Bestätigen
+    </ui-button>
     }@else{
-    <ui-button
-      *ngIf="!isUpdate"
-      [type]="'add'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="add()"
-    ></ui-button>
+    <ui-button [color]="'green'" style="width: 40%" (click)="add()">
+      Bestätigen
+    </ui-button>
     }
-    <ui-button
-      [type]="'cancel'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="cancel()"
-    ></ui-button>
+    <ui-button [color]="'red'" style="width: 40%" (click)="cancel()">
+      Abbrechen
+    </ui-button>
   </div>
 </div>

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

@@ -1,4 +1,37 @@
-.modal-dimensions{
-    width: 40vw;
+.dimensions {
+    width: 35rem;
     background-color: antiquewhite;
 }
+
+.numbers {
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        display: none;
+    }
+
+    input {
+        -moz-appearance: textfield;
+    }
+
+    .input-value {
+        padding-left: 0.5rem;
+    }
+
+    span {
+        color: darkgrey;
+    }
+
+    ::ng-deep .mat-mdc-form-field-infix {
+        height: 40px !important;
+        min-height: 40px !important;
+        padding-top: 8px !important;
+    }
+}
+
+.ProseMirror {
+    overflow: auto;
+}
+::ng-deep .ProseMirror {
+    height: 10rem !important;
+    overflow-y: auto;
+}

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

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { Editor } from 'ngx-editor';
 import { ModalService } from 'src/services/modal/modal.service';
 
 @Component({
@@ -12,6 +13,14 @@ export class SimpleItemModalComponent {
   @Input() public isUpdate: boolean = false;
   @Input() public isFood: boolean = false;
 
+  editor: Editor = new Editor();
+  html = '';
+  toolbar: any = [
+    // default value
+    ['bold', 'italic'],
+    ['bullet_list'],
+    [{ heading: ['h3', 'h4', 'h5', 'h6'] }],
+  ];
   public name: string = '';
   public description: string = '';
   public quantity: number = 0;

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

@@ -32,7 +32,7 @@
 .add-button {
     width: 90%;
     margin: 0 0.5rem;
-    background-color: var(--primary-color);
+    background-color: var(--primary);
     border: var(--border);
     border-radius: 10px;
     box-shadow: var(--shadow);
@@ -41,7 +41,7 @@
     transition: all 0.25s ease-in-out;
 
     &:hover {
-        background-color: var(--primary-color-dark);
+        background-color: var(--primary-dark);
     }
 }
 

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

@@ -3,33 +3,35 @@
 
   <div class="flex-form t-15">
     <div>
-      <div class="name">Name</div>
+      <div class="input-label">Name</div>
       <mat-form-field appearance="outline" class="w-50">
         <input matInput [(ngModel)]="name" />
       </mat-form-field>
     </div>
 
     <div>
-      <div class="name">Kurze Beschreibung</div>
+      <div class="input-label">Kurze Beschreibung</div>
       <div class="NgxEditor__Wrapper">
         <ngx-editor-menu [editor]="shortEditor" [toolbar]="toolbar">
         </ngx-editor-menu>
         <ngx-editor
           [editor]="shortEditor"
           [(ngModel)]="shortDescription"
+          placeholder="Kurze Beschreibung der Fähigkeit"
         ></ngx-editor>
       </div>
       <div class="hint">Wird in der Übersicht angezeigt</div>
     </div>
 
     <div>
-      <div class="name">Ausführliche Beschreibung</div>
+      <div class="input-label">Ausführliche Beschreibung</div>
       <div class="NgxEditor__Wrapper">
         <ngx-editor-menu [editor]="longEditor" [toolbar]="toolbar">
         </ngx-editor-menu>
         <ngx-editor
           [editor]="longEditor"
           [(ngModel)]="longDescription"
+          placeholder="Ausführliche Beschreibung der Fähigkeit"
         ></ngx-editor>
       </div>
       <div class="hint">Wird in der Detailansicht angezeigt</div>
@@ -37,7 +39,7 @@
 
     <div class="flex-row">
       <div class="w-100">
-        <div class="name">Kosten</div>
+        <div class="input-label">Kosten</div>
 
         <mat-form-field appearance="outline" class="w-100">
           <!-- <mat-label>Kosten</mat-label> -->
@@ -50,7 +52,7 @@
       </div>
 
       <div class="w-100">
-        <div class="name">Nutzungen</div>
+        <div class="input-label">Nutzungen</div>
         <mat-form-field appearance="outline" class="w-100">
           <!-- <mat-label>Nutzungen</mat-label> -->
           <mat-select [(ngModel)]="charges">
@@ -64,15 +66,15 @@
 
     <div class="horizontal-buttons">
       @if(isUpdate){
-      <ui-button [color]="'green'" [width]="'w20'" (click)="update()"
+      <ui-button [color]="'green'" style="width: 45%" (click)="update()"
         >Aktualisieren</ui-button
       >
       }@else{
-      <ui-button [color]="'green'" [width]="'w20'" (click)="add()"
+      <ui-button [color]="'green'" style="width: 45%" (click)="add()"
         >hinzufügen</ui-button
       >
       }
-      <ui-button [color]="'red'" [width]="'w20'" (click)="cancel()"
+      <ui-button [color]="'red'" style="width: 45%" (click)="cancel()"
         >Abbrechen</ui-button
       >
     </div>

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

@@ -6,8 +6,3 @@
     box-shadow: var(--shadow);
     padding: 0 2rem;
 }
-
-.name {
-    font-weight: 600;
-    padding-left: 0.25rem;
-}

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

@@ -39,7 +39,7 @@
     }
   </div>
   <div class="footer">
-    <ui-button [color]="'green'" [width]="'w25'" (click)="openModal(false)">
+    <ui-button [color]="'green'" style="width: 80%" (click)="openModal(false)">
       Hinzufügen
     </ui-button>
   </div>

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

@@ -3,7 +3,7 @@
 }
 
 .item-list {
-  height: calc(100% - 5rem);
+  height: 40rem;
 }
 
 .item {

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

@@ -76,6 +76,8 @@
 
   <!-- MODAL BUTTON -->
   <div class="footer">
-    <button (click)="openModal()">Anpassen</button>
+    <ui-button [color]="'green'" style="width: 80%" (click)="openModal()">
+      Anpassen
+    </ui-button>
   </div>
 </div>

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

@@ -1,76 +1,45 @@
-<div class="modal-dimensions">
-  <h1 style="text-align: center">Hinweis</h1>
-  <p style="text-align: center">
-    Diese Seite ist momentan nur eingeschränkt funktionsbereit.
-  </p>
-  <h4>Werkzeuge</h4>
+<div class="dimensions">
+  <div class="title">Sprachen und Werkzeuge hinzufügen</div>
+  <div class="heading left b-05">Sprachen</div>
   <div style="display: flex; flex-direction: column; gap: 0.5rem">
-    <ng-container
-      *ngFor="let tool of proficiencies.tools; let toolIndex = index"
-    >
-      <div>
-        <input type="text" [(ngModel)]="proficiencies.tools[toolIndex]" />
-        <icon
-          [size]="'s'"
-          [type]="'UI'"
-          [icon]="'remove'"
-          [class]="'pointer'"
-          (click)="deleteTool(toolIndex)"
-        ></icon>
-      </div>
-    </ng-container>
-    <icon
-      [size]="'s'"
-      [type]="'UI'"
-      [icon]="'add'"
-      [class]="'pointer'"
-      (click)="addTool()"
-    ></icon>
+    @for(tool of proficiencies.languages; let languageIndex = $index; track
+    tool){
+    <div class="item-row">
+      <mat-form-field appearance="outline">
+        <input matInput [(ngModel)]="proficiencies.languages[languageIndex]" />
+      </mat-form-field>
+      <icon-button
+        [icon]="'delete'"
+        (click)="deleteLanguage(languageIndex)"
+      ></icon-button>
+    </div>
+    }
+    <icon-button [icon]="'add'" (click)="addLanguage()"></icon-button>
   </div>
 
-  <br />
-  <br />
-  <h4>Sprachen</h4>
+  <div class="heading left b-05">Werkzeuge</div>
   <div style="display: flex; flex-direction: column; gap: 0.5rem">
-    <ng-container
-      class="example-box"
-      *ngFor="let tool of proficiencies.languages; let languageIndex = index"
-    >
-      <div>
-        <input
-          type="text"
-          [(ngModel)]="proficiencies.languages[languageIndex]"
-        />
-        <icon
-          [size]="'s'"
-          [type]="'UI'"
-          [icon]="'remove'"
-          [class]="'pointer'"
-          (click)="deleteLanguage(languageIndex)"
-        ></icon>
-      </div>
-    </ng-container>
-    <icon
-      [size]="'s'"
-      [type]="'UI'"
-      [icon]="'add'"
-      [class]="'pointer'"
-      (click)="addLanguage()"
-    ></icon>
+    @for(tool of proficiencies.tools; let toolIndex = $index; track tool){
+    <div class="item-row">
+      <mat-form-field appearance="outline">
+        <input matInput [(ngModel)]="proficiencies.tools[toolIndex]" />
+      </mat-form-field>
+      <icon-button
+        style="margin-left: 0.25rem"
+        [icon]="'delete'"
+        (click)="deleteTool(toolIndex)"
+      ></icon-button>
+    </div>
+    }
+    <icon-button [icon]="'add'" (click)="addTool()"></icon-button>
   </div>
 
-  <div class="button-wrapper-2-block">
-    <ui-button
-      [type]="'update'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="update()"
-    ></ui-button>
-    <ui-button
-      [type]="'cancel'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="cancel()"
-    ></ui-button>
+  <div class="horizontal-buttons">
+    <ui-button [color]="'green'" style="width: 45%" (click)="update()">
+      Aktualisieren
+    </ui-button>
+    <ui-button [color]="'red'" style="width: 45%" (click)="cancel()">
+      Abbrechen
+    </ui-button>
   </div>
 </div>

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

@@ -1,58 +1,13 @@
-.modal-dimensions {
-  width: 40vw;
+.dimensions {
+  width: 35rem;
   background-color: var(--modal-background);
   border-radius: 10px;
   border: 1px solid var(--border-color);
-  padding: 1rem;
+  padding: 0 2rem;
 }
 
-//
-.example-list {
-  width: 100%;
-  border: solid 1px #ccc;
-  min-height: 60px;
-  display: block;
-  background: white;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.example-box {
-  padding: 20px 10px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
+.item-row {
   display: flex;
-  position: relative;
-  flex-direction: column;
-  // align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  cursor: move;
-  background: white;
-  font-size: 14px;
-}
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.example-box:last-child {
-  border: none;
-}
-
-.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  gap: 0.25rem;
+  align-items: center;
 }

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

@@ -1,74 +1,65 @@
-<div class="modal-dimensions">
-  <div class="add-form-group">
-    @if(!isMonk){
-    <h3>Spellslots</h3>
-    <mat-slide-toggle
-      [checked]="showSpellslots"
-      (change)="onSpellslotsSwitchChanged($event)"
-      >Zauberplätze in der Übersicht anzeigen</mat-slide-toggle
-    >
-    <!-- Zauberplätze in der Übersicht anzeigen -->
-    <div *ngIf="showSpellslots">
-      <div *ngFor="let level of spellslots; let levelIndex = index">
-        <div class="level-row">
-          Level {{ levelIndex + 1 }}
-          <select [(ngModel)]="spellslots[levelIndex].totalSlots">
-            <option *ngFor="let number of spellNumbersArray" [value]="number">
-              {{ number }}
-            </option>
-          </select>
-          <span>
-            <icon
-              [icon]="'remove'"
-              [size]="'s'"
-              [type]="'UI'"
-              [class]="'pointer'"
-              (click)="removeSpellLevel(levelIndex)"
-            ></icon>
-          </span>
-        </div>
-      </div>
-      <icon
-        [icon]="'add'"
-        [size]="'s'"
-        [type]="'UI'"
-        [class]="'pointer'"
-        (click)="addSpellLevel()"
-      ></icon>
+<div class="dimensions">
+  @if(!isMonk){
+  <div class="title">Zauberplätze</div>
+  <div class="content">
+    Hier kann die Anzahl der verfügbaren Zauberplätze je Zauberstufe angepasst
+    werden
+  </div>
+  <mat-slide-toggle
+    class="t-1"
+    [checked]="showSpellslots"
+    (change)="onSpellslotsSwitchChanged($event)"
+    >Zauberplätze in der Übersicht anzeigen
+  </mat-slide-toggle>
+  <!-- Zauberplätze in der Übersicht anzeigen -->
+  @if(showSpellslots){
+  <div class="t-1">
+    @for(level of spellslots; let levelIndex = $index; track level){
+    <div class="t-05">
+      Level {{ levelIndex + 1 }}
+      <select
+        [(ngModel)]="spellslots[levelIndex].totalSlots"
+        style="padding-left: 0.5rem"
+      >
+        <option *ngFor="let number of spellNumbersArray" [value]="number">
+          {{ number }}
+        </option>
+      </select>
+      <icon-button
+        style="display: inline; margin-left: 0.25rem"
+        [icon]="'delete'"
+        (click)="removeSpellLevel(levelIndex)"
+      ></icon-button>
     </div>
-    } @else{
+    }
+  </div>
+  <icon-button [icon]="'add'" (click)="addSpellLevel()"></icon-button>
+  } } @else{
 
-    <h3>KI-Punkte</h3>
-    <mat-slide-toggle
-      [checked]="kiPoints.showKiPoints"
-      (change)="onKiPointsSwitchChanged($event)"
-      >KI Punkte in der Übersicht anzeigen
-    </mat-slide-toggle>
-    <div *ngIf="kiPoints.showKiPoints">
-      Verfügbare KI Punkte
-      <div>
-        <select [(ngModel)]="kiPoints.totalPoints">
-          <option *ngFor="let number of kiNumbersArray" [value]="number">
-            {{ number }}
-          </option>
-        </select>
-      </div>
+  <div class="title">KI-Punkte</div>
+  <mat-slide-toggle
+    [checked]="kiPoints.showKiPoints"
+    (change)="onKiPointsSwitchChanged($event)"
+    >KI Punkte in der Übersicht anzeigen
+  </mat-slide-toggle>
+  <div *ngIf="kiPoints.showKiPoints">
+    Verfügbare KI Punkte
+    <div>
+      <select [(ngModel)]="kiPoints.totalPoints">
+        <option *ngFor="let number of kiNumbersArray" [value]="number">
+          {{ number }}
+        </option>
+      </select>
     </div>
-    }
   </div>
+  }
 
-  <div class="button-wrapper-2-block">
-    <ui-button
-      [type]="'update'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="update()"
-    ></ui-button>
-    <ui-button
-      [type]="'cancel'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="cancel()"
-    ></ui-button>
+  <div class="horizontal-buttons">
+    <ui-button [color]="'green'" style="width: 45%" (click)="update()">
+      Aktualisieren
+    </ui-button>
+    <ui-button [color]="'red'" style="width: 45%" (click)="cancel()">
+      Abbrechen
+    </ui-button>
   </div>
 </div>

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

@@ -1,13 +1,7 @@
-.modal-dimensions {
-    width: 40vw;
+.dimensions {
+    width: 35rem;
     background-color: var(--modal-background);
     border-radius: 10px;
     border: 1px solid var(--border-color);
-    padding: 1rem;
-}
-
-.add-form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+    padding: 0 2rem;
 }

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

@@ -15,34 +15,50 @@
     </div>
 
     @if(showSpellslots){
-    <!-- <div *ngIf="showSpellslots" class="spellslot-list"> -->
-    @for(level of spellslots; let levelIndex = $index; track level){
-    <div class="level-row">
-      Level {{ levelIndex + 1 }}:
-      <div class="checkboxes">
-        @for ( checkbox of getArray(spellslots[levelIndex].totalSlots); let
-        slotIndex = $index; track checkbox){
-        <input
-          [id]="'checkbox' + levelIndex + '-' + slotIndex"
-          type="checkbox"
-          (change)="handleUsedSlots(levelIndex, slotIndex, $event.target)"
-        />
-        }
+    <div class="spell-container">
+      <div
+        style="
+          font-size: 1.5rem;
+          padding: 1.25rem 0 0.5rem 1.5rem;
+          font-weight: 600;
+        "
+      >
+        Zauberplätze
+      </div>
+      @for(level of spellslots; let levelIndex = $index; track level){
+      <div
+        class="level-row"
+        [ngClass]="{ used: level.usedSlots == level.totalSlots }"
+      >
+        <div style="width: 6rem">Level {{ levelIndex + 1 }}:</div>
+        <div class="checkboxes">
+          @for ( checkbox of getArray(spellslots[levelIndex].totalSlots); let
+          slotIndex = $index; track checkbox){
+          <input
+            [id]="'checkbox' + levelIndex + '-' + slotIndex"
+            type="checkbox"
+            (change)="handleUsedSlots(levelIndex, slotIndex, $event.target)"
+          />
+          }
+        </div>
       </div>
+      }
     </div>
-    }
 
-    <div class="modifier-container">
-      <div>
-        <div class="value-box">{{ spellSaveDC }}</div>
-        <div class="value-label">Rettungswurf-SG</div>
-      </div>
+    <div class="value-row">
+      <value-box [value]="spellSaveDC" [label]="'Rettungswurf-SG'"></value-box>
       <div>
-        <div class="value-box">{{ spellAttackModifier }}</div>
-        <div class="value-label">Zauber-Angriffsbonus</div>
+        <div class="value-box">
+          {{ attributeTranslator[spellcastingAttribute] }}
+        </div>
+        <div class="value-label t-0375">Zauberwirken-Attribut</div>
       </div>
+      <value-box
+        [value]="spellAttackModifier"
+        [label]="'Zauber-Angriffsbonus'"
+      ></value-box>
     </div>
-    <!-- </div> -->
+
     } @if(!kiPoints.showKiPoints && !showSpellslots){
     <div class="empty-list">
       Noch keine {{ isMonk ? "Ki-Punkte" : "Zauberplätze" }} hinzugefügt
@@ -50,7 +66,10 @@
     }
   </div>
   <!-- MODAL BUTTON -->
+
   <div class="footer">
-    <button (click)="openModal()">Anpassen</button>
+    <ui-button [color]="'green'" style="width: 80%" (click)="openModal()">
+      Anpassen
+    </ui-button>
   </div>
 </div>

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

@@ -8,24 +8,78 @@
     position: relative;
 }
 
-.level-row {
-    padding: 1rem 1.5rem 0 1.5rem;
-    display: flex;
-    font-size: 1.25rem;
-    font-weight: 600;
+.spell-container {
+    margin: 15px 10px;
+    background-color: var(--items);
+    border: var(--border);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    padding-bottom: 1.25rem;
 
-    .checkboxes {
-        margin-left: 1rem;
+    .level-row {
+        padding: 1rem 1.5rem 0 1.5rem;
         display: flex;
-        align-items: center;
-        gap: 0.5rem;
+        font-size: 1.25rem;
+        font-weight: 600;
+
+        .checkboxes {
+            margin-left: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
     }
 }
 
-.modifier-container {
+.value-row {
     position: absolute;
     width: 100%;
     bottom: 1.5rem;
+}
+
+.used {
+    opacity: 0.6;
+}
+
+input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border: 1px solid #000;
+    position: relative;
+}
+
+input[type="checkbox"]:checked::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 12px;
+    height: 12px;
+    background: #815139;
+    transform: translate(-50%, -50%);
+}
+
+.value-box {
+    max-width: 8rem;
+    padding: 0 0.25rem 0 0.25rem;
+    height: 2.75rem;
+    font-size: 1.5rem;
+    text-align: center;
+    border-radius: 10px;
+    border: none;
+    box-shadow: var(--shadow);
+    background-color: white;
     display: flex;
-    justify-content: space-evenly;
+    justify-content: center;
+    align-items: center;
+}
+
+.value-label {
+    width: 7rem;
+    font-weight: 500;
+    text-align: center;
 }

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

@@ -12,7 +12,7 @@ export class SpellslotsComponent {
   public spellslots: any[] = [];
   public showSpellslots: boolean = false;
   public kiPoints: any;
-  public spellcastingAttribute: string | undefined = undefined;
+  public spellcastingAttribute: string = '';
   public proficiencyBonus: number = 2;
   public attributeValue: number = 0;
   public isMonk: boolean = true;
@@ -22,6 +22,15 @@ export class SpellslotsComponent {
 
   public slotNumber: number = 1;
 
+  attributeTranslator: any = {
+    Strength: 'Stärke',
+    Dexterity: 'Geschicklichkeit',
+    Constitution: 'Konstitution',
+    Intelligence: 'Intelligenz',
+    Wisdom: 'Weisheit',
+    Charisma: 'Charisma',
+  };
+
   public constructor(
     public dataAccessor: DataService,
     public modalAccessor: ModalService
@@ -71,18 +80,11 @@ export class SpellslotsComponent {
 
   private calculateModifiers(): void {
     const spellcastingAttribute = this.spellcastingAttribute;
-    console.log('calculateModifiers wurde aufgerufen');
-    console.log('Proficiency: ', this.proficiencyBonus);
-
-    console.log('Attribute: ', this.spellcastingAttribute);
-    console.log('Value: ', this.attributeValue);
 
     if (spellcastingAttribute !== undefined) {
       const modifier = (this.attributeValue - 10) / 2;
       this.spellAttackModifier = modifier + this.proficiencyBonus;
       this.spellSaveDC = 8 + modifier + this.proficiencyBonus;
-      console.log('Attack: ', this.spellAttackModifier);
-      console.log('Save: ', this.spellSaveDC);
     }
   }
 
@@ -92,7 +94,6 @@ export class SpellslotsComponent {
         'this.dataAccessor.' +
         this.spellcastingAttribute.toLowerCase() +
         '$.subscribe((attribute) => {this.attributeValue = attribute.value; this.calculateModifiers();});';
-      console.log(command);
       eval(command);
     }
   }

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

@@ -1,6 +1,6 @@
 <div class="title">{{ trait?.name }}</div>
 
-<div class="content">{{ trait?.longDescription }}</div>
+<div class="content" [innerHTML]="trait?.longDescription"></div>
 
 <div class="vertical-buttons bottom">
   <ui-button [color]="'green'" [width]="'w20'" (click)="close('update')">

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

@@ -1,47 +1,39 @@
-<div class="modal-dimensions">
+<div class="dimensions">
   <div class="title">
     <h3 *ngIf="!isUpdate">Eigenschaft erstellen</h3>
     <h3 *ngIf="isUpdate">Eigenschaft anpassen</h3>
   </div>
   <div class="flex-form t-15">
-    <!-- <div class="modal-input">
-      <label for="traitName">Name</label>
-      <input
-        type="text"
-        class="modal-input"
-        id="traitName"
-        [(ngModel)]="name"
-      />
-    </div> -->
-
     <div>
-      <div class="name">Name</div>
+      <div class="input-label">Name</div>
       <mat-form-field appearance="outline" class="w-50">
         <input matInput [(ngModel)]="name" />
       </mat-form-field>
     </div>
 
     <div>
-      <div class="name">Kurze Beschreibung</div>
+      <div class="input-label">Kurze Beschreibung</div>
       <div class="NgxEditor__Wrapper">
         <ngx-editor-menu [editor]="shortEditor" [toolbar]="toolbar">
         </ngx-editor-menu>
         <ngx-editor
           [editor]="shortEditor"
           [(ngModel)]="shortDescription"
+          placeholder="Kurze Beschreibung der Eigenschaft"
         ></ngx-editor>
       </div>
       <div class="hint">Wird in der Übersicht angezeigt</div>
     </div>
 
     <div>
-      <div class="name">Ausführliche Beschreibung</div>
+      <div class="input-label">Ausführliche Beschreibung</div>
       <div class="NgxEditor__Wrapper">
         <ngx-editor-menu [editor]="longEditor" [toolbar]="toolbar">
         </ngx-editor-menu>
         <ngx-editor
           [editor]="longEditor"
           [(ngModel)]="longDescription"
+          placeholder="Ausführliche Beschreibung der Eigenschaft"
         ></ngx-editor>
       </div>
       <div class="hint">Wird in der Detailansicht angezeigt</div>
@@ -49,59 +41,17 @@
 
     <div class="horizontal-buttons">
       @if(isUpdate){
-      <ui-button [color]="'green'" [width]="'w20'" (click)="update()"
+      <ui-button [color]="'green'" style="width: 45%" (click)="update()"
         >Aktualisieren</ui-button
       >
       }@else{
-      <ui-button [color]="'green'" [width]="'w20'" (click)="add()"
+      <ui-button [color]="'green'" style="width: 45%" (click)="add()"
         >hinzufügen</ui-button
       >
       }
-      <ui-button [color]="'red'" [width]="'w20'" (click)="cancel()"
+      <ui-button [color]="'red'" style="width: 45%" (click)="cancel()"
         >Abbrechen</ui-button
       >
     </div>
-
-    <!-- <div class="modal-input">
-      <label for="traitShortDescription">Kurzbeschreibung</label>
-      <textarea
-        id="traitShortDescription"
-        [(ngModel)]="shortDescription"
-      ></textarea>
-    </div>
-
-    <div class="modal-input">
-      <label for="traitLongDescription">Ausführliche Beschreibung</label>
-      <textarea
-        id="traitLongDescription"
-        [(ngModel)]="longDescription"
-      ></textarea>
-    </div>
-  </div> -->
-
-    <!-- <div class="button-wrapper-2-block">
-    @if(isUpdate){
-    <ui-button
-      [type]="'update'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="update()"
-    ></ui-button>
-    }@else{
-    <ui-button
-      *ngIf="!isUpdate"
-      [type]="'add'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="add()"
-    ></ui-button>
-    }
-    <ui-button
-      [type]="'cancel'"
-      [size]="'xlarge'"
-      [color]="'primary'"
-      (click)="cancel()"
-    ></ui-button>
-  </div> -->
   </div>
 </div>

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

@@ -1,18 +1,5 @@
-.modal-dimensions {
-    width: 50vw;
-    background-color: var(--modal-background);
-    border-radius: 10px;
-    border: 1px solid var(--border-color);
-    padding: 0 2rem;
-}
 .modal-input {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }
-
-// .add-form-group {
-//     display: flex;
-//     flex-direction: column;
-//     gap: 1rem;
-// }

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

@@ -4,14 +4,14 @@
     @for(trait of traits; let index = $index; track trait){
     <div class="item" (click)="openDetailsPanel(index)" cdkDrag>
       <div class="name">{{ trait.name }}</div>
-      <p>{{ trait.shortDescription }}</p>
+      <p [innerHTML]="trait.shortDescription"></p>
     </div>
     }@empty{
     <div class="empty-list">Noch keine Eigenschaft hinzugefügt</div>
     }
   </div>
   <div class="footer">
-    <ui-button [color]="'green'" [width]="'w25'" (click)="openModal(false)">
+    <ui-button [color]="'green'" style="width: 80%" (click)="openModal(false)">
       Hinzufügen
     </ui-button>
   </div>

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

@@ -9,7 +9,7 @@
 }
 
 .item-list {
-  height: calc(100% - 5rem);
+  height: 40rem;
 }
 
 .item {

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

@@ -12,7 +12,7 @@
 }
 
 .skill-item {
-    background-color: var(--primary-color);
+    background-color: var(--tab);
     border-radius: 1rem;
     font-weight: 500;
     padding: 0.25rem 0.5rem;

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

@@ -68,11 +68,11 @@
 </div>
 
 <!-- NAVIGATION BUTTONS -->
-<div class="button-container">
-  <button class="standard-button confirm" (click)="close('update')">
-    Anwenden
-  </button>
-  <button class="standard-button cancel" (click)="close('cancel')">
-    Abbrechen
-  </button>
+<div class="vertical-buttons bottom">
+  <ui-button [color]="'green'" [width]="'w20'" (click)="close('update')">
+    Anpassen
+  </ui-button>
+  <ui-button [color]="'red'" [width]="'w20'" (click)="close('cancel')">
+    Löschen
+  </ui-button>
 </div>

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

@@ -1,5 +1,5 @@
 .condition-handling {
-  height: calc(100% - 22.5rem);
+  height: calc(100% - 24.5rem);
   overflow: auto;
 }
 

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

@@ -14,8 +14,31 @@
         flex-wrap: wrap;
         width: 20rem;
         row-gap: 0.5rem;
-        input {
-            flex: 0 0 4rem;
-        }
+        column-gap: 3rem;
+        // input {
+        //     flex: 0 0 4rem;
+        // }
     }
 }
+
+input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border: 1px solid #000;
+    position: relative;
+}
+
+input[type="checkbox"]:checked::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 12px;
+    height: 12px;
+    background: #815139;
+    transform: translate(-50%, -50%);
+}

src/app/journal/journal-stats/life-container/life/life-details/life-details.component.html

@@ -21,11 +21,11 @@
 </div>
 <hit-dice style="margin-top: 5rem" (setHitDice)="setHitDice($event)"></hit-dice>
 
-<div class="button-container">
-  <button class="standard-button confirm" (click)="close('update')">
-    Anwenden
-  </button>
-  <button class="standard-button cancel" (click)="close('cancel')">
-    Abbrechen
-  </button>
+<div class="vertical-buttons bottom">
+  <ui-button [color]="'green'" [width]="'w20'" (click)="close('update')">
+    Anpassen
+  </ui-button>
+  <ui-button [color]="'red'" [width]="'w20'" (click)="close('cancel')">
+    Löschen
+  </ui-button>
 </div>

src/app/journal/journal-stats/life-container/life/life.component.ts

@@ -29,6 +29,7 @@ export class LifeComponent {
     this.maxHitPoints = hitPointsData.maxHitPoints;
     this.currentHitPoints = hitPointsData.currentHitPoints;
     this.temporaryHitPoints = hitPointsData.temporaryHitPoints;
+    this.hitDice = this.dataAccessor.hitDice;
     this.calculatePercentages();
   }
 

src/app/journal/journal-stats/weapons-container/spell-table/favorite-spells-modal/favorite-spells-modal.component.html

@@ -0,0 +1,169 @@
+<div class="dimensions">
+  <div class="shadow-box">
+    <div class="title t-0">Ausgewählte Zauber</div>
+    <hr style="margin-bottom: 0; margin: 1.5rem 2rem 0 2rem" />
+    <div class="heading-list">
+      <div>Kosten</div>
+      <div>Name</div>
+      <div>Stufe</div>
+      <div>Bonus</div>
+      <div>Effekt</div>
+      <div>Reichweite</div>
+    </div>
+  </div>
+  <div id="spells-table" class="item-list table-content">
+    @for(spell of preparedSpells; let index = $index; track spell){
+    <div
+      matRipple
+      class="spell-item"
+      [ngClass]="{ selected: checkedSpells[index] }"
+      (click)="checkedSpells[index] = !checkedSpells[index]"
+    >
+      <!--  Range Icon -->
+      <ng-container
+        [ngTemplateOutlet]="costTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+
+      <!-- Name -->
+      <ng-container
+        [ngTemplateOutlet]="spellNameTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+
+      <!-- Level -->
+      <ng-container
+        [ngTemplateOutlet]="spellLevelTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+
+      <!-- Attack -->
+      <ng-container
+        [ngTemplateOutlet]="spellAttackTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+
+      <!-- Damage/Heal -->
+      <ng-container
+        [ngTemplateOutlet]="spellDamageTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+      <div class="vertical-line"></div>
+
+      <!-- Range -->
+      <ng-container
+        [ngTemplateOutlet]="spellRangeTemplate"
+        [ngTemplateOutletContext]="{ spell: spell }"
+      ></ng-container>
+    </div>
+    }@empty{
+    <div
+      style="
+        text-align: center;
+        margin-top: 3rem;
+        font-size: 1.25rem;
+        font-weight: 500;
+      "
+    >
+      Noch keine Zauber vorbereitet.
+      <br />
+      Dies kannst du im Menü <i><b>Zauber</b></i> tun.
+    </div>
+    }
+  </div>
+
+  <div class="horizontal-buttons">
+    <ui-button [color]="'green'" style="width: 40%" (click)="update()">
+      Bestätigen
+    </ui-button>
+    <ui-button [color]="'red'" style="width: 40%" (click)="cancel()">
+      Abbrechen
+    </ui-button>
+  </div>
+</div>
+<!-- Templates -->
+
+<!-- COST -->
+<ng-template #costTemplate let-spell="spell">
+  <div class="bold">
+    <span *ngIf="spell.cost === 'action'">A</span>
+    <span *ngIf="spell.cost === 'bonus'">B</span>
+    <span *ngIf="spell.cost === 'reaction'">R</span>
+  </div>
+</ng-template>
+
+<!-- NAME -->
+<ng-template #spellNameTemplate let-spell="spell">
+  <div>
+    <div class="bold">{{ spell.german }}</div>
+    <div class="bold small">
+      <span *ngIf="spell.needsConcentration">C | </span>
+      <span *ngIf="spell.needsVerbal">V </span>
+      <span *ngIf="spell.needsSomatic">G </span>
+      <span *ngIf="spell.needsMaterial">M </span>
+      <div></div>
+    </div>
+  </div>
+</ng-template>
+
+<!-- Level -->
+<ng-template #spellLevelTemplate let-spell="spell">
+  <div *ngIf="spell.level !== 0" class="bold">{{ spell.level }}</div>
+  <div *ngIf="spell.level === 0" class="bold">Trick</div>
+</ng-template>
+
+<!-- Attack -->
+<ng-template #spellAttackTemplate let-spell="spell">
+  <div>
+    <div *ngIf="spell.needsSavingThrow">
+      <div>
+        {{ attributes[spell.savingThrowAttribute!] }}
+      </div>
+      <div>{{ spellSaveDC }}</div>
+    </div>
+    <div *ngIf="spell.needsAttackRoll">
+      <div>{{ spellAttackBonus }}</div>
+    </div>
+    <div *ngIf="!spell.needsSavingThrow && !spell.needsAttackRoll">-</div>
+  </div>
+</ng-template>
+
+<!-- Damage/Heal -->
+<ng-template #spellDamageTemplate let-spell="spell">
+  <div>
+    @if(spell.doesDamage){
+    <div *ngFor="let damage of spell.damage; let index = index">
+      <span>{{ damage.diceNumber }} {{ damage.diceType }} </span>
+      <span>
+        <icon [size]="'xs'" [type]="'damage'" [icon]="damage.damageType"></icon>
+      </span>
+    </div>
+    } @if(spell.doesHeal){
+    <div class="heal">
+      <span>{{ spell.heal.diceNumber }} {{ spell.heal.diceType }} </span>
+      <span *ngIf="spell.heal.additionalHeal"
+        >+{{ spell.heal.additionalHeal }}
+      </span>
+      <span>
+        <icon [size]="'xs'" [type]="'damage'" [icon]="'heal'"></icon>
+      </span>
+    </div>
+    }
+  </div>
+</ng-template>
+
+<!-- Range -->
+<ng-template #spellRangeTemplate let-spell="spell">
+  <div class="spell-range">
+    <div *ngIf="spell.isRanged">{{ spell.range }} ft.</div>
+    <div *ngIf="!spell.isRanged">Berührung</div>
+
+    <div *ngIf="spell.hasAreaOfEffect">
+      <span>{{ spell.radius }} ft. {{ areas[spell.areaOfEffectType] }} </span>
+    </div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,97 @@
+.dimensions {
+    height: 50rem;
+    width: 45rem;
+    padding: 0;
+    overflow: hidden;
+}
+
+.heading-list {
+    flex: 0 0 3rem;
+    padding: 10px 2rem;
+    display: grid;
+    grid-template-columns: 6fr 18fr 11fr 8fr 20fr 16fr;
+    text-align: center;
+    font-weight: 700;
+}
+
+.shadow-box {
+    box-shadow: var(--shadow-bottom);
+    position: relative;
+    padding-top: 1rem;
+}
+
+.item-list {
+    height: 36rem;
+    padding: 0 1rem;
+    display: block;
+    background: transparent;
+    border-radius: 4px;
+    overflow: auto;
+}
+
+.spell-item {
+    box-sizing: border-box;
+    margin: 15px 10px;
+    color: rgba(0, 0, 0, 0.87);
+    display: grid;
+    grid-template-columns: 6fr 0.1fr 20fr 0.1fr 10fr 0.1fr 8fr 0.1fr 20fr 0.1fr 16fr;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    background: var(--items);
+    border-radius: 10px;
+    border: var(--border);
+    font-size: 1rem;
+    font-weight: 600;
+    text-align: center;
+    cursor: pointer;
+    box-shadow:
+        0 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0 8px 8px 1px rgba(0, 0, 0, 0.14),
+        0 3px 10px 2px rgba(0, 0, 0, 0.12);
+    transition: background-color 0.2s ease-in-out;
+    &:hover {
+        background-color: #f8d8c6;
+    }
+}
+
+.selected {
+    background-color: #f8d8c6;
+    border: 3px solid var(--primary);
+    &:hover {
+        background-color: var(--items);
+    }
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.small {
+    font-size: 0.625rem;
+}
+
+.large {
+    font-size: 1.125rem;
+}
+
+.vertical-line {
+    position: relative;
+    width: 1px;
+    height: 3.5rem;
+}
+
+.vertical-line::before {
+    content: "";
+    position: absolute;
+    top: 15%;
+    bottom: 15%;
+    left: 0;
+    border-left: 1px solid black;
+}
+
+.horizontal-buttons {
+    box-shadow: var(--shadow-top);
+    position: relative;
+    padding: 1.5rem 3rem;
+}

src/app/journal/journal-stats/weapons-container/spell-table/favorite-spells-modal/favorite-spells-modal.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FavoriteSpellsModalComponent } from './favorite-spells-modal.component';
+
+describe('FavoriteSpellsModalComponent', () => {
+  let component: FavoriteSpellsModalComponent;
+  let fixture: ComponentFixture<FavoriteSpellsModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FavoriteSpellsModalComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(FavoriteSpellsModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/journal/journal-stats/weapons-container/spell-table/favorite-spells-modal/favorite-spells-modal.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Spell } from 'src/interfaces/spell';
+import { ModalService } from 'src/services/modal/modal.service';
+
+@Component({
+  selector: 'app-favorite-spells-modal',
+  templateUrl: './favorite-spells-modal.component.html',
+  styleUrl: './favorite-spells-modal.component.scss',
+})
+export class FavoriteSpellsModalComponent {
+  @Input() public preparedSpells: Spell[] = [];
+  @Input() public selectedSpells: Spell[] = [];
+  @Input() public spellAttackBonus: string = '0';
+  @Input() public spellSaveDC: number = 0;
+
+  checkedSpells: boolean[] = [];
+
+  public attributes: any = {
+    strength: 'STR',
+    dexterity: 'DEX',
+    constitution: 'CON',
+    intelligence: 'INT',
+    wisdom: 'WIS',
+    charisma: 'CHA',
+  };
+
+  public areas: any = {
+    cone: 'Kegel',
+    sphere: 'Kugel',
+    circle: 'Kreis',
+    line: 'Linie',
+    square: 'Quadrat',
+    cube: 'Würfel',
+  };
+
+  public constructor(private modalAccessor: ModalService) {}
+
+  public ngOnInit(): void {
+    this.checkedSpells = Array(this.preparedSpells.length).fill(false);
+    this.preparedSpells.forEach((spell, index) => {
+      this.checkedSpells[index] = this.selectedSpells.some(
+        (selectedSpell) => selectedSpell.id === spell.id
+      );
+    });
+  }
+
+  public update(): void {
+    const spells: Spell[] = this.preparedSpells.filter(
+      (spell, index) => this.checkedSpells[index]
+    );
+    this.modalAccessor.handleModalClosing('update', spells);
+    this.checkedSpells = [];
+  }
+
+  public cancel(): void {
+    this.modalAccessor.handleModalClosing('cancel', undefined);
+    this.checkedSpells = [];
+  }
+}

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

@@ -1,6 +1,6 @@
 <div class="spell-box">
   <div class="heading-list">
-    <div>Typ</div>
+    <div>Kosten</div>
     <div>Name</div>
     <div>Stufe</div>
     <div>Bonus</div>
@@ -17,7 +17,7 @@
     <div class="item" cdkDrag (click)="showFullSpellcard(index)">
       <!--  Range Icon -->
       <ng-container
-        [ngTemplateOutlet]="distanceIconTemplate"
+        [ngTemplateOutlet]="costTemplate"
         [ngTemplateOutletContext]="{ spell: spell }"
       ></ng-container>
       <div class="vertical-line"></div>
@@ -69,108 +69,96 @@
     </div>
     }
   </div>
-  <input
-    id="typeahead-basic"
-    type="text"
-    [class]="showInput ? 'spellInput' : 'spellInput hidden'"
-    (selectItem)="onSpellSelect($event.item); $event.preventDefault()"
-    [(ngModel)]="newSpellName"
-    [ngbTypeahead]="search"
-    placement="top-start"
-    placeholder="Name des vorbereiteten Zaubers"
-  />
-  <div class="footer"></div>
-  <button
-    [class]="showInput ? 'slide-button cancel-button' : 'slide-button'"
-    (click)="toggleInput()"
-  >
-    @if(showInput){ Abbrechen} @else { Hinzufügen}
-  </button>
-</div>
-
-<!-- Templates -->
+  <div class="footer">
+    <ui-button [color]="'green'" style="width: 80%" (click)="openModal()">
+      Bearbeiten
+    </ui-button>
+  </div>
 
-<!-- ICON -->
-<ng-template #distanceIconTemplate let-spell="spell">
-  <icon
-    [size]="'s'"
-    [type]="'weapon'"
-    [icon]="spell.isRanged ? 'distance' : 'touch'"
-  ></icon>
-</ng-template>
+  <!-- Templates -->
 
-<!-- NAME -->
-<ng-template #spellNameTemplate let-spell="spell">
-  <div>
-    <div class="bold">{{ spell.german }}</div>
-    <div class="bold small">
+  <!-- COST -->
+  <ng-template #costTemplate let-spell="spell">
+    <div class="bold">
       <span *ngIf="spell.cost === 'action'">A</span>
-      <span *ngIf="spell.cost === 'bonus'">B</span>
+      <span *ngIf="spell.cost === 'bonus action'">B</span>
       <span *ngIf="spell.cost === 'reaction'">R</span>
-      <span> | </span>
-      <span *ngIf="spell.needsConcentration">C | </span>
-      <span *ngIf="spell.needsVerbal">V </span>
-      <span *ngIf="spell.needsSomatic">G </span>
-      <span *ngIf="spell.needsMaterial">M </span>
-      <div></div>
     </div>
-  </div>
-</ng-template>
+  </ng-template>
 
-<!-- Level -->
-<ng-template #spellLevelTemplate let-spell="spell">
-  <div *ngIf="spell.level !== 0" class="bold">{{ spell.level }}</div>
-  <div *ngIf="spell.level === 0" class="bold">Trick</div>
-</ng-template>
-
-<!-- Attack -->
-<ng-template #spellAttackTemplate let-spell="spell">
-  <div>
-    <div *ngIf="spell.needsSavingThrow">
-      <div>
-        {{ attributes[spell.savingThrowAttribute!] }}
+  <!-- NAME -->
+  <ng-template #spellNameTemplate let-spell="spell">
+    <div>
+      <div class="bold">{{ spell.german }}</div>
+      <div class="bold small">
+        <span *ngIf="spell.needsConcentration">C | </span>
+        <span *ngIf="spell.needsVerbal">V </span>
+        <span *ngIf="spell.needsSomatic">G </span>
+        <span *ngIf="spell.needsMaterial">M </span>
+        <div></div>
       </div>
-      <div>{{ spellSaveDC }}</div>
-    </div>
-    <div *ngIf="spell.needsAttackRoll">
-      <div>{{ spellAttackBonus }}</div>
     </div>
-    <div *ngIf="!spell.needsSavingThrow && !spell.needsAttackRoll">-</div>
-  </div>
-</ng-template>
+  </ng-template>
 
-<!-- Damage/Heal -->
-<ng-template #spellDamageTemplate let-spell="spell">
-  <div>
-    @if(spell.doesDamage){
-    <div *ngFor="let damage of spell.damage; let index = index">
-      <span>{{ damage.diceNumber }} {{ damage.diceType }} </span>
-      <span>
-        <icon [size]="'xs'" [type]="'damage'" [icon]="damage.damageType"></icon>
-      </span>
+  <!-- Level -->
+  <ng-template #spellLevelTemplate let-spell="spell">
+    <div *ngIf="spell.level !== 0" class="bold">{{ spell.level }}</div>
+    <div *ngIf="spell.level === 0" class="bold">Trick</div>
+  </ng-template>
+
+  <!-- Attack -->
+  <ng-template #spellAttackTemplate let-spell="spell">
+    <div>
+      <div *ngIf="spell.needsSavingThrow">
+        <div>
+          {{ attributes[spell.savingThrowAttribute!] }}
+        </div>
+        <div>{{ spellSaveDC }}</div>
+      </div>
+      <div *ngIf="spell.needsAttackRoll">
+        <div>{{ spellAttackBonus }}</div>
+      </div>
+      <div *ngIf="!spell.needsSavingThrow && !spell.needsAttackRoll">-</div>
     </div>
-    } @if(spell.doesHeal){
-    <div class="heal">
-      <span>{{ spell.heal.diceNumber }} {{ spell.heal.diceType }} </span>
-      <span *ngIf="spell.heal.additionalHeal"
-        >+{{ spell.heal.additionalHeal }}
-      </span>
-      <span>
-        <icon [size]="'xs'" [type]="'damage'" [icon]="'heal'"></icon>
-      </span>
+  </ng-template>
+
+  <!-- Damage/Heal -->
+  <ng-template #spellDamageTemplate let-spell="spell">
+    <div>
+      @if(spell.doesDamage){
+      <div *ngFor="let damage of spell.damage; let index = index">
+        <span>{{ damage.diceNumber }} {{ damage.diceType }} </span>
+        <span>
+          <icon
+            [size]="'xs'"
+            [type]="'damage'"
+            [icon]="damage.damageType"
+          ></icon>
+        </span>
+      </div>
+      } @if(spell.doesHeal){
+      <div class="heal">
+        <span>{{ spell.heal.diceNumber }} {{ spell.heal.diceType }} </span>
+        <span *ngIf="spell.heal.additionalHeal"
+          >+{{ spell.heal.additionalHeal }}
+        </span>
+        <span>
+          <icon [size]="'xs'" [type]="'damage'" [icon]="'heal'"></icon>
+        </span>
+      </div>
+      }
     </div>
-    }
-  </div>
-</ng-template>
+  </ng-template>
 
-<!-- Range -->
-<ng-template #spellRangeTemplate let-spell="spell">
-  <div class="spell-range">
-    <div *ngIf="spell.isRanged">{{ spell.range }} ft.</div>
-    <div *ngIf="!spell.isRanged">Berührung</div>
+  <!-- Range -->
+  <ng-template #spellRangeTemplate let-spell="spell">
+    <div class="spell-range">
+      <div *ngIf="spell.isRanged">{{ spell.range }} ft.</div>
+      <div *ngIf="!spell.isRanged">Berührung</div>
 
-    <div *ngIf="spell.hasAreaOfEffect">
-      <span>{{ spell.radius }} ft. {{ areas[spell.areaOfEffectType] }} </span>
+      <div *ngIf="spell.hasAreaOfEffect">
+        <span>{{ spell.radius }} ft. {{ areas[spell.areaOfEffectType] }} </span>
+      </div>
     </div>
-  </div>
-</ng-template>
+  </ng-template>
+</div>

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

@@ -1,9 +1,8 @@
 .heading-list {
   flex: 0 0 3rem;
-  // padding: 0.5rem 0.625rem;
   padding: 10px 0.625rem;
   display: grid;
-  grid-template-columns: 6fr 20fr 10fr 8fr 20fr 16fr;
+  grid-template-columns: 4fr 17fr 9fr 8fr 19fr 16fr;
   text-align: center;
   font-weight: 700;
   box-shadow: var(--shadow-bottom);

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

@@ -9,6 +9,7 @@ import { SpellModalComponent } from 'src/app/journal/spell-modal/spell-modal.com
 import { FullSpellcardComponent } from 'src/app/shared-components/full-spellcard/full-spellcard.component';
 import { Observable, OperatorFunction } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
+import { FavoriteSpellsModalComponent } from './favorite-spells-modal/favorite-spells-modal.component';
 
 @Component({
   selector: 'spell-table',
@@ -24,9 +25,8 @@ export class SpellTableComponent {
 
   public spells!: Spell[];
   private preparedSpells!: Spell[];
-  private preparedSpellsNames: string[] = [];
+  // private preparedSpellsNames: string[] = [];
   public newSpellName: string = '';
-  public showInput: boolean = false;
 
   public attributes: any = {
     strength: 'STR',
@@ -55,7 +55,6 @@ export class SpellTableComponent {
   public ngOnInit(): void {
     this.spells = this.dataAccessor.favoriteSpells;
     this.preparedSpells = this.dataAccessor.getAllPreparedSpells();
-    this.preparedSpellsNames = this.preparedSpells.map((spell) => spell.german);
     this.subscribeToData();
   }
 
@@ -67,7 +66,7 @@ export class SpellTableComponent {
     const resultSubscription = this.modalAccessor.result$.subscribe(
       (result) => {
         resultSubscription.unsubscribe();
-        if (result.state === 'delete') {
+        if (result.state === 'remove') {
           this.spells.splice(spellIndex, 1);
           this.updateSpellsInDatabase();
         }
@@ -75,75 +74,24 @@ export class SpellTableComponent {
     );
   }
 
-  // LEGACY CODE
-  public openDetailsPanel(index: number): void {
-    this.detailsAccessor.openPanel(SpellDetailsComponent, {
-      spell: this.spells[index],
-      modifiers: {
-        attackBonus: this.spellAttackBonus,
-        saveDC: this.spellSaveDC,
-      },
-    });
-    const resultSubscription = this.detailsAccessor.result$.subscribe(
-      (result) => {
-        if (result.state === 'delete') {
-          this.deleteSpell(index);
-        } else if (result.state === 'update') {
-          this.openModal(true, index);
-        }
-        resultSubscription.unsubscribe();
-      }
-    );
-  }
-  //
-
-  public openModal(isUpdate: boolean, index?: number): void {
-    this.modalAccessor.openModal(SpellModalComponent, {
-      spell:
-        index !== undefined
-          ? JSON.parse(JSON.stringify(this.spells[index]))
-          : undefined,
-      isUpdate: isUpdate,
+  public openModal(): void {
+    this.modalAccessor.openModal(FavoriteSpellsModalComponent, {
+      preparedSpells: this.preparedSpells,
+      selectedSpells: this.spells,
+      spellAttackBonus: this.spellAttackBonus,
+      spellSaveDC: this.spellSaveDC,
     });
     const resultSubscription = this.modalAccessor.result$.subscribe(
       (result) => {
         if (result.state === 'update') {
-          this.updateSpell(result.data, index!);
-        } else if (result.state === 'add') {
-          this.addSpell(result.data);
+          this.spells = result.data;
+          this.updateSpellsInDatabase();
         }
         resultSubscription.unsubscribe();
       }
     );
   }
 
-  public toggleInput(): void {
-    this.showInput = !this.showInput;
-    this.newSpellName = '';
-  }
-
-  public onSpellSelect(spellname: any): void {
-    const newSpell = this.preparedSpells.filter(
-      (spell) => spell.german === spellname
-    );
-    if (newSpell.length !== 1) {
-      console.warn('Spell not found');
-    } else {
-      this.addSpell(newSpell[0]);
-    }
-    this.newSpellName = '';
-  }
-
-  public addSpell(spell: Spell) {
-    this.spells.push(spell);
-    this.updateSpellsInDatabase();
-  }
-
-  public updateSpell(spell: Spell, index: number): void {
-    this.spells[index] = spell;
-    this.updateSpellsInDatabase();
-  }
-
   public deleteSpell(index: number): void {
     this.spells.splice(index, 1);
     this.updateSpellsInDatabase();
@@ -188,24 +136,24 @@ export class SpellTableComponent {
     });
   }
 
-  public search: OperatorFunction<string, readonly string[]> = (
-    text$: Observable<string>
-  ) =>
-    text$.pipe(
-      debounceTime(200),
-      distinctUntilChanged(),
-      map((term) =>
-        term.length < 2
-          ? []
-          : this.preparedSpellsNames
-              .filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1)
-              .filter(
-                (v) =>
-                  !this.spells.some(
-                    (spell) => spell.german.toLowerCase() === v.toLowerCase()
-                  )
-              )
-              .slice(0, 5)
-      )
-    );
+  // public search: OperatorFunction<string, readonly string[]> = (
+  //   text$: Observable<string>
+  // ) =>
+  //   text$.pipe(
+  //     debounceTime(200),
+  //     distinctUntilChanged(),
+  //     map((term) =>
+  //       term.length < 2
+  //         ? []
+  //         : this.preparedSpellsNames
+  //             .filter((v) => v.toLowerCase().indexOf(term.toLowerCase()) > -1)
+  //             .filter(
+  //               (v) =>
+  //                 !this.spells.some(
+  //                   (spell) => spell.german.toLowerCase() === v.toLowerCase()
+  //                 )
+  //             )
+  //             .slice(0, 5)
+  //     )
+  //   );
 }

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

@@ -1,23 +1,29 @@
-<div class="details-title">{{ weapon?.name }}</div>
+<div class="title">{{ weapon?.name }}</div>
 
-<div class="property-title">Angriff</div>
+<div class="subheading left">Angriff</div>
 
-<div>Angriffsmodifikator:</div>
-{{ weapon?.attackBonus }}
+<div class="flex-row">
+  <div class="label">Modifikator:</div>
+  <span>{{ weapon?.attackBonus }}</span>
+</div>
 
 <!-- Singel Damage -->
-<div *ngIf="!weapon?.isVersatile">
-  Schaden:
-  <div *ngFor="let damage of weapon?.damage; let index = index">
-    {{ damage.diceNumber }} {{ damage.diceType }} {{ damage.damageType }}
-    <span *ngIf="index === 0 && damageModifier !== '0'">
-      {{ damageModifier }}
-    </span>
-  </div>
+@if(!weapon?.isVersatile){
+<div class="flex-row">
+  <div class="label">Schaden:</div>
+  @for(damage of weapon?.damage; let index = $index; track damage){
+  {{ damage.diceNumber }} {{ damage.diceType }}
+  <span *ngIf="index === 0 && damageModifier !== '0'">
+    {{ damageModifier }}
+  </span>
+  {{ damageTranslator[damage.damageType] }}
+
+  }
 </div>
+}
 
 <!-- Versatility Damage -->
-<div *ngIf="weapon?.isVersatile">
+<div *ngIf="weapon?.isVersatile" class="label">
   Einhändiger Schaden:
   <div *ngFor="let damage of weapon?.damage">
     {{ damage.diceNumber }} {{ damage.diceType }} {{ damage.damageType }}
@@ -32,32 +38,9 @@
   </div>
 </div>
 
-<!-- Ranged -->
-<div *ngIf="weapon?.isRanged">
-  Reichweite:
-  {{ weapon?.range }}
-</div>
-
-<!-- Thrown -->
-<div *ngIf="weapon?.canBeThrown">
-  Wurfweite:
-  {{ weapon?.throwRange }}
-</div>
-
 <!-- Magical -->
 
-<div *ngIf="weapon?.isMagical">
-  Magischer Modifikator:
-  {{ weapon?.magicBonus }}
-</div>
-
-<!-- Weight -->
-<div>
-  Gewicht:
-  {{ weapon?.weight }}
-</div>
-
-<div class="property-title">Eigenschaften</div>
+<div class="subheading left">Eigenschaften</div>
 <div class="weapon-properties">
   <span *ngIf="weapon?.proficient">Geübt </span>
   <span *ngIf="weapon?.isRanged">Fernkampf </span>
@@ -68,30 +51,32 @@
   <span *ngIf="weapon?.isMagical">Magisch </span>
 </div>
 
-<!-- Description -->
-<div class="property-title">Beschreibung</div>
-<div class="weapon-description">
-  <!-- TODO: realize -->
-  bla
+@if(weapon?.isRanged || weapon?.canBeThrown){
+<div class="subheading left">Reichweite</div>
+
+<!-- Ranged -->
+<div *ngIf="weapon?.isRanged">
+  Reichweite:
+  {{ weapon?.range }}
+</div>
+
+<!-- Thrown -->
+<div *ngIf="weapon?.canBeThrown">
+  Wurfweite:
+  {{ weapon?.throwRange }}
 </div>
+}
 
-<div class="vertical-button-wrapper-3">
-  <ui-button
-    [type]="'edit'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('update')"
-  ></ui-button>
-  <ui-button
-    [type]="'delete'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('delete')"
-  ></ui-button>
-  <ui-button
-    [type]="'cancel'"
-    [size]="'xlarge'"
-    [color]="'primary'"
-    (click)="close('cancel')"
-  ></ui-button>
+<!-- Description -->
+@if(weapon?.description != ""){
+<div class="subheading left">Beschreibung</div>
+<p class="content" [innerHTML]="weapon?.description"></p>
+}
+<div class="vertical-buttons bottom">
+  <ui-button [color]="'green'" [width]="'w20'" (click)="close('update')">
+    Anpassen
+  </ui-button>
+  <ui-button [color]="'red'" [width]="'w20'" (click)="close('delete')">
+    Löschen
+  </ui-button>
 </div>

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

@@ -1,6 +1,11 @@
-.property-title{
+.property-title {
     font-size: 1.25rem;
     font-weight: bold;
     margin-top: 1.5rem;
-    text-align:center;
-}
+    text-align: center;
+}
+
+.label {
+    width: 8rem;
+    font-weight: 500;
+}

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

@@ -8,11 +8,26 @@ import { Weapon } from 'src/interfaces/weapon';
   styleUrls: ['./weapon-details.component.scss'],
 })
 export class WeaponDetailsComponent {
-  public constructor(public detailsAccessor: DetailsService) {}
-
   @Input() weapon: Weapon | undefined;
   @Input() damageModifier: string = '0';
 
+  public damageTranslator: any = {
+    bludgeoning: 'Wucht',
+    piercing: 'Stich',
+    slashing: 'Hieb',
+    fire: 'Feuer',
+    cold: 'Kälte',
+    lightning: 'Blitz',
+    poison: 'Gift',
+    acid: 'Säure',
+    necrotic: 'Nekrotisch',
+    psychic: 'Psychisch',
+    holy: 'Heilig',
+    divine: 'Göttlich',
+    force: 'Kraft',
+  };
+
+  public constructor(public detailsAccessor: DetailsService) {}
   public close(result: string): void {
     this.detailsAccessor.closePanel(result);
   }

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

@@ -1,200 +1,270 @@
-<div class="modal-dimensions">
-  <h2 style="text-align: center">
+<div class="dimensions">
+  <div class="title">
     @if(isUpdate){Waffe bearbeiten} @else{Waffe hinzufügen}
-  </h2>
-
-  <div class="add-form-group">
-    <div class="input-element">
-      <label for="weaponName">Name</label>
-      <input type="text" class="add-input" id="weaponName" [(ngModel)]="name" />
-    </div>
-    <div class="form-element-row">
-      <div class="checkbox-element">
-        <input type="checkbox" [(ngModel)]="proficient" />
-        <label for="weaponProficient">Geübt</label>
-      </div>
-      <div class="checkbox-element">
-        <input type="checkbox" [(ngModel)]="isFinesse" />
-        <label for="weaponFinesse">Finesse</label>
-      </div>
-      <div class="checkbox-element">
-        <input type="checkbox" [(ngModel)]="isVersatile" />
-        <label for="Vielseitig">Vielseitig</label>
-      </div>
-      <div class="checkbox-element">
-        <input type="checkbox" [(ngModel)]="isTwoHanded" />
-        <label for="weaponTwoHanded">Zweihändig</label>
-      </div>
-      <div class="checkbox-element">
-        <input type="checkbox" [(ngModel)]="isRanged" />
-        <label for="weaponRanged">Fernkampf</label>
-      </div>
-      <div class="checkbox-element">
-        <select [(ngModel)]="weight">
-          <option *ngFor="let weight of weights" [value]="weight">
-            {{ weight }}
-          </option>
-        </select>
-        <label>Gewicht</label>
-      </div>
-      <div class="checkbox-element">
-        <input type="checkbox" [(ngModel)]="canBeThrown" />
-        <label for="weaponRanged">Wurfwaffe</label>
-      </div>
-      <div class="checkbox-element">
-        <input type="checkbox" [(ngModel)]="isMagical" />
-        <label>Magisch</label>
-      </div>
-    </div>
+  </div>
 
-    <div class="input-element">
-      <label for="weaponAttackBonus">Angriffsbonus</label>
-      <select [(ngModel)]="attackBonus">
-        <option *ngFor="let attackBonus of attackBonuses" [value]="attackBonus">
-          {{ attackBonus }}
-        </option>
-      </select>
-    </div>
+  <div class="content">
+    <div class="input-label">Name</div>
+    <mat-form-field appearance="outline" class="w-100">
+      <input matInput [(ngModel)]="name" />
+    </mat-form-field>
+    <hr />
 
-    <div class="input-element" *ngIf="isMagical">
-      <label>Magischer Modifikator</label>
-      <select [(ngModel)]="magicBonus">
-        <option
-          *ngFor="let magicBonus of magicBonuses"
-          [value]="magicBonus.value"
-        >
-          {{ magicBonus.display }}
-        </option>
-      </select>
-    </div>
+    <div class="flex-row t-1">
+      <div class="checkbox-column">
+        <div class="checkbox-row">
+          <input id="proficient" type="checkbox" [(ngModel)]="proficient" />
+          <label for="proficient">Geübt</label>
+        </div>
+        <div class="checkbox-row">
+          <input id="finesse" type="checkbox" [(ngModel)]="isFinesse" />
+          <label for="finesse">Finesse</label>
+        </div>
+        <div class="checkbox-row">
+          <input id="versatile" type="checkbox" [(ngModel)]="isVersatile" />
+          <label for="versatile">Vielseitig</label>
+        </div>
+        <div class="checkbox-row">
+          <input id="isTwohanded" type="checkbox" [(ngModel)]="isTwoHanded" />
+          <label for="isTwohanded">Zweihändig</label>
+        </div>
+      </div>
+      <div class="checkbox-column">
+        <div class="checkbox-row">
+          <input id="hasReach" type="checkbox" [(ngModel)]="hasReach" />
+          <label for="hasReach">Reichweite</label>
+        </div>
+        <div class="checkbox-row">
+          <input id="isRanged" type="checkbox" [(ngModel)]="isRanged" />
+          <label for="isRanged">Fernkampf</label>
+        </div>
 
-    <div class="input-element" *ngIf="isRanged">
-      <label for="weaponRange">Normale Reichweite</label>
-      <input
-        type="number"
-        class="add-input"
-        id="weaponRange"
-        [(ngModel)]="range[0]"
-      />
+        <div class="checkbox-row">
+          <input id="canBeThrown" type="checkbox" [(ngModel)]="canBeThrown" />
+          <label for="canBeThrown">Wurfwaffe</label>
+        </div>
+        <div class="checkbox-row">
+          <input id="isMagical" type="checkbox" [(ngModel)]="isMagical" />
+          <label for="isMagical">Magisch</label>
+        </div>
+      </div>
     </div>
 
-    <div class="input-element" *ngIf="isRanged">
-      <label for="weaponRange">Große Reichweite</label>
-      <input
-        type="number"
-        class="add-input"
-        id="weaponRange"
-        [(ngModel)]="range[1]"
-      />
-    </div>
+    <hr />
 
-    <div class="input-element" *ngIf="canBeThrown">
-      <label for="weaponRange">Normale Wurfreichweite</label>
-      <input
-        type="number"
-        class="add-input"
-        id="weaponRange"
-        [(ngModel)]="throwRange[0]"
-      />
-    </div>
+    <!-- TAB-PANEL -->
+    <div class="d-flex">
+      <div
+        ngbNav
+        #nav="ngbNav"
+        [(activeId)]="active"
+        class="flex-column navigation-bar"
+        orientation="vertical"
+      >
+        <ng-container ngbNavItem="damage">
+          <button ngbNavLink>Schaden</button>
+          <ng-template ngbNavContent>
+            <div class="flex-row">
+              <div class="w-50">
+                <div class="input-label">Angriffsbonus</div>
+                <mat-form-field appearance="outline">
+                  <mat-select [(ngModel)]="attackBonus">
+                    @for (attackBonus of attackBonuses; track attackBonus) {
+                    <mat-option [value]="attackBonus">{{
+                      attackBonus
+                    }}</mat-option
+                    >}
+                  </mat-select>
+                </mat-form-field>
+              </div>
 
-    <div class="input-element" *ngIf="canBeThrown">
-      <label for="weaponRange">Große Wurfreichweite</label>
-      <input
-        type="number"
-        class="add-input"
-        id="weaponRange"
-        [(ngModel)]="throwRange[1]"
-      />
-    </div>
+              <div *ngIf="isMagical">
+                <div class="input-label">Magischer Modifikator</div>
+                <mat-form-field appearance="outline">
+                  <mat-select [(ngModel)]="magicBonus">
+                    @for (magicBonus of magicBonuses; track magicBonus) {
+                    <mat-option [value]="magicBonus.value">
+                      {{ magicBonus.display }} </mat-option
+                    >}
+                  </mat-select>
+                </mat-form-field>
+              </div>
+            </div>
 
-    <h3 style="text-align: center">Schaden</h3>
+            <div class="flex-row t-05">
+              @for(damageEntry of damage; let index = $index; track
+              damageEntry){
 
-    <div class="damage-container">
-      <div class="damage-box" *ngFor="let damage of damage; let index = index">
-        <div class="dice-row">
-          <div class="flex-column">
-            <label>Anzahl</label>
-            <select [(ngModel)]="damage.diceNumber">
-              <option *ngFor="let number of numbers" [value]="number">
-                {{ number }}
-              </option>
-            </select>
-          </div>
+              <div class="damage-box">
+                <div class="subheading left t-025">
+                  @if(index == 0){Schaden} @else {Zusatzschaden}
+                </div>
+                <div class="input-label">Anzahl Würfel</div>
+                <mat-form-field appearance="outline">
+                  <mat-select [(ngModel)]="damageEntry.diceNumber">
+                    @for (number of numbers; track number) {
+                    <mat-option [value]="number"> {{ number }} </mat-option>}
+                  </mat-select>
+                </mat-form-field>
 
-          <div class="flex-column">
-            <label>Würfel</label>
-            <select [(ngModel)]="damage.diceType">
-              <option *ngFor="let die of dice" [value]="die">
-                {{ die }}
-              </option>
-            </select>
-          </div>
-        </div>
+                <div class="input-label t-05">
+                  Würfelart @if(isVersatile && index === 0){ (Einhändig)}
+                </div>
+                <mat-form-field appearance="outline">
+                  <mat-select [(ngModel)]="damageEntry.diceType">
+                    @for (die of dice; track die) {
+                    <mat-option [value]="die"> {{ die }} </mat-option>}
+                  </mat-select>
+                </mat-form-field>
+                @if(isVersatile && index === 0){
+                <div class="input-label t-05">Würfelart (Zweihändig)</div>
+                <mat-form-field appearance="outline">
+                  <mat-select [(ngModel)]="versatileDamage">
+                    @for (die of dice; track die) {
+                    <mat-option [value]="die"> {{ die }} </mat-option>}
+                  </mat-select>
+                </mat-form-field>
+                }
 
-        <div *ngIf="isVersatile && index === 0">
-          Zweihändiger Schaden
-          <div class="flex-row gap-10">
-            <div class="flex-column">
-              <label>Würfel</label>
-              <select [(ngModel)]="versatileDamage">
-                <option *ngFor="let die of dice" [value]="die">
-                  {{ die }}
-                </option>
-              </select>
+                <div class="input-label t-05">Schadensart</div>
+                <mat-form-field appearance="outline">
+                  <mat-select [(ngModel)]="damageEntry.damageType">
+                    @for (type of damageTypes; track type) {
+                    <mat-option [value]="type.value">
+                      {{ type.display }}
+                    </mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+                @if(index !== 0){
+                <icon-button
+                  [icon]="'delete'"
+                  (click)="removeDamage(index)"
+                ></icon-button>
+                }
+              </div>
+              @if(damage.length < 2){
+              <icon-button
+                [icon]="'add'"
+                style="margin-top: 7rem; margin-left: 5rem"
+                (click)="addDamage()"
+              ></icon-button>
+              } }
             </div>
-          </div>
-        </div>
-
-        <label for="damageType">Schadensart</label>
-        <select [(ngModel)]="damage.damageType">
-          <option *ngFor="let type of damageTypes" [value]="type.value">
-            {{ type.display }}
-          </option>
-        </select>
-
-        <icon
-          *ngIf="index > 0"
-          (click)="removeDamage(index)"
-          [size]="'m'"
-          [type]="'UI'"
-          [icon]="'remove'"
-          [class]="'pointer'"
-        ></icon>
+          </ng-template>
+        </ng-container>
+        <ng-container ngbNavItem="range">
+          @if(isRanged || canBeThrown){
+          <button ngbNavLink>Reichweite</button>
+          } @else {
+          <button class="disabled-button" disabled>Reichweite</button>
+          }
+          <ng-template ngbNavContent>
+            <div class="numbers">
+              @if(isRanged){
+              <div class="flex-row t-1">
+                <div class="w-50">
+                  <div class="input-label">Normale Reichweite</div>
+                  <mat-form-field appearance="outline">
+                    <input
+                      class="right"
+                      type="number"
+                      matInput
+                      [(ngModel)]="range[0]"
+                    />
+                    <span class="input-value" matTextSuffix>Fuß</span>
+                  </mat-form-field>
+                </div>
+                <div>
+                  <div class="input-label">Erweiterte Reichweite</div>
+                  <mat-form-field appearance="outline">
+                    <input
+                      class="right"
+                      type="number"
+                      matInput
+                      [(ngModel)]="range[1]"
+                    />
+                    <span class="input-value" matTextSuffix>Fuß</span>
+                  </mat-form-field>
+                </div>
+              </div>
+              } @if(canBeThrown){
+              <div class="flex-row t-2">
+                <div class="w-50">
+                  <div class="input-label">Normale Wurfreichweite</div>
+                  <mat-form-field appearance="outline">
+                    <input
+                      class="right"
+                      type="number"
+                      matInput
+                      [(ngModel)]="throwRange[0]"
+                    />
+                    <span class="input-value" matTextSuffix>Fuß</span>
+                  </mat-form-field>
+                </div>
+                <div>
+                  <div class="input-label">Erweiterte Wurfreichweite</div>
+                  <mat-form-field appearance="outline">
+                    <input
+                      class="right"
+                      type="number"
+                      matInput
+                      [(ngModel)]="throwRange[1]"
+                    />
+                    <span class="input-value" matTextSuffix>Fuß</span>
+                  </mat-form-field>
+                </div>
+              </div>
+              }
+            </div>
+          </ng-template>
+        </ng-container>
+        <ng-container ngbNavItem="description">
+          <button ngbNavLink>Beschreibung</button>
+          <ng-template ngbNavContent>
+            <div class="NgxEditor__Wrapper">
+              <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
+              </ngx-editor-menu>
+              <ngx-editor
+                [editor]="editor"
+                [(ngModel)]="description"
+                placeholder="Beschreibung der Waffe"
+              ></ngx-editor>
+            </div>
+          </ng-template>
+        </ng-container>
       </div>
-      <icon
-        *ngIf="damage.length < 3"
-        (click)="addDamage()"
-        [size]="'m'"
-        [type]="'UI'"
-        [icon]="'add'"
-        [class]="'pointer'"
-      ></icon>
-    </div>
 
-    <div class="button-wrapper-2-block">
-      @if(isUpdate){
-      <ui-button
-        [type]="'update'"
-        [size]="'xlarge'"
-        [color]="'primary'"
-        (click)="update()"
-      ></ui-button>
-      }@else{
-      <ui-button
-        *ngIf="!isUpdate"
-        [type]="'add'"
-        [size]="'xlarge'"
-        [color]="'primary'"
-        (click)="add()"
-      ></ui-button>
-      }
-      <ui-button
-        [type]="'cancel'"
-        [size]="'xlarge'"
-        [color]="'primary'"
-        (click)="cancel()"
-      ></ui-button>
+      <div
+        [ngbNavOutlet]="nav"
+        style="
+          width: 100%;
+          min-height: 20rem;
+          max-height: 26rem;
+          overflow-y: auto;
+          overflow-x: hidden;
+        "
+        class="ms-4"
+      ></div>
     </div>
+
+    <hr />
+  </div>
+
+  <div class="horizontal-buttons">
+    @if(isUpdate){
+    <ui-button [color]="'green'" style="width: 40%" (click)="update()">
+      Anpassen
+    </ui-button>
+    }@else{
+    <ui-button [color]="'green'" style="width: 40%" (click)="add()">
+      Erstellen
+    </ui-button>
+    }
+    <ui-button [color]="'red'" style="width: 40%" (click)="cancel()">
+      Abbrechen
+    </ui-button>
   </div>
 </div>
+
+Hallo, was geht ab ? Ich möchte gerne

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

@@ -1,75 +1,102 @@
-.modal-dimensions {
-    width: 40vw;
-    background-color: var(--modal-background);
-    border-radius: 10px;
-    border: 1px solid var(--border-color);
-    padding: 1rem;
-}
-
-.add-form-group {
+.checkbox-row {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     gap: 1rem;
+    align-items: center;
 }
-.input-element {
+
+.checkbox-column {
+    width: 50%;
     display: flex;
     flex-direction: column;
+    gap: 0.5rem;
+    padding-left: 0.5rem;
 }
 
-.checkbox-element {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex-basis: 33.33%;
+.damage-box {
+    width: 50%;
 }
 
-.form-element-row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    text-align: center;
-    row-gap: 1rem;
+.damage-box {
+    icon-button {
+        padding-left: 5.5rem;
+        margin-bottom: 1rem;
+        margin-top: 0.5rem;
+    }
 }
 
-.damage-container {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
+::ng-deep div.d-flex {
+    .mat-mdc-form-field-infix {
+        height: 40px !important;
+        min-height: 40px !important;
+        padding-top: 8px !important;
+    }
 }
 
-.damage-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 0.1rem;
+.numbers {
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        display: none;
+    }
+
+    input {
+        -moz-appearance: textfield;
+    }
+
+    .input-value {
+        padding-left: 0.5rem;
+    }
+
+    span {
+        color: darkgrey;
+    }
+    ::ng-deep .mat-mdc-text-field-wrapper {
+        width: 12rem !important;
+    }
 }
 
-.damage-box {
-    display: flex;
-    flex-direction: column;
-    align-items: left;
-    gap: 0.5rem;
-    flex-basis: 30%;
+div.nav-pills.flex-column.nav {
+    border-right: 1px solid darkgray;
+    padding-right: 4px;
 }
 
-.dice-row {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    margin-bottom: 1rem;
+::ng-deep .ProseMirror {
+    height: 17.5rem !important;
+    overflow-y: auto;
 }
 
-.button-wrapper {
-    width: 100%;
-    display: grid;
-    grid-template-rows: 1fr 1fr;
-    grid-template-columns: 1fr;
-    gap: 10px;
-    margin-top: 2rem;
-    margin-top: 2rem;
+.navigation-bar {
+    padding-top: 0.5rem;
+    gap: 1rem;
+    height: 20rem;
     align-items: center;
-    justify-content: center;
+    border-right: 1px solid rgba(0, 0, 0, 0.125);
+    padding-right: 4px;
+    width: 11rem;
+    // box-shadow: var(--shadow);
+
+    .nav-link {
+        width: 100%;
+        border-radius: 10px;
+        transition: all 0.25s ease-in-out;
+        // font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--text);
+        // padding: 0;
+
+        &.active,
+        &:hover {
+            background-color: var(--tab-active);
+            box-shadow: var(--shadow);
+        }
+    }
+
+    .disabled-button {
+        padding: 8px 0;
+        border: none;
+        font-weight: 600;
+        color: black;
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
 }

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

@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { Weapon } from 'src/interfaces/weapon';
 import { Damage } from 'src/interfaces/damage';
 import { ModalService } from 'src/services/modal/modal.service';
+import { Editor } from 'ngx-editor';
 
 @Component({
   selector: 'app-weapon-modal',
@@ -15,6 +16,7 @@ export class WeaponModalComponent {
 
   public name: string = '';
   public range: number[] = [5, 5];
+  public hasReach: boolean = false;
   public throwRange: number[] = [5, 5];
   public attackBonus: string = '+0';
   public damage: Damage[] = [{ diceNumber: '', diceType: '', damageType: '' }];
@@ -28,6 +30,17 @@ export class WeaponModalComponent {
   public weight: string = 'normal';
   public isMagical: boolean = false;
   public magicBonus: number = 0;
+  public description: string = '';
+
+  active = 'damage';
+  editor: Editor = new Editor();
+  html = '';
+  toolbar: any = [
+    // default value
+    ['bold', 'italic'],
+    ['bullet_list'],
+    [{ heading: ['h3', 'h4', 'h5', 'h6'] }],
+  ];
 
   // Options for the select boxes
   public weights: string[] = ['leicht', 'normal', 'schwer'];
@@ -48,7 +61,7 @@ export class WeaponModalComponent {
     { display: 'Kraft', value: 'force' },
   ];
 
-  public dice: string[] = ['d4', 'd6', 'd8', 'd10', 'd12', 'd20', 'd100'];
+  public dice: string[] = ['W4', 'W6', 'W8', 'W10', 'W12', 'W20', 'W100'];
 
   public numbers: string[] = [
     '1',
@@ -64,9 +77,6 @@ export class WeaponModalComponent {
   ];
 
   public attackBonuses: string[] = [
-    '-5',
-    '-4',
-    '-3',
     '-2',
     '-1',
     '+0',
@@ -109,6 +119,7 @@ export class WeaponModalComponent {
   public loadItem(): void {
     this.name = this.item.name;
     this.range = this.item.range;
+    this.hasReach = this.item.hasReach;
     this.throwRange = this.item.throwRange;
     this.attackBonus = this.item.attackBonus;
     this.damage = this.item.damage;
@@ -122,6 +133,7 @@ export class WeaponModalComponent {
     this.weight = this.item.weight;
     this.isMagical = this.item.isMagical;
     this.magicBonus = this.item.magicBonus;
+    this.description = this.item.description;
   }
 
   // RESPONSES
@@ -132,6 +144,7 @@ export class WeaponModalComponent {
   }
 
   public add(): void {
+    console.log(this.createItem());
     this.modalAccessor.handleModalClosing('add', this.createItem());
     this.resetItem();
   }
@@ -145,6 +158,7 @@ export class WeaponModalComponent {
     return {
       name: this.name,
       range: this.range,
+      hasReach: this.hasReach,
       throwRange: this.throwRange,
       attackBonus: this.attackBonus,
       damage: this.damage,
@@ -158,6 +172,7 @@ export class WeaponModalComponent {
       weight: this.weight,
       isMagical: this.isMagical,
       magicBonus: this.magicBonus,
+      description: this.description,
     };
   }
 
@@ -167,6 +182,7 @@ export class WeaponModalComponent {
   public resetItem(): void {
     this.name = '';
     this.range = [5, 5];
+    this.hasReach = false;
     this.throwRange = [5, 5];
     this.attackBonus = '+0';
     this.damage = [{ diceNumber: '', diceType: '', damageType: '' }];
@@ -180,6 +196,7 @@ export class WeaponModalComponent {
     this.weight = 'normal';
     this.isMagical = false;
     this.magicBonus = 0;
+    this.description = '';
   }
 
   // COMPONENT LOGIC

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

@@ -54,7 +54,9 @@
     }
   </div>
   <div class="footer">
-    <button (click)="openModal(false)">Hinzufügen</button>
+    <ui-button [color]="'green'" style="width: 80%" (click)="openModal(false)">
+      Hinzufügen
+    </ui-button>
   </div>
 </div>
 

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

@@ -1,7 +1,7 @@
 .heading-list {
   flex: 0 0 3rem;
   display: grid;
-  padding: 10px 20px;
+  padding: 10px 12px;
   grid-template-columns: 6fr 20fr 8fr 16fr 10fr;
   text-align: center;
   font-weight: 700;

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

@@ -83,7 +83,6 @@ export class WeaponTableComponent {
     }
     if (weapon.isMagical) {
       bonus = weapon.magicBonus!;
-      console.log(typeof weapon.magicBonus);
     }
     this.damageModifiers[index] = this.calculateModifier(value, bonus);
   }

src/app/journal/journal.module.ts

@@ -84,7 +84,6 @@ import { JournalMapsComponent } from './journal-maps/journal-maps.component';
 import { JournalRulesetComponent } from './journal-ruleset/journal-ruleset.component';
 import { JournalSettingsComponent } from './journal-settings/journal-settings.component';
 import { SimpleItemModalComponent } from './journal-inventory/simple-item-modal/simple-item-modal.component';
-import { FoodDetailsComponent } from './journal-inventory/food-details/food-details.component';
 import { SpellcardComponent } from './journal-spellcards/spellcard/spellcard.component';
 import { AddCardComponent } from './journal-spellcards/add-card/add-card.component';
 import { GeneralComponent } from './journal-character/general/general.component';
@@ -93,6 +92,8 @@ import { SubclassComponent } from './journal-character/subclass/subclass.compone
 import { SpeciesComponent } from './journal-character/species/species.component';
 import { BackgroundComponent } from './journal-character/background/background.component';
 import { StoryComponent } from './journal-character/story/story.component';
+import { FavoriteSpellsModalComponent } from './journal-stats/weapons-container/spell-table/favorite-spells-modal/favorite-spells-modal.component';
+import { MatRippleModule } from '@angular/material/core';
 
 @NgModule({
   declarations: [
@@ -160,7 +161,6 @@ import { StoryComponent } from './journal-character/story/story.component';
     SimpleItemDetailsComponent,
     ModalComponent,
     SimpleItemModalComponent,
-    FoodDetailsComponent,
     WeaponModalComponent,
     SpellcardComponent,
     AddCardComponent,
@@ -170,6 +170,7 @@ import { StoryComponent } from './journal-character/story/story.component';
     SpeciesComponent,
     BackgroundComponent,
     StoryComponent,
+    FavoriteSpellsModalComponent,
   ],
   imports: [
     CommonModule,
@@ -189,6 +190,7 @@ import { StoryComponent } from './journal-character/story/story.component';
     MatExpansionModule,
     MarkdownModule.forRoot(),
     NgxEditorModule,
+    MatRippleModule,
   ],
 })
 export class JournalModule {}

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

@@ -1,4 +1,4 @@
-.modal-dimensions{
+.modal-dimensions {
     width: 40vw;
     background-color: antiquewhite;
     border-radius: 10px;
@@ -6,25 +6,25 @@
     padding: 1rem;
 }
 
-.range-area-container{
+.range-area-container {
     display: flex;
     flex-direction: row;
 }
 
-.range-box, .area-box{
+.range-box,
+.area-box {
     display: flex;
     flex-direction: column;
     flex-basis: 45%;
     gap: 1rem;
 }
 
-.add-form-group{
+.add-form-group {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    
 }
-.input-element{
+.input-element {
     display: flex;
     flex-direction: column;
     // gap: 0.1rem;
@@ -32,7 +32,7 @@
     // justify-content: center;
 }
 
-.checkbox-element{
+.checkbox-element {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -40,25 +40,24 @@
     flex-basis: 33.33%;
 }
 
-.form-element-row{
+.form-element-row {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-around;
-    text-align:center;
+    text-align: center;
     row-gap: 1rem;
 }
 
-.damage-container{
+.damage-container {
     display: flex;
     flex-direction: row;
     gap: 1rem;
     // align-items: center;
     // justify-content: center;
-    
 }
 
-.damage-row{
+.damage-row {
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -66,15 +65,15 @@
     gap: 0.1rem;
 }
 
-.damage-box{
-    display:flex;
+.damage-box {
+    display: flex;
     flex-direction: column;
     align-items: left;
     gap: 0.5rem;
     flex-basis: 30%;
 }
 
-.dice-row{
+.dice-row {
     display: flex;
     flex-direction: row;
     // justify-content: center;
@@ -83,8 +82,7 @@
     margin-bottom: 1rem;
 }
 
-
-.button-wrapper{
+.button-wrapper {
     width: 100%;
     display: grid;
     grid-template-rows: 1fr 1fr;

src/app/shared-components/full-spellcard/full-spellcard.component.html

@@ -114,7 +114,7 @@
 
   <div class="delete-row">
     @if(isFromDashboard){
-    <button class="delete-button" (click)="delete()">Entfernen</button>
+    <button class="delete-button" (click)="remove()">Entfernen</button>
     }@else {
 
     <!-- Add to favorites -->

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

@@ -1,4 +1,5 @@
 button {
+    display: block;
     font-size: 1.25rem;
     font-weight: 600;
     height: 3rem;

src/app/shared-components/ui-button/ui-button.component.ts

@@ -17,7 +17,7 @@ export class UiButtonComponent {
    * @type {string}
    * @memberof UiButtonComponent
    */
-  @Input() width: string = '';
+  @Input() width: string = 'default';
 
   /**
    * The color of the button, default is neutral.

src/button-styles.scss

@@ -5,7 +5,7 @@
 }
 
 .vertical-buttons {
-    width: 100%;
+    width: 27rem;
     display: flex;
     flex-direction: column;
     align-items: center;

src/helpers.scss

@@ -154,3 +154,98 @@
     display: flex !important;
     flex-direction: column !important;
 }
+
+// Überprüfen, ob es verwendet wird
+
+.flex-centered {
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-left {
+    justify-content: start;
+}
+
+.flex-right {
+    justify-content: end;
+}
+
+.gap-01 {
+    gap: 0.1rem;
+}
+
+.gap-02 {
+    gap: 0.2rem;
+}
+
+.gap-03 {
+    gap: 0.3rem;
+}
+
+.gap-04 {
+    gap: 0.4rem;
+}
+
+.gap-05 {
+    gap: 0.5rem;
+}
+
+.gap-06 {
+    gap: 0.6rem;
+}
+
+.gap-07 {
+    gap: 0.7rem;
+}
+
+.gap-08 {
+    gap: 0.8rem;
+}
+
+.gap-09 {
+    gap: 0.9rem;
+}
+
+.gap-10 {
+    gap: 1rem;
+}
+
+.gap-11 {
+    gap: 1.1rem;
+}
+
+.gap-12 {
+    gap: 1.2rem;
+}
+
+.gap-13 {
+    gap: 1.3rem;
+}
+
+.gap-14 {
+    gap: 1.4rem;
+}
+
+.gap-15 {
+    gap: 1.5rem;
+}
+
+.gap-16 {
+    gap: 1.6rem;
+}
+
+.gap-17 {
+    gap: 1.7rem;
+}
+
+.gap-18 {
+    gap: 1.8rem;
+}
+
+.gap-19 {
+    gap: 1.9rem;
+}
+
+.gap-20 {
+    gap: 2rem;
+}

src/interfaces/weapon.ts

@@ -3,6 +3,7 @@ export interface Weapon {
   damage: Damage[];
   attackBonus: string;
   range: number[];
+  hasReach: boolean;
   throwRange?: number[];
   proficient: boolean;
   isVersatile: boolean;
@@ -14,6 +15,7 @@ export interface Weapon {
   versatileDamage?: string;
   isMagical: boolean;
   magicBonus?: number;
+  description: string;
 }
 
 interface Damage {

src/styles.scss

@@ -8,9 +8,9 @@
 
 :root {
     // COLORS to use but not official
-    --primary-color: #d8ac96;
-    --primary-color-light: #e8c7b5;
-    --primary-color-dark: #d89777;
+    // --primary: #d8ac96;
+    --primary-light: #e8c7b5;
+    --primary-dark: #d89777;
     --secondary-color: #efc8af;
     --secondary-color-light: #f8e1d7;
     --secondary-color-dark: #cfaa8c;
@@ -43,6 +43,9 @@
 
     // OFFICIAL COLORS
 
+    --primary-old: #d8ac96;
+    --primary: #b0826b;
+
     // Buttons
     --accept: #84a36f;
     --accept-hover: #6f9158;
@@ -54,6 +57,7 @@
     --neutral-hover: #a76b43;
     --tab: #c79980;
     --tab-active: #bc8567;
+    //
     // c28c6f
 
     // Spellcards
@@ -83,7 +87,8 @@
     --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
     --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
 
-    --primary-color: #d8ac96;
+    --old-primary: #d8ac96;
+    --primary-color: #a9836f;
     --background-color: #fff2e9;
     --field-background-color: #efc8af;
     --border-color: #8d8c8c;
@@ -97,17 +102,6 @@
 
     --border: 1px solid var(--border-color);
 
-    // Auslagern in UI-Button
-    .standard-button {
-        border: var(--border);
-        border-radius: 10px;
-        font-size: 1.25rem;
-        height: 3rem;
-        font-weight: 600;
-        box-shadow: var(--shadow);
-        transition: background-color 0.25s ease-in-out;
-    }
-
     // Responsiveness
     .responsive-small {
         display: none;
@@ -278,6 +272,15 @@ input[type="checkbox"] {
 
 // DETAILS + MODAL
 
+.dimensions {
+    width: 50rem;
+    background-color: var(--modal-background);
+    border-radius: 10px;
+    border: 1px solid var(--border-color);
+    padding: 0 2rem;
+    box-shadow: var(--shadow);
+}
+
 .title {
     font-size: 2rem;
     font-weight: bold;
@@ -304,6 +307,11 @@ input[type="checkbox"] {
     margin-bottom: 1.5rem;
 }
 
+.input-label {
+    font-weight: 600;
+    padding-left: 0.25rem;
+}
+
 .value-row {
     display: flex;
     flex-direction: row;
@@ -334,26 +342,22 @@ input[type="checkbox"] {
     padding-left: 0.25rem;
 }
 
+// RICH TEXT EDITOR
 .ProseMirror {
     padding-left: 1rem !important;
+    height: 8rem;
 }
 
 // Used to remove the empty space under form fields
 .mat-mdc-form-field-subscript-wrapper {
     display: none;
 }
-// .details-flex-row {
-//     display: flex;
-//     justify-content: space-between;
-//     align-items: center;
-// }
 
 html,
 body {
     height: 100%;
-}
-body {
     margin: 0;
+    font-family: var(--bs-body-font-family) !important;
 }
 
 .flex-row {
@@ -366,95 +370,19 @@ body {
     flex-direction: column;
 }
 
-.flex-centered {
-    align-items: center;
-    justify-content: center;
-}
-
-.flex-left {
-    justify-content: start;
-}
-
-.flex-right {
-    justify-content: end;
-}
-
-.gap-01 {
-    gap: 0.1rem;
-}
-
-.gap-02 {
-    gap: 0.2rem;
-}
-
-.gap-03 {
-    gap: 0.3rem;
-}
-
-.gap-04 {
-    gap: 0.4rem;
-}
-
-.gap-05 {
-    gap: 0.5rem;
-}
-
-.gap-06 {
-    gap: 0.6rem;
-}
-
-.gap-07 {
-    gap: 0.7rem;
-}
-
-.gap-08 {
-    gap: 0.8rem;
-}
-
-.gap-09 {
-    gap: 0.9rem;
-}
-
-.gap-10 {
-    gap: 1rem;
-}
-
-.gap-11 {
-    gap: 1.1rem;
-}
-
-.gap-12 {
-    gap: 1.2rem;
-}
-
-.gap-13 {
-    gap: 1.3rem;
-}
-
-.gap-14 {
-    gap: 1.4rem;
-}
-
-.gap-15 {
-    gap: 1.5rem;
-}
-
-.gap-16 {
-    gap: 1.6rem;
-}
-
-.gap-17 {
-    gap: 1.7rem;
-}
+// Overriding the default styles of angular material
 
-.gap-18 {
-    gap: 1.8rem;
+.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
+    color: var(--primary) !important;
 }
 
-.gap-19 {
-    gap: 1.9rem;
+.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
+.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
+    color: var(--primary) !important;
 }
 
-.gap-20 {
-    gap: 2rem;
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
+    border-color: var(--primary) !important;
 }