adding error wrapper class and relevant colours

opentech/static_src/src/sass/abstracts/_variables.scss

@@ -12,11 +12,14 @@ $color--mid-grey: #cfcfcf;
 $color--light-grey: #f7f7f7;
 $color--mustard: #e6ab32;
 $color--purple: #8c0bbf;
+$color--light-pink: #ffe1df;
+$color--tomato: #f05e54;
 
 $color--default: $color--dark-grey;
 $color--primary: $color--light-blue;
 $color--secondary: #eaeaea;
 $color--tertiary: #f9f9f9;
+$color--error: $color--tomato;
 
 // Button colours
 $button-colours: (

opentech/static_src/src/sass/components/_icon.scss

@@ -90,4 +90,10 @@
         width: 35px;
         height: 52px;
     }
+
+    &--error {
+        width: 25px;
+        height: 25px;
+        margin-right: 10px;
+    }
 }

opentech/static_src/src/sass/components/_wrapper.scss

@@ -96,4 +96,14 @@
             padding: 2rem 17rem 2rem 5rem;
         }
     }
+
+    &--error {
+        display: flex;
+        align-items: center;
+        max-width: 830px;
+        padding: 10px;
+        margin: 0 auto 2rem;
+        background: $color--light-pink;
+        border: 1px solid $color--tomato;
+    }
 }