Another large update for all components

reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate group page components.

app/javascript/gabsocial/components/modal/embed_modal/embed_modal.js

@@ -1,7 +1,13 @@
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 import api from '../../../api'
 
+const messages = defineMessages({
+  embed: { id: 'status.embed', defaultMessage: 'Embed' },
+  instructions: { id: 'embed.instructions', defaultMessage: 'Embed this status on your website by copying the code below.' },
+  preview: { id: 'embed.preview', defaultMessage: 'Here is what it will look like:' },
+});
+
 export default @injectIntl
 class EmbedModal extends ImmutablePureComponent {
 
@@ -48,15 +54,15 @@ class EmbedModal extends ImmutablePureComponent {
   }
 
   render () {
-    const { oembed } = this.state;
+    const { oembed, intl } = this.state;
 
     return (
       <div className='modal-root__modal embed-modal'>
-        <h4><FormattedMessage id='status.embed' defaultMessage='Embed' /></h4>
+        <h4>{intl.formatMessage(messages.embed)}</h4>
 
         <div className='embed-modal__container'>
           <p className='hint'>
-            <FormattedMessage id='embed.instructions' defaultMessage='Embed this status on your website by copying the code below.' />
+            {intl.formatMessage(messages.instructions)}
           </p>
 
           <input
@@ -68,7 +74,7 @@ class EmbedModal extends ImmutablePureComponent {
           />
 
           <p className='hint'>
-            <FormattedMessage id='embed.preview' defaultMessage='Here is what it will look like:' />
+            {intl.formatMessage(messages.preview)}
           </p>
 
           <iframe

app/javascript/gabsocial/components/modal/embed_modal/embed_modal.scss

@@ -0,0 +1,59 @@
+.embed-modal {
+  max-width: 80vw;
+  max-height: 80vh;
+
+  h4 {
+    padding: 30px;
+    font-weight: 500;
+    font-size: 16px;
+    text-align: center;
+  }
+
+  .embed-modal__container {
+    padding: 10px;
+
+    .hint {
+      margin-bottom: 15px;
+    }
+
+    .embed-modal__html {
+      outline: 0;
+      box-sizing: border-box;
+      display: block;
+      width: 100%;
+      border: none;
+      padding: 10px;
+      font-family: $font-monospace, monospace;
+      background: $ui-base-color;
+      color: $primary-text-color;
+      font-size: 14px;
+      margin: 0;
+      margin-bottom: 15px;
+
+      &::-moz-focus-inner {
+        border: 0;
+      }
+
+      &::-moz-focus-inner,
+      &:focus,
+      &:active {
+        outline: 0 !important;
+      }
+
+      &:focus {
+        background: lighten($ui-base-color, 4%);
+      }
+
+      @media screen and (max-width: 600px) {
+        font-size: 16px;
+      }
+    }
+
+    .embed-modal__iframe {
+      width: 400px;
+      max-width: 100%;
+      overflow: hidden;
+      border: 0;
+    }
+  }
+}