A lot of changes

I shoud have written a better commit, I know!

2 files changed, 27 insertions, 5 deletions

diff --git a/WebInterface/NodeJSServer/src/style/partials/_colors.scss b/WebInterface/NodeJSServer/src/style/partials/_colors.scss
index 2c954fa..4683325 100644
--- a/WebInterface/NodeJSServer/src/style/partials/_colors.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/_colors.scss
@@ -4,6 +4,7 @@ $primary-light: #484848;
 $primary-dark: #000000;
 $primary-text: #ffffff;
 $primary-text-disabled: #ffffff61;
+$primary-warning-text: #ef5350;
 $secondary: #546e7a;
 $secondary-disabled: #546e7a61;
 $secondary-half-dark: #3e5864;
diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
index eed978f..71adf61 100644
--- a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
@@ -10,20 +10,41 @@
     grid-template-rows: 1fr 1fr 1fr;
     grid-row-gap: 0.5rem;
 
+    &.frst-warning {
+      grid-template-rows: 1fr 1rem 1fr 1fr;
+    }
+
+    &.scnd-warning {
+      grid-template-rows: 1fr 1fr 1rem 1fr;
+    }
+
     div {
       display: contents;
       font-size: 1.25rem;
 
       label {
-        flex-basis: 30%;
         margin-right: 2rem;
-
-        grid-column: 1 2;
+        grid-column: 1 / 2;
+        line-height: 1.25em;
       }
 
       input {
-        flex-basis: calc(70% - 2rem);
-        grid-column: 2 3;
+        grid-column: 2 / 3;
+        border-color: none;
+      }
+
+      span {
+        margin-top: -0.5rem;
+        grid-column: 1 / 3;
+        color: $primary-warning-text;
+        background-color: $primary;
+        font-size: 0.9rem;
+        line-height: 1.2rem;
+        padding: 0.25rem;
+
+        &.hidden {
+          display: none;
+        }
       }
 
       button {