diff --git a/client/src/Global.js b/client/src/Global.js index ee39911..c1a01dd 100644 --- a/client/src/Global.js +++ b/client/src/Global.js @@ -1,5 +1,5 @@ import {createGlobalStyle} from 'styled-components' -import {normalize} from 'polished' +// import {normalize} from 'polished' import {black, white} from './utils' // ${normalize()} removed from const GlobalStyle diff --git a/client/src/components/homepage/Homepage.js b/client/src/components/homepage/Homepage.js index b086b21..f0357d3 100644 --- a/client/src/components/homepage/Homepage.js +++ b/client/src/components/homepage/Homepage.js @@ -10,7 +10,7 @@ import {getQuestions} from "../../actions/questionActions"; import AllQuestions from "../questions/AllQuestions"; // Styled Components -import {Heading, Button} from '../../elements' +import {Button} from '../../elements' import {lighterblack} from '../../utils' class Homepage extends Component { @@ -55,9 +55,9 @@ const HomepageStyled = styled.div` } &__h1 { - font-weight: 300; - text-transform: uppercase; - /* letter-spacing: 1px; */ + font-weight: 600; + /* text-transform: uppercase; */ + letter-spacing: 1px; padding: 1.5rem 3rem; } diff --git a/client/src/components/layout/Sidebar.js b/client/src/components/layout/Sidebar.js index 6b8547f..8e380aa 100644 --- a/client/src/components/layout/Sidebar.js +++ b/client/src/components/layout/Sidebar.js @@ -6,7 +6,7 @@ import styled from 'styled-components' import sprites from '../../img/sprite.svg' // UTILS -import {white, primary, secondary, secondary_light} from '../../utils' +import {white, primary} from '../../utils' const Sidebar = () => { return ( diff --git a/client/src/components/questions/AllQuestions.js b/client/src/components/questions/AllQuestions.js index 64fe2f1..3fe3dae 100644 --- a/client/src/components/questions/AllQuestions.js +++ b/client/src/components/questions/AllQuestions.js @@ -3,8 +3,8 @@ import {Link} from "react-router-dom"; import styled from 'styled-components' // Styled Components / Utils -import {lighterblack, black, primary} from '../../utils' -import {darken} from 'polished' +import {lighterblack, black, primary, primary_light, white} from '../../utils' +import {lighten} from 'polished' class AllQuestions extends Component { render() { @@ -14,28 +14,37 @@ class AllQuestions extends Component {
{questions.map(question => { return ( - -
-
{question.likes.length}
-
likes
-
+ +

+ + {question.title} + +

-
-

- - {question.title} - -

-
- {question.user ? ( - +
+ {question.user ? ( + + + + ) : + 'User deleted profile :(' + } +
+ +
+
+ {question.answers.length} answers +
+
+ {question.likes.length} likes
+ ) })} @@ -46,54 +55,63 @@ class AllQuestions extends Component { const Card = styled.div` display: flex; - padding: 12px 8px; - border-bottom: 1px solid ${lighterblack}; - color: ${black}; - - .likes { - padding-right: 30px; - - &_value { - text-align: center; + align-items: center; + + .card { + &__heading, + &__heading > *:link, + &__heading > *:visited { + margin-right: auto; + font-size: 2.25rem; + font-weight: 300; + /* text-transform: uppercase; */ + /* letter-spacing: 1px; */ + padding: 1.5rem; + text-decoration: none; + color: ${black}; } - } - .summary { - flex: 1 auto; - width: auto; - float: none; - margin: 0; - overflow: hidden; + &__user { + font-size: 1.2rem; + display: flex; - h3 { - font-weight: 400; - margin: 0 0 .35em 0; - line-height: 1.3; - - a { - text-decoration: none; - color: ${black}; - } + &-button { + border: none; + color: ${primary}; + font-size: inherit; + cursor: pointer; + border-bottom: 1px solid currentColor; + display: inline-block; + background-color: transparent; + transition: all .2s; - a:hover { - color: ${primary} + &:hover { + color: ${primary_light}; + } } } - .started { - width: auto; - line-height: inherit; - padding-top: 4px; - float: right; - - a { - text-decoration: none; - color: ${primary}; - - &:hover { - color: ${darken(0.2, primary)}; - } + &__rating { + background-color: ${primary}; + margin-left: 3rem; + color: ${white}; + align-self: stretch; + padding: 0 2.25rem; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + &-answers { + font-size: 2.25rem; + font-weight: 300; + } + + &-likes { + font-size: .8rem; + text-transform: uppercase; } + } } `; diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js index 99011ec..79351e2 100644 --- a/client/src/elements/Buttons.js +++ b/client/src/elements/Buttons.js @@ -8,7 +8,7 @@ export const Button = styled.button` color: white; font-size: inherit; border: none; - background: ${secondary}; + background: ${primary}; cursor: pointer; ${elevation[1]}; transition: 0.3s ease all; diff --git a/client/src/utils/Colors.js b/client/src/utils/Colors.js index d977f4e..6405a84 100644 --- a/client/src/utils/Colors.js +++ b/client/src/utils/Colors.js @@ -1,4 +1,5 @@ export const primary = '#5EC5B6' +export const primary_light = '#6fbcb1' export const secondary = '#54C0E4' export const secondary_light = '#8EEEEF'