From 34a0f141534cc58a393e96c9f4182dea850405ed Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2019 12:56:00 -0400
Subject: [PATCH 1/4] Improve style description of tool panel

---
 client/galaxy/style/scss/base.scss       | 43 ++++--------------------
 client/galaxy/style/scss/theme/blue.scss | 14 ++++----
 2 files changed, 13 insertions(+), 44 deletions(-)

diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
index cecffffab7f..0743c32c0e2 100644
--- a/client/galaxy/style/scss/base.scss
+++ b/client/galaxy/style/scss/base.scss
@@ -1502,88 +1502,57 @@ div.permissionContainer {
 @import "ui/error-modal.scss";
 
 // ==== Tool menu styles
-
 .toolMenuContainer {
     color: $panel-text-color;
     a {
         color: $panel-text-color;
-        // text-decoration: none;
     }
     background: $panel-bg-color;
     min-height: 100%;
     @extend .m-3;
 }
 
-div.toolSectionPad {
-    margin: 0;
-    padding: 0;
-    height: 5px;
-    font-size: 0px;
-}
-
 div.toolSectionWrapper {
-    margin-bottom: 5px;
-}
-
-div.toolSectionDetailsInner {
-    margin-left: 5px;
-    margin-right: 5px;
+    @extend .mb-1;
 }
 
 div.toolSectionTitle {
     font-weight: 500;
-    font-size: 1rem;
+    font-size: $h4-font-size;
 }
 
 div.toolPanelLabel {
-    padding-top: 10px;
-    padding-bottom: 5px;
+    @extend .m-2;
     font-weight: bold;
-    color: gray;
+    color: $gray-600;
     text-transform: uppercase;
 }
 
 div.toolTitle {
-    margin-left: 10px;
-    margin-right: 10px;
+    @extend .m-2;
     display: block;
     .labels {
         float: right;
-        margin-left: 2px;
     }
 }
 
 div a.tool-link {
     text-decoration: none;
     display: block;
-    padding-top: 5px;
-    padding-bottom: 5px;
-
     span.tool-old-link {
         text-decoration: underline;
     }
-
     &:hover {
         background: darken($panel-bg-color, 5%);
     }
 }
 
-div.toolSectionBody div.toolPanelLabel {
-    padding-top: 5px;
-    padding-bottom: 5px;
-    margin-left: 16px;
-    margin-right: 10px;
-    display: list-item;
-    list-style: none outside;
-}
-
 div.toolTitleNoSection {
-    padding-bottom: 5px;
+    @extend .pb-1;
     font-weight: bold;
 }
 
 // Dataset Display Styles
-
 #loading_indicator {
     position: fixed;
     right: 10px;
diff --git a/client/galaxy/style/scss/theme/blue.scss b/client/galaxy/style/scss/theme/blue.scss
index 219a0f46afb..30dba6639ad 100644
--- a/client/galaxy/style/scss/theme/blue.scss
+++ b/client/galaxy/style/scss/theme/blue.scss
@@ -71,15 +71,15 @@ $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
 $font-family-base: $font-family-sans-serif;
-$font-size-base: 0.8rem; // default 1rem
+$font-size-base: 0.8rem;
 
 // Header font sizes
-$h1-font-size: $font-size-base * 2; // default 2.5
-$h2-font-size: $font-size-base * 1.75; // default 2
-$h3-font-size: $font-size-base * 1.5; // default 1.75
-$h4-font-size: $font-size-base * 1.25; // default 1.5
-$h5-font-size: $font-size-base; // default 1.25
-$h6-font-size: $font-size-base * 0.85; // default 1
+$h1-font-size: $font-size-base * 2;
+$h2-font-size: $font-size-base * 1.75;
+$h3-font-size: $font-size-base * 1.5;
+$h4-font-size: $font-size-base * 1.25;
+$h5-font-size: $font-size-base;
+$h6-font-size: $font-size-base * 0.85;
 
 // Increase contrast of dropdown items
 $dropdown-link-hover-color: $brand-light;

From 8ab1dd500e90bfe7b531bd3a4f3a9d4e8bd3e0f2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2019 13:38:51 -0400
Subject: [PATCH 2/4] Fix styles in reports app

---
 client/galaxy/style/scss/base.scss         | 11 +----------
 templates/webapps/reports/base_panels.mako | 10 ++++------
 templates/webapps/reports/index.mako       |  6 +++---
 3 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
index 0743c32c0e2..d72195cb283 100644
--- a/client/galaxy/style/scss/base.scss
+++ b/client/galaxy/style/scss/base.scss
@@ -1912,7 +1912,7 @@ div.toolTitleNoSection {
 }
 
 /* Toolshed, reports custom styles from mako templates */
-body.toolshed {
+body.toolshed, body.reports {
     margin: 0;
     padding: 0;
     overflow: hidden;
@@ -1927,15 +1927,6 @@ body.toolshed {
     }
 }
 
-body.reports {
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    #left {
-        background: #c1c9e5 url(../../images/menu_bg.png) top repeat-x;
-    }
-}
-
 /* Used in Galaxy IE for spinner loading TODO: Remove in IE entrypoint refactoring */
 #ie-loading-spinner {
     position: absolute;
diff --git a/templates/webapps/reports/base_panels.mako b/templates/webapps/reports/base_panels.mako
index bf102f2b4df..52e0c81d349 100644
--- a/templates/webapps/reports/base_panels.mako
+++ b/templates/webapps/reports/base_panels.mako
@@ -38,13 +38,11 @@
         </table>
     </div>
     ## Logo, layered over tabs to be clickable
-    <div class="navbar-brand" style="position: absolute; top: 0; left: 0;">
-        <a href="${h.url_for( app.config.get( 'logo_url', '/' ) )}">
-        <img border="0" src="${h.url_for('/static/images/galaxyIcon_noText.png')}" style="width: 26px; vertical-align: top;">
-        Galaxy Reports
+    <a class="navbar-brand" href="${h.url_for( app.config.get( 'logo_url', '/' ) )}">
+        <img class="navbar-brand-image" src="${h.url_for('/static/images/galaxyIcon_noText.png')}" />
+        <span class="navbar-brand-title">Galaxy Reports</span>
         %if app.config.brand:
             <span class='brand'>/ ${app.config.brand}</span>
         %endif
-        </a>
-    </div>
+    </a>
 </%def>
diff --git a/templates/webapps/reports/index.mako b/templates/webapps/reports/index.mako
index b0667332c90..70e983edac3 100644
--- a/templates/webapps/reports/index.mako
+++ b/templates/webapps/reports/index.mako
@@ -30,12 +30,12 @@
     %>
     <div class="unified-panel-header" unselectable="on">
         <div class='unified-panel-header-inner'><span>Reports</span>
-            <a target="galaxy_main" href="${h.url_for( controller='home', action='run_stats' )}">
-                <button id="reports_home" data-toggle="tooltip" data-placement="top" title="Dashboard" class="btn btn-secondary primary-button" type="button"><span class="fa fa-home"></span></button>
+            <a target="galaxy_main" href="${h.url_for( controller='home', action='run_stats' )}" class="float-right">
+                <span class="fa fa-home"></span>
             </a>
         </div>
     </div>
-    <div class="page-container reports-panel-container">
+    <div class="unified-panel-body">
         <div class="toolMenu">
             <div class="toolSectionList">
                 <div class="toolSectionPad"></div>

From 39c1908a0a3ef2a2e8a8213e5361320409e7c547 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2019 14:01:25 -0400
Subject: [PATCH 3/4] Restore comments in theme

---
 client/galaxy/style/scss/theme/blue.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/galaxy/style/scss/theme/blue.scss b/client/galaxy/style/scss/theme/blue.scss
index 30dba6639ad..219a0f46afb 100644
--- a/client/galaxy/style/scss/theme/blue.scss
+++ b/client/galaxy/style/scss/theme/blue.scss
@@ -71,15 +71,15 @@ $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
 $font-family-base: $font-family-sans-serif;
-$font-size-base: 0.8rem;
+$font-size-base: 0.8rem; // default 1rem
 
 // Header font sizes
-$h1-font-size: $font-size-base * 2;
-$h2-font-size: $font-size-base * 1.75;
-$h3-font-size: $font-size-base * 1.5;
-$h4-font-size: $font-size-base * 1.25;
-$h5-font-size: $font-size-base;
-$h6-font-size: $font-size-base * 0.85;
+$h1-font-size: $font-size-base * 2; // default 2.5
+$h2-font-size: $font-size-base * 1.75; // default 2
+$h3-font-size: $font-size-base * 1.5; // default 1.75
+$h4-font-size: $font-size-base * 1.25; // default 1.5
+$h5-font-size: $font-size-base; // default 1.25
+$h6-font-size: $font-size-base * 0.85; // default 1
 
 // Increase contrast of dropdown items
 $dropdown-link-hover-color: $brand-light;

From e8fe0556f7bbe1db69ebb6cee8fb1b67330b0970 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2019 21:42:00 -0400
Subject: [PATCH 4/4] Remove unused styles from reports style definition

---
 client/galaxy/style/scss/reports.scss | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/client/galaxy/style/scss/reports.scss b/client/galaxy/style/scss/reports.scss
index 92a9082877a..bd3cf8ae891 100644
--- a/client/galaxy/style/scss/reports.scss
+++ b/client/galaxy/style/scss/reports.scss
@@ -1,21 +1,5 @@
 // ############################################################# Reports Webapp
 
-// ======================================================== Left ==============
-.reports-panel-container {
-    position: absolute;
-    /*From base.scss, top should be $panel_header_height*/
-    top: 30px;
-    bottom: 10px;
-    overflow: scroll;
-    width: 100%;
-    padding: 10px;
-}
-#reports_home {
-    position: relative;
-    top: -7px;
-    float: right;
-}
-
 // ======================================================== SparkLines ========
 #spark_time_select {
     display: inline-block;