Breaking up main stylesheet into per-component styles

src/components/Footer/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { translate, Trans } from 'react-i18next';
 
+import './style.css';
+
 const Footer = () => (
   <footer>
     <ul className="inline with-separator">

src/components/Footer/style.css

@@ -0,0 +1,11 @@
+@import url('../../globals.css');
+
+footer {
+  margin: var(--spacing-margin) 0;
+
+  & img {
+    vertical-align: text-top;
+    width: 80px;
+    height: 15px;
+  }
+}

src/components/Header/__snapshots__/test.js.snap

@@ -3,7 +3,6 @@
 exports[`Header rendering 1`] = `
 <header
   data-banner="testing"
-  id="main"
 >
   <h1>
     <a

src/components/Header/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { translate, Trans } from 'react-i18next';
 
+import style from './style.css';
 import GithubIcon from 'feather-icons/dist/icons/github.svg';
 
 const Header = () => (
-  <header id="main" data-banner={ process.env.BANNER }>
+  <header className={ style.header } data-banner={ process.env.BANNER }>
     <h1>
       <a href="/">Regexper</a>
     </h1>

src/components/Header/style.css

@@ -0,0 +1,63 @@
+@import url('../../globals.css');
+
+.header {
+  background: var(--color-green) linear-gradient(to bottom,
+    var(--color-green) 0%,
+    color(var(--color-green) shade(40%)) 100%);
+  box-shadow: 0 0 1rem var(--color-black);
+  padding: 0 var(--content-margin);
+  margin: 0 calc(-1 * var(--content-margin)) var(--spacing-margin) calc(-1 * var(--content-margin));
+  position: relative;
+
+  &:after {
+    content: attr(data-banner);
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--header-height);
+    line-height: var(--header-height);
+    text-transform: uppercase;
+    text-align: center;
+    font-size: calc(var(--header-height) * 0.7);
+    font-weight: bold;
+    opacity: 0.2;
+  }
+
+  & h1 {
+    font-family: 'Bangers', 'cursive';
+    font-size: 4rem;
+    font-weight: normal;
+    display: inline-block;
+    margin: 0;
+    line-height: var(--header-height);
+  }
+
+  & a {
+    text-decoration: none;
+    display: inline-block;
+  }
+
+  & ul {
+    line-height: var(--header-height);
+    position: absolute;
+    top: 0;
+    right: var(--content-margin);
+  }
+
+  & li {
+    & a:hover,
+    & a:active {
+      text-decoration: underline;
+    }
+
+    & svg {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      margin-right: 0.5rem;
+      vertical-align: text-top;
+    }
+  }
+}

src/components/Message/__snapshots__/test.js.snap

@@ -2,18 +2,14 @@
 
 exports[`Message rendering 1`] = `
 <div
-  className="message testing"
+  className=""
 >
-  <div
-    className="header"
-  >
+  <div>
     <h2>
       Testing
     </h2>
   </div>
-  <div
-    className="content"
-  >
+  <div>
     <p>
       Message content
     </p>
@@ -23,18 +19,14 @@ exports[`Message rendering 1`] = `
 
 exports[`Message rendering with icon 1`] = `
 <div
-  class="message"
+  class=""
 >
-  <div
-    class="header"
-  >
+  <div>
     <h2>
       Sample icon SVGTesting
     </h2>
   </div>
-  <div
-    class="content"
-  >
+  <div>
     <p>
       Message content
     </p>

src/components/Message/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import style from './style.css';
+
 const renderIcon = icon => {
   if (!icon) {
     return;
@@ -10,19 +12,21 @@ const renderIcon = icon => {
   return <Icon/>;
 };
 
-const Message = ({ className, icon, heading, children }) => (
-  <div className={ ['message', className].filter(Boolean).join(' ') }>
-    <div className="header">
+const Message = ({ type, icon, heading, children }) => (
+  <div className={ [ style.message, type && style[type] ].filter(Boolean).join(' ') }>
+    <div className={ style.header }>
       <h2>{ renderIcon(icon) }{ heading }</h2>
     </div>
-    <div className="content">
+    <div className={ style.content }>
       { children }
     </div>
   </div>
 );
 
 Message.propTypes = {
-  className: PropTypes.string,
+  type: PropTypes.oneOf([
+    'error'
+  ]),
   icon: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.func

src/components/Message/style.css

@@ -0,0 +1,41 @@
+@import url('../../globals.css');
+
+.message {
+  background: var(--color-tan);
+  margin: var(--spacing-margin) 0;
+
+  & .header {
+    padding: var(--spacing-margin);
+
+    & h2 {
+      margin: 0;
+    }
+
+    & h2 svg {
+      margin-right: 0.5rem;
+      height: 3rem;
+      width: 3rem;
+      vertical-align: bottom;
+    }
+  }
+
+  & .content {
+    padding: var(--spacing-margin);
+  }
+
+  & p {
+    margin-top: 0;
+    margin-bottom: var(--spacing-margin) 0;
+  }
+
+  & p:last-child {
+    margin-bottom: 0;
+  }
+
+  &.error {
+    & .header {
+      background: var(--color-red);
+      color: var(--color-white);
+    }
+  }
+}

src/components/RavenError/__snapshots__/test.js.snap

@@ -2,9 +2,9 @@
 
 exports[`RavenError rendering 1`] = `
 <Message
-  className="error"
   heading="translate(An error has occurred)"
   icon={[Function]}
+  type="error"
 >
   <p>
     <Trans

src/components/RavenError/index.js

@@ -23,7 +23,7 @@ class RavenError extends React.Component {
   render() {
     const { t } = this.props;
 
-    return <Message className="error" icon={ AlertIcon } heading={ t('An error has occurred') }>
+    return <Message type="error" icon={ AlertIcon } heading={ t('An error has occurred') }>
       <p><Trans i18nKey="This error has been logged">
         This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.
       </Trans></p>