From f75d853b197ced0b113d4d8a5a5bd8e2104fbecd Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 24 Apr 2019 20:50:05 +0200
Subject: [PATCH] Fix logo on footer by allowing custom fill color

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/package.json                  |  1 +
 js/src/assets/mobilizon_logo.svg | 34 +++++++++++++++++++++++++++++++-
 js/src/components/Footer.vue     |  1 +
 js/src/components/Logo.vue       | 12 +++++++----
 js/vue.config.js                 |  6 ++++++
 js/yarn.lock                     | 25 ++++++++++++++++++++---
 6 files changed, 71 insertions(+), 8 deletions(-)

diff --git a/js/package.json b/js/package.json
index 57abe688c..85f287c8a 100644
--- a/js/package.json
+++ b/js/package.json
@@ -60,6 +60,7 @@
     "tslint": "^5.16.0",
     "tslint-config-airbnb": "^5.11.1",
     "typescript": "^3.4.3",
+    "vue-svg-inline-loader": "^1.2.15",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^4.30.0",
     "webpack-bundle-analyzer": "^3.3.2"
diff --git a/js/src/assets/mobilizon_logo.svg b/js/src/assets/mobilizon_logo.svg
index 1130b11f0..a60db4c88 100644
--- a/js/src/assets/mobilizon_logo.svg
+++ b/js/src/assets/mobilizon_logo.svg
@@ -1 +1,33 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78"><title>Fichier 1</title><g id="e11b986d-bcba-4466-9834-a5e44ebfe12a" data-name="Calque 2"><g id="ab18705c-9f78-4d57-8f04-bd2f1ccdd04c" data-name="header"><path d="M0,46.07,3.18,5.27a29.88,29.88,0,0,1,5.07-.36,27.74,27.74,0,0,1,4.95.36l4.86,17.16A92.19,92.19,0,0,1,20.4,32.51h.36A92.19,92.19,0,0,1,23.1,22.43L28,5.27a29.23,29.23,0,0,1,5-.36,29.23,29.23,0,0,1,5,.36l3.18,40.8a13.61,13.61,0,0,1-3.63.42,23.41,23.41,0,0,1-3.63-.24l-1.2-19.92q-.36-5.52-.48-12.84H31.8L24.48,40a25.62,25.62,0,0,1-4,.3,23.36,23.36,0,0,1-3.84-.3L9.36,13.49H9q-.3,8.94-.48,12.84L7.26,46.25a22.47,22.47,0,0,1-3.6.24A13.75,13.75,0,0,1,0,46.07Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M74,31.31q0,8-4.26,12.3a12.21,12.21,0,0,1-9,3.42,12.21,12.21,0,0,1-9-3.42q-4.26-4.26-4.26-12.3T51.72,19a12.21,12.21,0,0,1,9-3.42,12.21,12.21,0,0,1,9,3.42Q74,23.27,74,31.31ZM60.75,21.23q-5.67,0-5.67,10.08t5.67,10.08q5.67,0,5.67-10.08T60.75,21.23Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M103.2,20q2.7,4.11,2.7,11.28T102,42.56a13.18,13.18,0,0,1-10,4.11,31.41,31.41,0,0,1-11.34-2V2.45L81.06,2h2.76A4,4,0,0,1,87,3.08a5.38,5.38,0,0,1,.93,3.57V18.59a12.08,12.08,0,0,1,7.56-2.7A8.71,8.71,0,0,1,103.2,20ZM93.48,22a7.28,7.28,0,0,0-5.58,2.82v16a15,15,0,0,0,4.08.54,5.25,5.25,0,0,0,4.68-2.67q1.68-2.67,1.68-7.59Q98.34,22.07,93.48,22Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M121,22.25V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V25q0-3.24-2.7-3.24h-.72a9.32,9.32,0,0,1-.3-2.58,10.7,10.7,0,0,1,.3-2.7,39.63,39.63,0,0,1,4.38-.24h1a5.19,5.19,0,0,1,4,1.62A6.27,6.27,0,0,1,121,22.25Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M119.82,1.09a7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,112.26,7a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84A7.05,7.05,0,0,1,119.82,1.09Z" transform="translate(0 -0.25)" style="fill:#fff"/><path d="M139.08,40.67h2a10.23,10.23,0,0,1,.6,3.18,9.24,9.24,0,0,1-.18,2.1,38.47,38.47,0,0,1-5.64.54q-6.48,0-6.48-7v-37l.36-.42h2.88a3.94,3.94,0,0,1,3.12,1.05,5.52,5.52,0,0,1,.9,3.57V38Q136.62,40.67,139.08,40.67Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M155.94,22.25V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V25q0-3.24-2.7-3.24h-.72a9.32,9.32,0,0,1-.3-2.58,10.7,10.7,0,0,1,.3-2.7,39.63,39.63,0,0,1,4.38-.24h1a5.19,5.19,0,0,1,4.05,1.62A6.27,6.27,0,0,1,155.94,22.25Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M154.8,3.09a7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,147.24,9a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84A7.05,7.05,0,0,1,154.8,3.09Z" transform="translate(0 -0.25)" style="fill:#fff"/><path d="M163.08,39.47l8.76-11.82q1.32-1.8,4.8-5.7l-.18-.3a63.09,63.09,0,0,1-7.74.42H163a9.79,9.79,0,0,1-.24-2.34,15.8,15.8,0,0,1,.42-3.3h20.4a16.31,16.31,0,0,1,1,4.26,4.1,4.1,0,0,1-.78,2.34L175,34.91a64.65,64.65,0,0,1-4.56,5.7l.18.24q3.12-.3,5.22-.3h2.58a15.35,15.35,0,0,0,6.12-.9,9.4,9.4,0,0,1,.72,3.12q0,3.42-4.32,3.42h-18a14.27,14.27,0,0,1-.9-3.93A5.08,5.08,0,0,1,163.08,39.47Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M215.88,31.31q0,8-4.26,12.3a13.63,13.63,0,0,1-18.06,0q-4.26-4.26-4.26-12.3T193.56,19a13.63,13.63,0,0,1,18.06,0Q215.88,23.27,215.88,31.31ZM202.59,21.23q-5.67,0-5.67,10.08t5.67,10.08q5.67,0,5.67-10.08T202.59,21.23Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M247,26.09V39.41a11,11,0,0,0,1.2,5.64,7,7,0,0,1-4.41,1.56q-2.43,0-3.33-1.14a5.69,5.69,0,0,1-.9-3.54V27.65a7.74,7.74,0,0,0-.72-3.87,2.78,2.78,0,0,0-2.58-1.17,8.62,8.62,0,0,0-6.3,3V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V16.49l.42-.36h2.76q3.42,0,4.08,3.6,4.38-3.84,8.73-3.84t6.42,2.82A12.17,12.17,0,0,1,247,26.09Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M57.26,11a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84,7.05,7.05,0,0,1,3.69.84,7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,57.26,11Z" transform="translate(0 -0.25)" style="fill:#fff"/><path d="M198.26,11a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84,7.05,7.05,0,0,1,3.69.84,7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,198.26,11Z" transform="translate(0 -0.25)" style="fill:#fff"/></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
+    <title>Fichier 1</title>
+    <g id="e11b986d-bcba-4466-9834-a5e44ebfe12a" data-name="Calque 2">
+        <g id="ab18705c-9f78-4d57-8f04-bd2f1ccdd04c" data-name="header">
+            <path d="M0,46.07,3.18,5.27a29.88,29.88,0,0,1,5.07-.36,27.74,27.74,0,0,1,4.95.36l4.86,17.16A92.19,92.19,0,0,1,20.4,32.51h.36A92.19,92.19,0,0,1,23.1,22.43L28,5.27a29.23,29.23,0,0,1,5-.36,29.23,29.23,0,0,1,5,.36l3.18,40.8a13.61,13.61,0,0,1-3.63.42,23.41,23.41,0,0,1-3.63-.24l-1.2-19.92q-.36-5.52-.48-12.84H31.8L24.48,40a25.62,25.62,0,0,1-4,.3,23.36,23.36,0,0,1-3.84-.3L9.36,13.49H9q-.3,8.94-.48,12.84L7.26,46.25a22.47,22.47,0,0,1-3.6.24A13.75,13.75,0,0,1,0,46.07Z"
+                  transform="translate(0 -0.25)"/>
+            <path d="M74,31.31q0,8-4.26,12.3a12.21,12.21,0,0,1-9,3.42,12.21,12.21,0,0,1-9-3.42q-4.26-4.26-4.26-12.3T51.72,19a12.21,12.21,0,0,1,9-3.42,12.21,12.21,0,0,1,9,3.42Q74,23.27,74,31.31ZM60.75,21.23q-5.67,0-5.67,10.08t5.67,10.08q5.67,0,5.67-10.08T60.75,21.23Z"
+                  transform="translate(0 -0.25)"/>
+            <path d="M103.2,20q2.7,4.11,2.7,11.28T102,42.56a13.18,13.18,0,0,1-10,4.11,31.41,31.41,0,0,1-11.34-2V2.45L81.06,2h2.76A4,4,0,0,1,87,3.08a5.38,5.38,0,0,1,.93,3.57V18.59a12.08,12.08,0,0,1,7.56-2.7A8.71,8.71,0,0,1,103.2,20ZM93.48,22a7.28,7.28,0,0,0-5.58,2.82v16a15,15,0,0,0,4.08.54,5.25,5.25,0,0,0,4.68-2.67q1.68-2.67,1.68-7.59Q98.34,22.07,93.48,22Z"
+                  transform="translate(0 -0.25)"/>
+            <path d="M121,22.25V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V25q0-3.24-2.7-3.24h-.72a9.32,9.32,0,0,1-.3-2.58,10.7,10.7,0,0,1,.3-2.7,39.63,39.63,0,0,1,4.38-.24h1a5.19,5.19,0,0,1,4,1.62A6.27,6.27,0,0,1,121,22.25Z"
+                  transform="translate(0 -0.25)"/>
+            <path d="M119.82,1.09a7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,112.26,7a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84A7.05,7.05,0,0,1,119.82,1.09Z"
+                  transform="translate(0 -0.25)" fill="#fff"/>
+            <path d="M139.08,40.67h2a10.23,10.23,0,0,1,.6,3.18,9.24,9.24,0,0,1-.18,2.1,38.47,38.47,0,0,1-5.64.54q-6.48,0-6.48-7v-37l.36-.42h2.88a3.94,3.94,0,0,1,3.12,1.05,5.52,5.52,0,0,1,.9,3.57V38Q136.62,40.67,139.08,40.67Z"
+                  transform="translate(0 -0.25)"/>
+            <path d="M155.94,22.25V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V25q0-3.24-2.7-3.24h-.72a9.32,9.32,0,0,1-.3-2.58,10.7,10.7,0,0,1,.3-2.7,39.63,39.63,0,0,1,4.38-.24h1a5.19,5.19,0,0,1,4.05,1.62A6.27,6.27,0,0,1,155.94,22.25Z"
+                  transform="translate(0 -0.25)"/>
+            <path d="M154.8,3.09a7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,147.24,9a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84A7.05,7.05,0,0,1,154.8,3.09Z"
+                  transform="translate(0 -0.25)" fill="#fff"/>
+            <path d="M163.08,39.47l8.76-11.82q1.32-1.8,4.8-5.7l-.18-.3a63.09,63.09,0,0,1-7.74.42H163a9.79,9.79,0,0,1-.24-2.34,15.8,15.8,0,0,1,.42-3.3h20.4a16.31,16.31,0,0,1,1,4.26,4.1,4.1,0,0,1-.78,2.34L175,34.91a64.65,64.65,0,0,1-4.56,5.7l.18.24q3.12-.3,5.22-.3h2.58a15.35,15.35,0,0,0,6.12-.9,9.4,9.4,0,0,1,.72,3.12q0,3.42-4.32,3.42h-18a14.27,14.27,0,0,1-.9-3.93A5.08,5.08,0,0,1,163.08,39.47Z"
+                  transform="translate(0 -0.25)"/>
+            <path d="M215.88,31.31q0,8-4.26,12.3a13.63,13.63,0,0,1-18.06,0q-4.26-4.26-4.26-12.3T193.56,19a13.63,13.63,0,0,1,18.06,0Q215.88,23.27,215.88,31.31ZM202.59,21.23q-5.67,0-5.67,10.08t5.67,10.08q5.67,0,5.67-10.08T202.59,21.23Z"
+                  transform="translate(0 -0.25)"/>
+            <path d="M247,26.09V39.41a11,11,0,0,0,1.2,5.64,7,7,0,0,1-4.41,1.56q-2.43,0-3.33-1.14a5.69,5.69,0,0,1-.9-3.54V27.65a7.74,7.74,0,0,0-.72-3.87,2.78,2.78,0,0,0-2.58-1.17,8.62,8.62,0,0,0-6.3,3V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V16.49l.42-.36h2.76q3.42,0,4.08,3.6,4.38-3.84,8.73-3.84t6.42,2.82A12.17,12.17,0,0,1,247,26.09Z"
+                  transform="translate(0 -0.25)"/>
+            <path d="M57.26,11a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84,7.05,7.05,0,0,1,3.69.84,7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,57.26,11Z"
+                  transform="translate(0 -0.25)" fill="#fff"/>
+            <path d="M198.26,11a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84,7.05,7.05,0,0,1,3.69.84,7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,198.26,11Z"
+                  transform="translate(0 -0.25)" fill="#fff"/>
+        </g>
+    </g>
+</svg>
diff --git a/js/src/components/Footer.vue b/js/src/components/Footer.vue
index 195b1a707..4f7cbb001 100644
--- a/js/src/components/Footer.vue
+++ b/js/src/components/Footer.vue
@@ -38,6 +38,7 @@ export default class Footer extends Vue {
         align-items: center;
 
         .logo {
+            fill: $secondary;
             flex: 1;
         }
 
diff --git a/js/src/components/Logo.vue b/js/src/components/Logo.vue
index 0102e10a8..17e7d9270 100644
--- a/js/src/components/Logo.vue
+++ b/js/src/components/Logo.vue
@@ -1,5 +1,5 @@
 <template>
-    <img src="../assets/mobilizon_logo.svg" alt="Mobilizon">
+    <img svg-inline src="../assets/mobilizon_logo.svg" alt="Mobilizon" :class="{invert: invert}">
 </template>
 
 <script lang="ts">
@@ -13,8 +13,12 @@ export default class Logo extends Vue {
 <style lang="scss" scoped>
     @import "../variables.scss";
 
-    img {
-        color: #403e56;
-        height: 80px;
+    svg {
+        fill: $primary;
+        height: 60px;
+
+        &.invert {
+            fill: $secondary;
+        }
     }
 </style>
diff --git a/js/vue.config.js b/js/vue.config.js
index b3363d711..73dbeed3d 100644
--- a/js/vue.config.js
+++ b/js/vue.config.js
@@ -33,5 +33,11 @@ module.exports = {
           };
           return args
         });
+
+    config.module
+        .rule("vue")
+        .use("vue-svg-inline-loader")
+        .loader("vue-svg-inline-loader")
+        .options({ /* ... */ });
   }
 };
