// SCSS:

$color-primary: #00a190;
$color-white: #fff;

.button {
    background-color: $color-primary;
    color: $color-white;
}

// Styled-components

const theme = {
  color: {
    white: "#fff",
    primary: "#00a190",
  }
}

const Button = styled.button`
    background-color: ${p => p.theme.color.primary};
    color: ${p => p.theme.color.white};
`

.btn--submit-form ==> .btn--primary

.btn--read-more ==> .btn--secondary

.box--green ==> .box--prominent

.card ==> .credit-card-image

<div class="box 
            box--warning 
            box--small 
            box--previous 
            hide 
            formfield__input--error 
            mb">
    Error-message
</div>

.btn {
  background: red;
}

// Leses av browseren som:

.btn {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: red;
}

// Gjør heller dette om det er det du mener:

.btn {
  background-color: red;
}

// bad news:

border-bottom: none;
padding: 0;
float: none;
margin-left: 0;

.site-nav > li:hover .dropdown {
    position: absolute;
    top: 37px;
    left: 0;
}

// Unødvendig spesifikt

ul.nav {}
a.button {}
div.header {}

ul.nav li.active a {}
div.header a.logo img {}
.content ul.features a.button {}

import React from 'react';
import CommentItem from './CommentItem';

const Colors = ['#FDD161', '#E8A13D', '#29A4AC', '#445561', '#AFD5D9'];

const Comments = ({comments}) => (
  <ul>
    {comments.map((comment, index) => (
         <CommentItem color={Colors[index % Colors.length]} comment={comment}/>)
        )
    }
  </ul>
);


export default CommentList;

brew install yarn