Update css

Author: erikaperugachi

email_login/src/components/DeleteDeviceItem.js

@@ -4,22 +4,32 @@ import string from '../lang';
 import './deletedeviceitem.scss';
 
 const DeleteDeviceItem = props => (
-  <li className="checkbox-item" onClick={ev => props.onClick(ev, props.id)}>
-    <div className="checkmark-container reverse">
-      <span className={defineClassCheckbox(props.checked)} />
-    </div>
-    <div className="device-type-icon">
-      <i className={defineDeviceType(props.deviceType)} />
-    </div>
-    <div className={'device-description'}>
-      <strong>{props.name}</strong>
-      <span>
-        <b>{string.last_activity}</b>: {props.lastActivity}
-      </span>
+  <li
+    className={defineClassComponent(props.checked)}
+    onClick={ev => props.onClick(ev, props.id)}
+  >
+    <div>
+      <div className="checkmark-container reverse">
+        <span className={defineClassCheckbox(props.checked)} />
+      </div>
+      <div className="device-type-icon">
+        <i className={defineDeviceType(props.deviceType)} />
+      </div>
+      <div className={'device-description'}>
+        <strong>{props.name}</strong>
+        <span>
+          <b>{string.last_activity}</b>: {props.lastActivity}
+        </span>
+      </div>
     </div>
   </li>
 );
 
+const defineClassComponent = checked => {
+  const classChecked = 'checkbox-item-checked';
+  return `checkbox-item ${checked ? classChecked : ''}`;
+};
+
 const defineClassCheckbox = checked => {
   return checked ? `checkmark checkmark-checked` : `checkmark`;
 };

email_login/src/components/PanelWrapper.js

@@ -409,22 +409,26 @@ class PanelWrapper extends Component {
       switch (status) {
         case 200:
           return {
-            errorMessage: errorMessages.USERNAME_NOT_EXISTS
+            errorMessage: errorMessages.USERNAME_NOT_EXISTS,
+            buttonSignInState: ButtonState.DISABLED
           };
         case 422:
           return {
-            errorMessage: errorMessages.USERNAME_INVALID
+            errorMessage: errorMessages.USERNAME_INVALID,
+            buttonSignInState: ButtonState.DISABLED
           };
         case 400:
-          return { errorMessage: '' };
+          return { errorMessage: '', buttonSignInState: ButtonState.ENABLED };
         case 410: {
           return {
-            errorMessage: errorMessages.USERNAME_NOT_AVAILABLE
+            errorMessage: errorMessages.USERNAME_NOT_AVAILABLE,
+            buttonSignInState: ButtonState.DISABLED
           };
         }
         default:
           return {
-            errorMessage: errorMessages.STATUS_UNKNOWN + status
+            errorMessage: errorMessages.STATUS_UNKNOWN + status,
+            buttonSignInState: ButtonState.DISABLED
           };
       }
     });

email_login/src/components/deletedeviceitem.scss

@@ -1,51 +1,61 @@
 .checkbox-item {
-  border-bottom: solid 1px #e6e5e5;
-  display: flex;
-  flex-direction: row;
   list-style: none;
-  margin: 0 20px;
-  padding: 15px 0;
-  width: calc(100% - 40px);
+  width: 100%;
 
-  &:last-child {
-    border-bottom: none;
+  &.checkbox-item-checked {
+    background-color: #ddf0fe;
   }
 
-  .checkmark-container {
-    margin-left: 3px;
-
-    .checkmark.checkmark-checked:after {
-      left: 4px;
-      top: 9px;
+  &:last-child {
+    div {
+      border-bottom: none;
     }
   }
 
-  .device-type-icon {
-    align-items: center;
+  > div {
+    border-bottom: solid 1px #e6e5e5;
     display: flex;
-    margin: 0 8px;
+    flex-direction: row;
+    margin: 0 20px;
+    padding: 15px 0;
+    width: calc(100% - 40px);
 
-    i {
-      color: #bfc5cb;
-      font-size: 25px;
+    .checkmark-container {
+      margin-left: 3px;
+
+      .checkmark.checkmark-checked:after {
+        left: 4px;
+        top: 9px;
+      }
     }
-  }
 
-  .device-description {
-    display: flex;
-    flex-flow: column;
-    text-align: left;
+    .device-type-icon {
+      align-items: center;
+      display: flex;
+      margin: 0 8px;
 
-    > strong {
-      color: black;
+      i {
+        color: #bfc5cb;
+        font-size: 25px;
+      }
     }
 
-    > span {
-      color: #98a3ad;
-      font-weight: 300;
+    .device-description {
+      display: flex;
+      flex-flow: column;
+      text-align: left;
+
+      > strong {
+        color: black;
+      }
+
+      > span {
+        color: #98a3ad;
+        font-weight: 300;
 
-      > b {
-        font-weight: 400;
+        > b {
+          font-weight: 400;
+        }
       }
     }
   }

email_login/src/components/signin.scss

@@ -66,6 +66,7 @@
       }
 
       .error-message {
+        position: absolute;
         font-size: 12px;
         color: #000;
         left: 0px;
@@ -74,7 +75,7 @@
 
       .buttons {
         bottom: 0;
-        margin: 15% 0% 0% 0%;
+        margin: 16% 0% 0% 0%;
         padding: 0px;
         width: 100%;
       }