Update styling and text on model skip/abort button

DSD-DBS · Oct 24, 2023 · 9d1b202 · 9d1b202
1 parent 6174ff0
commit 9d1b202
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 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
@@ -118,7 +118,42 @@
         [redirectAfterCompletion]="false"
         #model_creator
       ></app-create-model>
-      <div class="flex-center">
+      <div
+        class="align-with-subsection-mat-card w-[400px] max-w-[85vw] !pb-0.5 pr-0"
+      >
+        <div class="flex-container">
+          <div></div>
+          <div>
+            <a
+              mat-button
+              [routerLink]="[
+                '/project',
+                (projectService.project$ | async)?.slug
+              ]"
+              [color]="getColorByModelCreationStep()"
+              data-testId="a-skipModelAndFinishProjectCreation"
+            >
+              <span *ngIf="modelCreationStep === 'create-model'">
+                Skip this step and finish
+              </span>
+              <span
+                *ngIf="
+                  modelCreationStep !== 'create-model' &&
+                  modelCreationStep !== 'complete'
+                "
+              >
+                Abort model creation and finish
+              </span>
+              <span *ngIf="modelCreationStep === 'complete'">
+                Finish project creation
+              </span>
+              <mat-icon class="mat-icon-position right">check</mat-icon>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!-- <div class="flex-center">
         <mat-card class="section-card">
           <div class="flex-center">
             <a
@@ -148,7 +183,7 @@
             </a>
           </div>
         </mat-card>
-      </div>
+      </div> -->
     </mat-step>
   </mat-horizontal-stepper>
 </div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
@@ -222,6 +222,10 @@ Angular Material Card Styles
   margin-left: 10px;
 }
 
+.align-with-subsection-mat-card {
+  margin-left: 35px;
+}
+
 .mat-card-overview .content {
   padding: 10px 20px;
   min-height: 64%;