Login error message

app/partials/login.jade

@@ -1,3 +1,4 @@
+//-extends layout
 extends login-layout
 
 block head
@@ -10,9 +11,13 @@ block content
                 h1.logo
                     img(src="/images/logo.png", alt="TAIGA")
                 p.tagline Project management web application with scrum in the mind!
+                p.login-error
+                    span.title Ooops! Something went wrong!
+                    span.text According to our Oompa Loompas, your username or password are incorrect.
+                    a.icon.icon-delete(href="", title="Close message")
                 form(ng-submit="ctrl.submit()")
                     input(type="text", name="username", ng-model="form.username", placeholder="User name")
                     input(type="password", name="password", ng-model="form.password")
                     a.button.button-login.button-gray(href="", title="Log in") Log in
-                    a.button.button-signup(href="", title="Log in") Sign up
+                    a.button.button-signup.button-orange(href="", title="Log in") Sign up
                     input(type="submit", value="I am an horrible button to be deleted. Click me to login for the moment")

app/styles/components/buttons.scss

@@ -54,6 +54,14 @@
     }
 }
 
+.button-orange {
+    background: $orange;
+    &:hover {
+        background: lighten($orange, 10%);
+        color: $white;
+    }
+}
+
 a.button-block {
     background: $white;
     color: $red;

app/styles/layout/login.scss

@@ -23,6 +23,7 @@
         line-height: 2rem;
     }
     input {
+        background: $white;
         margin-bottom: 1rem;
     }
     .button-login,
@@ -32,7 +33,37 @@
         margin-bottom: .5rem;
         text-align: center;
     }
-    .button-signup {
-        background: $orange;
+    .button-login {
+        &:hover {
+            background: $green-taiga;
+        }
+    }
+}
+
+.login-error {
+    background: $red;
+    border-radius: 4px;
+    color: $white;
+    padding: 1rem;
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    width: 20%;
+    span {
+        display: block;
+    }
+    .title {
+        @extend %large;
+        font-family: 'DroidSans-bold';
+    }
+    .icon-delete {
+        color: $red-light;
+        position: absolute;
+        right: .5rem;
+        top: .5rem;
+        &:hover {
+            @include transition(color .3s linear);
+            color: $white;
+        }
     }
 }