Updated explore icon and style tweaks

Lowered icon size and improved paddings, tried to align placement between dashboard and explore

pkg/api/index.go

@@ -145,7 +145,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er
 			Text:     "Explore",
 			Id:       "explore",
 			SubTitle: "Explore your data",
-			Icon:     "fa fa-rocket",
+			Icon:     "gicon gicon-explore",
 			Url:      setting.AppSubUrl + "/explore",
 		})
 	}

public/app/features/explore/ExploreToolbar.tsx

@@ -103,18 +103,16 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
             <div className="explore-toolbar-header-title">
               {exploreId === 'left' && (
                 <span className="navbar-page-btn">
-                  <i className="fa fa-rocket fa-fw" />
+                  <i className="gicon gicon-explore" />
                   Explore
                 </span>
               )}
             </div>
-            <div className="explore-toolbar-header-close">
-              {exploreId === 'right' && (
-                <a onClick={this.props.closeSplit}>
-                  <i className="fa fa-times fa-fw" />
-                </a>
-              )}
-            </div>
+            {exploreId === 'right' && (
+              <a className="explore-toolbar-header-close" onClick={this.props.closeSplit}>
+                <i className="fa fa-times fa-fw" />
+              </a>
+            )}
           </div>
         </div>
         <div className="explore-toolbar-item">
@@ -156,7 +154,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
                 splitted,
                 title: 'Run Query',
                 onClick: this.onRunQuery,
-                buttonClassName: 'navbar-button--primary',
+                buttonClassName: 'navbar-button--secondary',
                 iconClassName: loading ? 'fa fa-spinner fa-fw fa-spin run-icon' : 'fa fa-level-down fa-fw run-icon',
                 iconSide: IconSide.right,
               })}

public/img/icons_dark_theme/icon_explore.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="22px" height="22px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#E3E3E3;}
+</style>
+<g>
+	<polygon class="st0" points="7.93,14.21 6.99,17.47 9.52,15.21 9,14.28 	"/>
+	<polygon class="st0" points="14.15,7.86 15.08,4.6 12.56,6.86 13.08,7.79 	"/>
+	<polygon class="st0" points="14.28,13.07 14.22,14.14 17.47,15.08 15.22,12.55 	"/>
+	<polygon class="st0" points="7.8,9 7.86,7.93 4.61,6.99 6.86,9.52 	"/>
+	<path class="st0" d="M8.82,1.31L8.36,9.35l-7.05,3.9l8.04,0.46l3.9,7.05l0.46-8.04l7.05-3.9l-8.04-0.46L8.82,1.31z M11.38,11.78
+		c-0.41,0.19-0.89,0.01-1.08-0.4c-0.19-0.41-0.01-0.89,0.4-1.08c0.41-0.19,0.89-0.01,1.08,0.4C11.97,11.1,11.79,11.59,11.38,11.78z"
+		/>
+	<path class="st1" d="M21.72,8.56c-1.35-5.92-7.24-9.63-13.16-8.28C2.64,1.63-1.07,7.52,0.28,13.44s7.24,9.63,13.16,8.28
+		C19.36,20.37,23.07,14.48,21.72,8.56z M15.08,4.6l-0.94,3.25l-1.07-0.06l-0.52-0.94L15.08,4.6z M7.86,7.93L7.8,9L6.86,9.52
+		L4.61,6.99L7.86,7.93z M6.99,17.47l0.94-3.25L9,14.28l0.52,0.94L6.99,17.47z M14.22,14.14l0.06-1.07l0.94-0.52l2.25,2.53
+		L14.22,14.14z M13.72,12.72l-0.46,8.04l-3.9-7.05l-8.04-0.46l7.05-3.9l0.46-8.04l3.9,7.05l8.04,0.46L13.72,12.72z"/>
+	<path class="st1" d="M10.7,10.29c-0.41,0.19-0.59,0.67-0.4,1.08c0.19,0.41,0.67,0.59,1.08,0.4c0.41-0.19,0.59-0.67,0.4-1.08
+		C11.59,10.28,11.1,10.11,10.7,10.29z"/>
+</g>
+</svg>

public/img/icons_light_theme/icon_explore.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="22px" height="22px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#52545c;}
+</style>
+<g>
+	<polygon class="st0" points="7.93,14.21 6.99,17.47 9.52,15.21 9,14.28 	"/>
+	<polygon class="st0" points="14.15,7.86 15.08,4.6 12.56,6.86 13.08,7.79 	"/>
+	<polygon class="st0" points="14.28,13.07 14.22,14.14 17.47,15.08 15.22,12.55 	"/>
+	<polygon class="st0" points="7.8,9 7.86,7.93 4.61,6.99 6.86,9.52 	"/>
+	<path class="st0" d="M8.82,1.31L8.36,9.35l-7.05,3.9l8.04,0.46l3.9,7.05l0.46-8.04l7.05-3.9l-8.04-0.46L8.82,1.31z M11.38,11.78
+		c-0.41,0.19-0.89,0.01-1.08-0.4c-0.19-0.41-0.01-0.89,0.4-1.08c0.41-0.19,0.89-0.01,1.08,0.4C11.97,11.1,11.79,11.59,11.38,11.78z"
+		/>
+	<path class="st1" d="M21.72,8.56c-1.35-5.92-7.24-9.63-13.16-8.28C2.64,1.63-1.07,7.52,0.28,13.44s7.24,9.63,13.16,8.28
+		C19.36,20.37,23.07,14.48,21.72,8.56z M15.08,4.6l-0.94,3.25l-1.07-0.06l-0.52-0.94L15.08,4.6z M7.86,7.93L7.8,9L6.86,9.52
+		L4.61,6.99L7.86,7.93z M6.99,17.47l0.94-3.25L9,14.28l0.52,0.94L6.99,17.47z M14.22,14.14l0.06-1.07l0.94-0.52l2.25,2.53
+		L14.22,14.14z M13.72,12.72l-0.46,8.04l-3.9-7.05l-8.04-0.46l7.05-3.9l0.46-8.04l3.9,7.05l8.04,0.46L13.72,12.72z"/>
+	<path class="st1" d="M10.7,10.29c-0.41,0.19-0.59,0.67-0.4,1.08c0.19,0.41,0.67,0.59,1.08,0.4c0.41-0.19,0.59-0.67,0.4-1.08
+		C11.59,10.28,11.1,10.11,10.7,10.29z"/>
+</g>
+</svg>

