add global styles

package.json

@@ -25,6 +25,7 @@
     "history": "^4.10.1",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
+    "polished": "^3.6.2",
     "postcss-cssnext": "^3.1.0",
     "prop-types": "15.6.2",
     "query-string": "^6.12.0",

src/components/carousel/index.js

@@ -1,13 +1,11 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import SlickSlider from 'react-slick';
-import { Global, css } from '@emotion/core';
 
 import ArrowIcon from 'assets/icons/arrow-down.svg';
 import Button from 'components/button';
 
 import { CarouselWrapper } from './styles';
-import slickStyles from './slick.scss';
 
 const defaultSettings = {
   dots: false,
@@ -42,11 +40,6 @@ class Carousel extends PureComponent {
 
     return (
       <CarouselWrapper className={className}>
-        <Global
-          styles={css`
-            ${slickStyles}
-          `}
-        />
         <SlickSlider
           key={isClient ? 'client' : 'server'}
           {...sliderSettings}

src/components/carousel/styles.js

@@ -11,15 +11,73 @@ export const CarouselWrapper = styled.div`
     margin-left: -20px;
   }
 
+  .slick-slider {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+  }
+
   .slick-list {
+    position: relative;
+    display: block;
+    margin: 0;
+    padding: 0;
     overflow: visible;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
+  }
+
+  .slick-slider .slick-track,
+  .slick-slider .slick-list {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
   }
 
   .slick-track {
+    position: relative;
+    left: 0;
+    top: 0;
+    margin-left: auto;
+    margin-right: auto;
     display: flex;
+
+    &::before,
+    &::after {
+      content: "";
+      display: table;
+    }
+
+    &::after {
+      clear: both;
+    }
+
+    .slick-loading & {
+      visibility: hidden;
+    }
   }
 
   .slick-slide {
+    float: left;
+    min-height: 1px;
     display: flex;
     height: auto;
     padding: 0 5px;
@@ -33,6 +91,40 @@ export const CarouselWrapper = styled.div`
     div {
       width: 100%;
     }
+
+    [dir="rtl"] & {
+      float: right;
+    }
+
+    img {
+      display: block;
+    }
+
+    &.slick-loading img {
+      display: none;
+    }
+
+    &.dragging img {
+      pointer-events: none;
+    }
+
+    .slick-initialized & {
+      display: block;
+    }
+
+    .slick-loading & {
+      visibility: hidden;
+    }
+
+    .slick-vertical & {
+      display: block;
+      height: auto;
+      border: 1px solid transparent;
+    }
+  }
+
+  .slick-arrow.slick-hidden {
+    display: none;
   }
 
   .slick-active {

src/components/footer/styles.js

@@ -1,6 +1,7 @@
 import theme from 'styles/theme';
 import styled from '@emotion/styled';
 import { rgba } from 'emotion-rgba';
+import { darken } from 'polished';
 
 export const FooterWrapper = styled.div`
   background: #eceee8;
@@ -22,7 +23,7 @@ export const FooterWrapper = styled.div`
           text-transform: uppercase;
 
           &:hover {
-            color: ${theme.colors.slateDark};
+            color: ${darken(0.2, theme.colors.slate)};
             text-decoration: underline;
           }
         }
@@ -89,7 +90,7 @@ export const FooterWrapper = styled.div`
         }
 
         &:hover {
-          color: darken(#aaa, 20%);
+          color: ${darken(0.2, '#aaa')};
         }
       }
     }

src/components/forms/components/input/index.js

@@ -6,6 +6,8 @@ import { composeValidators } from 'components/forms/validations';
 
 import FieldWrapper from 'components/forms/components/field-wrapper';
 
+import { InputEl, TextareaEl } from './styles';
+
 class Input extends PureComponent {
   static propTypes = {
     type: PropTypes.string,
@@ -50,15 +52,13 @@ class Input extends PureComponent {
             value={input.value}
           >
             {type === 'textarea' ? (
-              <textarea
-                className="c-form-input textarea"
+              <TextareaEl
                 {...input}
                 type={type}
                 placeholder={placeholder}
               />
             ) : (
-              <input
-                className="c-form-input"
+              <InputEl
                 {...input}
                 type={type}
                 placeholder={placeholder}

src/components/forms/components/input/styles.js

@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import theme from 'styles/theme';
+
+const baseCss = css`
+  border: none;
+  background-color: transparent;
+  font-size: 14px;
+  color: ${theme.colors.slate};
+  font-family: inherit;
+  appearance: none;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: solid 1px ${theme.colors.border};
+  height: 40px;
+  padding: 0 12px;
+  width: 100%;
+
+  &::placeholder {
+    color: #a8a8a8;
+  }
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const InputEl = styled.input`
+  ${baseCss}
+`;
+
+export const TextareaEl = styled.textarea`
+  ${baseCss}
+  height: 110px;
+  padding: 12px;
+  line-height: 1.5;
+  resize: none;
+`;

src/components/global-styles/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Global, css } from '@emotion/core';
-import globalStyles from 'styles/index.scss';
+import { Global } from '@emotion/core';
+
+import resetStyles from 'styles/reset';
+import semanticStyles from 'styles/semantics';
 
 export default () => (
-  <Global
-    styles={css`
-      ${globalStyles}
-    `}
-  />
+  <>
+    <Global styles={resetStyles} />
+    <Global styles={semanticStyles} />
+  </>
 );

src/components/header/components/dropdown-menu/styles.js

@@ -32,7 +32,7 @@ export const DropdownWrapper = styled.div`
       > a {
         padding: 15px 0;
 
-        ${theme.breakpoints.mediumbg} {
+        ${theme.breakpoints.ml} {
           padding: 15px 20px;
         }
 
@@ -55,7 +55,7 @@ export const DropdownWrapper = styled.div`
           text-transform: inherit;
           padding: 15px 0;
 
-          ${theme.breakpoints.mediumbg} {
+          ${theme.breakpoints.ml} {
             padding: 15px 20px;
           }
         }
@@ -75,7 +75,7 @@ export const DropdownWrapper = styled.div`
           color: ${theme.colors.green};
 
           &:hover {
-            color: darken(${theme.colors.green}, 10%);
+            color: ${theme.colors.darkGreen};
           }
         }
       }