From 50050363a05cdccc7bac0e741e83380255522f33 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Sun, 28 Jun 2020 16:37:46 +0200
Subject: [PATCH] Frontend: Use new logo colors

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 assets/static/img/logo-color.svg      | 19 ++++++++++
 frontend/src/css/app.css              | 12 -------
 frontend/src/css/rainbow.css          | 50 ++-------------------------
 frontend/src/share/p-photo-mosaic.vue |  6 ++--
 4 files changed, 24 insertions(+), 63 deletions(-)
 create mode 100644 assets/static/img/logo-color.svg

diff --git a/assets/static/img/logo-color.svg b/assets/static/img/logo-color.svg
new file mode 100644
index 000000000..bc8985a2a
--- /dev/null
+++ b/assets/static/img/logo-color.svg
@@ -0,0 +1,19 @@
+<svg id="e29fdc8e-c8d6-4e72-acc1-fd591261e664" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 276.76 276.76">
+    <defs>
+        <style>
+            .a5f0b606-fcbd-47d7-8b3a-04b81844ceb5{fill:none;stroke-miterlimit:10;stroke-width:7px;stroke:url(#b27e1451-e5a3-4928-96bb-1743ab714dd9);}
+        </style>
+        <linearGradient id="b27e1451-e5a3-4928-96bb-1743ab714dd9" x1="70.34" y1="258.53" x2="231.06" y2="97.8"
+                        gradientUnits="userSpaceOnUse">
+            <stop offset="0" stop-color="#fff"/>
+            <stop offset="0" stop-color="#ff9aa2"/>
+            <stop offset="0.28" stop-color="#dabcd2"/>
+            <stop offset="0.46" stop-color="#c7ceea"/>
+            <stop offset="0.75" stop-color="#bbe0de"/>
+            <stop offset="1" stop-color="#b5ead7"/>
+        </linearGradient>
+    </defs>
+    <path id="f603d266-c3e6-4445-a37d-0c78b4379c81" data-name="Logo Pfad" class="a5f0b606-fcbd-47d7-8b3a-04b81844ceb5"
+          d="M263.43,203.05l-5.27,32.14m-237-30.83,19.68,18.56M168.14,40,40.78,222.72a.13.13,0,0,0,.09.2L258,235.37a.13.13,0,0,0,.13-.18L168.36,40.06A.13.13,0,0,0,168.14,40ZM141.9,22.37,21.05,204.1a.17.17,0,0,0,.14.26L263.3,203.3a.16.16,0,0,0,.13-.25L142.18,22.37A.18.18,0,0,0,141.9,22.37Zm.15-.2,26.22,17.69"/>
+</svg>
diff --git a/frontend/src/css/app.css b/frontend/src/css/app.css
index 5aa98360a..492db2fea 100644
--- a/frontend/src/css/app.css
+++ b/frontend/src/css/app.css
@@ -93,18 +93,6 @@ main {
     bottom: 0;
 }
 
-#photoprism div.loading p {
-    color: #616161;
-}
-
-#photoprism div.loading div.bar {
-    margin: 0;
-    width: 100%;
-    height: 8px;
-    animation: colorchange 3s infinite;
-    -webkit-animation: colorchange 3s infinite;
-}
-
 #photoprism main .p-results a {
     color: #333333;
 }
diff --git a/frontend/src/css/rainbow.css b/frontend/src/css/rainbow.css
index f71aa3376..a1fdcd7db 100644
--- a/frontend/src/css/rainbow.css
+++ b/frontend/src/css/rainbow.css
@@ -15,7 +15,7 @@
 }
 
 .rainbow {
-    background: repeating-linear-gradient(45deg, #FF9AA2, #FFB7B2, #FFDAC1, #E2F0CB, #B5EAD7, #C7CEEA);
+    background: repeating-linear-gradient(45deg, #ff9aa2, #dabcd2, #c7ceea, #bbe0de, #b5ead7);
     background-size: 200% 200%;
 
     -webkit-animation: rainbow-animation 6s ease infinite;
@@ -25,51 +25,5 @@
 
 .rainbow-static {
     background-size: 200% 200%;
-    background: repeating-linear-gradient(45deg, #FF9AA2, #FFB7B2, #FFDAC1, #E2F0CB, #B5EAD7, #C7CEEA) 100% 50%;
-}
-
-@keyframes colorchange
-{
-    0%   {background: #EF5350;}
-    25%  {background: #FFD600;}
-    50%  {background: #00ACC1;}
-    75%  {background: #00BFA5;}
-    100% {background: #E57373;}
-}
-
-@-webkit-keyframes colorchange
-{
-    0%   {background: #EF5350;}
-    25%  {background: #FFD600;}
-    50%  {background: #00ACC1;}
-    75%  {background: #00BFA5;}
-    100% {background: #E57373;}
-}
-
-.colorchange {
-    animation: colorchange 3s infinite;
-    -webkit-animation: colorchange 3s infinite;
-}
-
-@keyframes colorchange--text
-{
-    0%   {color: #EF5350;}
-    25%  {color: #FFD600;}
-    50%  {color: #00ACC1;}
-    75%  {color: #00BFA5;}
-    100% {color: #E57373;}
-}
-
-@-webkit-keyframes colorchange--text
-{
-    0%   {color: #EF5350;}
-    25%  {color: #FFD600;}
-    50%  {color: #00ACC1;}
-    75%  {color: #00BFA5;}
-    100% {color: #E57373;}
-}
-
-.colorchange--text {
-    animation: colorchange--text 5s infinite;
-    -webkit-animation: colorchange--text 5s infinite;
+    background: repeating-linear-gradient(45deg, #ff9aa2, #dabcd2, #c7ceea, #bbe0de, #b5ead7) 100% 50%;
 }
diff --git a/frontend/src/share/p-photo-mosaic.vue b/frontend/src/share/p-photo-mosaic.vue
index 535f75000..fe9fd367e 100644
--- a/frontend/src/share/p-photo-mosaic.vue
+++ b/frontend/src/share/p-photo-mosaic.vue
@@ -7,10 +7,10 @@
             <translate>No photos matched your search</translate>
           </h3>
           <div>
-            {{$gettext("Try using other terms and search options such as category, country and camera.")}}
+            <translate>Try using other terms and search options such as category, country and camera.</translate>
             <span v-show="$config.feature('review')">
-                            {{$gettext("Non-photographic and low-quality images require a review before they appear in search results.")}}
-                        </span>
+              <translate>Non-photographic and low-quality images require a review before they appear in search results.</translate>
+            </span>
           </div>
         </div>
       </v-card-title>