feat: redesign of Live Collaboration dialog (#6635)

* feat: redesiged Live Collaboration dialog

* fix: address lints

* fix: inactive dialog dark mode improvements

* fix: follow styleguide with event parameter, add FilledButton size prop

* fix: change timer to be imperative

* fix: add spacing after emoji

* fix: remove unused useEffect

* fix: change margin into whitespace

* fix: add share button check back
This commit is contained in:
Are 2023-05-31 18:27:29 +02:00 committed by GitHub
parent 253c5c7866
commit 7bf4de5892
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 698 additions and 253 deletions

View file

@ -26,7 +26,6 @@ import { getSelectedElements, isSomeElementSelected } from "../scene";
import { exportToCanvas } from "../packages/utils";
import { copyIcon, downloadIcon, helpIcon } from "./icons";
import { Button } from "./Button";
import { Dialog } from "./Dialog";
import { RadioGroup } from "./RadioGroup";
import { Switch } from "./Switch";
@ -34,6 +33,7 @@ import { Tooltip } from "./Tooltip";
import "./ImageExportDialog.scss";
import { useAppProps } from "./App";
import { FilledButton } from "./FilledButton";
const supportsContextFilters =
"filter" in document.createElement("canvas").getContext("2d")!;
@ -236,37 +236,37 @@ const ImageExportModal = ({
</ExportSetting>
<div className="ImageExportModal__settings__buttons">
<Button
<FilledButton
className="ImageExportModal__settings__buttons__button"
title={t("imageExportDialog.title.exportToPng")}
aria-label={t("imageExportDialog.title.exportToPng")}
onSelect={() =>
label={t("imageExportDialog.title.exportToPng")}
onClick={() =>
onExportImage(EXPORT_IMAGE_TYPES.png, exportedElements)
}
startIcon={downloadIcon}
>
{downloadIcon} {t("imageExportDialog.button.exportToPng")}
</Button>
<Button
{t("imageExportDialog.button.exportToPng")}
</FilledButton>
<FilledButton
className="ImageExportModal__settings__buttons__button"
title={t("imageExportDialog.title.exportToSvg")}
aria-label={t("imageExportDialog.title.exportToSvg")}
onSelect={() =>
label={t("imageExportDialog.title.exportToSvg")}
onClick={() =>
onExportImage(EXPORT_IMAGE_TYPES.svg, exportedElements)
}
startIcon={downloadIcon}
>
{downloadIcon} {t("imageExportDialog.button.exportToSvg")}
</Button>
{t("imageExportDialog.button.exportToSvg")}
</FilledButton>
{(probablySupportsClipboardBlob || isFirefox) && (
<Button
<FilledButton
className="ImageExportModal__settings__buttons__button"
title={t("imageExportDialog.title.copyPngToClipboard")}
aria-label={t("imageExportDialog.title.copyPngToClipboard")}
onSelect={() =>
label={t("imageExportDialog.title.copyPngToClipboard")}
onClick={() =>
onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements)
}
startIcon={copyIcon}
>
{copyIcon} {t("imageExportDialog.button.copyPngToClipboard")}
</Button>
{t("imageExportDialog.button.copyPngToClipboard")}
</FilledButton>
)}
</div>
</div>