From d694c33c873f766cbeafbe8f8dfdc4a0c762e8ad Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 28 Jul 2020 15:04:42 +0200
Subject: invert nav color if background is black

---
 .../frontend/app/views/viewer/nav/eflux.chrome.js  | 14 ++++---
 .../frontend/app/views/viewer/nav/eflux.css        | 25 ++++++++++++-
 .../frontend/app/views/viewer/nav/eflux.icons.js   | 43 ++++++++++++++++++++++
 .../frontend/app/views/viewer/nav/nav.css          |  5 +++
 .../frontend/app/views/viewer/nav/nav.parent.js    |  2 +-
 5 files changed, 81 insertions(+), 8 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/nav/eflux.icons.js

(limited to 'animism-align/frontend/app/views/viewer/nav')

diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
index 8d04e8b..c66cf21 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.chrome.js
@@ -1,18 +1,22 @@
 import React from 'react'
 
-const EfluxChrome = React.memo(() => (
-  <div className="eflux-header">
+import {
+  EfluxLogo, EfluxClose, EfluxMenu
+} from './eflux.icons'
+
+const EfluxChrome = React.memo(({ navStyle }) => (
+  <div className={"eflux-header " + navStyle}>
     <div className="eflux-logo">
       <a href="/">
-        <img src="/static/img/elements/e-flux-logo.svg" />
+        {EfluxLogo}
       </a>
     </div>
     <div className="eflux-nav">
       <a href="/">
-        <img src="/static/img/elements/close.svg" />
+        {EfluxClose}
       </a>
       <a href="/">
-        <img src="/static/img/elements/menu.svg" />
+        {EfluxMenu}
       </a>
     </div>
   </div>
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.css b/animism-align/frontend/app/views/viewer/nav/eflux.css
index 93c9449..d04b85c 100644
--- a/animism-align/frontend/app/views/viewer/nav/eflux.css
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.css
@@ -10,7 +10,12 @@
   top: 20px;
   left: 28px;
 }
-.eflux-logo img {
+.eflux-logo svg {
+/*
+  width: 218.3px;
+  height: 65px;
+*/
+  width: 94px;
   height: 28px;
 }
 .eflux-nav {
@@ -18,7 +23,23 @@
   top: 23px;
   right: 32px;
 }
-.eflux-nav img {
+.eflux-nav svg {
+  width: 26px;
   height: 20px;
   margin-left: 34px;
 }
+
+.eflux-header svg path {
+  fill: #000;
+  transition: fill 0.5s;
+}
+.eflux-header svg line {
+  stroke: #000;
+  transition: stroke 0.5s;
+}
+.eflux-header.black svg path {
+  fill: #fff;
+}
+.eflux-header.black svg line {
+  stroke: #fff;
+}
diff --git a/animism-align/frontend/app/views/viewer/nav/eflux.icons.js b/animism-align/frontend/app/views/viewer/nav/eflux.icons.js
new file mode 100644
index 0000000..96e2b30
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/eflux.icons.js
@@ -0,0 +1,43 @@
+import React from 'react'
+
+export const EfluxLogo = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 218.3 65">
+    <g>
+      <g>
+        <path d="M16.7,51.2c1.7,1.7,4.3,2.5,7.5,2.5c2.4,0,4.4-0.6,6.1-1.8c1.7-1.2,2.7-2.4,3.1-3.8h10.3c-1.6,5.1-4.2,8.8-7.5,10.9
+          c-3.4,2.2-7.5,3.3-12.3,3.3c-3.3,0-6.3-0.5-9-1.6s-5-2.6-6.8-4.5c-1.9-2-3.3-4.3-4.3-7s-1.5-5.7-1.5-9c0-3.2,0.5-6.1,1.6-8.8
+          c1-2.7,2.5-5.1,4.4-7.1s4.2-3.6,6.9-4.7c2.7-1.1,5.6-1.7,8.8-1.7c3.6,0,6.8,0.7,9.4,2.1c2.7,1.4,4.9,3.3,6.6,5.6
+          c1.7,2.4,3,5,3.7,8c0.8,3,1,6.2,0.8,9.4H13.9C14,46.8,15,49.5,16.7,51.2z M29.9,29c-1.4-1.5-3.5-2.3-6.4-2.3
+          c-1.9,0-3.4,0.3-4.6,0.9s-2.2,1.4-3,2.3c-0.7,0.9-1.3,1.9-1.6,2.9c-0.3,1-0.5,2-0.5,2.8h18.9C32.3,32.7,31.3,30.5,29.9,29z"/>
+        <path d="M51.8,36.5h20.5v4.7H51.8V36.5z"/>
+        <path d="M77.2,26.8V19h7v-3.3c0-3.8,1.2-6.8,3.5-9.2c2.4-2.4,5.9-3.6,10.7-3.6c1,0,2.1,0,3.1,0.1s2.1,0.1,3,0.2V12
+          c-1.4-0.2-2.8-0.3-4.3-0.3c-1.6,0-2.7,0.4-3.4,1.1c-0.7,0.7-1,1.9-1,3.7V19h8v7.8h-8v34.6H84.2V26.8H77.2z"/>
+        <path d="M120.9,2.9v58.5h-11.7V2.9H120.9z"/>
+        <path d="M158.8,61.5v-5.9h-0.2c-1.5,2.5-3.4,4.2-5.8,5.3c-2.4,1.1-4.8,1.6-7.2,1.6c-3.1,0-5.7-0.4-7.7-1.2s-3.6-2-4.7-3.5
+          c-1.1-1.5-2-3.3-2.4-5.5c-0.5-2.2-0.7-4.6-0.7-7.2V19h11.7v24c0,3.5,0.5,6.1,1.6,7.9c1.1,1.7,3,2.6,5.8,2.6c3.2,0,5.5-0.9,6.9-2.8
+          c1.4-1.9,2.1-5,2.1-9.3V19h11.7v42.5H158.8z"/>
+        <path d="M175.6,19h13.3l7.5,11.1l7.4-11.1h12.9l-13.9,19.9l15.7,22.6H205l-8.9-13.4l-8.9,13.4h-13l15.3-22.3L175.6,19z"/>
+      </g>
+    </g>
+  </svg>
+)
+
+export const EfluxClose = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.3 22.3">
+    <g>
+      <line strokeWidth="2" x1="0.7" y1="21.6" x2="21.6" y2="0.7"/>
+      <line strokeWidth="2" x1="0.7" y1="0.7" x2="21.6" y2="21.6"/>
+    </g>
+  </svg>
+)
+
+export const EfluxMenu = (
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 21">
+    <g>
+      <line x1="0" y1="1" x2="30" y2="1"/>
+      <line x1="0" y1="10.5" x2="30" y2="10.5"/>
+      <line x1="0" y1="20" x2="30" y2="20"/>
+    </g>
+  </svg>
+)
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index a6c74d5..74ea3bf 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -6,6 +6,9 @@
   font-size: 18px;
   transition: all 0.2s;
 }
+.viewer-nav.black .main-nav {
+  color: white;
+}
 .main-nav {
   transition: all 0.2s;
   transform: translateZ(0) translateY(0);
@@ -104,6 +107,8 @@
 .viewer-nav .arrow polygon {
   fill: #000;
 }
+.viewer-nav.black .arrow path,
+.viewer-nav.black .arrow polygon,
 .viewer-nav .main-nav:hover .arrow path,
 .viewer-nav .main-nav:hover .arrow polygon,
 .nav-open .viewer-nav .arrow path,
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
index 5697d88..9cb4e93 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -10,7 +10,7 @@ class NavParent extends Component {
   render() {
     const { viewer } = this.props
     return (
-      <div className="viewer-nav">
+      <div className={"viewer-nav " + viewer.navStyle}>
         <div className='nav-row main-nav'>
           <div className='nav-section-name'>
             <span className="section-link link" onClick={() => actions.viewer.toggleComponent('nav')}>
-- 
cgit v1.2.3-70-g09d2