From 2efe8506ed082f645e9a2b67cead52c07122bcca Mon Sep 17 00:00:00 2001
From: romeonicholas <nicholas.romeo@code.berlin>
Date: Mon, 30 Oct 2023 15:54:36 +0100
Subject: [PATCH] Remove hard-coded form stylings, consolidate into css form
 style

---
 .../create-project.component.html             | 26 +++++------
 .../create-model-base.component.html          |  4 +-
 .../model-source/choose-source.component.html |  5 +--
 .../manage-git-model.component.html           |  2 +-
 .../manage-t4c-model.component.html           |  2 +-
 frontend/src/styles.css                       | 45 +++++++++----------
 6 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/frontend/src/app/projects/create-project/create-project.component.html b/frontend/src/app/projects/create-project/create-project.component.html
index 254c1fd5be..566d6c3509 100644
--- a/frontend/src/app/projects/create-project/create-project.component.html
+++ b/frontend/src/app/projects/create-project/create-project.component.html
@@ -11,7 +11,7 @@
   >
     <mat-step completed="false" label="Create new project">
       <div class="flex justify-center">
-        <mat-card>
+        <mat-card class="mat-card-form">
           <form [formGroup]="form">
             <p>
               <mat-form-field appearance="fill" class="form-field-default">
@@ -89,12 +89,11 @@
         <app-project-user-settings></app-project-user-settings>
       </div>
       <div *ngIf="projectService.project$ | async">
-        <div class="flex-container">
+        <div class="flex justify-between">
           <div></div>
-          <div class="w-[420px]">
-            <div class="flex-container">
-              <div></div>
-              <button
+          <div>
+            <div class="link-container-beneath-form flex justify-end">
+              <a
                 mat-button
                 color="primary"
                 (click)="stepper.next()"
@@ -112,7 +111,7 @@
                 <mat-icon class="mat-icon-position right"
                   >navigate_next</mat-icon
                 >
-              </button>
+              </a>
             </div>
           </div>
           <div></div>
@@ -128,12 +127,13 @@
           #model_creator
         ></app-create-model>
       </div>
-      <div class="flex-container sub-stepper-outside-button">
+      <div class="flex-container">
         <div></div>
-        <div class="w-[420px]">
-          <div class="flex-container">
-            <div></div>
-            <button
+        <div>
+          <div
+            class="link-container-beneath-form sub-stepper-outside-link-container flex justify-end"
+          >
+            <a
               mat-button
               [routerLink]="[
                 '/project',
@@ -157,7 +157,7 @@
                 Finish project creation
               </span>
               <mat-icon class="mat-icon-position right">check</mat-icon>
-            </button>
+            </a>
           </div>
         </div>
         <div></div>
diff --git a/frontend/src/app/projects/models/create-model-base/create-model-base.component.html b/frontend/src/app/projects/models/create-model-base/create-model-base.component.html
index 6d2de5a690..6e30907a3b 100644
--- a/frontend/src/app/projects/models/create-model-base/create-model-base.component.html
+++ b/frontend/src/app/projects/models/create-model-base/create-model-base.component.html
@@ -4,9 +4,9 @@
  -->
 
 <div class="flex justify-center">
-  <mat-card class="w-[420px]" *ngIf="projectService.project$ | async">
+  <mat-card class="mat-card-form" *ngIf="projectService.project$ | async">
     <form [formGroup]="form" (ngSubmit)="onSubmit()">
-      <fieldset class="flex flex-wrap">
+      <fieldset>
         <mat-form-field appearance="fill">
           <mat-label>Model name</mat-label>
           <input matInput formControlName="name" />
diff --git a/frontend/src/app/projects/models/model-source/choose-source.component.html b/frontend/src/app/projects/models/model-source/choose-source.component.html
index 7963f4b6bf..54f8551012 100644
--- a/frontend/src/app/projects/models/model-source/choose-source.component.html
+++ b/frontend/src/app/projects/models/model-source/choose-source.component.html
@@ -5,10 +5,7 @@
 <!-- New -->
 
 <div class="flex justify-center">
-  <mat-card
-    class="w-[400px] max-w-[85vw] !pb-0.5 pr-0"
-    *ngIf="projectService.project$ | async"
-  >
+  <mat-card class="mat-card-form" *ngIf="projectService.project$ | async">
     <div
       *ngIf="(projectService.project$ | async) && (modelService.model$ | async)"
     >
diff --git a/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html b/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html
index 569147e990..849a650d2a 100644
--- a/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html
+++ b/frontend/src/app/projects/models/model-source/git/manage-git-model/manage-git-model.component.html
@@ -7,7 +7,7 @@
   class="flex justify-center"
   *ngIf="(projectService.project$ | async) && (modelService.model$ | async)"
 >
-  <mat-card>
+  <mat-card class="mat-card-form">
     <form [formGroup]="form">
       <div formGroupName="urls">
         <fieldset *ngIf="availableGitInstances?.length">
diff --git a/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html b/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html
index e51ce8b5d3..3247c1697f 100644
--- a/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html
+++ b/frontend/src/app/projects/models/model-source/t4c/manage-t4c-model/manage-t4c-model.component.html
@@ -7,7 +7,7 @@
   *ngIf="(projectService.project$ | async) && (modelService.model$ | async)"
   class="wrapper flex justify-center"
 >
-  <mat-card>
+  <mat-card class="mat-card-form">
     <form [formGroup]="form" (ngSubmit)="onSubmit()">
       <fieldset>
         <app-form-field-skeleton-loader
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 8a30df937e..9aefa4d110 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -115,10 +115,6 @@ button.success {
   color: white;
 }
 
-mat-card {
-  margin: 10px;
-}
-
 h1 {
   margin: 10px;
 }
@@ -175,12 +171,30 @@ fieldset > :not(.field-separator) {
   text-align: center;
 }
 
-mat-card {
+.mat-card-form {
   width: 420px;
   padding-bottom: 0px;
   margin-bottom: 0px;
 }
 
+.link-container-beneath-form {
+  width: 420px;
+}
+
+.outer-stepper {
+  width: 710px;
+}
+
+.inner-stepper {
+  width: 680px;
+}
+
+.nextline-stepper .mat-step-label.mat-step-label {
+  text-align: center;
+  text-overflow: inherit;
+  white-space: normal;
+}
+
 .margin.default {
   margin: 10px;
 }
@@ -211,20 +225,6 @@ mat-card {
   margin: auto;
 }
 
-.outer-stepper {
-  width: 710px;
-}
-
-.inner-stepper {
-  width: 680px;
-}
-
-.nextline-stepper .mat-step-label.mat-step-label {
-  text-align: center;
-  text-overflow: inherit;
-  white-space: normal;
-}
-
 /*
 Angular Material Card Styles
 */
@@ -237,9 +237,8 @@ Angular Material Card Styles
   margin-left: 50px;
 }
 
-.sub-stepper-outside-button {
-  margin: -25px;
-  padding-bottom: 25px;
+.sub-stepper-outside-link-container {
+  margin-top: -15px;
 }
 
 .mat-card-overview .content {
@@ -294,7 +293,7 @@ Angular Material Card Styles
 }
 
 .form-field-default {
-  width: 405px;
+  width: 100%;
   max-width: 85vw;
 }