diff --git a/src/app/sign-in/sign-in.component.html b/src/app/sign-in/sign-in.component.html
index f668c03..8be734e 100644
--- a/src/app/sign-in/sign-in.component.html
+++ b/src/app/sign-in/sign-in.component.html
@@ -5,7 +5,7 @@
Log In
Type in your Email ID and Password for logging into you Brevipost account
-
diff --git a/src/app/sign-in/sign-in.component.scss b/src/app/sign-in/sign-in.component.scss
index da00bff..fa60115 100644
--- a/src/app/sign-in/sign-in.component.scss
+++ b/src/app/sign-in/sign-in.component.scss
@@ -19,11 +19,16 @@
margin-bottom: 20px;
font-weight: bold;
}
+.custom-form {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
.input-group {
width: 100%;
max-width: 300px;
- margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
@@ -39,11 +44,21 @@ input[type="password"] {
box-sizing: border-box;
border-radius: 4px;
}
+
+.error-container {
+ height: 50px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
.error-message {
color: #ff0000;
text-align: center;
font-size: 0.8rem;
- height: 20px;
+}
+.error-message.ng-star-inserted {
+ visibility: visible;
+ height: auto;
}
button {
@@ -51,9 +66,20 @@ button {
color: white;
padding: 14px 20px;
margin: 8px 0;
- border: none;
+ border: 0.5px solid $accent-color;
cursor: pointer;
- width: 100%;
+ width: 250px;
+ border-radius: 4px;
+}
+
+button:disabled {
+ background-color: white;
+ color: $accent-color;
+ padding: 14px 20px;
+ margin: 8px 0;
+ border: 0.5px solid $accent-color;
+ cursor: not-allowed;
+ width: 250px;
border-radius: 4px;
}
@@ -63,7 +89,6 @@ button:hover {
.help-text {
text-align: center;
- padding: 12px;
color: #a0a0a0;
}
@@ -109,12 +134,12 @@ button:hover {
.register-link {
text-align: center;
- margin-top: 20px;
}
.register-link a {
color: #007bff;
text-decoration: none;
+ cursor: pointer;
}
.register-link a:hover {
@@ -141,4 +166,10 @@ button:hover {
.input-group {
width: 400px;
}
+ button {
+ width: 300px;
+ }
+ button:disabled {
+ width: 300px;
+ }
}