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 c437d0b..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() { @@ -27,7 +27,7 @@ class AllQuestions extends Component {
{question.user ? ( - @@ -37,11 +37,11 @@ class AllQuestions extends Component {
-
- {question.likes.length} -
-
- {question.answers.length} +
+ {question.answers.length} answers +
+
+ {question.likes.length} likes
@@ -55,25 +55,63 @@ class AllQuestions extends Component { const Card = styled.div` display: flex; + align-items: center; .card { - &__heading { + &__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}; } &__user { - - } + font-size: 1.2rem; + display: flex; - &__rating { - - &-likes { + &-button { + border: none; + color: ${primary}; + font-size: inherit; + cursor: pointer; + border-bottom: 1px solid currentColor; + display: inline-block; + background-color: transparent; + transition: all .2s; + &:hover { + color: ${primary_light}; + } } + } + + &__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'