From cd0c89b13593f2bc5a87a656a946108e876a4c09 Mon Sep 17 00:00:00 2001
From: alicia pritchett <aliciateaford@gmail.com>
Date: Fri, 15 Oct 2021 12:59:17 -0400
Subject: [PATCH] Style changes ~ makes buttons circles

---
 .../workflow-spec-list.component.html         | 26 +++++++++----------
 .../workflow-spec-list.component.scss         | 15 +++++++++--
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.html b/src/app/workflow-spec-list/workflow-spec-list.component.html
index 8caeffc..79e9b20 100644
--- a/src/app/workflow-spec-list/workflow-spec-list.component.html
+++ b/src/app/workflow-spec-list/workflow-spec-list.component.html
@@ -3,7 +3,7 @@
     <div>
       <h1 style="margin-top: 16px">Workflow Specifications</h1>
     </div>
-      <mat-form-field class="search-field">
+      <mat-form-field appearance="outline" style="padding:0">
         <label><input matInput type="search" placeholder="Search Workflows" fxLayoutAlign="start" style="margin-top: 0;" class="form-control" [formControl]="searchField"></label>
       </mat-form-field>
   </div>
@@ -24,9 +24,9 @@
       <mat-divider></mat-divider>
       <ng-container>
         <div class="category" fxLayout="row">
-          <h4 style="margin-top: 5px">Library Specs</h4>
-          <button id="add_spec" title="Add new Library" mat-flat-button color="primary" (click)="editWorkflowSpec('library')" fxLayoutAlign="auto">
-            <mat-icon>library_add</mat-icon>
+          <h4>Library Specs</h4>
+          <button mat-fab class="custom-fab" id="add_spec" title="Add new Library" color="primary" (click)="editWorkflowSpec('library')" fxLayoutAlign="auto">
+            <mat-icon class="custom-icon">library_add</mat-icon>
           </button>
         </div>
         <mat-divider></mat-divider>
@@ -52,15 +52,15 @@
 
       <ng-container>
         <div class="category" fxLayout="row">
-          <h4 style="margin-top: 5px">Study Specs</h4>
-          <button id="add_category" title="Add new Category" mat-flat-button color="accent" (click)="editWorkflowSpecCategory()"  fxLayoutAlign="stretch">
-            <mat-icon>post_add</mat-icon>
-
-          </button>
-          <button id="add_library" title="Add new Study Spec" mat-flat-button color="primary" (click)="editWorkflowSpec('study')" fxLayoutAlign="start">
-            <mat-icon>library_add</mat-icon>
-
-          </button>
+          <h4 style="margin-right: 25px">Study Specs</h4>
+          <div fxLayout="row" fxLayoutGap="5px">
+            <button id="add_category" title="Add new Category" mat-fab class="custom-fab" color="accent" (click)="editWorkflowSpecCategory()"  fxLayoutAlign="stretch">
+              <mat-icon class="custom-icon">post_add</mat-icon>
+            </button>
+            <button id="add_library" title="Add new Study Spec" mat-fab class="custom-fab" color="primary" (click)="editWorkflowSpec('study')" fxLayoutAlign="start">
+              <mat-icon class="custom-icon">library_add</mat-icon>
+            </button>
+            </div>
         </div>
         <mat-divider></mat-divider>
 
diff --git a/src/app/workflow-spec-list/workflow-spec-list.component.scss b/src/app/workflow-spec-list/workflow-spec-list.component.scss
index beaab28..3ae0359 100644
--- a/src/app/workflow-spec-list/workflow-spec-list.component.scss
+++ b/src/app/workflow-spec-list/workflow-spec-list.component.scss
@@ -4,6 +4,7 @@
   margin: 0;
   max-height: 40px;
 }
+
 .workflow-specs {
   padding: 3rem;
 }
@@ -12,6 +13,16 @@
   height: 60px;
 }
 
+.custom-fab {
+  width: 45px;
+  height: 45px;
+}
+
+.custom-icon {
+  margin-left: 10px;
+  margin-top: -15px;
+}
+
 .content {
   min-height: 600px;
 }
@@ -40,10 +51,10 @@
 }
 
 .category {
-  padding: 2rem 1rem 1rem 0;
+  padding: 2rem 1rem .75rem 0;
 
   h4 {
-    margin: 1rem 1rem 0 0;
+    margin: 5px 1rem 0 0;
   }
 
   .category-actions {