dark theme toogle add

src/App.js

@@ -8,7 +8,6 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 function App() {
   return (
     <div className="App">
-      <Header />
       <MainPage />
       <Footer />
     </div>

src/components/Footer.js

@@ -9,7 +9,7 @@ export class Footer extends  Component {
 
     render() {
         return(
-            <div className="d-flex align-items-center text-center">
+            <div className=" theme-light d-flex align-items-center text-center">
                 <div className="footer-text">Copyright © 2019</div>
                 <div className="footer-text">HodlInfo.com</div>
                 <div className="footer-text">Developed By <a rel="nofollow" href="https://www.quadbtech.com" target="_blank" style={{color:"#3dc6c1"}}> QuadBTech</a></div>

src/components/Header.js

@@ -1,14 +1,15 @@
 import React, { useState,Component } from 'react';
 import './styles.css';
+import {CircularProgressbar} from 'react-circular-progressbar';
 
 import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-export const Header = () => {
+export const Header = (props) => {
     const [dropdownOpen, setDropdownOpen] = useState(false);
 
   const toggle = () => setDropdownOpen(prevState => !prevState);
     return (
         <div style={{padding: "20px 30px 0px"}}>
-            <div class="align-items-center justify-content-sm-center row">
+            <div class=" align-items-center justify-content-sm-center row">
                 <div class="text-center-sm col-12 col-sm-7 col-md-5 col-lg-4">
                     <a href="/">
                         <div class="padding-none text-center-xs col-12 col-sm-12 col-md-11 col-lg-11">
@@ -25,7 +26,7 @@ export const Header = () => {
                 <div class="text-center padding-none col-12 col-sm-12 col-md-2 col-lg-4">
                     <div class="btn-group">
  <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
-      <DropdownToggle caret>
+      <DropdownToggle caret className={"header-button"}>
         INR
       </DropdownToggle>
       <DropdownMenu>
@@ -69,15 +70,21 @@ export const Header = () => {
                                 <div class="text-nowrap d-inline-block color-white">Connect Telegram</div>
                             </div>
                         </a>
-                        <div class="margin-10 d-inline-block">
+<div className="d-inline-flex flex-wrap align-items-center justify-content-center">
-                            <label class="switch"><input type="checkbox" />
+                                <div className="progress-bar-wrapper">
-                                <span class="slider round"></span>
+                                    <CircularProgressbar value={100} text={"4"} />
+                                </div>
+                            <div className="margin-10 d-inline-block">
+                                <label className="switch">
+                                    <input type="checkbox" checked={!props.isLightTheme} onChange={props.onThemeButtonClick} />
+                                    <span className="slider round"></span>
                                 </label>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
 
     )
 };

src/components/MainPage.js

@@ -1,8 +1,16 @@
 import React, { useState, Component } from 'react';
 import "./styles.css";
+import {Header} from "./Header";
 export const MainPage = () => {
+    const [isLightTheme, setIsLightTheme ] = useState(false);
+const onThemeButtonClick = () => {
+    setIsLightTheme(!isLightTheme)
+
+};
     return (
-        <React.Fragment><div class="theme-light padding-bottom-50">
+        <React.Fragment>
+            <div className={("theme-") + (isLightTheme ? "light" : "dark")+(" padding-bottom-50")}>
+            <Header isLightTheme={isLightTheme} onThemeButtonClick={onThemeButtonClick } />
             <div class="Container-fluid " style={{ padding: "0px 30px" }}>
                 <div class="d-flex justify-content-around align-items-center average-header" style={{ padding: "10px 0px" }}>
                     <div class="text-center">

src/components/styles.css

@@ -40,6 +40,7 @@
 	 fill: #3dc6c1 !important;
 	 font-size: 44px !important;
 	 font-weight: 500;
+
 }
  .CircularProgressbar .CircularProgressbar-path {
 	 stroke: #3dc6c1 !important;
@@ -213,7 +214,6 @@
  .theme-light {
 	 background: #fff;
 	 position: relative;
-	 min-height: 100vh;
 	 color: #0c0f48;
 	 font-family: Oswald, sans-serif;
 	 font-weight: 300;
@@ -294,7 +294,6 @@
  .theme-dark {
 	 position: relative;
 	 background: #191d28;
-	 min-height: 100vh;
 	 color: white;
 	 font-family: "Oswald", sans-serif;
 }
@@ -607,7 +606,7 @@
 	 .progress-bar-wrapper {
 		 height: 25px;
 		 width: 25px;
-		 margin: 10px;
+
 	}
 	 .average-block {
 		 padding-bottom: 15px;