convert user-info component

bigbluebutton-html5/imports/ui/components/user-info/component.jsx

@@ -6,7 +6,7 @@ import Modal from '/imports/ui/components/modal/simple/component';
 
 import Service from './service';
 
-import { styles } from './styles';
+import Styled from './styles';
 
 const propTypes = {
   intl: PropTypes.object.isRequired,
@@ -29,26 +29,26 @@ class UserInfoComponent extends Component {
         const key = Object.keys(info)[0];
         return (
           <tr key={key}>
-            <td className={styles.keyCell}>{key}</td>
-            <td className={styles.valueCell}>{info[key]}</td>
+            <Styled.KeyCell>{key}</Styled.KeyCell>
+            <Styled.ValueCell>{info[key]}</Styled.ValueCell>
           </tr>
         );
       });
       if (array.length > 1) {
         infoList.unshift(
           <tr key={infoList.length}>
-            <th className={styles.titleCell}>{`User ${index + 1}`}</th>
+            <th>{`User ${index + 1}`}</th>
           </tr>,
         );
       }
       return infoList;
     });
     return (
-      <table className={styles.userInfoTable}>
+      <Styled.UserInfoTable>
         <tbody>
           {userInfoList}
         </tbody>
-      </table>
+      </Styled.UserInfoTable>
     );
   }
 

bigbluebutton-html5/imports/ui/components/user-info/styles.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { mdPaddingX, borderSize } from '/imports/ui/stylesheets/styled-components/general';
+import { colorGrayLighter } from '/imports/ui/stylesheets/styled-components/palette';
+
+const KeyCell = styled.td`
+  padding: ${mdPaddingX};
+  border: ${borderSize} solid ${colorGrayLighter};
+`;
+
+const ValueCell = styled.td`
+  padding: ${mdPaddingX};
+  border: ${borderSize} solid ${colorGrayLighter};
+`;
+
+const UserInfoTable = styled.table`
+  border: ${borderSize} solid ${colorGrayLighter};
+  border-collapse: collapse;
+  border: none;
+
+  width: 90%;
+  margin: auto;
+
+  table-layout: fixed;
+
+  & > td {
+    word-wrap: break-word;
+  }`;
+
+export default {
+  KeyCell,
+  ValueCell,
+  UserInfoTable,
+};

bigbluebutton-html5/imports/ui/components/user-info/styles.scss

@@ -1,21 +0,0 @@
-.keyCell, .valueCell, .userInfoTable {
-  border: var(--border-size) solid var(--color-gray-lighter);
-}
-
-.userInfoTable {
-  border-collapse: collapse;
-  border: none;
-
-  width: 90%;
-  margin: auto;
-
-  table-layout: fixed;
-
-  td {
-    word-wrap: break-word;
-  }
-}
-
-.keyCell, .valueCell {
-  padding: var(--md-padding-x);
-}