Merge pull request #1333 from DSD-DBS/angular-style-update

fix: Update styling to minimize changes from Angular upgrade
DSD-DBS · Feb 9, 2024 · b4a9c9c · b4a9c9c
2 parents 020dc17 + 0b99fd3
commit b4a9c9c
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 31 deletions.
diff --git a/...ams/model-diagram-dialog/model-diagram-code-block/model-diagram-code-block.component.html b/...ams/model-diagram-dialog/model-diagram-code-block/model-diagram-code-block.component.html
@@ -31,14 +31,13 @@
   ></code></pre>
   <div class="flex flex-wrap gap-2">
     <button
-      class="mt-auto self-end"
       [cdkCopyToClipboard]="this.codeBlockContent"
       matTooltip="Copy codeblock to clipboard"
       color="bg-transparent"
       mat-raised-button
       (click)="showClipboardMessage()"
     >
-      <mat-icon>content_copy</mat-icon>
+      <mat-icon class="m-0">content_copy</mat-icon>
     </button>
     <button
       class="mt-auto self-end text-white"

diff --git a/...src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html b/...src/app/projects/models/diagrams/model-diagram-dialog/model-diagram-dialog.component.html
@@ -30,9 +30,9 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
   <span *ngIf="filteredDiagrams()"
     >{{ filteredDiagrams()?.length }} diagram(s) found:
   </span>
-  <div class="flex flex-wrap">
+  <div class="flex flex-wrap gap-5">
     <div
-      class="collab-card !flex grow basis-[calc(30%-20px)] flex-col justify-between gap-5"
+      class="collab-card !flex grow basis-[calc(30%-20px)] flex-col justify-between"
       #diagram
       [id]="diagram.uuid"
       [attr.success]="diagram.success"
@@ -56,7 +56,7 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
           margin: 0,
           padding: 0,
           height: '200px',
-          width: 'calc(100% - 10px)',
+          width: '100%',
           border: '1px solid white'
         }"
       ></ngx-skeleton-loader>
@@ -86,7 +86,7 @@ <h2 class="mb-5 text-xl font-medium">View diagrams</h2>
         </div>
       </div>
       <button
-        class="my-[5px] w-full"
+        class="mx-0 my-[5px] w-full"
         (click)="downloadDiagram(diagram.uuid)"
         mat-raised-button
         [disabled]="!diagram.success"

diff --git a/...src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html b/...src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html
@@ -11,7 +11,7 @@
     <form [formGroup]="form">
       <div formGroupName="urls">
         <div *ngIf="availableGitInstances?.length">
-          <mat-form-field appearance="fill">
+          <mat-form-field appearance="fill" class="w-full">
             <mat-label>Base integration URL</mat-label>
             <mat-select
               matInput
@@ -53,7 +53,7 @@
           </mat-form-field>
         </div>
         <div>
-          <div class="collab-card">
+          <div class="collab-card mb-5">
             <h2>Resulting URL*</h2>
 
             <div class="no-text-overflow">

diff --git a/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html b/frontend/src/app/projects/project-detail/project-users/project-user-settings.component.html
@@ -4,15 +4,10 @@
  -->
 
 <div *ngIf="!hasRoute('projects/create')" class="mr-2.5">
-  <div class="ml-[20px] flex justify-between">
-    <div>
-      <h2 class="text-xl font-medium">Project Members</h2>
-    </div>
-    <div class="flex flex-wrap gap-2"></div>
-  </div>
+  <h2 class="text-xl font-medium">Project Members</h2>
 </div>
 <div class="collab-card w-[312px] max-w-[350px] sm:min-w-[420px]">
-  <div class="my-[10px]" *ngIf="!hasRoute('projects/create')">
+  <div *ngIf="!hasRoute('projects/create')">
     <button
       class="flex items-center justify-between"
       (click)="openAuditLogDialog()"

diff --git a/frontend/src/app/sessions/session/session.component.html b/frontend/src/app/sessions/session/session.component.html
@@ -70,7 +70,9 @@
       class="flex"
     >
       Open session viewer
-      <mat-icon class="mat-icon-position">navigate_next</mat-icon>
+      <mat-icon iconPositionEnd class="mat-icon-position"
+        >navigate_next</mat-icon
+      >
     </button>
   </div>
 </div>

diff --git a/...end/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html b/...end/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html
@@ -38,7 +38,7 @@ <h2 class="mb-3 text-xl font-medium">No active sessions</h2>
     routerLink="/session"
   >
     <span> Open internal session viewer </span>
-    <mat-icon>keyboard_arrow_right</mat-icon>
+    <mat-icon iconPositionEnd>keyboard_arrow_right</mat-icon>
   </a>
 
   <div

diff --git a/...rapper/create-sessions/create-persistent-session/create-persistent-session.component.html b/...rapper/create-sessions/create-persistent-session/create-persistent-session.component.html
@@ -56,18 +56,15 @@ <h1 class="text-2xl">Persistent Workspace Session</h1>
         </mat-form-field>
       </div>
 
-      <div>
+      <div class="flex justify-center">
         <button
-          matInput
+          class="mx-0 w-full items-center"
           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>
-          </div>
+          Request a persistent workspace
+          <mat-icon iconPositionEnd>keyboard_arrow_right</mat-icon>
         </button>
       </div>
     </form>

diff --git a/frontend/src/app/settings/core/user-settings/user-settings.component.html b/frontend/src/app/settings/core/user-settings/user-settings.component.html
@@ -28,10 +28,12 @@ <h2 class="text-xl font-medium">Manage Users</h2>
       <div mat-subheader>Administrators</div>
       <div
         *ngFor="let user of getUsersByRole('administrator')"
-        class="mx-1.5 my-2.5 flex justify-between"
+        class="mx-1.5 my-2.5 flex items-center justify-between"
       >
         <a [routerLink]="['/user', user.id]" class="flex items-center">
-          <mat-icon mat-list-icon class="text-center">account_circle</mat-icon>
+          <mat-icon mat-list-icon class="min-w-[24px] text-center"
+            >account_circle</mat-icon
+          >
           <div class="ml-2">
             <div mat-line>{{ user.name }}</div>
             <div mat-line class="text-gray-500">
@@ -47,8 +49,10 @@ <h2 class="text-xl font-medium">Manage Users</h2>
         class="mx-1.5 my-2.5 flex justify-between"
       >
         <a [routerLink]="['/user', user.id]" class="flex items-center">
-          <mat-icon mat-list-icon>account_circle</mat-icon>
-          <div class="ml-5">
+          <mat-icon mat-list-icon class="min-w-[24px] text-center"
+            >account_circle</mat-icon
+          >
+          <div class="ml-2">
             <div mat-line>{{ user.name }}</div>
             <div mat-line class="text-gray-500">
               {{ projectUserService.ADVANCED_ROLES[user.role] }}
@@ -57,9 +61,9 @@ <h2 class="text-xl font-medium">Manage Users</h2>
         </a>
         <div class="ml-1 mr-0 flex items-center">
           <button
-            class="!mx-0 !h-[40px] !w-[40px] !px-0"
+            class="mx-0 px-0"
             mat-icon-button
-            color="error"
+            color="warn"
             *ngIf="['user'].includes(user.role)"
             (click)="deleteUser(user)"
             matTooltip="Permamently delete user"
@@ -68,7 +72,7 @@ <h2 class="text-xl font-medium">Manage Users</h2>
           </button>
 
           <button
-            class="!mx-0 !h-[40px] !w-[40px] !px-0"
+            class="mx-0 px-0"
             mat-icon-button
             color="primary"
             (click)="upgradeToAdministrator(user)"