From 930813387b22d24182506c6a6423ab78694dbfc8 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Fri, 14 Aug 2020 13:27:41 +0200
Subject: [PATCH] make loading message account for dark mode & add i18n (#2033)

* make loading message account for dark mode & add i18n

* use app color scheme
---
 public/app.css                    | 3 ++-
 src/components/LoadingMessage.tsx | 3 ++-
 src/locales/en.json               | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/public/app.css b/public/app.css
index c8b1a562..027f9305 100644
--- a/public/app.css
+++ b/public/app.css
@@ -21,8 +21,9 @@
 }
 
 .LoadingMessage span {
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: var(--button-gray-1);
   border-radius: 5px;
   padding: 0.8em 1.2em;
+  color: var(--popup-text-color);
   font-size: 1.3em;
 }
diff --git a/src/components/LoadingMessage.tsx b/src/components/LoadingMessage.tsx
index 0bfd4232..fa2461e7 100644
--- a/src/components/LoadingMessage.tsx
+++ b/src/components/LoadingMessage.tsx
@@ -1,10 +1,11 @@
 import React from "react";
+import { t } from "../i18n";
 
 export const LoadingMessage = () => {
   // !! KEEP THIS IN SYNC WITH index.html !!
   return (
     <div className="LoadingMessage">
-      <span>{"Loading scene..."}</span>
+      <span>{t("labels.loadingScene")}</span>
     </div>
   );
 };
diff --git a/src/locales/en.json b/src/locales/en.json
index 80c0bd81..62ec04c9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -68,7 +68,8 @@
     "toggleGridMode": "Toggle grid mode",
     "addToLibrary": "Add to library",
     "removeFromLibrary": "Remove from library",
-    "libraryLoadingMessage": "Loading library..."
+    "libraryLoadingMessage": "Loading library...",
+    "loadingScene": "Loading scene..."
   },
   "buttons": {
     "clearReset": "Reset the canvas",