From 0e33b622a1f166fbc422322c1c3386668076e726 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 6 Aug 2024 11:35:30 +0200
Subject: [PATCH] fix: Proper styling of export dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/App.scss | 20 +++++++++++++++-----
 src/App.tsx  |  7 +++++--
 src/main.tsx |  2 +-
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 5e3bd0c..ae99fcd 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -5,14 +5,15 @@
 
 // https://github.com/excalidraw/excalidraw/blob/4dc4590f247a0a0d9c3f5d39fe09c00c5cef87bf/examples/excalidraw
 .excalidraw, .App .excalidraw {
-  --zIndex-modal: 100001;
+  --zIndex-modal: 100010;
+  --zIndex-popup: 100020;
   --ui-font: var(--font-face);
 
-  --color-brand: var(--color-primary-element);
-  --color-brand-hover: var(--color-primary-element-hover);
+  --color-brand: var(--color-primary-element) !important;
+  --color-brand-hover: var(--color-primary-element-hover) !important;
   --color-primary: var(--color-primary-element) !important;
-  --color-primary-darker: var(--color-primary-darker);
-  --color-primary-darkest: var(--color-primary-element);
+  --color-primary-darker: var(--color-primary-element-hover) !important;
+  --color-primary-darkest: var(----color-primary-element-hover) !important;
   --color-primary-light: var(--color-primary-element-light) !important;
   --color-surface-primary-container: var(--color-primary-element-light);
   --color-surface-low: var(--color-primary-element-light);
@@ -97,3 +98,12 @@
 .layer-ui__wrapper__top-right label[title=Library] {
   display: none;
 }
+
+.ImageExportModal__preview__filename {
+  display: none;
+}
+
+.excalidraw .Switch input,
+.excalidraw .RadioGroup__choice input {
+  opacity: 0;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 06be255..b9b2756 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,10 +25,13 @@ import type { ResolvablePromise } from '@excalidraw/excalidraw/types/utils'
 import type { NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
 interface WhiteboardAppProps {
 	fileId: number;
+	fileName: string;
 	isEmbedded: boolean;
 }
 
-export default function App({ fileId, isEmbedded }: WhiteboardAppProps) {
+export default function App({ fileId, isEmbedded, fileName }: WhiteboardAppProps) {
+	const fileNameWithoutExtension = fileName.split('.').slice(0, -1).join('.')
+
 	const [viewModeEnabled] = useState(isEmbedded)
 	const [zenModeEnabled] = useState(isEmbedded)
 	const [gridModeEnabled] = useState(false)
@@ -140,7 +143,7 @@ export default function App({ fileId, isEmbedded }: WhiteboardAppProps) {
 					zenModeEnabled={zenModeEnabled}
 					gridModeEnabled={gridModeEnabled}
 					theme={theme}
-					name="Custom name of drawing"
+					name={fileNameWithoutExtension}
 					UIOptions={{
 						canvasActions: {
 							loadScene: false,
diff --git a/src/main.tsx b/src/main.tsx
index 1c07ff9..942fd83 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -24,7 +24,7 @@ const Component = {
 
 			this.root.render(
 				<StrictMode>
-					<App fileId={this.fileid} isEmbedded={this.isEmbedded}/>
+					<App fileId={this.fileid} isEmbedded={this.isEmbedded} fileName={this.basename} />
 				</StrictMode>,
 			)
 		})