Merge pull request #1519 from ClearlyClaire/glitch-soc/merge-upstream

Merge upstream changes

2 files changed, 52 insertions, 2 deletions

diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js
index b41de58d7..4ea7b48fe 100644
--- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js
+++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js
@@ -90,7 +90,11 @@ class ColumnsArea extends ImmutablePureComponent {
     }
 
     if (this.mediaQuery) {
-      this.mediaQuery.addEventListener('change', this.handleLayoutChange);
+      if (this.mediaQuery.addEventListener) {
+        this.mediaQuery.addEventListener('change', this.handleLayoutChange);
+      } else {
+        this.mediaQuery.addListener(this.handleLayoutChange);
+      }
       this.setState({ renderComposePanel: !this.mediaQuery.matches });
     }
 
@@ -125,7 +129,11 @@ class ColumnsArea extends ImmutablePureComponent {
     }
 
     if (this.mediaQuery) {
-      this.mediaQuery.removeEventListener('change', this.handleLayoutChange);
+      if (this.mediaQuery.removeEventListener) {
+        this.mediaQuery.removeEventListener('change', this.handleLayoutChange);
+      } else {
+        this.mediaQuery.removeListener(this.handleLayouteChange);
+      }
     }
   }
 
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index a65ef4454..b93acd6cd 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -595,6 +595,12 @@ code {
     color: $valid-value-color;
   }
 
+  &.warning {
+    border: 1px solid rgba($gold-star, 0.5);
+    background: rgba($gold-star, 0.25);
+    color: $gold-star;
+  }
+
   &.alert {
     border: 1px solid rgba($error-value-color, 0.5);
     background: rgba($error-value-color, 0.1);
@@ -616,6 +622,19 @@ code {
     }
   }
 
+  &.warning a {
+    font-weight: 700;
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
   p {
     margin-bottom: 15px;
   }
@@ -672,6 +691,29 @@ code {
   }
 }
 
+.flash-message-stack {
+  margin-bottom: 30px;
+
+  .flash-message {
+    border-radius: 0;
+    margin-bottom: 0;
+    border-top-width: 0;
+
+    &:first-child {
+      border-radius: 4px 4px 0 0;
+      border-top-width: 1px;
+    }
+
+    &:last-child {
+      border-radius: 0 0 4px 4px;
+
+      &:first-child {
+        border-radius: 4px;
+      }
+    }
+  }
+}
+
 .form-footer {
   margin-top: 30px;
   text-align: center;