#19: refactor code

src/app/shared/components/rate-model-dialog/rate-model-dialog.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>Rate this Model - recognaizeui</h2>
   </div>
   <button
@@ -47,7 +47,7 @@
     ></textarea></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

src/app/shared/components/rate-model-dialog/rate-model-dialog.component.scss

@@ -129,3 +129,14 @@
   height: 82px;
   font-size: 14px;
 }
+
+.dialog-title {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  flex: 1 1 auto;
+}
+
+.cancel-button {
+  margin-right: auto;
+}

src/app/shared/components/rich-text-editor-dialog/rich-text-editor-dialog.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
@@ -22,7 +22,7 @@
     </form></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)="confirm()">Confirm</button>

src/app/shared/components/rich-text-editor-dialog/rich-text-editor-dialog.component.scss

@@ -65,3 +65,14 @@
   height: 82px;
   font-size: 14px;
 }
+
+.dialog-title {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  flex: 1 1 auto;
+}
+
+.cancel-button {
+  margin-right: auto;
+}

src/app/shared/components/tags-list/tags-list.component.html

 <div
-  style="position: relative"
+  class="tags-list-container"
   *ngIf="item.solutionTagList && item.solutionTagList.length > 0"
 >
   <div class="manage-tagList">

src/app/shared/components/tags-list/tags-list.component.scss

@@ -132,3 +132,7 @@ button[matMenuTriggerFor] {
   right: -8px;
   opacity: 0.7;
 }
+
+.tags-list-container {
+  position: relative;
+}

src/app/shared/components/upload-license-profile/upload-license-profile.component.html

@@ -15,12 +15,12 @@
     <div class="upload-image-input">
       <div class="drag-drop" gpDnd (fileDropped)="handleFileInput($event)">
         <img src="../../../../assets/images/upload-doc-vector.png" alt="" />
-        <div style="display: flex; flex-direction: column; align-items: center">
+        <div class="drag-drop-container">
           <div class="destext">Drag & Drop your file here!</div>
           <div class="destext">or</div>
           <button
+            class="drop-button"
             color="primary"
-            style="border-radius: 21.5px; width: 183px"
             (click)="fileDropRef.click()"
             mat-raised-button
           >
@@ -38,10 +38,9 @@
       <div *ngIf="file" class="files-list">
         <div class="single-file">
           <img
+            class="file-image"
             src="../../../../assets/images/ic-file.svg"
-            width="55px"
             alt="file"
-            style="align-self: flex-start"
           />
           <div class="info">
             <h4 class="name">
@@ -57,13 +56,7 @@
                 [value]="progressBarValue"
               ></mat-progress-bar>
             </div>
-            <div
-              style="
-                display: flex;
-                align-items: center;
-                justify-content: center;
-              "
-            >
+            <div class="progress-bar-value-number-container">
               <span> {{ progressBarValue | number: "1.0-0" }}% </span>
             </div>
           </div>

src/app/shared/components/upload-license-profile/upload-license-profile.component.scss

@@ -176,3 +176,25 @@ input[type="file"] {
 .upload-txtbox {
   display: none;
 }
+
+.drag-drop-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.drop-button {
+  border-radius: 21.5px;
+  width: 183px;
+}
+
+.file-image {
+  align-self: flex-start;
+  width: 55px;
+}
+
+.progress-bar-value-number-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/app/shared/components/version-dropdown/version-dropdown.component.html

@@ -12,15 +12,13 @@
   <mat-menu #menu2="matMenu">
     <mat-list role="list" *ngFor="let revision of revisionsList">
       <mat-list-item
+        class="list-item"
         (click)="onChangeVersion(revision)"
-        style="cursor: pointer"
         [ngClass]="{
           selected: revision.version === selectedDefaultRevision.version
         }"
       >
-        <span style="font-size: 14px; line-height: 24px; font-weight: 400"
-          >Version - {{ revision.version }}</span
-        >
+        <span class="version-text">Version - {{ revision.version }}</span>
       </mat-list-item>
     </mat-list>
   </mat-menu>

src/app/shared/components/version-dropdown/version-dropdown.component.scss

@@ -45,3 +45,13 @@
 ::ng-deep.mat-mdc-menu-panel {
   width: 200px !important;
 }
+
+.list-item {
+  cursor: pointer;
+}
+
+.version-text {
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: 400;
+}