From ef5a9594adf837d8d67d838d571b4ff41de0ea4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 9 Dec 2019 21:36:14 +0000
Subject: [PATCH] refactor(ui): move out centered message style to a dedicated
 component

---
 ui/src/Components/CenteredMessage/index.js        | 15 +++++++++++++++
 ui/src/Components/Grid/EmptyGrid/index.js         | 12 ++++--------
 .../Components/CenteredMessage.scss}              |  0
 ui/src/Styles/DarkTheme.scss                      |  1 +
 ui/src/Styles/LightTheme.scss                     |  1 +
 5 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 ui/src/Components/CenteredMessage/index.js
 rename ui/src/{Components/Grid/EmptyGrid/index.scss => Styles/Components/CenteredMessage.scss} (100%)

diff --git a/ui/src/Components/CenteredMessage/index.js b/ui/src/Components/CenteredMessage/index.js
new file mode 100644
index 000000000..4cea9a1a0
--- /dev/null
+++ b/ui/src/Components/CenteredMessage/index.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+import { MountFade } from "Components/Animations/MountFade";
+
+const CenteredMessage = ({ children, className }) => (
+  <h1
+    className={`${
+      className ? className : "display-1 text-placeholder"
+    } screen-center`}
+  >
+    <MountFade in={true}>{children}</MountFade>
+  </h1>
+);
+
+export { CenteredMessage };
diff --git a/ui/src/Components/Grid/EmptyGrid/index.js b/ui/src/Components/Grid/EmptyGrid/index.js
index 9e4765f36..4df43a9af 100644
--- a/ui/src/Components/Grid/EmptyGrid/index.js
+++ b/ui/src/Components/Grid/EmptyGrid/index.js
@@ -3,16 +3,12 @@ import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMugHot } from "@fortawesome/free-solid-svg-icons/faMugHot";
 
-import { MountFade } from "Components/Animations/MountFade";
-
-import "./index.scss";
+import { CenteredMessage } from "Components/CenteredMessage";
 
 const EmptyGrid = () => (
-  <h1 className="display-1 text-placeholder screen-center">
-    <MountFade in={true}>
-      <FontAwesomeIcon icon={faMugHot} style={{ fontSize: "14rem" }} />
-    </MountFade>
-  </h1>
+  <CenteredMessage>
+    <FontAwesomeIcon icon={faMugHot} style={{ fontSize: "14rem" }} />
+  </CenteredMessage>
 );
 
 export { EmptyGrid };
diff --git a/ui/src/Components/Grid/EmptyGrid/index.scss b/ui/src/Styles/Components/CenteredMessage.scss
similarity index 100%
rename from ui/src/Components/Grid/EmptyGrid/index.scss
rename to ui/src/Styles/Components/CenteredMessage.scss
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index a3060ebc1..42150504e 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -83,6 +83,7 @@ $datepicker__day-hover-color: $white;
 @import "Styles/Components/Alert";
 @import "Styles/Components/AlertGroup";
 @import "Styles/Components/BaseLabel";
+@import "Styles/Components/CenteredMessage";
 @import "Styles/Components/FilterInputLabel";
 @import "Styles/Components/LabelWithPercent";
 @import "Styles/Components/InputRange";
diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss
index 73e292226..54073aa51 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/ui/src/Styles/LightTheme.scss
@@ -74,6 +74,7 @@ $datepicker__day-hover-color: $black;
 @import "Styles/Components/Alert";
 @import "Styles/Components/AlertGroup";
 @import "Styles/Components/BaseLabel";
+@import "Styles/Components/CenteredMessage";
 @import "Styles/Components/FilterInputLabel";
 @import "Styles/Components/LabelWithPercent";
 @import "Styles/Components/InputRange";