refactor: Icon component rotate info

bigbluebutton-html5/imports/ui/components/common/button/button-emoji/ButtonEmoji.jsx

@@ -24,6 +24,8 @@ const propTypes = {
   hideLabel: PropTypes.bool,
 
   className: PropTypes.string,
+
+  rotate: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -35,6 +37,7 @@ const defaultProps = {
   hideLabel: false,
   onClick: null,
   className: '',
+  rotate: false,
 };
 
 const ButtonEmoji = (props) => {
@@ -42,6 +45,7 @@ const ButtonEmoji = (props) => {
     hideLabel,
     className,
     hidden,
+    rotate,
     ...newProps
   } = props;
 
@@ -52,7 +56,7 @@ const ButtonEmoji = (props) => {
     onClick,
   } = newProps;
 
-  const IconComponent = (<Styled.EmojiButtonIcon iconName={emoji} />);
+  const IconComponent = (<Styled.EmojiButtonIcon iconName={emoji} rotate={rotate} />);
 
   return (
     <span>

bigbluebutton-html5/imports/ui/components/common/button/button-emoji/styles.js

@@ -65,15 +65,6 @@ const EmojiButton = styled.button`
     margin-top: 40%;
     color: ${btnDefaultColor};
   }
-
-  ${({ rotate }) => rotate && `
-    span {
-      i {
-        transform: rotate(180deg);
-        margin-top: 20%;
-      }
-    }
-  `}
 `;
 
 const EmojiButtonSpace = styled.div`

bigbluebutton-html5/imports/ui/components/common/icon/component.jsx

@@ -2,26 +2,31 @@ import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import _ from 'lodash';
+import Styled from './styles';
 
 const propTypes = {
   iconName: PropTypes.string.isRequired,
   prependIconName: PropTypes.string,
+  rotate: PropTypes.bool,
 };
 
 const defaultProps = {
   prependIconName: 'icon-bbb-',
+  rotate: false,
 };
 
 const Icon = ({
   className,
   prependIconName,
   iconName,
+  rotate,
   ...props
 }) => (
-  <i
+  <Styled.Icon
     className={cx(className, [prependIconName, iconName].join(''))}
     // ToastContainer from react-toastify passes a useless closeToast prop here
-    {..._.omit(props, ['closeToast', 'animations', 'rotate'])}
+    {..._.omit(props, ['closeToast', 'animations'])}
+    $rotate={rotate}
   />
 );
 

bigbluebutton-html5/imports/ui/components/common/icon/styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const Icon = styled.i`
+  ${({ $rotate }) => $rotate && `
+    transform: rotate(180deg);
+    margin-top: 20%;
+  `}
+`;
+
+export default {
+  Icon,
+};