public/sass/base/_icons.scss

@@ -192,6 +192,10 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
 }
 
+.gicon-explore {
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_explore.svg');
+}
+
 .sidemenu {
   .gicon-dashboard {
     background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
@@ -205,6 +209,9 @@
   .gicon-question {
     background-image: url('../img/icons_dark_theme/icon_question.svg');
   }
+  .gicon-explore {
+    background-image: url('../img/icons_dark_theme/icon_explore.svg');
+  }
 }
 
 .fa--permissions-list {

public/sass/components/_navbar.scss

@@ -1,9 +1,8 @@
 .navbar {
   position: relative;
-  padding-left: 20px;
   z-index: $zindex-navbar-fixed;
   height: $navbarHeight;
-  padding-right: 20px;
+  padding: 0 20px 0 50px;
   display: flex;
   flex-grow: 1;
   border-bottom: 1px solid transparent;
@@ -57,15 +56,14 @@
   white-space: nowrap;
   display: block;
   margin: 0;
-  color: darken($link-color, 5%);
+  color: $headings-color;
   font-size: $font-size-lg;
-  padding-left: 1rem;
   min-height: $navbarHeight;
   line-height: $navbarHeight;
 
   .fa-caret-down {
     font-size: 60%;
-    padding-left: 0.2rem;
+    padding-left: 6px;
   }
 
   &--search {
@@ -73,12 +71,12 @@
   }
 
   .gicon {
+    top: -2px;
     position: relative;
-    top: -1px;
-    font-size: 19px;
+    font-size: 17px;
     line-height: 8px;
     opacity: 0.75;
-    margin-right: 13px;
+    margin-right: 10px;
     display: none;
   }
 
@@ -123,7 +121,7 @@
   height: 30px;
   color: $text-muted;
   border: 1px solid $navbar-button-border;
-  margin-right: 3px;
+  margin-left: 3px;
   white-space: nowrap;
 
   .gicon {
@@ -152,19 +150,19 @@
     }
   }
 
-  &--primary {
-    @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
+  &--secondary {
+    @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
   }
 }
 
 @include media-breakpoint-up(sm) {
   .navbar {
-    padding-left: 50px;
+    padding-left: 60px;
   }
 
   .sidemenu-open {
     .navbar {
-      padding-left: 15px;
+      padding-left: 20px;
       margin-left: 0;
     }
   }

public/sass/components/_sidemenu.scss

@@ -253,7 +253,7 @@ li.sidemenu-org-switcher {
     }
 
     .sidemenu__logo_small_breakpoint {
-      padding: 16px 10px 26px;
+      padding: 14px 10px 26px 13px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;

public/sass/pages/_explore.scss

@@ -30,12 +30,6 @@
     padding: 0;
     margin-left: 0;
   }
-
-  .explore-toolbar-header-title {
-    .navbar-page-btn {
-      padding-left: 0;
-    }
-  }
 }
 
 .explore-toolbar {
@@ -87,22 +81,9 @@
   align-items: center;
 }
 
-.explore-toolbar-header-title {
-  color: darken($link-color, 5%);
-
-  .navbar-page-btn {
-    padding-left: $dashboard-padding;
-  }
-
-  .fa {
-    font-size: 100%;
-    opacity: 0.75;
-    margin-right: 0.5em;
-  }
-}
-
 .explore-toolbar-header-close {
   margin-left: auto;
+  color: $text-color-weak;
 }
 
 .explore-toolbar-content {
@@ -156,7 +137,6 @@
   .sidemenu-open {
     .explore-toolbar-header-title {
       .navbar-page-btn {
-        padding-left: 0;
         margin-left: 0;
       }
     }
@@ -164,7 +144,6 @@
 
   .explore-toolbar-header-title {
     .navbar-page-btn {
-      padding-left: 0;
       margin-left: $dashboard-padding;
     }
   }
@@ -185,7 +164,6 @@
   .sidemenu-open {
     .explore-toolbar-header-title {
       .navbar-page-btn {
-        padding-left: 0;
         margin-left: $dashboard-padding;
       }
     }
@@ -193,7 +171,6 @@
 
   .explore-toolbar-header-title {
     .navbar-page-btn {
-      padding-left: 0;
       margin-left: $dashboard-padding;
     }
   }