Skip to content
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

improved mode toggle #24

Merged
merged 3 commits into from
Mar 29, 2021
Merged

improved mode toggle #24

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
eacad5b
improved mode toggle
anastasssia88 Mar 27, 2021
2ce9268
created reusable component for h1
anastasssia88 Mar 27, 2021
79b5a97
rebuilt add new page, create reusable PrimaryBtn
anastasssia88 Mar 27, 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
4 changes: 2 additions & 2 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,9 @@ const App = () => {
<AuthProvider>
<Router>
{/* <Header toggleTheme={toggleTheme} theme={theme} /> */}
<ThemeProvider theme={darkTheme}>
<ThemeProvider theme = {state.currentTheme}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ahhh yeaaaaa !

<DocumentBody>
<SideHeader />
<SideHeader toggleTheme = {toggleTheme}/>
<Main theme={theme}>
<Switch>
<Route path="/about">
Expand Down
16 changes: 16 additions & 0 deletions src/components/Heading1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react'
import styled from 'styled-components'

const Heading = styled.h1`
color: ${(props) => props.theme.headingBlue};
`;

const Heading1 = ({content}) => {
return (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A small thing for me I really like to remove anything not in use so could just return without the curly brackets, but maybe makes sense to leave in case we are doing some logic in here soon etc. If we removed it then could be

const Heading1 = ({content}) => 
        <Heading>
            {content}
        </Heading>

Another options is since content is being used as children can use the children prop that we get in react.

const Heading1 = ({children}) => 
        <Heading>
            {children}
        </Heading>


and then to use it we just wrap around our stuff

<Heading1>some header</Heading1>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But yes let's merge and then iterate as we add more stuff :-)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah I think we'll come back to it anyways

<Heading>
{content}
</Heading>
)
}

export default Heading1
29 changes: 29 additions & 0 deletions src/components/PrimaryBtn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react'
import styled from 'styled-components'

const StyledBtn = styled.button`
background-color: ${props => props.theme.headingBlue};
color: white;
border: none;
padding: 6px 6px;
margin: 16px 0px;
border-radius: 6px;
/* max-width: 90px; */
min-width: 90px;
box-shadow: 1px 1px 10px 2px rgba(0, 0, 0, 7%);
transition: all 0.2s ease;

&:hover{
box-shadow: 1px 1px 10px 4px rgba(0, 0, 0, 22%);
}
`

const PrimaryBtn = ({content}) => {
return (
<StyledBtn>
{content}
</StyledBtn>
)
}

export default PrimaryBtn
4 changes: 2 additions & 2 deletions src/components/header/ModeToggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const StyledInput = styled.input`

&:before {
content: '';
position: absolute;
position: absolute;
width: 14px;
height: 12px;
right: ${props => props.theme.beforePosition};
Expand All @@ -44,7 +44,7 @@ const StyledInput = styled.input`
const ModeToggle = ({toggleTheme}) => {
return (
<StyledDiv>
<StyledInput type="checkbox" name="checkbox" onChange = {() => toggleTheme()} />
<StyledInput type="checkbox" name="checkbox" onChange = {() => toggleTheme()} />
</StyledDiv>

)
Expand Down
4 changes: 2 additions & 2 deletions src/components/header/NavLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const NavLinks = () => {
<LinkText> Home </LinkText>
</NavLink>

<NavLink exact to="#">
<NavLink exact to="/add" activeStyle={{ color: "#1A3B79" }}>
<LinkText>Add New</LinkText>
</NavLink>

Expand All @@ -76,7 +76,7 @@ const NavLinks = () => {
<LinkText>Shared</LinkText>
</NavLink>

<NavLink exact to="/login">
<NavLink exact to="/login" activeStyle={{ color: "#1A3B79" }}>
<LinkText>Log In</LinkText>
</NavLink>
</FirstBox>
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/SideHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const SideHeader = ({toggleTheme}) => {
<SideNav>
<UserInfo />
<NavLinks />
<ModeToggle toggleTheme={toggleTheme}/>
<ModeToggle toggleTheme={toggleTheme}/>
<Copyright />
<ButtonLeft />
</SideNav>
Expand Down
9 changes: 3 additions & 6 deletions src/pages/About.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import React from "react";
import styled from "styled-components"

const Title = styled.h1`
color: ${props => props.theme.headingBlue};
`
// Components
import Heading1 from "../components/Heading1"

const About = () => {
return (
<Title>
About
</Title>
<Heading1 content="About" />
);
};

Expand Down
113 changes: 110 additions & 3 deletions src/pages/AddNew.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import React, { useState } from "react";
import { auth } from "../adapters/firebase";
import styled from 'styled-components';

// Components
import PrimaryBtn from '../components/PrimaryBtn'
import Heading1 from '../components/Heading1'

const newRecord = {
title: "some string",
Expand All @@ -15,6 +20,56 @@ const newRecord = {
url: "www.google.com",
};

const StyledForm = styled.form`
max-width: 35rem;
`

const FormWrapper = styled.div`
margin: 2rem 0rem;
display: flex;
flex-direction: column;
`

const StyledLabel = styled.label`
display: none;
`

const StyledInput = styled.input`
width: 100%;
padding: 12px 12px;
margin-top: 1rem;
background-color: ${props => props.theme.bgSide};
color: ${props => props.theme.mainText};
font-size: 14px;
border: none;
border-radius: 8px;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 2%);
`

const InputCost = styled(StyledInput)`
width: 5rem;
margin-right: 0.9rem;
`

const StyledTextarea = styled.textarea`
resize: none;
width: 100%;
height: 13rem;
padding: 12px 12px;
margin-top: 1rem;
background-color: ${props => props.theme.bgSide};
color: ${props => props.theme.mainText};
border: none;
font-size: 14px;
border-radius: 8px;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 2%);
`

const InputWrapper = styled.div`
display: flex;
flex-direction: row;
`

const AddNew = () => {
const [state, setState] = useState({
title: "",
Expand Down Expand Up @@ -70,8 +125,59 @@ const AddNew = () => {
};
return (
<div>
<h1>Add New</h1>
<form
<Heading1 content="Add New Resource" />
<StyledForm onSubmit={handleSubmit}>
<FormWrapper>
<StyledLabel for="title">Title</StyledLabel>
<StyledInput name="title" value={state.title} placeholder="Title" onChange={handleChange}/>

<StyledLabel for="name_first">Author's first name</StyledLabel>
<StyledInput
name="name_first"
value={state.name_first}
placeholder="Author's first name"
onChange={handleChange}
/>

<StyledLabel for="name_last">Author's last name</StyledLabel>
<StyledInput
name="name_last"
value={state.name_last}
placeholder="Author's last name"
onChange={handleChange}
/>

<StyledLabel for="desc">Description</StyledLabel>
<StyledTextarea name="desc" placeholder="Description..."/>
<InputWrapper>

<StyledLabel for="cost">Cost</StyledLabel>
<InputCost
name="cost"
value={state.cost}
placeholder="Cost"
onChange={handleChange}
/>

<StyledLabel for="url">URL</StyledLabel>
<StyledInput
name="url"
value={state.url}
placeholder="URL"
onChange={handleChange}
/>
</InputWrapper>
<StyledLabel for="tags">Tags</StyledLabel>
<StyledInput
name="tags"
value={state.tags}
placeholder="Tags"
onChange={handleChange}
/>
</FormWrapper>
<PrimaryBtn content="Submit" type="submit"/>
</StyledForm>
{/* <form
onSubmit={handleSubmit}
style={{ display: "flex", flexDirection: "column", maxWidth: "250px" }}
>
Expand Down Expand Up @@ -114,7 +220,8 @@ const AddNew = () => {
<label>
<button type="submit">Submit</button>
</label>
</form>
<PrimaryBtn content={'Submit'}/>
</form> */}
</div>
);
};
Expand Down
10 changes: 5 additions & 5 deletions src/pages/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from "react";
import styled from "styled-components";
import ContentRow from "../components/ContentRow";

const Title = styled.h1`
color: ${(props) => props.theme.headingBlue};
`;
// Components
import ContentRow from "../components/ContentRow";
import Heading1 from "../components/Heading1"

const Home = ({ data, theme }) => (
<div>
<Title>Handbook.Dev</Title>

<Heading1 content="Handbook.Dev" />
{/* Search component with filtering & title search */}

<ul>
Expand Down
6 changes: 5 additions & 1 deletion src/pages/LogIn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import React, { useState } from "react";
import { useAuth } from "../hooks/useAuth";

// Components
import Heading1 from "../components/Heading1"


const LogIn = () => {
const { signOut, signIn, user } = useAuth();
const [state, setState] = useState({ email: "", password: "", errMsg: "" });
Expand Down Expand Up @@ -47,7 +51,7 @@ const LogIn = () => {
}
return (
<>
<h2>Log In</h2>
<Heading1 content="Log in to your account here" />
<form
style={{
display: "flex",
Expand Down
5 changes: 4 additions & 1 deletion src/pages/Register.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import React, { useState } from "react";
import { useAuth } from "../hooks/useAuth";

// Components
import Heading1 from "../components/Heading1"

const RegisterPage = () => {
const { signOut, signUp, user } = useAuth();
const [state, setState] = useState({ email: "", password: "", errMsg: "" });
Expand Down Expand Up @@ -47,7 +50,7 @@ const RegisterPage = () => {
}
return (
<>
<h2>Register</h2>
<Heading1 content="Create an account" />
<form
style={{
display: "flex",
Expand Down