diff --git a/js/yarn.lock b/js/yarn.lock
index 7228785f9..59d423715 100644
--- a/js/yarn.lock
+++ b/js/yarn.lock
@@ -570,6 +570,14 @@
     "@babel/helper-regex" "^7.4.3"
     regexpu-core "^4.5.4"
 
+"@babel/polyfill@^7.2.5":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.4.3.tgz#332dc6f57b718017c3a8b37b4eea8aa6eeac1187"
+  integrity sha512-rkv8WIvJshA5Ev8iNMGgz5WZkRtgtiPexiT7w5qevGTuT7ZBfM3de9ox1y9JR5/OXb/sWGBbWlHNa7vQKqku3Q==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.2"
+
 "@babel/preset-env@^7.0.0 < 7.4.0":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.4.tgz#887cf38b6d23c82f19b5135298bdb160062e33e1"
@@ -627,7 +635,7 @@
     core-js "^2.6.5"
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
   integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==
@@ -6034,7 +6042,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
   integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
@@ -9467,7 +9475,7 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
-svgo@^1.0.0:
+svgo@^1.0.0, svgo@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.2.2.tgz#0253d34eccf2aed4ad4f283e11ee75198f9d7316"
   integrity sha512-rAfulcwp2D9jjdGu+0CuqlrAUin6bBWrpoqXWwKDZZZJfXcUXQSxLJOFJCQCSA0x0pP2U0TxSlJu2ROq5Bq6qA==
@@ -10257,6 +10265,17 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-svg-inline-loader@^1.2.15:
+  version "1.2.15"
+  resolved "https://registry.yarnpkg.com/vue-svg-inline-loader/-/vue-svg-inline-loader-1.2.15.tgz#762b7105354524749dda9e60bba8ce885613744f"
+  integrity sha512-LnP4zeZN36Hx7UniGgP7bCpKPAWpLWowFmzoGbOlWVAS2ciXtQIGHXvRoZKYxamNP4E8v+fWBguwyAHayd6h0g==
+  dependencies:
+    "@babel/polyfill" "^7.2.5"
+    "@babel/runtime" "^7.3.4"
+    loader-utils "^1.2.3"
+    schema-utils "^1.0.0"
+    svgo "^1.2.0"
+
 vue-template-compiler@^2.5.16, vue-template-compiler@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"