refactor(ui): move out centered message style to a dedicated component

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 };

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 };

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";

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";