From 6d6bfa7f355d04edb993b0eec46c3b96bd4067ee Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Tue, 21 Jul 2015 16:11:53 -0400
Subject: [PATCH] added incontext option to system message styles for teams

---
 lms/static/sass/base/_variables.scss           |  6 +++---
 lms/static/sass/elements/_system-feedback.scss | 13 ++++++++++++-
 lms/templates/ux/reference/teams-base.html     | 10 +++++++++-
 lms/templates/ux/reference/teams-create.html   | 11 ++++++++++-
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss
index 3470985df5..0efe2c758a 100644
--- a/lms/static/sass/base/_variables.scss
+++ b/lms/static/sass/base/_variables.scss
@@ -150,7 +150,7 @@ $yellow: rgb(255, 252, 221);
 // ====================
 
 // COLORS: old variables
-// DEPRECATED: use colors in lists above 
+// DEPRECATED: use colors in lists above
 $error-red: rgb(253, 87, 87);
 $danger-red: rgb(212, 64, 64);
 $light-gray: rgb(221, 221, 221);
@@ -163,7 +163,7 @@ $light-gray: rgb(221,221,221); // #dddddd
 // ====================
 
 // used by descriptor css
-// DEPRECATED: use colors in lists above 
+// DEPRECATED: use colors in lists above
 $lightGrey: rgb(237,241,245); // #edf1f5
 $darkGrey: rgb(136,145,161); // #8891a1
 $lightGrey1: $gray-l3;
@@ -355,7 +355,7 @@ $highlight-color: rgb(255,255,0);
 // Notifications
 $notify-banner-bg-1: rgb(56,56,56);
 $notify-banner-bg-2: rgb(136,136,136);
-$notify-banner-bg-3: rgb(223,223,223);
+$notify-banner-bg-3: $shadow-l2;
 
 $alert-color: rgb(212, 64, 64); //rich red
 $warning-color: rgb(237, 189, 60); //rich yellow
diff --git a/lms/static/sass/elements/_system-feedback.scss b/lms/static/sass/elements/_system-feedback.scss
index fb1d04b619..41cb5ea92e 100644
--- a/lms/static/sass/elements/_system-feedback.scss
+++ b/lms/static/sass/elements/_system-feedback.scss
@@ -1,7 +1,7 @@
 // lms - elements - system feedback
 // ====================
 
-// messages
+// pre-pattern library messages
 
 // UI : message
 .wrapper-msg {
@@ -111,6 +111,7 @@
 
   &.urgency-low {
     background: $notify-banner-bg-3;
+    box-shadow: 0 1px 2px $shadow;
 
     .msg {
       color: $black;
@@ -132,6 +133,16 @@
   &.success {
     border-top: 3px solid $success-color;
   }
+
+
+  &.is-incontext {
+    margin: $baseline;
+
+    .msg {
+      max-width: unset;
+      min-width: auto;
+    }
+  }
 }
 
 
diff --git a/lms/templates/ux/reference/teams-base.html b/lms/templates/ux/reference/teams-base.html
index 1616a4f038..82aa2eaa24 100644
--- a/lms/templates/ux/reference/teams-base.html
+++ b/lms/templates/ux/reference/teams-base.html
@@ -151,6 +151,15 @@ Teams | Course name
         </div>
       </div>
     </header>
+    <div class="wrapper-msg is-incontext urgency-low warning">
+        <div class="msg">
+            <div class="msg-content">
+                <div class="copy">
+                    <p>We couldn't find the team "blah".</p>
+                </div>
+            </div>
+        </div>
+    </div>
 
     <div class="page-content">
       <nav class="page-content-nav" aria-label="Team">
@@ -159,7 +168,6 @@ Teams | Course name
       </nav>
 
       <div class="page-content-main">
-<!-- may need a form with submit here -->
         <div class="listing-tools">
           <span class="listing-count">1-10 of 24 topics</span> |
           <span class="field listing-sort">
diff --git a/lms/templates/ux/reference/teams-create.html b/lms/templates/ux/reference/teams-create.html
index 811f467455..3fae1bce56 100644
--- a/lms/templates/ux/reference/teams-create.html
+++ b/lms/templates/ux/reference/teams-create.html
@@ -139,7 +139,16 @@ Create New Team | [Course name]
         <p class="page-description">If you cannot find an existing team to join or would like to team up with a group of friends, create a new team.</p>
       </div>
     </header>
-
+    <div class="wrapper-msg is-incontext urgency-low warning">
+        <div class="msg">
+            <div class="msg-content">
+                <h3 class="title">Oops!</h3>
+                <div class="copy">
+                    <p>We couldn't create your team because something needs to be fixed below.</p>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="page-content">
 
       <form class="create-team">