Add pattern bg in the livestreaming model

custom/fitness-demo/components/Call/InviteOthers.js

@@ -45,11 +45,9 @@ export const InviteOthers = () => {
               display: flex;
               height: 100%;
               width: 100%;
-              position: relative;
             }
             
             .invite-others {
-              width: 50%;
               margin: auto;
               text-align: center;
             }
@@ -65,6 +63,15 @@ export const InviteOthers = () => {
               bottom: 0;
               width: 186px;
             }
+            
+            :global(.card) {
+              border: 0!important;
+              width: 40vw;
+            }
+            
+            :global(.card input) {
+              width: 15vw;
+            }
           `}</style>
         </div>
       </VideoContainer>

custom/fitness-demo/components/Modals/LiveStreamingModal.js

@@ -51,7 +51,7 @@ export const LiveStreamingModal = () => {
 
   return (
     <Modal
-      title="Live stream"
+      title="Live streaming"
       isOpen={currentModals[LIVE_STREAMING_MODAL]}
       onClose={() => closeModal(LIVE_STREAMING_MODAL)}
       actions={[
@@ -77,6 +77,8 @@ export const LiveStreamingModal = () => {
         ),
       ]}
     >
+      <img src="/assets/pattern-ls.svg" className="live-streaming" alt="live streaming" />
+      <p>Please note: live streaming requires <b>Scale Plan</b> or above</p>
       {streamError && (
         <Well variant="error">
           Unable to start stream. Error message: {streamError}
@@ -141,6 +143,13 @@ export const LiveStreamingModal = () => {
           />
         </Field>
       </CardBody>
+      <style jsx>{`
+        .live-streaming {
+          display: flex;
+          width: 100%;
+          justify-content: center;
+        }
+      `}</style>
     </Modal>
   );
 };

custom/fitness-demo/public/assets/pattern-ls.svg

@@ -0,0 +1,14 @@
+<svg width="476" height="124" viewBox="0 0 476 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="476" height="124" fill="url(#paint0_linear_605_2751)"/>
+<path d="M238.5 68.5C241.814 68.5 244.5 65.8137 244.5 62.5C244.5 59.1863 241.814 56.5 238.5 56.5C235.186 56.5 232.5 59.1863 232.5 62.5C232.5 65.8137 235.186 68.5 238.5 68.5Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M259.923 41.499C265.228 46.91 268.5 54.323 268.5 62.5C268.5 70.676 265.229 78.089 259.924 83.5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M251.502 50.052C254.598 53.285 256.5 57.67 256.5 62.5C256.5 67.331 254.597 71.717 251.5 74.95" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M217.077 41.499C211.772 46.91 208.5 54.323 208.5 62.5C208.5 70.676 211.771 78.089 217.076 83.5" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M225.498 50.052C222.402 53.285 220.5 57.67 220.5 62.5C220.5 67.331 222.403 71.717 225.5 74.95" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_605_2751" x1="478.164" y1="-0.873246" x2="131.851" y2="286.259" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1AFAF"/>
+<stop offset="1" stop-color="#0094FF"/>
+</linearGradient>
+</defs>
+</svg>