From 8e205268443f178a79526cf936fabf787691ec5d Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Fri, 7 Jul 2023 21:39:38 -0400
Subject: api key, with mui

---
 src/client/views/MainView.tsx                      | 96 +++++++++++-----------
 .../CollectionFreeFormLinksView.scss               | 12 +--
 2 files changed, 57 insertions(+), 51 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ab2e0f7c5..4557e5866 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -65,6 +65,8 @@ import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
 import { TopBar } from './topbar/TopBar';
+import { ThemeProvider } from '@mui/material';
+import { theme } from '../theme';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
@@ -962,38 +964,39 @@ export class MainView extends React.Component {
 
     render() {
         return (
-            <div
-                className={`mainView-container${this.colorScheme}`}
-                onScroll={() => (ele => (ele.scrollTop = ele.scrollLeft = 0))(document.getElementById('root')!)}
-                ref={r => {
-                    r &&
-                        new _global.ResizeObserver(
-                            action(() => {
-                                this._windowWidth = r.getBoundingClientRect().width;
-                                this._windowHeight = r.getBoundingClientRect().height;
-                            })
-                        ).observe(r);
-                }}>
-                {this.inkResources}
-                <DictationOverlay />
-                <SharingManager />
-                <ServerStats />
-                <RTFMarkup />
-                <SettingsManager />
-                <ReportManager />
-                <CaptureManager />
-                <GroupManager />
-                <GoogleAuthenticationManager />
-                <DocumentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfSidebarDoc} PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} />
-                <ComponentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfMainDocContent} />
-                {this._hideUI ? null : <TopBar />}
-                {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
-                {DocumentLinksButton.LinkEditorDocView ? <LinkMenu clearLinkEditor={action(() => (DocumentLinksButton.LinkEditorDocView = undefined))} docView={DocumentLinksButton.LinkEditorDocView} /> : null}
-                {this.linkDocPreview}
+            <ThemeProvider theme={theme}>
+                <div
+                    className={`mainView-container${this.colorScheme}`}
+                    onScroll={() => (ele => (ele.scrollTop = ele.scrollLeft = 0))(document.getElementById('root')!)}
+                    ref={r => {
+                        r &&
+                            new _global.ResizeObserver(
+                                action(() => {
+                                    this._windowWidth = r.getBoundingClientRect().width;
+                                    this._windowHeight = r.getBoundingClientRect().height;
+                                })
+                            ).observe(r);
+                    }}>
+                    {this.inkResources}
+                    <DictationOverlay />
+                    <SharingManager />
+                    <ServerStats />
+                    <RTFMarkup />
+                    <SettingsManager />
+                    <ReportManager />
+                    <CaptureManager />
+                    <GroupManager />
+                    <GoogleAuthenticationManager />
+                    <DocumentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfSidebarDoc} PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} />
+                    <ComponentDecorations boundsLeft={this.leftScreenOffsetOfMainDocView} boundsTop={this.topOfMainDocContent} />
+                    {this._hideUI ? null : <TopBar />}
+                    {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
+                    {DocumentLinksButton.LinkEditorDocView ? <LinkMenu clearLinkEditor={action(() => (DocumentLinksButton.LinkEditorDocView = undefined))} docView={DocumentLinksButton.LinkEditorDocView} /> : null}
+                    {this.linkDocPreview}
 
-                {((page: string) => {
-                    // prettier-ignore
-                    switch (page) {
+                    {((page: string) => {
+                        // prettier-ignore
+                        switch (page) {
                         default:
                         case 'dashboard': return (<>
                                         <div key="dashdiv" style={{ position: 'relative', display: this._hideUI || LightboxView.LightboxDoc ? 'none' : undefined, zIndex: 2001 }}>
@@ -1003,22 +1006,23 @@ export class MainView extends React.Component {
                                     </> );
                         case 'home': return <DashboardView />;
                     }
-                })(Doc.ActivePage)}
+                    })(Doc.ActivePage)}
 
-                <PreviewCursor />
-                <TaskCompletionBox />
-                <ContextMenu />
-                <RadialMenu />
-                <AnchorMenu />
-                <DashFieldViewMenu />
-                <MarqueeOptionsMenu />
-                <OverlayView />
-                <TimelineMenu />
-                <RichTextMenu />
-                <InkTranscription />
-                {this.snapLines}
-                <LightboxView key="lightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
-            </div>
+                    <PreviewCursor />
+                    <TaskCompletionBox />
+                    <ContextMenu />
+                    <RadialMenu />
+                    <AnchorMenu />
+                    <DashFieldViewMenu />
+                    <MarqueeOptionsMenu />
+                    <OverlayView />
+                    <TimelineMenu />
+                    <RichTextMenu />
+                    <InkTranscription />
+                    {this.snapLines}
+                    <LightboxView key="lightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
+                </div>
+            </ThemeProvider>
         );
     }
 }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
index cb5cef29c..4ada1731f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
@@ -1,11 +1,13 @@
-.collectionfreeformlinksview-svgCanvas{
+// TODO: change z-index to -1 when a modal is active?
+
+.collectionfreeformlinksview-svgCanvas {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%; 
+    width: 100%;
     height: 100%;
     pointer-events: none;
-  }
-  .collectionfreeformlinksview-container {
+}
+.collectionfreeformlinksview-container {
     pointer-events: none;
-  }
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2