From 7db9f3a5b8119869d899ae6bc32f1d159ad39ed9 Mon Sep 17 00:00:00 2001
From: [Alisina92] <asb92.jobs@gmail.com>
Date: Apr 04 2021 19:51:28 +0000
Subject: [PATCH 1/3] I have added dark mode for landing page


---

diff --git a/src/App.js b/src/App.js
index b782aa0..597257c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import { Route, Switch } from 'react-router';
 import { BrowserRouter } from 'react-router-dom'
@@ -8,21 +8,39 @@ import LandingPage from './landingpage/LandingPage';
 import NotFound from './NotFound';
 
 
-class App extends Component {
-  render() {
-    return (
-      <BrowserRouter basename={window.env.SUBDIR}>
+ const App =()=>{
+  const[darkMode,setDarkMode]=useState(false);
+   
+  return (
+    <BrowserRouter basename={window.env.SUBDIR}>
+      <div className={darkMode ? "dark-mode" : "light-mode"}>
+        <div className="container"></div>
+        <div className="switch-checkbox">
+          <span className={{ color: darkMode ? "yellow" : "gray" }}>☀︎</span>
+          <span style={{ color: darkMode ? "#c96dfd" : "grey" }}>☽</span>
+          <label className="switch">
+            <input type="checkbox" onChange={() => setDarkMode(!darkMode)} />
+            <span className="slider round"> </span>
+          </label>
+        </div>
         <div>
           <Switch>
-            <Route path="/" exact component={LandingPage} />
-            <Route path="/wizard" component={Wizard} />
+            <Route
+              path="/"
+              exact
+              render={() => <LandingPage darkMode={darkMode} />}
+            />
+            <Route
+              path="/wizard"
+              render={() => <Wizard arkMode={darkMode} />}
+            />
             <Route path="/landingpage" component={LandingPage} />
             <Route component={NotFound} />
           </Switch>
         </div>
-      </BrowserRouter>
-    );
+      </div>
+    </BrowserRouter>
+  );
   }
-}
 
 export default App;
diff --git a/src/index.css b/src/index.css
index 27f6835..43e4ec5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -138,3 +138,98 @@ ol.steps > li {
   border-top-style: solid;
   border-top-width: 1px;
 }
+
+
+.dark-mode {
+  background-color: #1a1919;
+  color:#b0b0b0;
+  height: 100%;
+  transition: background-color 0.25s ease-in-out;
+}
+
+.light-mode {
+  background-color: #fff;
+  color: #333;
+  height: 100%;
+  transition: background-color 0.25s ease-in-out;
+}
+
+
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 14px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  height: 27px;
+  cursor: pointer;
+  top: 10px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 21px;
+ width: 23px;
+ left: 4px;
+ bottom: 3px;
+ background-color: white;
+ transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #19a2c1;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+.switch-checkbox {
+  padding: 10px;
+  display: flex;
+  justify-content: flex-end
+}
diff --git a/src/landingpage/LandingPage.js b/src/landingpage/LandingPage.js
index b1bee82..9f89c05 100644
--- a/src/landingpage/LandingPage.js
+++ b/src/landingpage/LandingPage.js
@@ -17,6 +17,8 @@ import Cookies from "universal-cookie"
 
 class LandingPage extends Component {
   constructor(props) {
+  
+
     super(props)
     this.cookies = new Cookies()
     this.available_components = ["events", "blockers", "minutes"]
@@ -91,7 +93,7 @@ class LandingPage extends Component {
     ))
     return (
       <Layout loading={this.props.stable === 0}>
-        <div className="bluebox">
+        <div className={'bluebox', this.props.darkMode ? "dark-mode" : "light-mode"}>
           <Container>
             <Row>
               <div className="col-md-12">
@@ -108,7 +110,8 @@ class LandingPage extends Component {
                 href="#"
                 onClick={(e) => this.toggle_config_mode(e)}
                 className="badge badge-secondary events"
-                role="button">
+                role="button"
+              >
                 {this.state.config_mode
                   ? "Save changes"
                   : "Configure visibility of the info-cards"}
@@ -120,15 +123,16 @@ class LandingPage extends Component {
               <Link
                 className="btn btn-primary btn-block btn-wrap-text btn-lg active"
                 to="/wizard"
-                role="button">
-                Do you have some spare time? Feeling like helping others? Wanna improve Fedora?
-                Click here!
+                role="button"
+              >
+                Do you have some spare time? Feeling like helping others? Wanna
+                improve Fedora? Click here!
               </Link>
             </div>
           </Row>
         </Container>
       </Layout>
-    )
+    );
   }
 }
 
diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js
index a9ecb3e..ad48693 100644
--- a/src/wizard/Wizard.js
+++ b/src/wizard/Wizard.js
@@ -35,8 +35,8 @@ class Wizard extends Component {
 
   render() {
     return (
-      <Layout>
-        <div className="bluebox">
+      <Layout >
+        <div className={'bluebox',this.props.darkMode ? "dark-mode" : "light-mode"}>
           <Container>
             <WizardForm
               show_actions={this.show_actions.bind(this)}
@@ -45,8 +45,12 @@ class Wizard extends Component {
             />
             <h1>Nothing sparked joy?</h1>
             <div>
-              None of the above looks interesting to you? We'd be happy if you looked around at{" "}
-              <a href="https://whatcanidoforfedora.org/">https://whatcanidoforfedora.org/</a>!
+              None of the above looks interesting to you? We'd be happy if you
+              looked around at{" "}
+              <a href="https://whatcanidoforfedora.org/">
+                https://whatcanidoforfedora.org/
+              </a>
+              !
             </div>
           </Container>
         </div>
@@ -58,7 +62,7 @@ class Wizard extends Component {
           </Row>
         </Container>
       </Layout>
-    )
+    );
   }
 }
 

From ba8b234b35e36fc67ff853a378ada289e0e69de2 Mon Sep 17 00:00:00 2001
From: [Alisina92] <asb92.jobs@gmail.com>
Date: Apr 05 2021 16:27:43 +0000
Subject: [PATCH 2/3] navbar is dark now


---

diff --git a/src/App.js b/src/App.js
index 597257c..4c2effa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,7 +25,8 @@ import NotFound from './NotFound';
         </div>
         <div>
           <Switch>
-            <Route
+         
+        <Route
               path="/"
               exact
               render={() => <LandingPage darkMode={darkMode} />}
@@ -40,6 +41,7 @@ import NotFound from './NotFound';
         </div>
       </div>
     </BrowserRouter>
+
   );
   }
 
