refactor(weddi.app): move off background from board to a unique folder

src/Board/Background.tsx → src/Board/Background/Background.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import loadingIcon from '../images/loading.gif';
-import './board.scss';
+import loadingIcon from '../../images/loading.gif';
+import './background.scss';
 
-import { useStorage } from '../Provider/FirebaseApp';
-import configService from '../services/configService';
-import { listRandomKImages } from '../api';
-import { permutationList } from '../utils/random';
-import { sleep } from '../utils/sleep';
-import { preloadImageAsync } from '../images/preloadImage';
+import { useStorage } from '../../Provider/FirebaseApp';
+import configService from '../../services/configService';
+import { listRandomKImages } from '../../api';
+import { permutationList } from '../../utils/random';
+import { sleep } from '../../utils/sleep';
+import { preloadImageAsync } from '../../images/preloadImage';
 
 const TIME_FADE_OUT = 1000;
 const TIME_FADE_IN = 1000;
@@ -21,7 +21,7 @@ enum BG_STATE {
   BG_VISIBLE = 'BG_VISIBLE',
 }
 
-export const Background = () => {
+const Background: React.FC = () => {
   const storage = useStorage();
   const [isLoading, setIsLoading] = useState(true);
   const [bgState, setBgState] = useState(BG_STATE.BG_HIDDEN);
@@ -98,3 +98,5 @@ export const Background = () => {
     </div>
   );
 };
+
+export default Background;

src/Board/Background/background.scss

@@ -0,0 +1,67 @@
+@import '../../stylesheets/vars.scss';
+
+.orange-font {
+  color: $orange;
+}
+
+.gray-font {
+  color: #333;
+  font-size: small;
+}
+
+.container {
+  background: black;
+  min-height: 100%;
+  overflow-x: hidden;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.container .loading {
+  text-align: center;
+  color: white;
+  font-size: 25px;
+  position: absolute;
+  top: 300px;
+  width: 100%;
+}
+
+.loading img {
+  width: 100px;
+  margin: 0 20px 0 0;
+  vertical-align: middle;
+}
+
+.container img {
+  flex-grow: 1;
+  margin: 2px;
+  object-fit: cover;
+  max-width: 100%;
+  max-height: 200px;
+  filter: grayscale(70%);
+}
+
+.fade-in {
+  animation: fadeIn ease 1s;
+}
+
+@keyframes fadeIn {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+
+.visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.fade-out {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s 1s, opacity 1s linear;
+}
+
+.hidden {
+  visibility: hidden;
+  opacity: 0;
+}

src/Board/board.scss

@@ -1,71 +1,5 @@
 @import '../stylesheets/vars.scss';
 
-.orange-font {
-  color: $orange;
-}
-
-.gray-font {
-  color: #333;
-  font-size: small;
-}
-
-.container {
-  background: black;
-  min-height: 100%;
-  overflow-x: hidden;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.container .loading {
-  text-align: center;
-  color: white;
-  font-size: 25px;
-  position: absolute;
-  top: 300px;
-  width: 100%;
-}
-
-.loading img {
-  width: 100px;
-  margin: 0 20px 0 0;
-  vertical-align: middle;
-}
-
-.container img {
-  flex-grow: 1;
-  margin: 2px;
-  object-fit: cover;
-  max-width: 100%;
-  max-height: 200px;
-  filter: grayscale(70%);
-}
-
-.fade-in {
-  animation: fadeIn ease 1s;
-}
-
-@keyframes fadeIn {
-  0% {opacity: 0;}
-  100% {opacity: 1;}
-}
-
-.visible {
-  visibility: visible;
-  opacity: 1;
-}
-
-.fade-out {
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility 0s 1s, opacity 1s linear;
-}
-
-.hidden {
-  visibility: hidden;
-  opacity: 0;
-}
-
 .message-link {
   position: fixed;
   bottom: 50px;

src/Board/index.tsx

@@ -5,7 +5,7 @@ import './board.scss';
 
 import { useAnalytics, useDatabase } from '../Provider/FirebaseApp';
 import Dialog from './Dialog/Dialog';
-import { Background } from './Background';
+import Background from './Background/Background';
 import { subscribePost } from './subscribePost';
 import { estimateReadingTime } from '../utils/estimateReadingTime';
 import { sleep } from '../utils/sleep';