From f6f47bf25a8247203cea01e46f1075ae8a602876 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ram=C3=B3n=20Souza?= <contato@ramonsouza.com>
Date: Tue, 2 Nov 2021 16:35:54 +0000
Subject: [PATCH] convert whiteboard annotations component

---
 .../whiteboard/annotations/poll/component.jsx  | 17 +++++++----------
 .../whiteboard/annotations/poll/styles.js      | 18 ++++++++++++++++++
 .../whiteboard/annotations/poll/styles.scss    |  8 --------
 .../stylesheets/styled-components/palette.js   |  2 ++
 4 files changed, 27 insertions(+), 18 deletions(-)
 create mode 100644 bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/styles.js
 delete mode 100644 bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/styles.scss

diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/component.jsx
index 98d6bba592..8cc425c854 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/component.jsx
+++ b/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>
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/styles.js b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/styles.js
new file mode 100644
index 0000000000..a7fb6e222b
--- /dev/null
+++ b/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,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/styles.scss b/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/styles.scss
deleted file mode 100644
index 8d79e03e1e..0000000000
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/styles.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-:root {
-    --poll-annotation-gray: #333333;
-}
-
-.outline {
-    stroke: var(--poll-annotation-gray);
-    stroke-width: .5;
-}
\ No newline at end of file
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js b/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
index 920e7ac070..017947c9b5 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/styled-components/palette.js
+++ b/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,
 };