chore: change styling to match stacklet (ENG-966) (#37)

johnsca · web-flow · commit 9f47fb06e22f · 2022-10-03T11:27:55.000-04:00
* chore: change styling to match stacklet (ENG-966) Adjust colors and logos / icons to match Stacklet branding. Fixes: [ENG-966](https://stacklet.atlassian.net/browse/ENG-966) * Fix navbar bg color
diff --git a/client/app/assets/images/favicon-16x16.png b/client/app/assets/images/favicon-16x16.png
diff --git a/client/app/assets/images/favicon-32x32.png b/client/app/assets/images/favicon-32x32.png
diff --git a/client/app/assets/images/favicon-96x96.png b/client/app/assets/images/favicon-96x96.png
diff --git a/client/app/assets/images/stacklet_icon_small.png b/client/app/assets/images/stacklet_icon_small.png
diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less
@@ -248,11 +248,11 @@
   &-item {
     // custom rule
     &.selected {
-      background-color: #f6f8f9;
+      background-color: #f9f7f5;
     }
 
     &.disabled {
-      background-color: fade(#f6f8f9, 40%);
+      background-color: fade(#f9f7f5, 40%);
 
       & > * {
         opacity: 0.4;
diff --git a/client/app/assets/less/inc/base.less b/client/app/assets/less/inc/base.less
@@ -25,7 +25,7 @@ body {
 
 body {
   padding-top: 0;
-  background: #f6f8f9;
+  background: #f9f7f5;
   font-family: @redash-font;
   position: relative;
 
diff --git a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
@@ -8,7 +8,7 @@ import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog
 import { useCurrentRoute } from "@/components/ApplicationArea/Router";
 import { Auth, currentUser } from "@/services/auth";
 import settingsMenu from "@/services/settingsMenu";
-import logoUrl from "@/assets/images/redash_icon_small.png";
+import logoUrl from "@/assets/images/stacklet_icon_small.png";
 
 import DesktopOutlinedIcon from "@ant-design/icons/DesktopOutlined";
 import CodeOutlinedIcon from "@ant-design/icons/CodeOutlined";
diff --git a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.less b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.less
@@ -1,4 +1,4 @@
-@backgroundColor: #001529;
+@backgroundColor: #1c252e;
 @dividerColor: rgba(255, 255, 255, 0.5);
 @textColor: rgba(255, 255, 255, 0.75);
 @brandColor: #ff7964; // Redash logo color
diff --git a/client/app/components/ApplicationArea/ApplicationLayout/MobileNavbar.jsx b/client/app/components/ApplicationArea/ApplicationLayout/MobileNavbar.jsx
@@ -8,7 +8,7 @@ import Menu from "antd/lib/menu";
 import Link from "@/components/Link";
 import { Auth, currentUser } from "@/services/auth";
 import settingsMenu from "@/services/settingsMenu";
-import logoUrl from "@/assets/images/redash_icon_small.png";
+import logoUrl from "@/assets/images/stacklet_icon_small.png";
 
 import "./MobileNavbar.less";
 
diff --git a/client/app/components/ApplicationArea/ApplicationLayout/MobileNavbar.less b/client/app/components/ApplicationArea/ApplicationLayout/MobileNavbar.less
@@ -1,4 +1,4 @@
-@backgroundColor: #001529;
+@backgroundColor: #1c252e;
 @dividerColor: rgba(255, 255, 255, 0.5);
 @textColor: rgba(255, 255, 255, 0.75);
 
diff --git a/client/app/components/dashboards/dashboard-grid.less b/client/app/components/dashboards/dashboard-grid.less
@@ -36,7 +36,7 @@
 
   &.editing-mode {
     /* Y axis lines */
-    background: linear-gradient(to right, transparent, transparent 1px, #f6f8f9 1px, #f6f8f9),
+    background: linear-gradient(to right, transparent, transparent 1px, #f9f7f5 1px, #f9f7f5),
       linear-gradient(to bottom, #b3babf, #b3babf 1px, transparent 1px, transparent);
     background-size: 5px 50px;
     background-position-y: -8px;
@@ -49,7 +49,7 @@
       left: 0;
       bottom: 85px;
       right: 0;
-      background: linear-gradient(to bottom, transparent, transparent 2px, #f6f8f9 2px, #f6f8f9 5px),
+      background: linear-gradient(to bottom, transparent, transparent 2px, #f9f7f5 2px, #f9f7f5 5px),
         linear-gradient(to left, #b3babf, #b3babf 1px, transparent 1px, transparent);
       background-size: calc((100% + 15px) / 6) 5px;
       background-position: -7px 1px;
diff --git a/client/app/pages/dashboards/PublicDashboardPage.jsx b/client/app/pages/dashboards/PublicDashboardPage.jsx
@@ -13,7 +13,7 @@ import Filters from "@/components/Filters";
 import { Dashboard } from "@/services/dashboard";
 import routes from "@/services/routes";
 
-import logoUrl from "@/assets/images/redash_icon_small.png";
+import logoUrl from "@/assets/images/stacklet_icon_small.png";
 
 import useDashboard from "./hooks/useDashboard";
 
diff --git a/client/app/pages/queries/VisualizationEmbed.jsx b/client/app/pages/queries/VisualizationEmbed.jsx
@@ -30,7 +30,7 @@ import { Query } from "@/services/query";
 import location from "@/services/location";
 import routes from "@/services/routes";
 
-import logoUrl from "@/assets/images/redash_icon_small.png";
+import logoUrl from "@/assets/images/stacklet_icon_small.png";
 
 function VisualizationEmbedHeader({ queryName, queryDescription, visualization }) {
   return (
diff --git a/client/app/pages/queries/components/QueryVisualizationTabs.less b/client/app/pages/queries/components/QueryVisualizationTabs.less
@@ -27,7 +27,7 @@
   }
 
   .ant-tabs-tab {
-    background: #f6f8f9 !important;
+    background: #f9f7f5 !important;
     border-color: #d9d9d9 !important;
     border-bottom: 0px !important;
     border-radius: 0 !important;
diff --git a/client/app/services/notifications.js b/client/app/services/notifications.js
@@ -1,7 +1,7 @@
 import { find } from "lodash";
 import debug from "debug";
 import recordEvent from "@/services/recordEvent";
-import redashIconUrl from "@/assets/images/redash_icon_small.png";
+import redashIconUrl from "@/assets/images/stacklet_icon_small.png";
 
 const logger = debug("redash:notifications");
 
diff --git a/client/app/unsupported.html b/client/app/unsupported.html
@@ -46,7 +46,7 @@
 </head>
 <body>
   <div>
-    <a href="https://redash.io"><img src="images/redash_icon_small.png" width="40" height="40"></a>
+    <a href="https://redash.io"><img src="images/stacklet_icon_small.png" width="40" height="40"></a>
     <h3>Whoops... Redash doesn't support your browser</h3>
   </div>
   <div class="tiled">
diff --git a/redash/templates/emails/failures.html b/redash/templates/emails/failures.html
@@ -10,7 +10,7 @@
 
 <body style="margin: 0;">
     <div
-        style="background: #f6f8f9; font-family: arial; font-size: 14px; padding: 20px; color: #333; line-height: 20px">
+        style="background: #f9f7f5; font-family: arial; font-size: 14px; padding: 20px; color: #333; line-height: 20px">
         <h1 style="font-size: 14px; font-weight: normal;">Redash failed to run the following queries:</h1>
 
         {% for failure in failures %}
diff --git a/redash/templates/layouts/signed_out.html b/redash/templates/layouts/signed_out.html
@@ -19,7 +19,7 @@
   <div>
     <div class="header">
       <div class="text-center m-b-15">
-        <a href="/"><img src="/static/images/redash_icon_small.png"></a>
+        <a href="/"><img src="/static/images/stacklet_icon_small.png"></a>
       </div>
       {% if not hide_page_header %}
         <h3 class="text-center m-t-0 m-b-25">{{ self.title() }}</h3>
diff --git a/viz-lib/src/components/sortable/style.less b/viz-lib/src/components/sortable/style.less
@@ -25,6 +25,6 @@
 
   &.sortable-container-dragging {
     transition-delay: 0s;
-    background-color: #f6f8f9;
+    background-color: #f9f7f5;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@backgroundColor: #001529;`
	`1`	`+@backgroundColor: #1c252e;`
`2`	`2`	`@dividerColor: rgba(255, 255, 255, 0.5);`
`3`	`3`	`@textColor: rgba(255, 255, 255, 0.75);`
`4`	`4`	`@brandColor: #ff7964; // Redash logo color`