Organize logo variants

saleor · Mar 21, 2019 · a81b0b0 · a81b0b0
1 parent 587f2af
commit a81b0b0
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 6 deletions.
diff --git a/docs/conf.py b/docs/conf.py
@@ -129,7 +129,7 @@
 
 # The name of an image file (relative to this directory) to place at the top
 # of the sidebar.
-html_logo = 'logo.svg'
+html_logo = 'logo-white.svg'
 
 # The name of an image file (within the static path) to use as favicon of the
 # docs.  This file should be a Windows icon file (.ico) being 16x16 or 32x32

diff --git a/saleor/static/dashboard-next/auth/components/LoginPage/LoginPage.tsx b/saleor/static/dashboard-next/auth/components/LoginPage/LoginPage.tsx
@@ -11,10 +11,12 @@ import * as React from "react";
 import SVG from "react-inlinesvg";
 
 import * as backgroundArt from "../../../../images/login-background.svg";
-import * as saleorLogo from "../../../../images/logo-document.svg";
+import * as saleorDarkLogo from "../../../../images/logo-dark.svg";
+import * as saleorLightLogo from "../../../../images/logo-light.svg";
 import { ControlledCheckbox } from "../../../components/ControlledCheckbox";
 import Form from "../../../components/Form";
 import { FormSpacer } from "../../../components/FormSpacer";
+import useTheme from "../../../hooks/useTheme";
 import i18n from "../../../i18n";
 
 export interface FormData {
@@ -114,6 +116,8 @@ export interface LoginCardProps extends WithStyles<typeof styles> {
 
 const LoginCard = withStyles(styles, { name: "LoginCard" })(
   ({ classes, error, disableLoginButton, onSubmit }: LoginCardProps) => {
+    const { isDark } = useTheme();
+
     return (
       <Form
         initial={{ email: "", password: "", rememberMe: false }}
@@ -126,7 +130,10 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
             </div>
             <div className={classes.mainPanel}>
               <div className={classes.mainPanelContent}>
-                <SVG className={classes.logo} src={saleorLogo} />
+                <SVG
+                  className={classes.logo}
+                  src={isDark ? saleorDarkLogo : saleorLightLogo}
+                />
                 {error && (
                   <div className={classes.panel}>
                     <Typography

diff --git a/saleor/static/dashboard-next/components/AppLayout/AppLayout.tsx b/saleor/static/dashboard-next/components/AppLayout/AppLayout.tsx
@@ -17,8 +17,8 @@ import * as React from "react";
 import SVG from "react-inlinesvg";
 import { RouteComponentProps, withRouter } from "react-router";
 
-import * as saleorLightLogo from "../../../images/logo-document.svg";
-import * as saleorDarkLogo from "../../../images/logo.svg";
+import * as saleorDarkLogo from "../../../images/logo-dark.svg";
+import * as saleorLightLogo from "../../../images/logo-light.svg";
 import {
   appLoaderHeight,
   drawerWidth

diff --git a/saleor/static/images/logo-dark.svg b/saleor/static/images/logo-dark.svg
diff --git a/saleor/static/images/logo-document.svg → saleor/static/images/logo-light.svg b/saleor/static/images/logo-document.svg → saleor/static/images/logo-light.svg
diff --git a/saleor/static/images/logo.svg → saleor/static/images/logo-white.svg b/saleor/static/images/logo.svg → saleor/static/images/logo-white.svg
diff --git a/templates/dashboard/base.html b/templates/dashboard/base.html
@@ -70,7 +70,7 @@
             </li>
             <li>
               <a href="{% url 'dashboard:index' %}" class="logo">
-                <svg data-src="{% static "dashboard/images/logo.svg" %}" height="38px" width="176px" />
+                <svg data-src="{% static "dashboard/images/logo-white.svg" %}" height="38px" width="176px" />
               </a>
             </li>
             <li class="search">