chore: Added hover styles (#1905)

app/javascript/dashboard/components/layout/SidebarItem.vue

@@ -127,6 +127,7 @@ export default {
 
 .wrap {
   display: flex;
+  align-items: center;
 }
 
 .label-color--display {
@@ -137,27 +138,11 @@ export default {
   width: $space-normal;
 }
 
-.inbox-icon.ion-social-facebook {
+.inbox-icon {
-  color: var(--color-facebook-brand);
+  position: relative;
-}
+  top: -1px;
-
+  &.ion-ios-email {
-.inbox-icon.ion-social-whatsapp-outline {
+    font-size: var(--font-size-medium);
-  color: var(--color-whatsapp-brand);
+  }
-}
-
-.inbox-icon.ion-social-twitter {
-  color: var(--color-twitter-brand);
-}
-
-.inbox-icon.ion-android-textsms {
-  color: var(--color-sms-twilio);
-}
-
-.inbox-icon.ion-earth {
-  color: var(--color-woot);
-}
-
-.inbox-icon.ion-cloud {
-  color: var(--color-cloud-generic);
 }
 </style>

app/javascript/dashboard/helper/inbox.js

@@ -20,7 +20,7 @@ export const getInboxClassByType = (type, phoneNumber) => {
       return 'ion-cloud';
 
     case INBOX_TYPES.EMAIL:
-      return 'ion-email';
+      return 'ion-ios-email';
 
     default:
       return '';

app/javascript/dashboard/helper/specs/inbox.spec.js

@@ -29,7 +29,7 @@ describe('#Inbox Helpers', () => {
       expect(getInboxClassByType('Channel::Api')).toEqual('ion-cloud');
     });
     it('should return correct class for Email', () => {
-      expect(getInboxClassByType('Channel::Email')).toEqual('ion-email');
+      expect(getInboxClassByType('Channel::Email')).toEqual('ion-ios-email');
     });
   });
 });