diff --git a/src/landingpage/LandingPage.js b/src/landingpage/LandingPage.js
index 9f89c05..e01f1db 100644
--- a/src/landingpage/LandingPage.js
+++ b/src/landingpage/LandingPage.js
@@ -92,7 +92,7 @@ class LandingPage extends Component {
       </Row>
     ))
     return (
-      <Layout loading={this.props.stable === 0}>
+      <Layout loading={this.props.stable === 0} darkMode={this.props.darkMode} >
         <div className={'bluebox', this.props.darkMode ? "dark-mode" : "light-mode"}>
           <Container>
             <Row>
diff --git a/src/layout/Footer.js b/src/layout/Footer.js
index f6cd591..924f36a 100644
--- a/src/layout/Footer.js
+++ b/src/layout/Footer.js
@@ -1,16 +1,14 @@
-import React, { Component } from "react"
+import React  from "react"
 
-class Footer extends Component {
-  render() {
-    return (
-      <div className="footer">
-        <div className="container">
-          <a href="https://pagure.io/fedora-qa/landingpage">Source</a> on Pagure{" "}
-          <span className="float-right">version 0.1.0</span>
-        </div>
+const Footer =()=> {
+  return (
+    <div className="footer">
+      <div className="container">
+        <a href="https://pagure.io/fedora-qa/landingpage">Source</a> on Pagure{" "}
+        <span className="float-right">version 0.1.0</span>
       </div>
-    )
+    </div>
+  );
   }
-}
 
 export default Footer
diff --git a/src/layout/Layout.js b/src/layout/Layout.js
index 17b4499..6112b75 100644
--- a/src/layout/Layout.js
+++ b/src/layout/Layout.js
@@ -1,18 +1,16 @@
-import React, { Component } from "react"
+import React from "react"
 import Masthead from "./Masthead"
 import Footer from "./Footer"
 
-class Layout extends Component {
-  render() {
-    const { loading } = this.props
+const Layout =(props)=> {
     return (
       <div>
-        <Masthead loading={loading} />
-        {loading ? null : this.props.children}
-        <Footer />
+        <Masthead loading={props.loading} darkMode={props.darkMode} />
+        {props.loading ? null : props.children}
+        <Footer darkMode={props.darkMode} />
       </div>
-    )
-  }
+    );
+  
 }
 
 export default Layout
diff --git a/src/layout/Masthead.js b/src/layout/Masthead.js
index a48e1d8..e3d5291 100644
--- a/src/layout/Masthead.js
+++ b/src/layout/Masthead.js
@@ -1,20 +1,20 @@
-import React, { Component } from "react"
+import React from "react"
 import { Link } from "react-router-dom"
 import { Container, NavbarBrand, Navbar } from "reactstrap"
 
 import logo from "./logo.png"
 
-class Masthead extends Component {
-  render() {
+const Masthead =(props)=> {
+   
     return (
-      <Navbar className="masthead">
+      <Navbar className={'masthead', props.darkMode?"dark-mode" : "navbar"}>
         <Container>
           <NavbarBrand tag="div">
             <Link to="/">
               <img src={logo} alt="" />
             </Link>
           </NavbarBrand>
-          {this.props.loading ? (
+          {props.loading ? (
             <span className="fa-lg">
               <i class="fas fa-spinner fa-pulse"></i>
             </span>
@@ -22,7 +22,7 @@ class Masthead extends Component {
         </Container>
       </Navbar>
     )
-  }
+  
 }
 
 export default Masthead
diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js
index ad48693..c5a83a1 100644
--- a/src/wizard/Wizard.js
+++ b/src/wizard/Wizard.js
@@ -36,7 +36,7 @@ class Wizard extends Component {
   render() {
     return (
       <Layout >
-        <div className={'bluebox',this.props.darkMode ? "dark-mode" : "light-mode"}>
+        <div className={'bluebox',this.props.darkMode ? 'darkMode':''}>
           <Container>
             <WizardForm
               show_actions={this.show_actions.bind(this)}

From 44bc25145bfdb5d05d72bbae5853393581f69beb Mon Sep 17 00:00:00 2001
From: [Alisina92] <asb92.jobs@gmail.com>
Date: Apr 05 2021 21:24:42 +0000
Subject: [PATCH 3/3] dark mode improved


---

diff --git a/src/App.js b/src/App.js
index 4c2effa..269b1ed 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,36 +12,36 @@ import NotFound from './NotFound';
   const[darkMode,setDarkMode]=useState(false);
    
   return (
-    <BrowserRouter basename={window.env.SUBDIR}>
-      <div className={darkMode ? "dark-mode" : "light-mode"}>
-        <div className="container"></div>
-        <div className="switch-checkbox">
-          <span className={{ color: darkMode ? "yellow" : "gray" }}>☀︎</span>
-          <span style={{ color: darkMode ? "#c96dfd" : "grey" }}>☽</span>
-          <label className="switch">
-            <input type="checkbox" onChange={() => setDarkMode(!darkMode)} />
-            <span className="slider round"> </span>
-          </label>
-        </div>
+    <div className={darkMode ? "dark-mode" : "light-mode"}>
+      <BrowserRouter basename={window.env.SUBDIR}>
         <div>
-          <Switch>
-         
-        <Route
-              path="/"
-              exact
-              render={() => <LandingPage darkMode={darkMode} />}
-            />
-            <Route
-              path="/wizard"
-              render={() => <Wizard arkMode={darkMode} />}
-            />
-            <Route path="/landingpage" component={LandingPage} />
-            <Route component={NotFound} />
-          </Switch>
+          <div className="container"></div>
+          <div className="switch-checkbox">
+            <span className={{ color: darkMode ? "yellow" : "gray" }}>☀︎</span>
+            <span style={{ color: darkMode ? "#c96dfd" : "grey" }}>☽</span>
+            <label className="switch">
+              <input type="checkbox" onChange={() => setDarkMode(!darkMode)} />
+              <span className="slider round"> </span>
+            </label>
+          </div>
+          <div>
+            <Switch>
+              <Route
+                path="/"
+                exact
+                render={() => <LandingPage darkMode={darkMode} />}
+              />
+              <Route
+                path="/wizard"
+                render={() => <Wizard arkMode={darkMode} />}
+              />
+              <Route path="/landingpage" component={LandingPage} />
+              <Route component={NotFound} />
+            </Switch>
+          </div>
         </div>
-      </div>
-    </BrowserRouter>
-
+      </BrowserRouter>
+    </div>
   );
   }
 
diff --git a/src/index.css b/src/index.css
index 43e4ec5..59b9754 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,14 +10,15 @@ html {
   box-sizing: inherit;
 }
 
-body {
+ body {
   position: relative;
-  min-height: 100%;
+  height: 100%;
+   width: 100%;
   margin: 0;
   padding: 0;
   background-color: #fff;
-  padding-bottom: 10rem;
-}
+  padding-bottom:0px;
+} 
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -143,16 +144,12 @@ ol.steps > li {
 .dark-mode {
   background-color: #1a1919;
   color:#b0b0b0;
-  height: 100%;
-  transition: background-color 0.25s ease-in-out;
 }
 
 .light-mode {
   background-color: #fff;
   color: #333;
-  height: 100%;
-  transition: background-color 0.25s ease-in-out;
-}
+ }
 
 
 
diff --git a/src/layout/Footer.js b/src/layout/Footer.js
index 924f36a..689655c 100644
--- a/src/layout/Footer.js
+++ b/src/layout/Footer.js
@@ -1,8 +1,8 @@
 import React  from "react"
 
-const Footer =()=> {
+const Footer =(props)=> {
   return (
-    <div className="footer">
+    <div className={"footer",props.darkMode?'dark-mode':'light-mode'}>
       <div className="container">
         <a href="https://pagure.io/fedora-qa/landingpage">Source</a> on Pagure{" "}
         <span className="float-right">version 0.1.0</span>
diff --git a/src/layout/Masthead.js b/src/layout/Masthead.js
index e3d5291..2ef0d9c 100644
--- a/src/layout/Masthead.js
+++ b/src/layout/Masthead.js
@@ -5,9 +5,8 @@ import { Container, NavbarBrand, Navbar } from "reactstrap"
 import logo from "./logo.png"
 
 const Masthead =(props)=> {
-   
-    return (
-      <Navbar className={'masthead', props.darkMode?"dark-mode" : "navbar"}>
+   return (
+      <Navbar className={'masthead', props.darkMode?"dark-mode" : "light-mode"}>
         <Container>
           <NavbarBrand tag="div">
             <Link to="/">
diff --git a/src/wizard/Wizard.js b/src/wizard/Wizard.js
index c5a83a1..965f91c 100644
--- a/src/wizard/Wizard.js
+++ b/src/wizard/Wizard.js
@@ -35,8 +35,8 @@ class Wizard extends Component {
 
   render() {
     return (
-      <Layout >
-        <div className={'bluebox',this.props.darkMode ? 'darkMode':''}>
+      <Layout>
+        <div className={("bluebox", this.props.darkMode ? "dark-mode" : "")}>
           <Container>
             <WizardForm
               show_actions={this.show_actions.bind(this)}