border styles, modal width dynamic

src/components/forms/components/checkbox/styles.js

@@ -19,7 +19,7 @@ export const CheckboxWrapper = styled.div`
     width: 25px;
     height: 25px;
     min-width: 25px;
-    border: 1px solid $border;
+    border: 1px solid ${theme.colors.border};
     appearance: none;
     color: ${theme.colors.green};
     cursor: pointer;

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

@@ -4,7 +4,7 @@ import theme from 'styles/theme';
 export const TagsWrapper = styled.div`
   border-radius: 4px;
   background-color: transparent;
-  border: solid 1px $border;
+  border: solid 1px ${theme.colors.border};
   outline: none;
   color: ${theme.colors.slate};
   min-height: 40px;

src/components/forms/components/select/styles.js

@@ -9,7 +9,7 @@ export const SelectWrapper = styled.div`
     appearance: none;
     border-radius: 4px;
     background-color: transparent;
-    border: solid 1px $border;
+    border: solid 1px ${theme.colors.border};
     outline: none;
     color: ${theme.colors.slate};
     width: 100%;

src/components/grid/index.js

@@ -3,15 +3,18 @@ import React from 'react';
 import { Flex, Box } from 'reflexbox';
 import styled from '@emotion/styled';
 
+import theme from 'styles/theme';
+
 const RowDiv = styled(Flex)`
   max-width: 1120px;
+  margin: auto;
 `;
 
 const ColumnDiv = styled(Box)`
   padding: 0 16px;
   margin: 0;
 
-  ${(props) => props.theme.mediaQueries.m} {
+  ${theme.mediaQueries.medium} {
     padding: 0 20px;
   }
 `;

src/components/modals/contact-us/styles.js

@@ -2,17 +2,17 @@ import theme from 'styles/theme';
 import { css } from '@emotion/core';
 
 export const modalWrapperStyles = css`
+  width: 100%;
+
+  ${theme.mediaQueries.medium} {
+    width: 650px;
+  }
+
   .modal-content {
     padding-bottom: 20px;
 
     .c-form-submit {
       margin-top: 30px;
     }
   }
-
-  ${theme.mediaQueries.medium} {
-    .modal-content {
-      min-width: 650px;
-    }
-  }
 `;

src/components/modals/modal/styles.js

@@ -27,7 +27,7 @@ export const baseStyles = css`
     background-color: rgba(17, 55, 80, 0.4);
     overflow: auto;
 
-    @media screen and (min-width: $screen-m) {
+    ${theme.mediaQueries.medium} {
       padding: 40px 10px;
     }
   }
@@ -38,6 +38,8 @@ export const baseStyles = css`
     outline: none;
     min-width: 200px;
     min-height: 150px;
+    width: auto;
+    height: auto;
     position: relative;
     top: auto;
     left: auto;
@@ -48,7 +50,7 @@ export const baseStyles = css`
     border: none;
     border-radius: 0;
 
-    @media screen and (min-width: $screen-m) {
+    ${theme.mediaQueries.medium} {
       width: auto;
       max-width: 900px;
     }

src/styleguide/logo/index.js

@@ -3,22 +3,17 @@ import PropTypes from 'prop-types';
 
 import Logo from 'assets/logos/gfw.png';
 
-import GlobalStyles from 'components/global-styles';
-
-import './styles.scss';
+import { LogoWrapper } from './styles';
 
 export default class Wrapper extends Component {
   static propTypes = { children: PropTypes.node.isRequired };
 
   render() {
     return (
-      <>
-        <GlobalStyles />
-        <div className="c-intro">
-          <img className="logo" src={Logo} alt="global forest watch logo" />
-          {this.props.children}
-        </div>
-      </>
+      <LogoWrapper className="c-intro">
+        <img className="logo" src={Logo} alt="global forest watch logo" />
+        {this.props.children}
+      </LogoWrapper>
     );
   }
 }

src/styleguide/logo/styles.scss → src/styleguide/logo/styles.js

@@ -1,4 +1,6 @@
-.c-intro {
+import styled from '@emotion/styled';
+
+export const LogoWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
@@ -8,4 +10,4 @@
     max-width: 100%;
     margin-bottom: 15px;
   }
-}
+`;

src/styles/semantics.js

@@ -121,7 +121,7 @@ export default css`
     appearance: none;
     box-sizing: border-box;
     border-radius: 4px;
-    border: solid 1px $border;
+    border: solid 1px ${theme.colors.border};
     height: 40px;
     padding: 0 12px;
     width: 100%;

styleguide.webpack.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const glob = require('glob');
 const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
 
 module.exports = {
@@ -30,27 +29,6 @@ module.exports = {
           },
         ],
       },
-      {
-        test: /\.scss$/i,
-        exclude: /node_modules/,
-        use: [
-          'style-loader',
-          { loader: 'css-loader', options: { importLoaders: 2 } },
-          'postcss-loader',
-          'sass-loader',
-          {
-            loader: 'sass-loader',
-            options: {
-              sassOptions: {
-                includePaths: ['./node_modules', './src/styles']
-                  .map((d) => path.join(__dirname, d))
-                  .map((g) => glob.sync(g))
-                  .reduce((a, c) => a.concat(c), []),
-              },
-            },
-          },
-        ],
-      },
     ],
   },
   plugins: [],

webpack-dev.config.js

@@ -1,8 +1,6 @@
 const path = require('path');
-const glob = require('glob');
 const webpack = require('webpack');
 const CompressionPlugin = require('compression-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
@@ -29,28 +27,6 @@ const config = {
           },
         ],
       },
-      {
-        test: /\.scss$/,
-        exclude: /node_modules/,
-        use: ExtractTextPlugin.extract({
-          use: [
-            { loader: 'css-loader', options: { importLoaders: 2 } },
-            'postcss-loader',
-            'sass-loader',
-            {
-              loader: 'sass-loader',
-              options: {
-                sassOptions: {
-                  includePaths: ['./node_modules', './src/styles']
-                    .map((d) => path.join(__dirname, d))
-                    .map((g) => glob.sync(g))
-                    .reduce((a, c) => a.concat(c), []),
-                },
-              },
-            },
-          ],
-        }),
-      },
     ],
   },
   externals: ['react', 'react-dom', 'classnames', 'lodash', 'prop-types'],
@@ -64,6 +40,7 @@ const config = {
       assets: path.resolve(__dirname, 'src/assets'),
       utils: path.resolve(__dirname, 'src/utils'),
       services: path.resolve(__dirname, 'src/services'),
+      constants: path.resolve(__dirname, 'src/constants'),
     },
   },
   optimization: {
@@ -89,11 +66,6 @@ const config = {
     ],
   },
   plugins: [
-    new ExtractTextPlugin({
-      disable: false,
-      allChunks: true,
-      filename: '[name].css',
-    }),
     new webpack.optimize.ModuleConcatenationPlugin(),
     new webpack.HashedModuleIdsPlugin(),
     new CompressionPlugin({