Use className instead of style

Author: kadiryazici

src/lib/ui/device/OnlineStatus.tsx

@@ -25,7 +25,7 @@ export function OnlineStatus(props: OnlineStatusProps): JSX.Element {
 function AccountOfflineContent(): JSX.Element {
   return (
     <>
-      <OnlineStatusAccountOfflineIcon style={{ fontSize: '24px' }} />
+      <OnlineStatusAccountOfflineIcon className='seam-font-24' />
       <span className='seam-text-danger'>{t.accountOffline}</span>
     </>
   )
@@ -36,15 +36,15 @@ function AccountOnlineContent(props: { isOnline: boolean }): JSX.Element {
   if (isOnline) {
     return (
       <>
-        <OnlineStatusOnlineIcon style={{ fontSize: '24px' }} />
+        <OnlineStatusOnlineIcon className='seam-font-24' />
         <span className='seam-status-text'>{t.online}</span>
       </>
     )
   }
 
   return (
     <>
-      <OnlineStatusDeviceOfflineIcon style={{ fontSize: '24px' }} />
+      <OnlineStatusDeviceOfflineIcon className='seam-font-24' />
       <span className='seam-text-danger'>{t.deviceOffline}</span>
     </>
   )

src/styles/_typography.scss

@@ -17,6 +17,7 @@
 }
 
 @mixin headers {
+
   h1,
   h2,
   h3,
@@ -55,11 +56,18 @@
   }
 }
 
+@mixin font-size {
+  .seam-font-24 {
+    font-size: 24px;
+  }
+}
+
 @mixin all {
   @include headers;
   @include caption;
   @include danger-text;
   @include font-family;
   @include defaults;
   @include truncated-text;
-}
+  @include font-size;
+}