Merge pull request #1317 from DSD-DBS/fix-angular-update-styling

fix: Minimize styling changes affected by Angular upgrade

frontend/src/app/helpers/confirmation-dialog/confirmation-dialog.component.html

@@ -5,7 +5,7 @@
 
 <div class="dialog">
   <form (submit)="onSubmit()">
-    <h2>{{ data.title }}</h2>
+    <h2 class="mb-5 text-xl font-medium">{{ data.title }}</h2>
     <p>{{ data.text }}</p>
     <p *ngIf="data.requiredInput">
       Please type in <span class="font-bold">{{ data.requiredInput }}</span> to

frontend/src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html

@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 <div class="dialog">
-  <h2>View diagrams</h2>
+  <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
   <div class="mb-2">
     Last update:
     {{
@@ -32,7 +32,7 @@ <h2>View diagrams</h2>
   </span>
   <div class="flex flex-wrap">
     <div
-      class="collab-card !flex grow basis-[calc(30%-20px)] flex-col justify-between"
+      class="collab-card !flex grow basis-[calc(30%-20px)] flex-col justify-between gap-5"
       #diagram
       [id]="diagram.uuid"
       [attr.success]="diagram.success"

frontend/src/app/projects/models/diagrams/model-diagram-preview-dialog/model-diagram-preview-dialog.component.html

@@ -3,16 +3,18 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="flex size-full flex-col justify-between">
+<div class="flex size-full flex-col justify-between overflow-hidden">
   <div class="p-2">
-    <h2>Diagram preview of '{{ data.diagram.name }}'</h2>
+    <h2 class="mb-5 text-xl font-medium">
+      Diagram preview of '{{ data.diagram.name }}'
+    </h2>
     <span>UUID: {{ data.diagram.uuid }}</span>
     <mat-divider id="top-divider"></mat-divider>
   </div>
   <div class="w-full grow">
     <img #diagram class="size-full" [src]="data.content" />
   </div>
-  <div class="w-full">
+  <div class="flex">
     <mat-divider id="bottom-divider"></mat-divider>
     <button class="w-full" mat-button mat-dialog-close>Close</button>
   </div>

frontend/src/app/projects/models/model-description/model-description.component.html

@@ -5,7 +5,6 @@
 
 <div class="wrapper flex-center flex">
   <div *ngIf="modelService.model$ | async" class="collab-card grow basis-1">
-    <h2>{{ (modelService.model$ | async)!.name }}</h2>
     <form (submit)="onSubmit()" [formGroup]="form">
       <fieldset>
         <mat-form-field appearance="fill">

frontend/src/app/projects/project-detail/edit-project-metadata/edit-project-metadata.component.html

@@ -4,7 +4,6 @@
  -->
 <div class="wrapper">
   <div id="metadata-card" class="collab-card w-fit">
-    <h2 id="title">Project Configuration</h2>
     <form [formGroup]="form">
       <div>
         <mat-form-field appearance="fill" class="w-full max-w-lg">

frontend/src/app/projects/project-detail/model-overview/model-overview.component.html

@@ -5,7 +5,6 @@
 
 <div>
   <div class="mt-1.5 flex items-center">
-    <h2 class="text-xl font-medium">Models</h2>
     <h2 class="text-xl font-medium">Models</h2>
     @if (projectUserService.verifyRole("manager")) {
       <a

frontend/src/app/projects/project-detail/model-overview/move-model/move-model.component.html

@@ -4,7 +4,7 @@
  -->
 
 <div class="dialog">
-  <h2>Move Model to Different Project</h2>
+  <h2 class="mb-5 text-xl font-medium">Move Model to Different Project</h2>
   <div>Select the project to which you want to move the model to.</div>
   <mat-form-field id="search" appearance="outline" class="w-full">
     <mat-label>Search</mat-label>

frontend/src/app/projects/project-detail/model-overview/reorder-models-dialog/reorder-models-dialog.component.html

@@ -4,7 +4,7 @@
  -->
 
 <div class="w-full p-[20px] md:max-w-[500px]">
-  <h2>Reorder models</h2>
+  <h2 class="mb-5 text-xl font-medium">Reorder models</h2>
   <div>
     Drag and drop models in the order you would like them to appear in the
     project overview, then press save.

frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html

@@ -52,7 +52,7 @@ <h3 class="pl-1">Current members</h3>
         {{ capitalizeFirstLetter(role) }}
       </div>
       <div
-        class="mx-1.5 my-2.5 flex justify-between"
+        class="mx-1.5 my-2.5 flex items-center justify-between"
         *ngFor="
           let user of getProjectUsersByRole(
             projectUserService.projectUsers$ | async,
@@ -81,7 +81,7 @@ <h3 class="pl-1">Current members</h3>
             *ngIf="['user', 'manager'].includes(user.role)"
             (click)="removeUserFromProject(user.user)"
             matTooltip="Remove user from project"
-            class="!mx-0 !h-[40px] !w-[40px] !px-0"
+            class="!mx-0 !px-0 text-sm"
           >
             <mat-icon>delete</mat-icon>
           </button>
@@ -92,7 +92,7 @@ <h3 class="pl-1">Current members</h3>
             *ngIf="'user' === user.role"
             (click)="upgradeUserToProjectManager(user.user)"
             matTooltip="Upgrade user to project manager"
-            class="!mx-0 !h-[40px] !w-[40px] !px-0"
+            class="!mx-0 !px-0 text-sm"
           >
             <mat-icon>arrow_upward</mat-icon>
           </button>
@@ -102,6 +102,7 @@ <h3 class="pl-1">Current members</h3>
             *ngIf="'manager' === user.role"
             (click)="downgradeUserToUserRole(user.user)"
             matTooltip="Downgrade user to simple user"
+            class="!mx-0 !px-0 text-sm"
           >
             <mat-icon>arrow_downward</mat-icon>
           </button>
@@ -112,7 +113,7 @@ <h3 class="pl-1">Current members</h3>
               *ngIf="'read' === user.permission"
               (click)="setUserPermission(user.user, 'write')"
               matTooltip="Set permission of user to read/write"
-              class="!mx-0 !h-[40px] !w-[40px] !px-0"
+              class="!mx-0 !px-0 text-sm"
             >
               <mat-icon>folder_shared</mat-icon>
             </button>
@@ -124,7 +125,7 @@ <h3 class="pl-1">Current members</h3>
               "
               (click)="setUserPermission(user.user, 'read')"
               matTooltip="Set permission of user to read only"
-              class="!mx-0 !h-[40px] !w-[40px] !px-0"
+              class="!mx-0 !px-0 text-sm"
             >
               <mat-icon>folder_open</mat-icon>
             </button>

frontend/src/app/sessions/user-sessions-wrapper/create-sessions/create-persistent-session/create-persistent-session.component.html

@@ -18,7 +18,7 @@ <h1 class="text-2xl">Persistent Workspace Session</h1>
       (ngSubmit)="requestPersistentSession()"
     >
       <div class="flex flex-wrap sm:flex-nowrap sm:justify-between sm:gap-2">
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="fill" class="w-full">
           <mat-label>Model tool</mat-label>
           <mat-select
             matInput
@@ -35,7 +35,7 @@ <h1 class="text-2xl">Persistent Workspace Session</h1>
           <mat-error> Please select a valid tool. </mat-error>
         </mat-form-field>
 
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="fill" class="w-full">
           <mat-label>Version</mat-label>
           <mat-select
             formControlName="versionId"
@@ -57,7 +57,13 @@ <h1 class="text-2xl">Persistent Workspace Session</h1>
       </div>
 
       <div>
-        <button matInput mat-flat-button color="primary" type="submit">
+        <button
+          matInput
+          mat-flat-button
+          color="primary"
+          type="submit"
+          class="w-full"
+        >
           <div class="flex items-center">
             Request a persistent workspace
             <mat-icon>keyboard_arrow_right</mat-icon>

frontend/src/app/settings/core/pipelines-overview/pipelines-overview.component.css

@@ -5,21 +5,17 @@
 
 .error {
   color: darkred;
-  background-color: white;
+  background-color: transparent;
 }
 
 .success {
   color: darkgreen;
-  background-color: white;
+  background-color: transparent;
 }
 
 .warning {
   color: darkorange;
-  background-color: white;
-}
-
-#search-input {
-  font-family: "Courier New";
+  background-color: transparent;
 }
 
 .project-card {

frontend/src/app/settings/core/user-settings/user-settings.component.html

@@ -33,8 +33,8 @@ <h2 class="text-xl font-medium">Manage Users</h2>
         <a [routerLink]="['/user', user.id]" class="flex items-center">
           <mat-icon mat-list-icon class="text-center">account_circle</mat-icon>
           <div class="ml-2">
-            <div mat-line class="text-xs">{{ user.name }}</div>
-            <div mat-line class="text-xs text-gray-500">
+            <div mat-line>{{ user.name }}</div>
+            <div mat-line class="text-gray-500">
               {{ projectUserService.ADVANCED_ROLES[user.role] }}
             </div>
           </div>

frontend/src/app/settings/modelsources/t4c-settings/edit-t4c-instance/edit-t4c-instance.component.html

@@ -3,7 +3,7 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div class="flex flex-wrap">
+<div class="flex flex-wrap gap-5">
   <div>
     <div class="collab-card">
       <h2 *ngIf="!existing" class="text-xl font-medium">
@@ -219,7 +219,7 @@ <h2 *ngIf="!existing" class="text-xl font-medium">
   </div>
 
   <div
-    class="flex flex-col flex-wrap"
+    class="flex flex-col flex-wrap gap-5"
     *ngIf="(t4cInstanceService.t4cInstance$ | async) !== undefined"
   >
     <app-licences

frontend/src/styles.css

@@ -11,10 +11,6 @@
 @tailwind components;
 @tailwind utilities;
 
-* {
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-}
-
 html,
 body {
   height: 100%;
@@ -51,10 +47,6 @@ table {
   width: 100%;
 }
 
-/* .scrollable {
-  overflow-y: scroll;
-} */
-
 /* All global variables are defined here */
 :root {
   --primary-color: #3f51b5;