From ede7d588402d34c363bbff16516171232c70b2f0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 15 Oct 2018 16:48:23 -0400
Subject: [PATCH 01/10] Use default input style for slider text field

---
 client/galaxy/scripts/mvc/ui/ui-slider.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/galaxy/scripts/mvc/ui/ui-slider.js b/client/galaxy/scripts/mvc/ui/ui-slider.js
index 755d4ba4291..7293c62a00e 100644
--- a/client/galaxy/scripts/mvc/ui/ui-slider.js
+++ b/client/galaxy/scripts/mvc/ui/ui-slider.js
@@ -135,7 +135,7 @@ var View = Backbone.View.extend({
     _template: function() {
         return `<div class="ui-form-slider container-fluid">
                     <div class="row">
-                        <input class="ui-form-slider-text form-control" type="text"/>
+                        <input class="ui-input ui-form-slider-text" type="text"/>
                         <div class="ui-form-slider-element col mt-1"/>
                     </div>
                 </div>`;

From 69d31a7f03d0147cd96355c7cec4f9bdafd1937f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 15 Oct 2018 16:58:51 -0400
Subject: [PATCH 02/10] More mako adjustments for the toolshed/galaxy layer

---
 .../webapps/tool_shed/repository/common.mako  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/templates/webapps/tool_shed/repository/common.mako b/templates/webapps/tool_shed/repository/common.mako
index 3ccf893fee0..2a1ede67b7c 100644
--- a/templates/webapps/tool_shed/repository/common.mako
+++ b/templates/webapps/tool_shed/repository/common.mako
@@ -1088,9 +1088,9 @@
 
 <%def name="render_resolver_dependencies( requirements_status )">
     %if requirements_status:
-        <div class="toolForm">
-            <div class="toolFormTitle">Dependency Resolver Details</div>
-            <div class="toolFormBody">
+        <div class="card">
+            <div class="card-header">Dependency Resolver Details</div>
+            <div class="card-body">
                 <table cellspacing="2" cellpadding="2" border="0" width="100%" class="tables container-table" id="module_resolvers">
                     ${render_tool_dependency_resolver( requirements_status )}
                 </table>
@@ -1143,9 +1143,9 @@
     %if readme_files_root_folder:
         ${render_table_wrap_style( "readme_files" )}
         <p/>
-        <div class="toolForm">
-            <div class="toolFormTitle">Repository README files - may contain important installation or license information</div>
-            <div class="toolFormBody">
+        <div class="card">
+            <div class="card-header">Repository README files - may contain important installation or license information</div>
+            <div class="card-body">
                 <p/>
                 <% row_counter = RowCounter() %>
                 <table cellspacing="2" cellpadding="2" border="0" width="100%" class="tables container-table" id="readme_files">
@@ -1155,9 +1155,9 @@
         </div>
     %endif
     %if has_dependencies:
-        <div class="toolForm">
-            <div class="toolFormTitle">Dependencies of this repository</div>
-            <div class="toolFormBody">
+        <div class="card">
+            <div class="card-header">Dependencies of this repository</div>
+            <div class="card-body">
                 %if invalid_repository_dependencies_root_folder:
                     <p/>
                     <% row_counter = RowCounter() %>
@@ -1205,9 +1205,9 @@
     %endif
     %if has_contents:
         <p/>
-        <div class="toolForm">
-            <div class="toolFormTitle">Contents of this repository</div>
-            <div class="toolFormBody">
+        <div class="card">
+            <div class="card-header">Contents of this repository</div>
+            <div class="card-body">
                 %if valid_tools_root_folder:
                     <p/>
                     <% row_counter = RowCounter() %>
@@ -1256,9 +1256,9 @@
     %if tool_test_results_root_folder and trans.app.config.display_legacy_test_results:
         ${render_table_wrap_style( "test_environment" )}
         <p/>
-        <div class="toolForm">
-            <div class="toolFormTitle">Automated tool test results</div>
-            <div class="toolFormBody">
+        <div class="card">
+            <div class="card-header">Automated tool test results</div>
+            <div class="card-body">
                 <p/>
                 <% row_counter = RowCounter() %>
                 <table cellspacing="2" cellpadding="2" border="0" width="100%" class="tables container-table" id="test_environment">

From 8c5ccd328aeccf324c921f6f490c138aee708fba Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 16 Oct 2018 17:24:52 -0400
Subject: [PATCH 03/10] Realign history publishing options

---
 templates/webapps/galaxy/history/display.mako | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/webapps/galaxy/history/display.mako b/templates/webapps/galaxy/history/display.mako
index 788c6a42cb9..afe562c04d5 100644
--- a/templates/webapps/galaxy/history/display.mako
+++ b/templates/webapps/galaxy/history/display.mako
@@ -23,9 +23,9 @@
     switch_url = h.url_for( controller='history', action='switch_to_history', hist_id=encoded_history_id )
 %>
     %if not user_is_owner:
-        <a href="javascript:void(0)" class="history-copy-link btn btn-secondary fa fa-plus" title="Import history"></a>
+        <a href="javascript:void(0)" class="history-copy-link btn btn-secondary fa fa-plus float-right" title="Import history"></a>
     %else:
-        <a href="${switch_url}" class="btn btn-secondary fa fa-plus" title="${_('Switch to this history')}"></a>
+        <a href="${switch_url}" class="btn btn-secondary fa fa-plus float-right" title="${_('Switch to this history')}"></a>
     %endif
 </%def>
 

From 8e64ac209a47dd4d07010a3ca8c8da9d7a36f2a7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 17 Oct 2018 13:17:51 -0400
Subject: [PATCH 04/10] Restore sharing option alignments

---
 templates/webapps/galaxy/visualization/display.mako          | 2 +-
 templates/webapps/galaxy/visualization/display_in_frame.mako | 2 +-
 templates/webapps/galaxy/workflow/display.mako               | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/webapps/galaxy/visualization/display.mako b/templates/webapps/galaxy/visualization/display.mako
index 71b21cd9cc9..af180103226 100644
--- a/templates/webapps/galaxy/visualization/display.mako
+++ b/templates/webapps/galaxy/visualization/display.mako
@@ -41,7 +41,7 @@
 <%def name="render_item_links( visualization )">
     <a
         href="${h.url_for( controller='/visualization', action='imp', id=trans.security.encode_id( visualization.id ) )}"
-        class="btn btn-secondary fa fa-plus"
+        class="btn btn-secondary fa fa-plus float-right"
         title="Import visualization"></a>
 </%def>
 
diff --git a/templates/webapps/galaxy/visualization/display_in_frame.mako b/templates/webapps/galaxy/visualization/display_in_frame.mako
index 6d9bf10c939..f4fc1aec632 100644
--- a/templates/webapps/galaxy/visualization/display_in_frame.mako
+++ b/templates/webapps/galaxy/visualization/display_in_frame.mako
@@ -42,7 +42,7 @@
 
 <%def name="render_item_links( visualization )">
     <a href="${h.url_for( controller='/visualization', action='imp', id=trans.security.encode_id( visualization.id ) )}"
-        class="btn btn-secondary fa fa-plus"
+        class="btn btn-secondary fa fa-plus float-right"
         title="Import visualization"></a>
 </%def>
 
diff --git a/templates/webapps/galaxy/workflow/display.mako b/templates/webapps/galaxy/workflow/display.mako
index b604ebbadee..4c01992b98d 100644
--- a/templates/webapps/galaxy/workflow/display.mako
+++ b/templates/webapps/galaxy/workflow/display.mako
@@ -77,11 +77,11 @@
     %if workflow.importable:
     <a
         href="${h.url_for( controller='/workflow', action='imp', id=trans.security.encode_id(workflow.id) )}"
-        class="btn btn-secondary fa fa-plus"
+        class="btn btn-secondary fa fa-plus float-right"
         title="Import workflow"></a>
     <a
         href="${h.url_for( controller='/workflow', action='export_to_file', id=trans.security.encode_id(workflow.id) )}"
-        class="btn btn-secondary fa fa-download"
+        class="btn btn-secondary fa fa-download float-right mr-2"
         title="Save workflow"></a>
     %endif
 </%def>

From 2bf71d8cc750c60b5516cfe1344a70248dd79a40 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 17 Oct 2018 14:08:05 -0400
Subject: [PATCH 05/10] Fix panel padding

---
 client/galaxy/style/scss/base.scss | 7 +------
 static/style/blue/base.css         | 8 ++------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
index 18548a8fc57..4dc783f2ded 100644
--- a/client/galaxy/style/scss/base.scss
+++ b/client/galaxy/style/scss/base.scss
@@ -346,18 +346,13 @@ div.unified-panel-body {
     height: 100%;
     padding: 0px;
     flex: 1;
+    overflow: auto;
 }
 
 div.unified-panel-body-background {
     background: none repeat scroll 0 0 $panel-bg-color;
 }
 
-#left > div.unified-panel-body,
-#right > div.unified-panel-body {
-    padding-bottom: $panel_footer_height;
-    overflow: auto;
-}
-
 // Used for dragging panels, popup menus, to deal with capturing clicks in iframes
 #dd-helper {
     background: white;
diff --git a/static/style/blue/base.css b/static/style/blue/base.css
index 0a9b2bf8ba1..3b79a464211 100644
--- a/static/style/blue/base.css
+++ b/static/style/blue/base.css
@@ -12285,16 +12285,12 @@ div.unified-panel-body {
   width: 100%;
   height: 100%;
   padding: 0px;
-  flex: 1; }
+  flex: 1;
+  overflow: auto; }
 
 div.unified-panel-body-background {
   background: none repeat scroll 0 0 #f8f9fa; }
 
-#left > div.unified-panel-body,
-#right > div.unified-panel-body {
-  padding-bottom: 25px;
-  overflow: auto; }
-
 #dd-helper {
   background: white;
   opacity: 0;

From b9d88a2f5afb0cfa49f6cfaa56375e0d229fb8f5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 17 Oct 2018 14:17:27 -0400
Subject: [PATCH 06/10] Fix container paddings

---
 templates/display_base.mako                    | 16 ++--------------
 templates/webapps/galaxy/workflow/sharing.mako |  2 +-
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/templates/display_base.mako b/templates/display_base.mako
index 9b0e83f7eaa..3d2003998ef 100644
--- a/templates/display_base.mako
+++ b/templates/display_base.mako
@@ -47,7 +47,6 @@
 
     <style type="text/css">
         .page-body {
-            padding: 10px;
             height: 100%;
             overflow: auto;
         }
@@ -116,7 +115,7 @@
         href_to_user_items = h.url_for( controller='/' + modern_route, action='list_published', xxx=item.user.username)
         href_to_user_items = href_to_user_items.replace( 'xxx', 'f-username')
     %>
-    <div class="page-body">
+    <div class="page-body p-2">
         <div>
             ${self.render_item_header( item )}
         </div>
@@ -125,7 +124,6 @@
 </%def>
 
 <%def name="right_panel()">
-
     <%
         ## FIXME: duplicated from above for now
         modern_route = modern_route_for_controller(get_controller_name(item))
@@ -134,32 +132,25 @@
         href_to_user_items = h.url_for( controller='/' + modern_route, action='list_published', xxx=item.user.username)
         href_to_user_items = href_to_user_items.replace( 'xxx', 'f-username')
     %>
-
     <div class="unified-panel-header" unselectable="on">
         <div class="unified-panel-header-inner">
             About this ${get_class_display_name( item.__class__ )}
             ${self.render_item_links( item )}
         </div>
     </div>
-
     <div class="unified-panel-body">
         <div style="overflow: auto; height: 100%;">
-            <div style="padding: 10px;">
+            <div class="p-3">
                 <div style="float: right;"><img src="https://secure.gravatar.com/avatar/${h.md5(item.user.email)}?d=identicon"></div>
-
                 <h4>Author</h4>
-
                 <p>${item.user.username | h}</p>
-
                 ## Related items.
                 <h4>Related ${item_plural}</h4>
                 <p>
                     <a href="${href_to_all_items}">All published ${item_plural.lower()}</a><br>
                     <a href="${href_to_user_items}">Published ${item_plural.lower()} by ${item.user.username | h}</a>
-
                 ## Rating.
                 <h4>Rating</h4>
-
                 <%
                     label = "ratings"
                     if num_ratings == 1:
@@ -177,7 +168,6 @@
                     %if ave_item_rating > 0 and ave_item_rating <= 1.5:
                         checked="checked"
                     %endif
-
                     />
                     <input name="star1" type="radio" class="community_rating_star star" disabled="disabled" value="2"
                     %if ave_item_rating > 1.5 and ave_item_rating <= 2.5:
@@ -234,7 +224,6 @@
                     </div>
                 %endif
                 <div style="clear: both;"></div>
-
                 ## Tags.
                 <h4>Tags</h4>
                 <p>
@@ -257,5 +246,4 @@
             </div>
         </div>
     </div>
-
 </%def>
diff --git a/templates/webapps/galaxy/workflow/sharing.mako b/templates/webapps/galaxy/workflow/sharing.mako
index b6f1035e91e..d1095b035fc 100644
--- a/templates/webapps/galaxy/workflow/sharing.mako
+++ b/templates/webapps/galaxy/workflow/sharing.mako
@@ -307,7 +307,7 @@
 
 <%def name="body()">
     <div style="overflow: auto; height: 100%;">
-        <div class="page-container" style="padding: 10px;">
+        <div class="page-container p-2">
             ${self.render_header()}
             <h2>${get_class_display_name( item.__class__ )} '${get_item_name( item ) | h}'</h2>
             <hr/>

From 05da2263d657a7a3cc9454dfd20035743249c11a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 17 Oct 2018 15:36:49 -0400
Subject: [PATCH 07/10] Adjust collections in history panel

---
 client/galaxy/style/scss/base.scss       |  5 ---
 client/galaxy/style/scss/collection.scss | 24 +--------------
 client/galaxy/style/scss/list-item.scss  |  2 +-
 static/style/blue/base.css               | 39 ++++++++----------------
 4 files changed, 14 insertions(+), 56 deletions(-)

diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
index 4dc783f2ded..10ad24c7dc4 100644
--- a/client/galaxy/style/scss/base.scss
+++ b/client/galaxy/style/scss/base.scss
@@ -223,11 +223,9 @@ body {
         align-items: center;
         justify-content: space-between;
     }
-
     .panel-header-buttons {
         order: 9999;
     }
-
     .panel-header-button {
         text-decoration: none;
         display: inline-block;
@@ -238,7 +236,6 @@ body {
         &:not(:last-child) {
             margin-right: 2px;
         }
-
         // Fade to maroon on hover
         &:hover {
             color: maroon;
@@ -269,12 +266,10 @@ body {
     z-index: 1000; // Above #dd-helper
     border-top: $layout-border;
     background: $navbar-default-bg;
-
     color: #555;
     a {
         color: #555;
     }
-
     .drag {
         position: absolute;
         top: 0;
diff --git a/client/galaxy/style/scss/collection.scss b/client/galaxy/style/scss/collection.scss
index 33fb76ff177..4fcc2f45b3e 100644
--- a/client/galaxy/style/scss/collection.scss
+++ b/client/galaxy/style/scss/collection.scss
@@ -29,46 +29,24 @@
     .vertically-spaced {
         margin-top: 4px;
     }
-
     > .controls {
-        margin: 8px 8px 1px;
-        padding: 0px;
-        // padding: 8px;
-
+        @extend .mx-3;
         .navigation {
-            margin-top: 4px;
             .back {
                 span {
-                    @extend .fa-lg;
-                    margin-right: 4px;
                     font-weight: bold;
                 }
             }
         }
         .title {
-            margin-top: 12px;
             .name {
                 font-weight: bold;
             }
         }
     }
-
     > .list-items {
         @extend .flex-column;
         overflow-x: hidden;
         overflow-y: auto;
-
-        &:not(:empty) {
-            border-top: 1px solid $border-default-color;
-        }
-        .list-item {
-            border-width: 1px 0px 0px 0px;
-            &:first-child {
-                border-top-width: 0px;
-            }
-            &:last-child {
-                border-bottom-width: 1px;
-            }
-        }
     }
 }
diff --git a/client/galaxy/style/scss/list-item.scss b/client/galaxy/style/scss/list-item.scss
index 9a3c8c3dc41..bf4acfbef64 100644
--- a/client/galaxy/style/scss/list-item.scss
+++ b/client/galaxy/style/scss/list-item.scss
@@ -145,7 +145,7 @@ $vertical-gap: 8px;
 
     .controls {
         & > *:not(:empty) {
-            margin-bottom: 8px;
+            @extend .mb-2;
         }
         .name {
             word-wrap: break-word;
diff --git a/static/style/blue/base.css b/static/style/blue/base.css
index 3b79a464211..f2d4b502a62 100644
--- a/static/style/blue/base.css
+++ b/static/style/blue/base.css
@@ -5628,7 +5628,7 @@ button.bg-dark:focus {
 .mx-2 {
   margin-right: 0.5rem !important; }
 
-.mb-2, .ui-portlet-section, #tool-search,
+.mb-2, .ui-portlet-section, #tool-search, .list-panel .controls > *:not(:empty),
 .my-2 {
   margin-bottom: 0.5rem !important; }
 
@@ -5646,7 +5646,8 @@ button.bg-dark:focus {
 .mr-3,
 .mx-3,
 .unified-panel-header,
-.list-item .primary-actions {
+.list-item .primary-actions,
+.dataset-collection-panel > .controls {
   margin-right: 1rem !important; }
 
 .mb-3,
@@ -5656,7 +5657,8 @@ button.bg-dark:focus {
 .ml-3,
 .mx-3,
 .unified-panel-header,
-.list-item .primary-actions {
+.list-item .primary-actions,
+.dataset-collection-panel > .controls {
   margin-left: 1rem !important; }
 
 .m-4 {
@@ -6890,7 +6892,7 @@ pre.code {
   -moz-osx-font-smoothing: grayscale; }
 
 /* makes the font 33% larger relative to the icon container */
-.fa-lg, .dataset-collection-panel > .controls .navigation .back span {
+.fa-lg {
   font-size: 1.33333em;
   line-height: 0.75em;
   vertical-align: -15%; }
@@ -6924,7 +6926,7 @@ pre.code {
   width: 2.14286em;
   top: 0.14286em;
   text-align: center; }
-  .fa-li.fa-lg, .dataset-collection-panel > .controls .navigation .back span.fa-li {
+  .fa-li.fa-lg {
     left: -1.85714em; }
 
 .fa-border {
@@ -13333,8 +13335,6 @@ div.permissionContainer {
 
 .list-panel {
   overflow: hidden; }
-  .list-panel .controls > *:not(:empty) {
-    margin-bottom: 8px; }
   .list-panel .controls .name {
     word-wrap: break-word;
     font-weight: bold; }
@@ -14137,30 +14137,15 @@ pre.peek {
 .dataset-collection-panel .vertically-spaced {
   margin-top: 4px; }
 
-.dataset-collection-panel > .controls {
-  margin: 8px 8px 1px;
-  padding: 0px; }
-  .dataset-collection-panel > .controls .navigation {
-    margin-top: 4px; }
-    .dataset-collection-panel > .controls .navigation .back span {
-      margin-right: 4px;
-      font-weight: bold; }
-  .dataset-collection-panel > .controls .title {
-    margin-top: 12px; }
-    .dataset-collection-panel > .controls .title .name {
-      font-weight: bold; }
+.dataset-collection-panel > .controls .navigation .back span {
+  font-weight: bold; }
+
+.dataset-collection-panel > .controls .title .name {
+  font-weight: bold; }
 
 .dataset-collection-panel > .list-items {
   overflow-x: hidden;
   overflow-y: auto; }
-  .dataset-collection-panel > .list-items:not(:empty) {
-    border-top: 1px solid #bfbfbf; }
-  .dataset-collection-panel > .list-items .list-item {
-    border-width: 1px 0px 0px 0px; }
-    .dataset-collection-panel > .list-items .list-item:first-child {
-      border-top-width: 0px; }
-    .dataset-collection-panel > .list-items .list-item:last-child {
-      border-bottom-width: 1px; }
 
 .job.list-item {
   border: 1px solid #bfbfbf; }

From e7662f7065f0a77dfdd121c133dbfc4ff46cc74b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 17 Oct 2018 16:45:33 -0400
Subject: [PATCH 08/10] Fix workflow preview

---
 templates/display_base.mako                   |  4 +--
 .../webapps/galaxy/workflow/display.mako      | 28 +++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/templates/display_base.mako b/templates/display_base.mako
index 3d2003998ef..853c5a9d2dc 100644
--- a/templates/display_base.mako
+++ b/templates/display_base.mako
@@ -79,7 +79,7 @@
 </%def>
 
 <%def name="render_item_header( item )">
-    <h3>Galaxy ${get_class_display_name( item.__class__ )} '${get_item_name( item )| h}'</h3>
+    <h3>${get_item_name( item )| h}</h3>
     %if hasattr( item, "annotation") and item.annotation is not None:
         <div class="annotation">Annotation: ${item.annotation}</div>
     %endif
@@ -115,7 +115,7 @@
         href_to_user_items = h.url_for( controller='/' + modern_route, action='list_published', xxx=item.user.username)
         href_to_user_items = href_to_user_items.replace( 'xxx', 'f-username')
     %>
-    <div class="page-body p-2">
+    <div class="page-body p-3">
         <div>
             ${self.render_item_header( item )}
         </div>
diff --git a/templates/webapps/galaxy/workflow/display.mako b/templates/webapps/galaxy/workflow/display.mako
index 4c01992b98d..476144e6675 100644
--- a/templates/webapps/galaxy/workflow/display.mako
+++ b/templates/webapps/galaxy/workflow/display.mako
@@ -14,13 +14,13 @@
 <%def name="do_inputs( inputs, values, prefix, step, other_values=None )">
   %for input_index, input in enumerate( inputs.values() ):
     %if input.type == "repeat":
-      <div class="repeat-group">
-          <div class="form-title-row"><b>${input.title_plural}</b></div>
+      <div>
+          <div class="form-row"><b>${input.title_plural}</b></div>
           <% repeat_values = values[input.name] %>
           %for i in range( len( repeat_values ) ):
-            <div class="repeat-group-item">
+            <div class="ui-portlet-section ml-2">
                 <% index = repeat_values[i]['__index__'] %>
-                <div class="form-title-row"><b>${input.title} ${i + 1}</b></div>
+                <div class="form-row"><b>${input.title} ${i + 1}</b></div>
                 ${do_inputs( input.inputs, repeat_values[ i ], prefix + input.name + "_" + str(index) + "|", step, other_values )}
             </div> 
           %endfor
@@ -34,9 +34,9 @@
     %elif input.type == "section":
       <% new_prefix = prefix + input.name + "|" %>
       <% group_values = values[input.name] %>
-      <div class="form-title-row"><b>${input.title}:</b></div>
-      <div class="repeat-group">
-        <div class="repeat-group-item">
+      <div class="form-row"><b>${input.title}:</b></div>
+      <div>
+        <div class="ui-portlet-section ml-2">
           ${do_inputs( input.inputs, group_values, new_prefix, step, other_values )}
         </div>
       </div>
@@ -100,22 +100,22 @@
               <% 
                 tool = trans.app.toolbox.get_tool( step.tool_id )
               %>
-              <div class="toolForm">
+              <div class="card mt-3 mr-3">
                 %if tool:
-                  <div class="toolFormTitle">Step ${int(step.order_index)+1}: ${tool.name | h}</div>
-                  <div class="toolFormBody">
+                  <div class="card-header">Step ${int(step.order_index)+1}: ${tool.name | h}</div>
+                  <div class="card-body">
                     ${do_inputs( tool.inputs, step.state.inputs, "", step )}
                   </div>
                 %else:
-                  <div class="toolFormTitle">Step ${int(step.order_index)+1}: Unknown Tool with id '${step.tool_id | h}'</div>
+                  <div class="card-header">Step ${int(step.order_index)+1}: Unknown Tool with id '${step.tool_id | h}'</div>
                 %endif
               </div>
             %else:
             ## TODO: always input dataset?
             <% module = step.module %>
-              <div class="toolForm">
-                  <div class="toolFormTitle">Step ${int(step.order_index)+1}: ${module.name | h}</div>
-                  <div class="toolFormBody">
+              <div class="card mt-3 mr-3">
+                  <div class="card-header">Step ${int(step.order_index)+1}: ${module.name | h}</div>
+                  <div class="card-body">
                     ${do_inputs( module.get_runtime_inputs(), step.state.inputs, "", step )}
                   </div>
               </div>

From ad97c0ce71cf0490dad24ce07c5863d555b9488b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 19 Oct 2018 12:17:37 -0400
Subject: [PATCH 09/10] Fix style in user sharing

---
 templates/ind_share_base.mako | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/ind_share_base.mako b/templates/ind_share_base.mako
index 70e399c3216..9f4e291d432 100644
--- a/templates/ind_share_base.mako
+++ b/templates/ind_share_base.mako
@@ -84,9 +84,9 @@
         item_name = get_item_name(item)
     %>
     
-    <div class="toolForm">
-        <div class="toolFormTitle">Share ${item_class_name} '${item_name | h}' with Another User</div>
-            <div class="toolFormBody">
+    <div class="card">
+        <div class="card-header">Share ${item_class_name} '${item_name | h}' with Another User</div>
+            <div class="card-body">
                 <form action="${h.url_for(controller=item_controller, action='share', id=trans.security.encode_id( item.id ) )}" method="POST">
                     <div class="form-row">
                         <label>

From 754b8f40ff4f95f691acc4024564431f6dde429a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 19 Oct 2018 12:46:18 -0400
Subject: [PATCH 10/10] Consolidate message styles

---
 templates/message.mako | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/templates/message.mako b/templates/message.mako
index 0dbb7097147..b8ef31e1b4c 100644
--- a/templates/message.mako
+++ b/templates/message.mako
@@ -42,16 +42,11 @@
 ##
 
 <%def name="center_panel()">
-    ${render_large_message( message, status )}
+    ${render_msg( message, status )}
 </%def>
 
 <%def name="body()">
-    ${render_large_message( message, status )}
-</%def>
-
-## Render large message.
-<%def name="render_large_message( message, status )">
-    <div class="${status}messagelarge" style="margin: 1em">${_(message)}</div>
+    ${render_msg( message, status )}
 </%def>
 
 ## Render a message
@@ -60,4 +55,3 @@
     <% status = "danger" if status == "error" else status %>
     <div class="mt-2 alert alert-${status}">${_(msg)}</div>
 </%def>
-