convert whiteboard annotations component

bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/component.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import PollService from '/imports/ui/components/poll/service';
 import caseInsensitiveReducer from '/imports/utils/caseInsensitiveReducer';
 import { injectIntl, defineMessages } from 'react-intl';
-import styles from './styles';
+import Styled from './styles';
 import {
   getSwapLayout,
   shouldEnableSwapLayout,
@@ -475,7 +475,7 @@ class PollDrawComponent extends Component {
           strokeWidth={thickness}
         />
         {extendedTextArray.map((line) => (
-          <text
+          <Styled.OutlineText
             x={line.keyColumn.xLeft}
             y={line.keyColumn.yLeft}
             dy={maxLineHeight / 2}
@@ -484,10 +484,9 @@ class PollDrawComponent extends Component {
             fontFamily="Arial"
             fontSize={calcFontSize}
             textAnchor={isRTL ? 'end' : 'start'}
-            className={styles.outline}
           >
             {line.keyColumn.keyString}
-          </text>
+          </Styled.OutlineText>
         ))}
         {extendedTextArray.map((line) => (
           <rect
@@ -510,15 +509,14 @@ class PollDrawComponent extends Component {
           textAnchor={isRTL ? 'start' : 'end'}
         >
           {extendedTextArray.map((line) => (
-            <tspan
+            <Styled.OutlineTSpan
               x={line.percentColumn.xRight}
               y={line.percentColumn.yRight}
               dy={maxLineHeight / 2}
               key={`${line.key}_percent`}
-              className={styles.outline}
             >
               {line.percentColumn.percentString}
-            </tspan>
+            </Styled.OutlineTSpan>
           ))}
         </text>
         <text
@@ -530,16 +528,15 @@ class PollDrawComponent extends Component {
           textAnchor={isRTL ? 'end' : 'start'}
         >
           {extendedTextArray.map((line) => (
-            <tspan
+            <Styled.OutlineTSpan
               x={line.barColumn.xNumVotes + (line.barColumn.barWidth / 2)}
               y={line.barColumn.yNumVotes + (line.barColumn.barHeight / 2)}
               dy={maxLineHeight / 2}
               key={`${line.key}_numVotes`}
               fill={line.barColumn.color}
-              className={styles.outline}
             >
               {line.barColumn.numVotes}
-            </tspan>
+            </Styled.OutlineTSpan>
           ))}
         </text>
       </g>

bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/styles.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+import { pollAnnotationGray } from '/imports/ui/stylesheets/styled-components/palette';
+
+const OutlineText = styled.text`
+  stroke: ${pollAnnotationGray};
+  stroke-width: .5;
+`;
+
+const OutlineTSpan = styled.tspan`
+  stroke: ${pollAnnotationGray};
+  stroke-width: .5;
+`;
+
+export default {
+  OutlineText,
+  OutlineTSpan,
+};

bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/styles.scss

@@ -1,8 +0,0 @@
-:root {
-    --poll-annotation-gray: #333333;
-}
-
-.outline {
-    stroke: var(--poll-annotation-gray);
-    stroke-width: .5;
-}

bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js

@@ -41,6 +41,7 @@ const systemMessageBorderColor = '#C5CDD4';
 const systemMessageFontColor = colorGrayDark;
 const colorHeading = colorGrayDark;
 const palettePlaceholderText = '#787675';
+const pollAnnotationGray = '#333333';
 
 export {
   colorWhite,
@@ -77,4 +78,5 @@ export {
   systemMessageFontColor,
   colorHeading,
   palettePlaceholderText,
+  pollAnnotationGray,
 };