Skip to content

Added Dark Mode To Landing Page! #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SidhaantThakker wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added Dark Mode To Landing Page! #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9ee3efa
added support for dark mode on landing page!
SidhaantThakker Oct 5, 2021
d152079
added dark mode support for landing page
SidhaantThakker Oct 5, 2021
958dec4
added dark mode, and button in nav bar
SidhaantThakker Oct 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 26 additions & 6 deletions src/components/Header/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,31 @@
import React from "react";

import React, { Component } from "react";
import Nav from "../Nav/Nav";
import {Link} from "react-router-dom"
class Header extends Component{

constructor(props){
super(props)
this.state = {
isDark: this.props.isDark,
mode: this.props.mode
}
}

toggleDark = () => {
console.log("In content - " + this.props.isDark)
this.props.toggleDark();
this.forceUpdate();
}

function Header(mode) {
return (
<Nav className={mode}/>
);
render(){
let isDark = this.props.isDark;
let mode = this.props.mode;
return (
<div>
<Nav className={mode} isDark={isDark} toggleDark={this.toggleDark}> </Nav>
</div>
)
}

}

Expand Down
127 changes: 73 additions & 54 deletions src/components/Index/Content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,88 @@
import React from "react";
import React, { Component } from "react";
import {Link} from "react-router-dom"
function Content() {
return (
<div>
<div className="container content">
import './landing-page-dark.css';
class Content extends Component{

<div className="row">

<div className="col-sm-4 talk">
<h1 style={{"font-family": 'Abel'}}>Yet Another</h1>
<h1 style={{"font-family": 'Abel'}}>Web Playground</h1>
<br />
<h6 className="bold-four" style={{"font-family": 'Bree Serif'}}>
Does Zoom not work well for your remote web lesson needs?
Try a web playground that allows snippeting your lessons in real time.
</h6>
<br />
<h6><Link className="btn btn-dark start start-two" to="/play">Try now!</Link></h6>
</div>
<div className="col-sm-8 showcase-img">
{/* <div className="circle"></div> */}
constructor(props){
super(props);
this.state = {
isDark: this.props.isDark
}
}

toggleDark = () => {
this.props.toggleDark();
this.forceUpdate();
}

render(){
let isDark = this.props.isDark;
return (
<div className = {` ${isDark? 'dark-container':''}`}>
<div className="container content">
<div className="row">

<div className="col-sm-4 talk">
<h1 className="heading-text" style={isDark? {"color":"white"} : {}}>Yet Another</h1>
<h1 className="heading-text" style={isDark? {"color":"white"} : {}}>Web Playground</h1>
<br />
<h6 className="bold-four subheading-text" style={isDark? {"color":"white"} : {}}>
Does Zoom not work well for your remote web lesson needs?
Try a web playground that allows snippeting your lessons in real time.
</h6>
<br />
<h6><Link className="btn btn-dark start start-two" to="/play">Try now!</Link></h6>
</div>
<div className="col-sm-8 showcase-img">
{/* <div className="circle"></div> */}
</div>
</div>
</div>
</div>

<section class="features-icons bg-light text-center det-ails">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex icon-bra-ails">
<i class="icon-screen-desktop m-auto text-primary icon-ails"></i>

<section class={`features-icons bg-${isDark?'dark light-text':'light'} text-center det-ails`}>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill={isDark? "white" : "#352478" } class="bi bi-window" viewBox="0 0 16 16">
<path d="M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm1 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
<path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm13 2v2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zM2 14a1 1 0 0 1-1-1V6h14v7a1 1 0 0 1-1 1H2z"/>
</svg>
<h5>HTML</h5>
<p class="lead mb-0">Hey! Too Much Layout </p>
</div>
<h5>HTML</h5>
<p class="lead mb-0">Hey! Too Much Layout </p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex icon-bra-ails">
<i class="icon-layers m-auto text-primary icon-ails"></i>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill={isDark? "white" : "#352478" } class="bi bi-stack" viewBox="0 0 16 16">
<path d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.598.598 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.598.598 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.598.598 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535L7.733.063z"/>
<path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z"/>
</svg>
<h5>CSS</h5>
<p class="lead mb-0">
#titanic <br/>float:none
</p>
</div>
<h5>CSS</h5>
<p class="lead mb-0">
#titanic <br/>float:none
</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex icon-bra-ails">
<i class="icon-check m-auto text-primary icon-ails"></i>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill={isDark? "white" : "#352478" } class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
</svg>
<h5>Javascript</h5>
<p class="lead mb-0">
Remove duplicates from the iterable `arr`
[...new Set(arr)]
</p>
</div>
<h5>Javascript</h5>
<p class="lead mb-0">
Remove duplicates from the iterable `arr`
[...new Set(arr)]
</p>
</div>
</div>
</div>
</div>
</section>
</div>
);
</section>
</div>
);
}
}

export default Content;
24 changes: 21 additions & 3 deletions src/components/Index/Index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,34 @@ import Content from './Content';
import Footer from '../Footer/Footer';

class Index extends Component {

constructor(props){
super(props);
this.state = {
isDark: false
};
this.toggleDark = this.toggleDark.bind(this);
}

toggleDark = () => {
let flip = !(this.state.isDark);
this.setState({isDark: flip});
console.log("Click!");
console.log(this.state.isDark);
}

render() {
const {isDark} = this.state;
return (
/* To be used for custom themes */
<div class="main-container">
<Header mode="mode1"/>
<Content mode="mode1" />
<Footer mode="mode1"/>
<Header mode="mode1" isDark={isDark} toggleDark={this.toggleDark} />
<Content mode="mode1" isDark={isDark} toggleDark={this.toggleDark} />
<Footer mode="mode1" isDark={isDark} toggleDark={this.toggleDark} />
</div>

)
}
}

export default Index;
30 changes: 30 additions & 0 deletions src/components/Index/landing-page-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.dark-container{
background-color: rgb(20, 20, 20);
}

.heading-text{
font-family: Abel;
}

.subheading-text{
font-family: Bree Serif;
}

.light-text{
color: whitesmoke;
}

.toggleButton{
border-radius: 10px;
margin-top: 20px;
margin-left: 10px;
border: none;
padding: 5px;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}

.darkButton{
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
68 changes: 43 additions & 25 deletions src/components/Nav/Nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,59 @@
import React from "react"
import React, { Component } from "react"
import App from "../App.js"
import Home from "../Home.js"
import './landing-page-dark.css'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function Nav() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light static-top header-a">
<div className="container nav-container">
<a className="navbar-brand brand" href="/">YAWP</a>

<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
class Nav extends Component {

<div className="collapse navbar-collapse alink" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<a className="nav-link" href="https://josharsh.herokuapp.com">Developer</a>
</li>
<li className="nav-item">
<Link className="nav-link" to="/docs">Docs</Link>
</li>
<Link className="btn btn-outline-dark start" to="/play">Get Started</Link>
</ul>
constructor(props){
super(props)
this.state = {
isDark: this.props.isDark,
mode: this.props.mode
}
}

toggleDark = () => {
console.log("In nav - " + this.props.isDark)
this.props.toggleDark();
this.forceUpdate();
}

render(){
let isDark = this.props.isDark;
return (
<nav className={`navbar navbar-expand-lg navbar-${!isDark? 'light':'dark'} bg-${isDark? 'dark':'light'} static-top header-a`}>
<div className="container nav-container">
<a className="navbar-brand brand" href="/">YAWP</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>

<div className="collapse navbar-collapse alink" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<a className="nav-link" href="https://josharsh.herokuapp.com">Developer</a>
</li>
<li className="nav-item">
<Link className="nav-link" to="/docs">Docs</Link>
</li>
<Link className={`btn btn-outline-${isDark? 'light':'dark'} start`} to="/play">Get Started</Link>
</ul>
</div>
</div>


</div>

</nav>
);
<div className="toggle-button-container">
<button className={`toggleButton ${!isDark? 'darkButton':''}`} onClick={this.toggleDark}>{!isDark? 'Dark Mode!' : 'Light Mode!'}</button>
</div>

</nav>
);
}
}

export default Nav;
28 changes: 28 additions & 0 deletions src/components/Nav/landing-page-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.dark-container{
background-color: rgb(20, 20, 20);
}

.heading-text{
font-family: Abel;
}

.subheading-text{
font-family: Bree Serif;
}

.light-text{
color: whitesmoke;
}

.toggleButton{
border-radius: 10px;
border: none;
padding: 5px;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}

.darkButton{
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
Loading