Fix css bug in modal

cypress/integration/Login-spec.js

@@ -73,17 +73,17 @@ describe('Login user flow', () => {
       .eq(1).type('654321')
       .get('.sign-in-button')
       .click()
-      .get('.error-message')
+      .get('.error-message-login')
       .should('have.text', 'Username or password is incorrect')
 
     cy.get('.sign-in-button').click()
-      .get('.error-message')
+      .get('.error-message-login')
       .should('have.text', 'You are missing a required parameter of email')
 
     cy.get('input')
       .eq(0).type('[email protected]')
       .get('.sign-in-button').click()
-      .get('.error-message')
+      .get('.error-message-login')
       .should('have.text', 'You are missing a required parameter of password')
 
     cy.get('.close-button').click()

src/components/ErrorModal/ErrorModal.scss

@@ -7,8 +7,11 @@
 
 .modal-content {
   @include modal-content();
+  justify-content: center;
+  align-items: center;
 }
 
 .error-message {
   margin-bottom: 20px;
+  text-align: center;
 }

src/components/Login/Login.js

@@ -27,7 +27,7 @@ class Login extends Component {
   render() {
 
     const errorMessage = this.props.errorMessage &&
-      <p className='error-message'>
+      <p className='error-message-login'>
         {this.props.errorMessage}
       </p>
 

src/components/Login/Login.scss

@@ -7,6 +7,8 @@
 
 .login-content {
   @include modal-content();
+  justify-content: space-around;
+  align-items: flex-start;
   width: 400px;
   height: 300px;
 }
@@ -78,7 +80,7 @@ input {
   opacity: 0.8;
 }
 
-.error-message {
+.error-message-login {
   color: $red;
   text-align: center;
 }

src/styles/_mixins.scss

@@ -27,8 +27,8 @@
   width: 30%;
   height: 35%;
   @include flex-column();
-  justify-content: center;
-  align-items: center;
+  // justify-content: center;
+  // align-items: center;
   border-radius: 10px;
 }