fix(meetings): add-styles-to-refresh-button

Author: ShreyasSharma28

src/components/WebexInMeeting/WebexInMeeting.jsx

@@ -77,6 +77,7 @@ export default function WebexInMeeting({
                 meetingID={meetingID}
                 className={sc('authentication-guest')}
                 switchToHostModal={() => setAuthModal('host')}
+                style={style}
               />
             )
             : <WebexMeetingHostAuthentication meetingID={meetingID} className={sc('authentication-host')} />

src/components/WebexMeeting/WebexMeeting.jsx

@@ -144,6 +144,7 @@ export default function WebexMeeting({
                     meetingID={ID}
                     className={sc('authentication-guest')}
                     switchToHostModal={() => setAuthModal('host')}
+                    style={style}
                   />
                 )
                 : <WebexMeetingHostAuthentication meetingID={ID} className={sc('authentication-host')} />

src/components/WebexMeetingGuestAuthentication/WebexMeetingGuestAuthentication.jsx

@@ -145,9 +145,9 @@ export default function WebexMeetingGuestAuthentication({
           tabIndex={102}
         />
         {requiredCaptcha && requiredCaptcha.verificationImageURL && (
-          <div className={sc('captcha-image')} aria-label={HINTS.captchaImage}>
+          <div aria-label={HINTS.captchaImage}>
             <div className={sc('captcha-buttons')}>
-              <img src={requiredCaptcha.verificationImageURL} alt="captcha" />
+              <img src={requiredCaptcha.verificationImageURL} className={sc('captcha-image')} alt="captcha" />
               <Button
                 type="primary"
                 className={sc('captcha-refresh-button')}
@@ -156,7 +156,7 @@ export default function WebexMeetingGuestAuthentication({
                 ariaLabel={HINTS.captchaRefresh}
                 tabIndex={103}
               >
-                <Icon name="refresh" />
+                <Icon name="refresh" style={style} />
               </Button>
             </div>
             <CaptchaInput

src/components/WebexMeetingGuestAuthentication/WebexMeetingGuestAuthentication.scss

@@ -56,6 +56,12 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-meeting-guest-authentication;
     .#{$C}__captcha-buttons {
       display: flex;
       flex-direction: row;
+      align-items: center;
+    }
+
+    .#{$C}__captcha-image {
+      margin-left: 0.8rem;
+      padding-right: 0.5rem;
     }
 
     .#{$C}__start-button-spinner {

src/components/icons/RefreshIcon.jsx

@@ -12,10 +12,12 @@ import PropTypes from 'prop-types';
  *
  */
 export default function RefreshIcon({size, className, style}) {
+  const {fill} = style || {};
+
   return (
-    <svg width={size || 24} height={size || 24} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={`wxc-icon ${className}`} style={style}>
+    <svg width={size || 24} height={size || 24} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={`wxc-icon ${className}`} style={{fill}}>
       <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.9 9.9h-2.1a6 6 0 1 1-1.45-6.45L13 11h7V4l-2.35 2.35z" fill="#FFFFFF" />
+      <path d="M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.9 9.9h-2.1a6 6 0 1 1-1.45-6.45L13 11h7V4l-2.35 2.35z" />
     </svg>
   );
 }