#19: refactor code

src/app/features/dashboard/my-models/my-models.component.html

@@ -3,12 +3,11 @@
     <div>
       <gp-headline [headlineTitle]="'My Models'"></gp-headline>
     </div>
-
-    <div style="display: flex; flex-direction: row; gap: 6px">
-      <a class="link-home" (click)="onHomeClick()">Home</a>
-      <span class="link-marketplace">/</span>
-      <a class="link-marketplace">My Models</a>
-    </div>
+    <gp-breadcrumb-navigation
+      [firstNavigationLabel]="{ label: 'Home' }"
+      [secondNavigationLabel]="{ label: 'My models', disabled: true }"
+      (firstNavigationClicked)="onHomeClick()"
+    ></gp-breadcrumb-navigation>
   </div>
 </section>
 <mat-sidenav-container>
@@ -22,8 +21,8 @@
     ></gp-filters>
   </mat-sidenav>
   <mat-sidenav-content>
-    <div style="display: flex; flex-direction: column; padding: 20px">
-      <div style="display: flex; flex-direction: row; align-self: end">
+    <div class="content-container">
+      <div class="sort-toggle-container">
         <div class="gp-sort-by">
           <gp-sort-by
             [sortByOptions]="sortByOptions"
@@ -40,7 +39,7 @@
       </div>
       <!--Unpublished models section-->
       @if (modelType === "both") {
-        <div style="display: flex; flex-direction: column">
+        <div class="flex-column">
           <gp-model-list
             [solutions]="selectedUnpublishedSolutions"
             [totalItems]="unpublishedTotalItems"
@@ -62,19 +61,13 @@
             (backEvent)="onClickBack('both')"
           ></gp-model-list>
 
-          <div style="display: flex; margin-left: auto">
+          <div class="see-all-container">
             <button
-              style="cursor: pointer"
-              aria-label="Example icon button with a menu icon"
+              class="see-all-button"
+              aria-label="icon button with a menu icon"
               (click)="onClickSeeAll('unpublished')"
             >
-              <div
-                style="
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                "
-              >
+              <div class="see-all-text-container">
                 <span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
               </div>
             </button>
@@ -83,7 +76,7 @@
       }
 
       @if (modelType === "unpublished") {
-        <div style="display: flex; flex-direction: column">
+        <div class="flex-column">
           <gp-model-list
             [solutions]="selectedUnpublishedSolutions"
             [totalItems]="unpublishedTotalItems"
@@ -110,7 +103,7 @@
       <!--published solutions -->
 
       @if (modelType === "both") {
-        <div style="display: flex; flex-direction: column">
+        <div class="flex-column">
           <gp-model-list
             [solutions]="selectedPublishedSolutions"
             [totalItems]="publishedTotalItems"
@@ -132,19 +125,13 @@
             (backEvent)="onClickBack('both')"
           ></gp-model-list>
 
-          <div style="display: flex; margin-left: auto">
+          <div class="see-all-container">
             <button
-              style="cursor: pointer"
+              class="see-all-button"
               aria-label="Example icon button with a menu icon"
               (click)="onClickSeeAll('published')"
             >
-              <div
-                style="
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                "
-              >
+              <div class="see-all-text-container">
                 <span>See all</span> <mat-icon>arrow_forward_ios</mat-icon>
               </div>
             </button>
@@ -152,7 +139,7 @@
         </div>
       }
       @if (modelType === "published") {
-        <div style="display: flex; flex-direction: column">
+        <div class="flex-column">
           <gp-model-list
             [solutions]="selectedPublishedSolutions"
             [totalItems]="publishedTotalItems"

src/app/features/dashboard/my-models/my-models.component.scss

@@ -130,3 +130,35 @@ mat-sidenav-content {
   font-size: 14px;
   padding: 0 16px;
 }
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+
+.sort-toggle-container {
+  display: flex;
+  flex-direction: row;
+  align-self: end;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.see-all-text-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.see-all-container {
+  display: flex;
+  margin-left: auto;
+}
+
+.see-all-button {
+  cursor: pointer;
+}

src/app/features/dashboard/my-models/my-models.component.ts

@@ -30,6 +30,7 @@ import { environment } from 'src/environments/environment';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
 import { ModelListComponent } from 'src/app/shared/components/model-list/model-list.component';
+import { BreadcrumbNavigationComponent } from 'src/app/shared/components/breadcrumb-navigation/breadcrumb-navigation.component';
 
 export type ModelType = 'published' | 'unpublished' | 'both';
 
@@ -52,6 +53,7 @@ export type ModelType = 'published' | 'unpublished' | 'both';
     MatChipsModule,
     MatIconModule,
     ModelListComponent,
+    BreadcrumbNavigationComponent,
   ],
   templateUrl: './my-models.component.html',
   styleUrl: './my-models.component.scss',

src/app/features/dashboard/navbar/navbar.component.html

@@ -2,7 +2,7 @@
   <button mat-icon-button (click)="collapsed.set(!collapsed())">
     <mat-icon>menu</mat-icon>
   </button>
-  <button mat-button [matMenuTriggerFor]="menu" style="margin-left: auto">
+  <button mat-button [matMenuTriggerFor]="menu" class="firstName-button">
     {{ firstName$ | async }}
   </button>
   <mat-menu #menu="matMenu">

src/app/features/dashboard/navbar/navbar.component.scss

@@ -5,3 +5,7 @@
 .mat-toolbar button {
   color: white;
 }
+
+.firstName-button {
+  margin-left: auto;
+}

src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html

-<div style="display: flex; flex-direction: column; margin: 40px">
+<div class="header-container">
   <gp-headline [headlineTitle]="'On-Boarding Model'"></gp-headline>
   <gp-breadcrumb-navigation
     [firstNavigationLabel]="{ label: 'Home' }"
@@ -7,8 +7,8 @@
   ></gp-breadcrumb-navigation>
 </div>
 <mat-divider></mat-divider>
-<div style="display: flex; flex-direction: column; margin: 40px; width: 100%">
-  <div style="display: flex; flex-direction: column; width: 100%">
+<div class="content">
+  <div class="flex-column full-width">
     <!-- on boarding-->
     <div>
       <gp-headline
@@ -16,13 +16,13 @@
       ></gp-headline>
     </div>
 
-    <div style="display: flex; width: 100%">
-      <div style="display: flex; flex-direction: column; width: 50%">
+    <div class="flex-row full-width">
+      <div class="on-boarding-form-container">
         <!-- onboarding model form-->
         <form [formGroup]="onboardingModelForm">
-          <div style="display: flex; flex-direction: column; gap: 30px">
+          <div class="on-boarding-form-layout">
             <!--model name-->
-            <div style="display: flex; flex-direction: column">
+            <div class="flex-column">
               <mat-label>Model name</mat-label>
               <mat-form-field>
                 <input matInput formControlName="name" />
@@ -55,7 +55,7 @@
               </mat-form-field>
             </div>
             <!--docker URI-->
-            <div style="display: flex; flex-direction: column">
+            <div class="flex-column">
               <mat-label>Docker URI </mat-label>
               <mat-hint class="modal-note green"
                 ><strong>Dockerhub image example:</strong>
@@ -79,10 +79,10 @@
               </mat-form-field>
             </div>
             <!--protobuf file-->
-            <div style="display: flex; flex-direction: column; width: 100%">
+            <div class="flex-column full-width">
               <mat-label>Upload Protobuf File </mat-label>
-              <div style="display: flex; width: 100%; gap: 10px">
-                <mat-form-field style="height: 70px">
+              <div class="upload-file-container">
+                <mat-form-field>
                   <input matInput [value]="fileName" />
                   <mat-hint class="modal-note full-width no-padding">
                     Supported files type: .proto</mat-hint
@@ -100,7 +100,6 @@
                 </mat-form-field>
 
                 <button
-                  style="height: 48px"
                   color="primary"
                   mat-raised-button
                   (click)="onClickUploadProtoBufFile()"
@@ -113,7 +112,7 @@
               }
             </div>
             <!--license profile-->
-            <div style="display: flex; flex-direction: column">
+            <div class="flex-column">
               <mat-checkbox
                 color="primary"
                 formControlName="addLicenseProfile"
@@ -124,21 +123,14 @@
             @if (
               onboardingModelForm.controls["addLicenseProfile"].value === true
             ) {
-              <div style="display: flex; width: 100%">
+              <div class="flex-row full-width">
                 <gp-model-details-license-profile
                   [isExistingLicenseProfile]="false"
                 ></gp-model-details-license-profile>
               </div>
             }
 
-            <div
-              style="
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                gap: 10px;
-              "
-            >
+            <div class="buttons-container">
               <button mat-raised-button (click)="resetData()">
                 Reset form
               </button>

src/app/features/dashboard/on-boarding-model/on-boarding-model.component.scss

@@ -52,16 +52,6 @@
   background-position: center;
 }
 
