footer ui changes

src/App.css

@@ -1,4 +1,6 @@
-
+.App{
+  margin-bottom: 46px;
+}
 .App-logo {
   height: 40vmin;
   pointer-events: none;

src/App.js

@@ -4,11 +4,13 @@ import {Footer } from '../src/components/Footer'
 import {Header } from '../src/components/Header'
 import {MainPage } from '../src/components/MainPage'
 import 'bootstrap/dist/css/bootstrap.min.css';
+import '../src/components/styles.css';
 
 function App() {
   return (
     <div className="App">
       <MainPage />
+
     </div>
   );
 }

src/components/Footer.js

@@ -9,6 +9,7 @@ export class Footer extends  Component {
 
     render() {
         return(
+<div class="footer">
             <div className="d-flex align-items-center text-center">
                 <div className="footer-text">Copyright © 2019</div>
                 <div className="footer-text">HodlInfo.com</div>
@@ -17,6 +18,7 @@ export class Footer extends  Component {
                     <a href="mailto:support@hodlinfo.com" class="footer-text-link">Support</a>
                 </div>
             </div>
+</div>
         )
     }
 }

src/components/MainPage.js

@@ -7,6 +7,7 @@ export const MainPage = () => {
     const [isLightTheme, setIsLightTheme ] = useState(false);
     const [countDownTimer, setCountDownTimer] = useState(60);
   useEffect(() => {
+      if(countDownTimer == 0) setCountDownTimer(60);
     countDownTimer > 0 && setTimeout(() => setCountDownTimer(countDownTimer - 1), 1000);
   }, [countDownTimer])
 const onThemeButtonClick = () => {
@@ -133,8 +134,8 @@ const onThemeButtonClick = () => {
                     <img src="BannerFTXNews.png" style={{ width: "100%" }} /></a>
             </div>
             <Footer />
-        </div>
         <div class="d-flex justify-content-center" style={{border:"solid 1px #191d28","background-color":"#191d28",position:"fixed",left:"0","align-items":"center",width:"100vw",height:"47px",bottom:"0","z-index":"8"}}><button class="add-button btn btn-outline-info" style={{display: "block"}}>Add hodlinfo to home screen</button></div>
+        </div>
 
         </React.Fragment>
     )

src/components/styles.css

@@ -305,6 +305,8 @@
 }
  .theme-dark .footer {
 	 border-top: 2px solid #2e3241;
+	 color: white;
+	 background-color: #2e3241;
 }
  .theme-dark .header-button {
 	 background-color: #2e3241;

src/index.css

@@ -1,12 +1,6 @@
-* {
+html{
-        margin: 0;
+  margin-top: -16px;
-        padding: 0;
+}
-        border: 0;
-        outline: 0;
-        font-size: 100%;
-        vertical-align: baseline;
-        background: transparent;
-    }
 body {
 
   margin: 0;