pxt-core 8.2.9 → 8.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxt-core",
-  "version": "8.2.9",
+  "version": "8.2.10",
   "description": "Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors",
   "keywords": [
     "TypeScript",

package/react-common/components/share/Share.tsx

@@ -1,6 +1,7 @@
 /// <reference path="../types.d.ts" />
 
 import * as React from "react";
+import { SimRecorder } from "./ThumbnailRecorder";
 import { ShareInfo } from "./ShareInfo";
 
 export interface ShareData {
@@ -18,34 +19,20 @@ export interface ShareData {
 export interface ShareProps {
     projectName: string;
     screenshotUri?: string;
-    showShareDropdown?: boolean;
+    isLoggedIn?: boolean;
 
-    screenshotAsync: () => Promise<string>;
-    gifRecordAsync: () => Promise<void>;
-    gifRenderAsync: () => Promise<string | void>;
-    gifAddFrame: (dataUri: ImageData, delay?: number) => boolean;
+    simRecorder: SimRecorder;
     publishAsync: (name: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
-    registerSimulatorMsgHandler?: (handler: (msg: any) => void) => void;
-    unregisterSimulatorMsgHandler?: () => void;
 }
 
 export const Share = (props: ShareProps) => {
-    const { projectName, screenshotUri, showShareDropdown, screenshotAsync, gifRecordAsync, gifRenderAsync,
-        gifAddFrame, publishAsync, registerSimulatorMsgHandler, unregisterSimulatorMsgHandler } = props;
+    const { projectName, screenshotUri, isLoggedIn, simRecorder, publishAsync} = props;
 
-return <div className="project-share">
-        {(!!screenshotAsync || !!gifRecordAsync) && <div className="project-share-simulator">
-            <div id="shareLoanedSimulator" />
-        </div>}
+    return <div className="project-share">
         <ShareInfo projectName={projectName}
-            showShareDropdown={showShareDropdown}
+            isLoggedIn={isLoggedIn}
             screenshotUri={screenshotUri}
-            screenshotAsync={screenshotAsync}
-            gifRecordAsync={gifRecordAsync}
-            gifRenderAsync={gifRenderAsync}
-            gifAddFrame={gifAddFrame}
-            publishAsync={publishAsync}
-            registerSimulatorMsgHandler={registerSimulatorMsgHandler}
-            unregisterSimulatorMsgHandler={unregisterSimulatorMsgHandler} />
+            simRecorder={simRecorder}
+            publishAsync={publishAsync} />
     </div>
 }

package/react-common/components/share/ShareInfo.tsx

@@ -2,32 +2,26 @@ import * as React from "react";
 import { Button } from "../controls/Button";
 import { EditorToggle } from "../controls/EditorToggle";
 import { Input } from "../controls/Input";
-import { MenuDropdown } from "../controls/MenuDropdown";
 import { Textarea } from "../controls/Textarea";
 import { Modal } from "../controls/Modal";
 
 import { ShareData } from "./Share";
-import { GifInfo } from "./GifInfo";
+import { ThumbnailRecorder } from "./ThumbnailRecorder";
 import { SocialButton } from "./SocialButton";
+import { Checkbox } from "../controls/Checkbox";
+import { SimRecorder } from "./ThumbnailRecorder";
 
 export interface ShareInfoProps {
     projectName: string;
     description?: string;
     screenshotUri?: string;
-    showShareDropdown?: boolean;
-
-    screenshotAsync?: () => Promise<string>;
-    gifRecordAsync?: () => Promise<void>;
-    gifRenderAsync?: () => Promise<string | void>;
-    gifAddFrame?: (dataUri: ImageData, delay?: number) => boolean;
+    isLoggedIn?: boolean;
+    simRecorder: SimRecorder;
     publishAsync: (name: string, screenshotUri?: string, forceAnonymous?: boolean) => Promise<ShareData>;
-    registerSimulatorMsgHandler?: (handler: (msg: any) => void) => void;
-    unregisterSimulatorMsgHandler?: () => void;
 }
 
 export const ShareInfo = (props: ShareInfoProps) => {
-    const { projectName, description, screenshotUri, showShareDropdown, screenshotAsync, gifRecordAsync,
-        gifRenderAsync, gifAddFrame, publishAsync, registerSimulatorMsgHandler, unregisterSimulatorMsgHandler } = props;
+    const { projectName, description, screenshotUri, isLoggedIn, simRecorder, publishAsync } = props;
     const [ name, setName ] = React.useState(projectName);
     const [ thumbnailUri, setThumbnailUri ] = React.useState(screenshotUri);
     const [ shareState, setShareState ] = React.useState<"share" | "gifrecord" | "publish" | "publishing">("share");
@@ -35,8 +29,9 @@ export const ShareInfo = (props: ShareInfoProps) => {
     const [ embedState, setEmbedState ] = React.useState<"none" | "code" | "editor" | "simulator">("none");
     const [ showQRCode, setShowQRCode ] = React.useState(false);
     const [ copySuccessful, setCopySuccessful ] = React.useState(false);
+    const [ isAnonymous, setIsAnonymous ] = React.useState(!isLoggedIn);
 
-    const showSimulator = !!screenshotAsync || !!gifRecordAsync;
+    const showSimulator = !!simRecorder;
     const showDescription = shareState !== "publish";
     let qrCodeButtonRef: HTMLButtonElement;
     let inputRef: HTMLInputElement;
@@ -54,9 +49,9 @@ export const ShareInfo = (props: ShareInfoProps) => {
         exitGifRecord();
     }
 
-    const handlePublishClick = async (forceAnonymous?: boolean) => {
+    const handlePublishClick = async () => {
         setShareState("publishing");
-        let publishedShareData = await publishAsync(name, thumbnailUri, forceAnonymous);
+        let publishedShareData = await publishAsync(name, thumbnailUri, isAnonymous);
         setShareData(publishedShareData);
         if (!publishedShareData?.error) setShareState("publish");
         else setShareState("share")
@@ -132,12 +127,6 @@ export const ShareInfo = (props: ShareInfoProps) => {
         onClick: () => setEmbedState("simulator")
     }];
 
-    const dropdownOptions = [{
-        title: lf("Create snapshot"),
-        label: lf("Create snapshot"),
-        onClick: () => handlePublishClick(true)
-    }];
-
     const handleQRCodeButtonRef = (ref: HTMLButtonElement) => {
         if (ref) qrCodeButtonRef = ref;
     }
@@ -153,124 +142,139 @@ export const ShareInfo = (props: ShareInfoProps) => {
 
     const prePublish = shareState === "share" || shareState === "publishing";
 
+    const inputTitle = showSimulator && prePublish ? lf("Project Title") : lf("Project Link")
+
     return <>
         <div className="project-share-info">
-            {(prePublish|| shareState === "publish") && <>
-                {showSimulator && <div className="project-share-title">
-                    <h2>{lf("About your project")}</h2>
-                    {showShareDropdown && prePublish && <MenuDropdown id="project-share-dropdown"
-                        icon="fas fa-ellipsis-h"
-                        title={lf("More share options")}
-                        items={dropdownOptions}
-                        />}
-                </div>}
-                {showDescription && <>
-                    <Input label={lf("Project Name")}
-                        initialValue={name}
-                        placeholder={lf("Name your project")}
-                        onChange={setName} />
-                    <Textarea label={lf("Description")}
-                        initialValue={description}
-                        placeholder={lf("Tell others about your project")}
-                        rows={5} />
-                    </>
-                }
-                {prePublish && <>
-                    {showSimulator && <div className="project-share-thumbnail">
-                        {thumbnailUri
-                            ? <img src={thumbnailUri} />
-                            : <div className="project-thumbnail-placeholder" />
-                        }
-                        <Button title={lf("Update project thumbnail")}
+            {showSimulator && shareState !== "gifrecord" &&
+                <div className="project-share-thumbnail">
+                    {thumbnailUri
+                        ? <img src={thumbnailUri} />
+                        : <div className="project-thumbnail-placeholder" />
+                    }
+                    {shareState !== "publish" &&
+                        <Button
+                            className="link-button"
+                            title={lf("Update project thumbnail")}
                             label={lf("Update project thumbnail")}
                             onClick={() => setShareState("gifrecord")} />
-                    </div>}
-                    <div>{lf("You need to publish your project to share it or embed it in other web pages. You acknowledge having consent to publish this project.")}</div>
-                    {shareData?.error && <div className="project-share-error">
-                        {(shareData.error.statusCode === 413
-                            && pxt.appTarget?.cloud?.cloudProviders?.github)
-                            ? lf("Oops! Your project is too big. You can create a GitHub repository to share it.")
-                            : lf("Oops! There was an error. Please ensure you are connected to the Internet and try again.")}
-                    </div>}
-                    {shareState === "share" ?
-                        <Button className="primary share-publish-button"
-                            title={lf("Publish to share")}
-                            label={lf("Publish to share")}
-                            onClick={handlePublishClick} /> :
-                        <Button className="primary share-publish-button"
-                            title={lf("Publishing...")}
-                            label={ <div className="common-spinner" />}
-                            onClick={() => {}} />
                     }
-                </>}
-
-                {shareState === "publish" &&
-                    <div className="project-share-data">
-                        <div className="project-share-text">
-                            {lf("Your project is ready! Use the address below to share your projects.")}
-                        </div>
-                        <div className="common-input-attached-button">
-                            <Input
-                                handleInputRef={handleInputRef}
-                                initialValue={shareData.url}
-                                readOnly={true}
-                                onChange={setName} />
-                            <Button className={copySuccessful ? "green" : "primary"}
-                                title={lf("Copy link")}
-                                label={copySuccessful ? lf("Copied!") : lf("Copy link")}
-                                leftIcon="fas fa-link"
-                                onClick={handleCopyClick}
-                                onBlur={handleCopyBlur} />
-                        </div>
-                        <div className="project-share-actions">
-                            <Button className="circle-button gray embed mobile-portrait-hidden"
-                                title={lf("Show embed code")}
-                                leftIcon="fas fa-code"
-                                onClick={handleEmbedClick} />
-                            <SocialButton className="circle-button facebook"
-                                url={shareData?.url}
-                                type='facebook'
-                                heading={lf("Share on Facebook")} />
-                            <SocialButton className="circle-button twitter"
-                                url={shareData?.url}
-                                type='twitter'
-                                heading={lf("Share on Twitter")} />
-                            {navigator.share && <Button className="circle-button device-share"
-                                title={lf("Show device share options")}
-                                ariaLabel={lf("Show device share options")}
-                                leftIcon={"icon share"}
-                                onClick={handleDeviceShareClick}
+                </div>
+            }
+            <div className="project-share-content">
+                {(prePublish || shareState === "publish") && <>
+                    <div className="project-share-title">
+                        <h2>{inputTitle}</h2>
+                    </div>
+                    {showDescription && <>
+                        <Input
+                            className="name-input"
+                            initialValue={name}
+                            placeholder={lf("Name your project")}
+                            onChange={setName} />
+                        {isLoggedIn && <Checkbox
+                            id="persistent-share-checkbox"
+                            label={lf("Allow people to see future changes to my project")}
+                            isChecked={!isAnonymous}
+                            onChange={val => setIsAnonymous(!val)}
                             />}
-                            <Button
-                                className="menu-button project-qrcode"
-                                buttonRef={handleQRCodeButtonRef}
-                                title={lf("Show QR Code")}
-                                label={<img className="qrcode-image" src={shareData?.qr} />}
-                                onClick={handleQRCodeClick}
-                            />
+                        </>
+                    }
+                    {prePublish && <>
+                        {shareData?.error && <div className="project-share-error">
+                            {(shareData.error.statusCode === 413
+                                && pxt.appTarget?.cloud?.cloudProviders?.github)
+                                ? lf("Oops! Your project is too big. You can create a GitHub repository to share it.")
+                                : lf("Oops! There was an error. Please ensure you are connected to the Internet and try again.")}
+                        </div>}
+                        <div>
+                            {shareState === "share" &&
+                                <Button className="primary share-publish-button"
+                                    title={lf("Continue")}
+                                    label={lf("Continue")}
+                                    onClick={handlePublishClick} />
+                            }
+                            { shareState === "publishing" &&
+                                <Button className="primary share-publish-button"
+                                    title={lf("Publishing...")}
+                                    label={ <div className="common-spinner" />}
+                                    onClick={() => {}} />
+                            }
                         </div>
-                    </div>
-                }
-                {embedState !== "none" && <div className="project-embed">
-                    <EditorToggle id="project-embed-toggle"
-                        className="slim tablet-compact"
-                        items={embedOptions}
-                        selected={embedOptions.findIndex(i => i.name === embedState)} />
-                    <Textarea readOnly={true}
-                        rows={5}
-                        initialValue={shareData?.embed[embedState]} />
-                </div>}
-            </>}
-            {shareState === "gifrecord" && <GifInfo
-                initialUri={thumbnailUri}
-                onApply={applyGifChange}
-                onCancel={exitGifRecord}
-                screenshotAsync={screenshotAsync}
-                gifRecordAsync={gifRecordAsync}
-                gifRenderAsync={gifRenderAsync}
-                gifAddFrame={gifAddFrame}
-                registerSimulatorMsgHandler={registerSimulatorMsgHandler}
-                unregisterSimulatorMsgHandler={unregisterSimulatorMsgHandler} />}
+                    </>}
+
+                    {shareState === "publish" &&
+                        <div className="project-share-data">
+                            <div className="common-input-attached-button">
+                                <Input
+                                    handleInputRef={handleInputRef}
+                                    initialValue={shareData.url}
+                                    readOnly={true}
+                                    onChange={setName} />
+                                <Button className={copySuccessful ? "green" : "primary"}
+                                    title={lf("Copy link")}
+                                    label={copySuccessful ? lf("Copied!") : lf("Copy")}
+                                    leftIcon="fas fa-link"
+                                    onClick={handleCopyClick}
+                                    onBlur={handleCopyBlur} />
+                            </div>
+                            <div className="project-share-actions">
+                                <Button className="square-button gray embed mobile-portrait-hidden"
+                                    title={lf("Show embed code")}
+                                    leftIcon="fas fa-code"
+                                    onClick={handleEmbedClick} />
+                                <SocialButton className="square-button facebook"
+                                    url={shareData?.url}
+                                    type='facebook'
+                                    heading={lf("Share on Facebook")} />
+                                <SocialButton className="square-button twitter"
+                                    url={shareData?.url}
+                                    type='twitter'
+                                    heading={lf("Share on Twitter")} />
+                                <SocialButton className="square-button google-classroom"
+                                    url={shareData?.url}
+                                    type='google-classroom'
+                                    heading={lf("Share on Google Classroom")} />
+                                <SocialButton className="square-button microsoft-teams"
+                                    url={shareData?.url}
+                                    type='microsoft-teams'
+                                    heading={lf("Share on Microsoft Teams")} />
+                                <SocialButton className="square-button whatsapp"
+                                    url={shareData?.url}
+                                    type='whatsapp'
+                                    heading={lf("Share on WhatsApp")} />
+                                {navigator.share && <Button className="square-button device-share"
+                                    title={lf("Show device share options")}
+                                    ariaLabel={lf("Show device share options")}
+                                    leftIcon={"icon share"}
+                                    onClick={handleDeviceShareClick}
+                                />}
+                                <Button
+                                    className="menu-button project-qrcode"
+                                    buttonRef={handleQRCodeButtonRef}
+                                    title={lf("Show QR Code")}
+                                    label={<img className="qrcode-image" src={shareData?.qr} />}
+                                    onClick={handleQRCodeClick}
+                                />
+                            </div>
+                        </div>
+                    }
+                    {embedState !== "none" && <div className="project-embed">
+                        <EditorToggle id="project-embed-toggle"
+                            className="slim tablet-compact"
+                            items={embedOptions}
+                            selected={embedOptions.findIndex(i => i.name === embedState)} />
+                        <Textarea readOnly={true}
+                            rows={5}
+                            initialValue={shareData?.embed[embedState]} />
+                    </div>}
+                </>}
+                {shareState === "gifrecord" && <ThumbnailRecorder
+                    initialUri={thumbnailUri}
+                    onApply={applyGifChange}
+                    onCancel={exitGifRecord}
+                    simRecorder={simRecorder}/>}
+            </div>
 
             {showQRCode &&
                 <Modal title={lf("QR Code")} onClose={handleQRCodeModalClose}>

package/react-common/components/share/SocialButton.tsx

@@ -1,16 +1,19 @@
 import * as React from "react";
 import { Button } from "../controls/Button";
+import { classList } from "../util";
 
 interface SocialButtonProps {
     className?: string;
     url?: string;
-    type?: "facebook" | "twitter" | "discourse";
+    type?: "facebook" | "twitter" | "discourse" | "google-classroom" | "microsoft-teams" | "whatsapp";
     heading?: string;
 }
 
 export const SocialButton = (props: SocialButtonProps) => {
     const { className, url, type, heading } = props;
 
+    const classes = classList(className, "social-button", "type")
+
     const handleClick = () => {
         const socialOptions = pxt.appTarget.appTheme.socialOptions;
         let socialUrl = '';
@@ -41,13 +44,40 @@ export const SocialButton = (props: SocialButtonProps) => {
                 socialUrl += `&category=${encodeURIComponent(socialOptions.discourseCategory)}`;
                 break;
             }
+            case "google-classroom":
+                socialUrl = `https://classroom.google.com/share?url=${encodeURIComponent(url)}`;
+                break;
+            case "microsoft-teams":
+                socialUrl = `https://teams.microsoft.com/share?href=${encodeURIComponent(url)}`;
+                break;
+            case "whatsapp":
+                socialUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(url)}`;
+                break;
         }
         pxt.BrowserUtils.popupWindow(socialUrl, heading, 600, 600);
     }
 
-    return <Button className={className}
-        ariaLabel={type}
-        title={heading}
-        leftIcon={`icon ${type}`}
-        onClick={handleClick} />
+    switch (type) {
+        // Icon buttons
+        case "facebook":
+        case "twitter":
+        case "discourse":
+        case "whatsapp":
+            return <Button className={classes}
+                ariaLabel={type}
+                title={heading}
+                leftIcon={`icon ${type}`}
+                onClick={handleClick} />
+
+        // Image buttons
+        case "google-classroom":
+        case "microsoft-teams":
+            return <Button className={classes}
+                ariaLabel={type}
+                title={heading}
+                label={<img src={`/static/logo/social-buttons/${type}.png`} alt={heading || pxt.U.rlf(type)} />}
+                onClick={handleClick} />
+    }
+
+
 }

package/react-common/components/share/ThumbnailRecorder.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { Button } from "../controls/Button";
+
+export interface ThumbnailRecorderProps {
+    initialUri?: string;
+
+    onApply: (uri: string) => void;
+    onCancel: () => void;
+
+    simRecorder: SimRecorder;
+}
+
+export interface SimRecorderProps {
+    onSimRecorderInit: (ref: SimRecorderRef) => void;
+}
+export type SimRecorder = (props: SimRecorderProps) => JSX.Element
+export type SimRecorderState = "default" | "recording" | "rendering"
+export interface SimRecorderRef {
+    state: SimRecorderState;
+    startRecordingAsync: () => Promise<void>;
+    stopRecordingAsync: () => Promise<string>;
+    screenshotAsync: () => Promise<string>;
+    addStateChangeListener: (handler: (newState: SimRecorderState) => void) => void;
+    addThumbnailListener: (handler: (uri: string, type: "gif" | "png") => void) => void;
+    addErrorListener: (handler: (message: string) => void) => void;
+    removeStateChangeListener: (handler: (newState: SimRecorderState) => void) => void;
+    removeThumbnailListener: (handler: (uri: string, type: "gif" | "png") => void) => void;
+    removeErrorListener: (handler: (message: string) => void) => void;
+}
+
+
+export const ThumbnailRecorder = (props: ThumbnailRecorderProps) => {
+    const { initialUri, onApply, onCancel, simRecorder } = props;
+    const [ uri, setUri ] =  React.useState(initialUri);
+    const [ error, setError] = React.useState<string>(undefined)
+    const [ recorderRef, setRecorderRef ] = React.useState<SimRecorderRef>(undefined);
+    const [ recorderState, setRecorderState ] = React.useState<SimRecorderState>("default");
+
+    React.useEffect(() => {
+        if (!recorderRef) return undefined;
+        recorderRef.addStateChangeListener(setRecorderState);
+        recorderRef.addThumbnailListener(setUri);
+        recorderRef.addErrorListener(setError);
+
+        return () => {
+            recorderRef.removeStateChangeListener(setRecorderState);
+            recorderRef.removeThumbnailListener(setUri);
+            recorderRef.removeErrorListener(setError);
+        }
+    }, [recorderRef])
+
+    const handleApplyClick = (evt?: any) => {
+        onApply(uri);
+    }
+
+    const handleScreenshotClick = async () => {
+        setError(undefined);
+        if (recorderRef) recorderRef.screenshotAsync();
+    }
+
+    const handleRecordClick = async () => {
+        setError(undefined);
+        if (!recorderRef) return;
+
+        if (recorderRef.state === "recording") {
+            recorderRef.stopRecordingAsync();
+        }
+        else if (recorderRef.state === "default") {
+            recorderRef.startRecordingAsync();
+        }
+    }
+
+    const targetTheme = pxt.appTarget.appTheme;
+
+    const handleSimRecorderRef = (ref: SimRecorderRef) => {
+        setRecorderRef(ref);
+    }
+
+    const screenshotLabel = lf("Take screenshot ({0})", targetTheme.simScreenshotKey);
+    const startRecordingLabel = lf("Record gameplay ({0})", targetTheme.simGifKey);
+    const stopRecordingLabel = lf("Stop recording ({0})", targetTheme.simGifKey) ;
+
+    return <>
+        <div className="gif-recorder-content">
+            <div className="gif-recorder-sim-embed">
+                {React.createElement(simRecorder, { onSimRecorderInit: handleSimRecorderRef })}
+            </div>
+            <div className="thumbnail-controls">
+                <div className="thumbnail-preview">
+                    <div>
+                        <span className="thumbnail-label">{lf("Current Thumbnail")}</span>
+                        <div className="thumbnail-image">
+                            {initialUri
+                                ? <img src={initialUri} />
+                                : <div className="thumbnail-placeholder" />
+                            }
+                        </div>
+                    </div>
+                    <div>
+                        <span className="thumbnail-label">{lf("New Thumbnail")}</span>
+                        <div className="thumbnail-image">
+                            {uri
+                                ? <img src={uri} />
+                                : <div className="thumbnail-placeholder" />
+                            }
+                        </div>
+                    </div>
+                </div>
+                <div className="thumbnail-actions">
+                    <Button className="primary"
+                        title={lf("Apply")}
+                        label={lf("Apply")}
+                        onClick={handleApplyClick} />
+                    <Button title={lf("Cancel")}
+                        label={lf("Cancel")}
+                        onClick={onCancel} />
+                </div>
+            </div>
+        </div>
+
+        <div className="gif-recorder">
+            <div className="gif-recorder-label">{lf("Pick your project thumbnail")}</div>
+            <div className="gif-recorder-actions">
+                {<Button className="teal inverted"
+                    title={screenshotLabel}
+                    label={screenshotLabel}
+                    leftIcon="fas fa-camera"
+                    onClick={handleScreenshotClick} />}
+                {<Button className="teal inverted"
+                    title={recorderState === "recording" ? stopRecordingLabel : startRecordingLabel}
+                    label={recorderState === "recording" ? stopRecordingLabel : startRecordingLabel}
+                    leftIcon={`fas fa-${recorderState === "recording" ? "square" : "circle"}`}
+                    onClick={handleRecordClick} />}
+            </div>
+        </div>
+    </>
+}

package/react-common/styles/controls/Button.less

@@ -230,21 +230,30 @@
 }
 
 /****************************************************
- *                   Circle Buttons                 *
+ *                   Square Buttons                 *
  ****************************************************/
 
- .common-button.circle-button {
+ .common-button.square-button {
     width: 3rem;
     height: 3rem;
     overflow: hidden;
     padding: 0;
-    border-radius: 2rem;
 
     i, i.fas, i.far {
         margin: 0;
     }
 }
 
+
+/****************************************************
+ *                   Circle Buttons                 *
+ ****************************************************/
+
+ .common-button.circle-button {
+    &:extend(.common-button.square-button);
+    border-radius: 2rem;
+}
+
 .common-button.circle-button:focus::after {
     border-radius: 2rem;
 }
@@ -253,6 +262,14 @@
  *                   Social Buttons                 *
  ****************************************************/
 
+.common-button.social-button {
+    font-size: 1.5rem;
+
+    img {
+        max-width: 100%;
+    }
+}
+
 .common-button.facebook {
     background: #4267B2;
     color: @buttonTextColorDarkBackground;
@@ -273,6 +290,16 @@
     color: @buttonTextColorDarkBackground;
 }
 
+.common-button.whatsapp {
+    background: #59CE72;
+    color: @buttonTextColorDarkBackground;
+}
+
+.common-button.microsoft-teams {
+    background: #35258F;
+    color: @buttonTextColorDarkBackground;
+}
+
 /****************************************************
  *                 High Contrast                    *
  ****************************************************/