responsive 2

ahrbil · Nov 6, 2018 · d2d5e53 · d2d5e53
1 parent 8dc540d
commit d2d5e53
Show file tree

Hide file tree

Showing 23 changed files with 483 additions and 370 deletions.
diff --git a/client/src/components/App.js b/client/src/components/App.js
@@ -13,7 +13,7 @@ import ShotMenu from "./UI/ShotMenu";
 
 const App = ({ session }) => (
  <div>
- <ShotMenu />
+ {session.getCurrentUser && <ShotMenu />}
  <Query query={GET_ALL_SHOTS}>
  {({ data, loading, error }) => {
  if (loading) return <Loader />;
@@ -22,13 +22,13 @@ const App = ({ session }) => (
  <Fragment>
  {!session ||
  (!session.getCurrentUser && <UnAuthMessage session={session} />)}
- <ShotsContainer>
- <Shots>
+ <HomeShots>
+ <ul>
  {data.getAllShots.map(Shot => (
  <ShotItem key={Shot._id} {...Shot} />
  ))}
- </Shots>
- </ShotsContainer>
+ </ul>
+ </HomeShots>
  </Fragment>
  );
  }}
@@ -38,36 +38,7 @@ const App = ({ session }) => (
 
 export default withRouter(App);
 
-const ShotsContainer = Styled.div`
- max-width: 100%;
+const HomeShots = Styled(Shots)`
  margin: 0 auto;
- width: 200rem;
  padding: 2rem 0;
- @media (max-width: ${props => props.theme.breakPointw}) {
- width: 200rem;
- };
- @media (max-width: ${props => props.theme.breakPointe}) {
- width: 175rem;
- };
- @media (max-width: ${props => props.theme.breakPointt}) {
- width: 150rem;
- };
- @media (max-width: ${props => props.theme.breakPointy}) {
- width: 125rem;
- };
- @media (max-width: ${props => props.theme.breakPointu}) {
- width: 100rem;
- };
- @media (max-width: ${props => props.theme.breakPointa}) {
- width: 75rem;
- };
- @media (max-width: ${props => props.theme.breakPointo}) {
- width: 50rem;
- };
- @media (max-width: ${props => props.theme.breakPointd}) {
- padding: 2rem;
- };
- @media (max-width: ${props => props.theme.breakPointn}) {
- padding: 1rem;
- };
 `;
diff --git a/client/src/components/Auth/Signin.js b/client/src/components/Auth/Signin.js
@@ -65,32 +65,30 @@ class Signin extends React.Component {
  />
  </div>
  <h2>Signin</h2>
- <SignInForm>
- <form
- onSubmit={event => this.handleSubmit(event, signupUser)}
+ <SignInForm
+ onSubmit={event => this.handleSubmit(event, signupUser)}
+ >
+ <input
+ type="text"
+ name="username"
+ placeholder="Username"
+ value={username}
+ onChange={this.handleChange}
+ />
+ <input
+ type="password"
+ name="password"
+ placeholder="Password"
+ value={password}
+ onChange={this.handleChange}
+ />
+ <PinkBtn
+ style={{ alignSelf: "stretch" }}
+ type="submit"
+ disabled={loading || this.validateForm()}
  >
- <input
- type="text"
- name="username"
- placeholder="Username"
- value={username}
- onChange={this.handleChange}
- />
- <input
- type="password"
- name="password"
- placeholder="Password"
- value={password}
- onChange={this.handleChange}
- />
- <PinkBtn
- style={{ alignSelf: "stretch" }}
- type="submit"
- disabled={loading || this.validateForm()}
- >
- Sign In
- </PinkBtn>
- </form>
+ Sign In
+ </PinkBtn>
  </SignInForm>
  <Mes>
  Not a member? <Link to="/signup">Sign up now</Link>
@@ -142,7 +140,6 @@ const SignInContainer = Styled.div`
 
 const SignInForm = Styled(Form)`
  width: 40rem;
- margin: 0 auto;
  }
  input {
  background: white !important;
@@ -151,5 +148,8 @@ const SignInForm = Styled(Form)`
 
 const Mes = Styled.div`
  font-size: 1.4rem;
- color: ${props => props.theme.gray4};
+ color: ${props => props.theme.gray5};
+ a {
+ text-decoration: underline;
+ }
 `;
diff --git a/client/src/components/Auth/Signout.js b/client/src/components/Auth/Signout.js
@@ -10,9 +10,9 @@ const handleSignout = (client, history) => {
 const Signout = ({ history }) => (
  <ApolloConsumer>
  {client => {
- // console.log(client);
  return (
  <p
+ className="signout"
  style={{ cursor: "pointer" }}
  onClick={() => handleSignout(client, history)}
  >

diff --git a/client/src/components/Auth/Signup.js b/client/src/components/Auth/Signup.js
@@ -8,6 +8,7 @@ import { SIGNUP_USER } from "../../queries";
 import { Form } from "../../styles/Form";
 import { PinkBtn } from "../../styles/Buttons";
 import withAuth from "../withAuth";
+import Logo from "../UI/Logo";
 
 const initialState = {
  username: "",
@@ -50,36 +51,35 @@ class Signup extends React.Component {
  password !== passwordConfirmation;
  return isInvalid;
  };
+
  render() {
  const { username, email, password, passwordConfirmation } = this.state;
  return (
- <SignUpContainer>
- <div className="container">
- <div className="artwork">
- <div className="text">
- <img
- className="dribbbleLogo"
- src="https://www.jrentdesign.com/images/dribbble_type.png"
- alt="dribbble logo"
- />
+ <BigContainer>
+ <SignUpContainer>
+ <Artwork>
+ <div className="left--text">
+ <Logo className="dribbble-logo" name="dribbble-logo" />
  <h1>Discover the world’s top Designers & Creatives</h1>
  <p>Art by Alexa Erkaeva</p>
  </div>
- <img
- className="artworkImg"
- src="https://i.pinimg.com/originals/af/36/18/af3618b725cb2721b2e1778d2515eac5.gif"
- alt="artwork"
- />
- </div>
- <Form>
- <h3 className="heading">Sign Up With Email</h3>
+ <div className="right--artworkImg">
+ <img
+ src="https://res.cloudinary.com/ahendouz/image/upload/c_crop,h_800,w_480/v1541485504/af3618b725cb2721b2e1778d2515eac5.gif"
+ alt="artwork"
+ />
+ </div>
+ </Artwork>
+
+ <FormContainer>
+ <h2 className="title">Sign Up With Email</h2>
  <Mutation
  mutation={SIGNUP_USER}
  variables={{ username, email, password, passwordConfirmation }}
  >
  {(signupUser, { data, loading, error }) => {
  return (
- <form
+ <Form
  onSubmit={event => this.handleSubmit(event, signupUser)}
  >
  <input
@@ -118,16 +118,17 @@ class Signup extends React.Component {
  Create Account
  </PinkBtn>
  {/* {error && <Error error={error} />} */}
- </form>
+ </Form>
  );
  }}
  </Mutation>
- </Form>
- <Mes>
+ </FormContainer>
+
+ <Message>
  Already a member? <Link to="/signin">Sign in</Link>
- </Mes>
- </div>
- </SignUpContainer>
+ </Message>
+ </SignUpContainer>
+ </BigContainer>
  );
  }
 }
@@ -136,48 +137,99 @@ export default withAuth(session => session && !session.getCurrentUser)(
  withRouter(Signup)
 );
 
-const SignUpContainer = Styled.div`
+const BigContainer = Styled.div`
  background: ${props => props.theme.gray3};
- min-height: 100vh;
  padding: 3rem 0;
- .container {
- width: 70rem;
- margin: 0 auto;
- border-radius: 15px;
- overflow: hidden;
- background: white
- text-align: center;
- box-shadow: ${props => props.theme.shadow2};
- .artwork {
- background: ${props => props.theme.highlight4};
- height: 25rem;
- display: flex;
- align-items: center;
- .text {
- padding-left: 3.8rem;
- color: ${props => props.theme.highlight5};
- font-size: 1.2rem;
- text-align: left;
- .dribbbleLogo {
- height: 2.5rem;
- }
- > h1 {
- padding: 1.4rem 0 2.2rem 0;
- }
- }
- .artworkImg {
- height: 100%;
- }
+ @media (max-width: ${props => props.theme.breakPoint12}) {
+ padding: 1rem
+ }
+ @media (max-width: ${props => props.theme.breakPoint16}) {
+ padding: 0rem;
+ background: ${props => props.theme.white};
+ }
+`;
+
+const SignUpContainer = Styled.div`
+ width: 70rem;
+ margin: 0 auto;
+ border-radius: 15px;
+ overflow: hidden;
+ text-align: center;
+ box-shadow: ${props => props.theme.shadow2};
+ @media (max-width: ${props => props.theme.breakPoint12}) {
+ width: auto;
+ }
+ @media (max-width: ${props => props.theme.breakPoint16}) {
+ box-shadow: none;
+ border-radius: 0;
+ }
+`;
+
+const Artwork = Styled.div`
+ background: ${props => props.theme.highlight4};
+ height: 25rem;
+ display: flex;
+ align-items: center;
+ @media (max-width: ${props => props.theme.breakPoint17}) {
+ flex-direction: column-reverse;
+ padding-bottom: 2rem;
+ height: auto;
+ }
+ .left--text {
+ padding-left: 3.8rem;
+ color: ${props => props.theme.highlight5};
+ font-size: 1.2rem;
+ text-align: left;
+ @media (max-width: ${props => props.theme.breakPoint12}) {
+ font-size: 1rem;
+ }
+ @media (max-width: ${props => props.theme.breakPoint16}) {
+ font-size: .9rem;
+ }
+ @media (max-width: ${props => props.theme.breakPoint17}) {
+ padding-left: 0;
+ text-align: center;
+ }
+ .dribbble-logo {
+ height: 2.5rem;
+ width: 10rem;
+ fill: ${props => props.theme.gray9}
+ }
+ h1 {
+ padding: 1.4rem 0 2.2rem 0;
+ }
+ }
+ .right--artworkImg {
+ height: 100%;
+ flex-basis: 70%;
+ @media (max-width: ${props => props.theme.breakPoint17}) {
+ height: 15rem;
+ }
+ img {
+ height: 100%
  }
  }
 `;
 
-const Mes = Styled.div`
+const FormContainer = Styled.div`
+ background-color: ${props => props.theme.white};
+ .title {
+ padding-top: 2rem;
+ color: ${props => props.theme.gray4}
+ }
+`;
+
+const Message = Styled.div`
+ background-color: ${props => props.theme.white};
  padding: 3rem 0;
  font-size: 1.4rem;
  font-weight: 500;
- color: ${props => props.theme.gray3}
+ color: ${props => props.theme.gray4}
  border-top: 1px solid ${props => props.theme.gray7};
+ @media (max-width: ${props => props.theme.breakPoint16}) {
+ border-top: none;
+ padding: 0;
+ }
  a {
  color: ${props => props.theme.highlight1};
  }