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'