-/* .progress-status:after {
-  content: "" !important;
-  background: url("../../../../assets/images/loading_deactive.png") no-repeat
-    left center;
-  display: inline-block;
-  width: 45px;
-  height: 12px;
-  transform: scale(0.8);
-}
- */
 .process-status-not-yet-started {
   background: url("../../../../assets/images/loading_deactive.png") no-repeat
     left center;
@@ -119,3 +109,59 @@
 .mdc-list-item.mdc-list-item--with-one-line {
   height: 90px;
 }
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.header-container {
+  display: flex;
+  flex-direction: column;
+  margin: 40px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  margin: 40px;
+  width: 100%;
+}
+
+.on-boarding-form-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.buttons-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.on-boarding-form-container {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+}
+
+.upload-file-container {
+  display: flex;
+  width: 100%;
+  gap: 10px;
+
+  mat-form-field {
+    height: 70px;
+  }
+
+  button {
+    height: 48px;
+  }
+}

src/app/features/landing-page/navbar/navbar.component.html

 <mat-toolbar class="mat-elevation-z3 custom-toolbar">
-  <div style="margin-right: 24px; cursor: pointer">
+  <div class="graphene-logo-container">
     <img src="../../../../assets/images/graphene_logo.svg" />
   </div>
   <div class="navbar-link-item">
     <button
       mat-button
-      class="link-active"
-      style="margin-left: auto"
+      class="link-active flexible-margin-left"
       (click)="onHomeClick()"
     >
       HOME
     </button>
     <button
       mat-button
-      class="text-color-white"
-      style="margin-left: auto"
+      class="text-color-white flexible-margin-left"
       (click)="onMarketPlaceClick()"
     >
       MARKETPLACE
     </button>
-    <button mat-button class="text-color-white" style="margin-left: auto">
+    <button mat-button class="text-color-white flexible-margin-left">
       ON-BOARDING MODEL
     </button>
-    <button mat-button class="text-color-white" style="margin-left: auto">
+    <button mat-button class="text-color-white flexible-margin-left">
       DOCUMENTATION
     </button>
   </div>
-  <div style="margin-left: auto"><gp-expanded-search></gp-expanded-search></div>
+  <div class="flexible-margin-left">
+    <gp-expanded-search></gp-expanded-search>
+  </div>
   <button mat-button (click)="openDialog()" class="text-color-white">
     SIGN IN
   </button>

src/app/features/landing-page/navbar/navbar.component.scss

@@ -43,3 +43,12 @@ img {
   color: #ffcc00 !important;
   opacity: 1;
 }
+
+.graphene-logo-container {
+  margin-right: 24px;
+  cursor: pointer;
+}
+
+.flexible-margin-left {
+  margin-left: auto;
+}

src/app/features/marketplace/marketplace.component.html

@@ -2,10 +2,7 @@
   <div class="mdl-grid mdl-grid.mdl-grid--no-spacing">
     <div>
       <gp-headline [headlineTitle]="'Marketplace |'"></gp-headline>
-      <div
-        style="display: flex; flex-direction: row; align-items: center"
-        *ngIf="loginUserId"
-      >
+      <div class="favorite-buttons-container" *ngIf="loginUserId">
         <button
           class="favorite-button"
           mat-raised-button
@@ -24,12 +21,11 @@
         </button>
       </div>
     </div>
-
-    <div style="display: flex; flex-direction: row; gap: 6px">
-      <a class="link-home" (click)="onHomeClick()">Home</a>
-      <span class="link-marketplace">/</span>
-      <a class="link-marketplace">Marketplace</a>
-    </div>
+    <gp-breadcrumb-navigation
+      [firstNavigationLabel]="{ label: 'Home' }"
+      [secondNavigationLabel]="{ label: 'Marketplace', disabled: true }"
+      (firstNavigationClicked)="onHomeClick()"
+    ></gp-breadcrumb-navigation>
   </div>
 </section>
 <mat-sidenav-container>
@@ -43,13 +39,13 @@
     ></gp-filters>
   </mat-sidenav>
   <mat-sidenav-content>
-    <div style="padding: 20px; display: flex; flex-direction: row">
-      <div style="flex: 1" *ngIf="!isLoading">
+    <div class="filters-container">
+      <div class="total-items-container" *ngIf="!isLoading">
         @if (totalItems > 0) {
-          <div style="margin: 24px; font-size: 14px; font-weight: normal">
-            <span style="color: #2e2f2f"
+          <div class="total-items-text-container">
+            <span class="showing-text"
               >Showing -
-              <span style="color: #8f8f8f">
+              <span class="total-items-text">
                 {{ calculateStartIndex() }} to {{ calculateEndIndex() }} of
                 {{ totalItems }} Models</span
               ></span

src/app/features/marketplace/marketplace.component.scss

@@ -130,3 +130,33 @@ mat-sidenav-content {
   font-size: 14px;
   padding: 0 16px;
 }
+
+.favorite-buttons-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.filters-container {
+  padding: 20px;
+  display: flex;
+  flex-direction: row;
+}
+
+.total-items-container {
+  flex: 1;
+}
+
+.total-items-text-container {
+  margin: 24px;
+  font-size: 14px;
+  font-weight: normal;
+}
+
+.showing-text {
+  color: #2e2f2f;
+}
+
+.total-items-text {
+  color: #8f8f8f;
+}

src/app/features/marketplace/marketplace.component.ts

@@ -35,6 +35,7 @@ import { Observable, Subscription, map } from 'rxjs';
 import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
 import { MatButtonModule } from '@angular/material/button';
 import { HeadlineComponent } from 'src/app/shared/components/headline/headline.component';
+import { BreadcrumbNavigationComponent } from 'src/app/shared/components/breadcrumb-navigation/breadcrumb-navigation.component';
 
 @Component({
   selector: 'gp-marketplace',
@@ -52,6 +53,7 @@ import { HeadlineComponent } from 'src/app/shared/components/headline/headline.c
     ListItemComponent,
     MatButtonModule,
     HeadlineComponent,
+    BreadcrumbNavigationComponent,
   ],
   templateUrl: './marketplace.component.html',
   styleUrl: './marketplace.component.scss',

src/app/features/model-details/model-details.component.html

-<section
-  class="pageheadsection"
-  style="overflow: auto !important"
-  *ngIf="data$ | async as data"
->
+<section class="pageheadsection" *ngIf="data$ | async as data">
   <div class="md-head-container1">
     <div class="md-head-containerinner1">
       <div matTooltip="{{ solution?.name?.toString()?.split('_')?.join('') }}">
@@ -59,13 +55,7 @@
               >
                 <img
                   [src]="getImagePath(menuEntry.title)"
-                  style="
-                    max-width: 50;
-                    padding-right: 5px;
-                    margin-right: 5px;
-                    border-right: 1px solid gray;
-                  "
-                  height="40px"
+                  class="deploy-image"
                 />
                 {{ menuEntry.title }}
               </mat-option>
@@ -86,7 +76,7 @@
     </ng-template>
   </div>
 
-  <div class="md-head-container2" style="margin-top: 12px">
+  <div class="md-head-container2 breadcrumb-navigation-container">
     <gp-breadcrumb-navigation
       [solution]="data.solution"
       [firstNavigationLabel]="{ label: 'Home' }"
@@ -114,9 +104,7 @@
     <div>
       <div>
         <span class="text-medium font600"
-          ><span
-            class="md-created-label"
-            style="text-overflow: unset; max-width: none"
+          ><span class="md-created-label"
             >Created by
             {{
               data.authors && data.authors[0]
@@ -151,8 +139,7 @@
   <div class="header-stats">
     <div>
       <a
-        class="link-blue text-medium md-icons1"
-        style="cursor: pointer"
+        class="link-blue text-medium md-icons1 scrollToComment-button"
         (click)="scrollToComment('view')"
         ><span
           class="statistics-icons icon-chat-blue md-icons1"
@@ -166,18 +153,17 @@
     <div *ngIf="data.solution?.active === true">|</div>
     <div *ngIf="data.solution?.active === true">
       <a
-        class="link-write-comments link-blue text-medium md-icons1"
-        style="cursor: pointer"
+        class="link-write-comments link-blue text-medium md-icons1 scrollToComment-button"
         (click)="scrollToComment('edit')"
         >Write comments</a
       >
     </div>
     <div>|</div>
-    <div class="text-medium" style="margin-top: 3px">
+    <div class="text-medium view-download-container">
       <gp-view-count [item]="data.solution" class="md-icons1"></gp-view-count>
     </div>
     <div>|</div>
-    <div class="text-medium" style="margin-top: 3px">
+    <div class="text-medium view-download-container">
       <gp-download-count
         [item]="data.solution"
         class="md-icons1"
@@ -237,7 +223,7 @@
           "
         >
         </span>
-        <span class="tab-box" style="font-size: 14.5px">
+        <span class="tab-box author-publisher-text">
           <span>Author</span>
           <span>/</span>
           <span>Publisher details</span>
@@ -250,7 +236,7 @@
       <h6 class="sectiontitle4">
         Tags<span class="title-icons icon-tags" alt="Tags" title="Tags"></span>
       </h6>
-      <mat-chip-set aria-label="Tags selection" style="padding: 8px">
+      <mat-chip-set class="chip-set-tags" aria-label="Tags selection">
         <mat-chip-option
           *ngFor="let tag of data.solution.solutionTagList"
           color="primary"
@@ -267,10 +253,7 @@
         Other {{ data.solution?.modelTypeName }} Models
       </h6>
       <mat-divider></mat-divider>
-      <a
-        class="text-small pull-right"
-        style="color: #0366d6; cursor: pointer"
-        (click)="onClickShowAll()"
+      <a class="text-small pull-right show-all" (click)="onClickShowAll()"
         >Show all</a
       >
       <div>
@@ -280,8 +263,7 @@
             class="list-item list-container"
           >
             <ul
-              class="model-list"
-              style="display: flex; cursor: pointer"
+              class="model-list go-to-related-solutions-ul"
               (click)="
                 goToRelatedSolutions(val.solutionId, val.latestRevisionId)
               "

src/app/features/model-details/model-details.component.scss

@@ -2,7 +2,6 @@
 @import url(../../../styles/icon_styles.scss);
 
 .mat-drawer-content {
-  /* overflow: hidden; */
   background-color: white;
 }
 
@@ -12,6 +11,7 @@
   position: relative;
   z-index: 1;
   padding: 10px 15px 10px 20px;
+  overflow: auto !important;
 }
 
 .link-home {
@@ -694,3 +694,46 @@ ul {
 ::ng-deep div.mat-mdc-select-panel {
   padding: 0px !important;
 }
+
+.deploy-image {
+  max-width: 50;
+  padding-right: 5px;
+  margin-right: 5px;
+  border-right: 1px solid gray;
+  height: 40px;
+}
+
+.breadcrumb-navigation-container {
+  margin-top: 12px;
+}
+
+.md-created-label {
+  text-overflow: unset;
+  max-width: none;
+}
+
+.scrollToComment-button {
+  cursor: pointer;
+}
+
+.view-download-container {
+  margin-top: 3px;
+}
+
+.author-publisher-text {
+  font-size: 14.5px;
+}
+
+.chip-set-tags {
+  padding: 8px;
+}
+
+.go-to-related-solutions-ul {
+  display: flex;
+  cursor: pointer;
+}
+
+.show-all {
+  color: #0366d6;
+  cursor: pointer;
+}

src/app/shared/components/card-item/card-item.component.html

@@ -15,30 +15,21 @@
   </mat-card-header>
   <mat-card-content>
     <div>
-      <div style="font-size: 14px">
+      <div class="item-name-text">
         {{ item.name.toString().split("_").join(" ") }}
       </div>
-      <label
-        *ngIf="isMarketPlacePage"
-        class="item-text-container"
-        style="
-          font-size: 11px;
-          font-weight: normal;
-          color: #2e2f2f;
-          height: 15px;
-        "
-      >
+      <label *ngIf="isMarketPlacePage" class="model-details-container">
         <span *ngIf="!item.sourceId && item.authors">
           {{ item.authors.length > 0 ? item.authors[0]?.name : item.ownerName }}
         </span>
         <span>{{ item.mPeer?.name }}</span> |
         <span> {{ item.modified || item.created | date: "MM/dd/yyyy" }}</span>
         |
-        <span style="color: rgb(253, 134, 56)" *ngIf="item.active">New</span>
+        <span class="active-item" *ngIf="item.active">New</span>
       </label>
     </div>
     <div
-      style="display: flex; align-items: center; gap: 4px"
+      class="catalog-publisher-container"
       *ngIf="isMarketPlacePage && isPublishedSolution"
     >
       <gp-catalog-name [item]="item"></gp-catalog-name>

src/app/shared/components/card-item/card-item.component.scss

@@ -36,11 +36,6 @@ mat-card-header {
   cursor: pointer;
 }
 
-.item-text-container {
-  display: block;
-  margin-bottom: 12px;
-}
-
 /*CSS code for Manage tagList:*/
 .a-mp-container1 {
   display: flex;
@@ -67,3 +62,26 @@ mat-card-header {
 .md-icons-tiles > span {
   min-width: 45px;
 }
+
+.item-name-text {
+  font-size: 14px;
+}
+
+.active-item {
+  color: rgb(253, 134, 56);
+}
+
+.model-details-container {
+  font-size: 11px;
+  font-weight: normal;
+  color: #2e2f2f;
+  height: 15px;
+  display: block;
+  margin-bottom: 12px;
+}
+
+.catalog-publisher-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}

src/app/shared/components/confirm-action/confirm-action.component.html

 <mat-toolbar class="dialog-header">
-  <div style="display: flex; align-items: center; padding: 0; flex: 1 1 auto">
+  <div class="dialog-title">
     <h2>{{ title }}</h2>
   </div>
   <button
@@ -20,8 +20,10 @@
   </div></mat-dialog-content
 >
 <mat-toolbar class="form-footer">
-  <button mat-dialog-close mat-raised-button style="margin-right: auto">
+  <button mat-dialog-close mat-raised-button class="cancel-button">
     Cancel
   </button>
-  <button color="primary" mat-raised-button (click)="onClickSecondAction()">{{secondAction}}</button>
+  <button color="primary" mat-raised-button (click)="onClickSecondAction()">
+    {{ secondAction }}
+  </button>
 </mat-toolbar>

src/app/shared/components/confirm-action/confirm-action.component.scss

+.dialog-title {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  flex: 1 1 auto;
+}
+
+.cancel-button {
+  margin-right: auto;
+}

src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component.html

 <mat-toolbar class="dialog-header">
-  <div style="display: flex; align-items: center; padding: 0; flex: 1 1 auto">
+  <div class="dialog-title">
     <h2 *ngIf="!isEditMode">Create New License Profile</h2>
     <h2 *ngIf="isEditMode">Modify New License Profile</h2>
     <span class="version">v0.0.13</span>
@@ -91,7 +91,7 @@
     </div></form
 ></mat-dialog-content>
 <mat-toolbar class="form-footer">
-  <button mat-dialog-close mat-raised-button style="margin-right: auto">
+  <button class="cancel-button" mat-dialog-close mat-raised-button>
     Cancel
   </button>
   <button

src/app/shared/components/create-edit-license-profile/create-edit-license-profile.component.scss

@@ -54,3 +54,14 @@
   text-transform: uppercase;
   font-family: "Open Sans", sans-serif;
 }
+
+.dialog-title {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  flex: 1 1 auto;
+}
+
+.cancel-button {
+  margin-right: auto;
+}