CSS Fixes

app/assets/javascripts/components/composition-form.jsx

@@ -3,6 +3,7 @@ import CompositionFormHeader from './composition-form-header.jsx'
 import CompositionNotes from './composition-notes.jsx'
 import EditPlayerSelectionRow from './edit-player-selection-row.jsx'
 import MapSegmentHeader from './map-segment-header.jsx'
+import Notification from './notification.jsx'
 import PlayerEditModal from './player-edit-modal.jsx'
 
 import OverwatchTeamCompsApi from '../models/overwatch-team-comps-api'
@@ -256,7 +257,11 @@ export default class CompositionForm extends React.Component {
             allowDuplicates } = this.state
 
     if (typeof mapID !== 'number') {
-      return <p className="container">Loading...</p>
+      if (isRequestOut) {
+        return <p className="container">Loading...</p>
+      }
+
+      return <Notification type="error" message="Oops! You've wandered too far into the dungeon." />
     }
 
     const editingPlayer = this.getPlayerToEdit()

app/assets/javascripts/components/notification.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+
+class Notification extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { visible: true }
+  }
+
+  toggle() {
+    this.setState({ visible: !this.state.visible })
+  }
+
+  render() {
+    const { message, type } = this. props
+
+    if (!this.state.visible) {
+      return null
+    }
+
+    return (
+      <div className={`${type}-alert container`}>
+        <div className="inner-container text-center">
+          {message}
+          <button
+            className="button-close"
+            type="button"
+            onClick={() => this.toggle()}
+          >╳</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+//Display this crazy stuff
+Notification.propTypes = {
+  message: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired
+}
+
+export default Notification

app/assets/stylesheets/colors.scss

@@ -14,8 +14,24 @@ $defend: #0E9ED2;
 $light-defend: #deeff8;
 $block: #111318;
 $form: #F6F6F7;
+
+$error: #d27c87;
+$error-dark: #7d4a50;
+$notice: $defend;
+$notice-dark: darken($notice, 50%);
+// Maybe a new color?
+$notice-me-senpai: #6289e0;
+
+// UI Colors - By Use
+$error-message-bg: $error;
+$error-message-border: $error;
+$error-message-text: $white;
+$notice-message-bg: $defend;
+$notice-message-border: $defend;
+$notice-message-text: $white;
 $success: #22c65b;
 
+
 // Heroes
 $ana: #408fff;
 $bastion: #bac1c9;

app/assets/stylesheets/forms.scss

@@ -89,6 +89,34 @@
     text-decoration: underline;
   }
 }
+.hover-white{
+  &:hover,
+  &:focus {
+    color: $white;
+  }
+}
+.button-close {
+  @extend .button-link;
+  float: right;
+  color: $white;
+  &:hover,
+  &:focus {
+    color: $white;
+    text-decoration: none;
+  }
+  .notice-alert & {
+    margin-top: -3.5px;
+    color: $notice-dark;
+    @extend .hover-white;
+  }
+  .error-alert & {
+    margin-top: -3.5px;
+    color: $error-dark;
+    @extend .hover-white;
+  }
+}
+
+
 
 .input {
   -moz-appearance: none;

app/assets/stylesheets/structure.scss

@@ -11,7 +11,9 @@
 .layout-children-container {
   flex: 1 0 auto;
 }
-
+.container-fluid{
+  width: 100%;
+}
 .container {
   position: relative;
   margin: 0 auto;
@@ -20,6 +22,28 @@
   width: 100%;
 }
 
+.inner-container {
+  @extend .container;
+  width: 1110px;
+  padding: 0;
+}
+
+.notice-alert {
+  z-index: 10;
+  height: 60px;
+  padding: 23px 20px 20px 20px;
+  margin-top: -52px;
+  position: fixed;
+  color: $notice-message-text;
+  background: $notice-message-bg;
+}
+
+.error-alert {
+  @extend .notice-alert;
+  color: $error-message-text;
+  background: $error-message-bg;
+}
+
 .footer {
   padding: 3rem 1.5rem 6rem;
   background-color: $form;

app/assets/stylesheets/typography.scss

@@ -4,6 +4,10 @@ body, button, input, select, textarea {
   font-family: $font-stack;
 }
 
+.text-center {
+  text-align: center;
+}
+
 pre, code {
   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   font-size: inherit;
@@ -71,3 +75,4 @@ h4 {
   display: inline-block;
   text-align: left;
 }
+

config/database.yml

@@ -5,14 +5,14 @@ default: &default
 
 development:
   <<: *default
-  database: db/development
+  database: overwatch_team_comps_development
 
 # Warning: The database defined as "test" will be erased and
 # re-generated from your development database when you run "rake".
 # Do not set this db to the same as development or production.
 test:
   <<: *default
-  database: db/test
+  database: overwatch_team_comps_test
 
 production:
   <<: *default