From c71bd020a128c15e6bb0fbfbd84819163e9e1ff6 Mon Sep 17 00:00:00 2001
From: eleanor-park <eleanor_park@brown.edu>
Date: Wed, 18 Dec 2024 14:30:35 -0500
Subject: working on drawing/image generation ui

---
 src/client/views/smartdraw/SmartDrawHandler.tsx | 101 ++++++++++++------------
 1 file changed, 52 insertions(+), 49 deletions(-)

(limited to 'src')

diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index f318fb134..036ac5983 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -396,56 +396,59 @@ export class SmartDrawHandler extends ObservableReactComponent<object> {
                     />
                 </div>
                 {this._showOptions && (
-                    <div className="smartdraw-options">
-                        <div className="auto-color">
-                            Auto color
-                            <Switch
-                                sx={{
-                                    '& .MuiSwitch-switchBase.Mui-checked': { color: SettingsManager.userColor },
-                                    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { backgroundColor: SettingsManager.userVariantColor },
-                                }}
-                                defaultChecked={true}
-                                value={this._autoColor}
-                                size="small"
-                                onChange={action(() => this._canInteract && (this._autoColor = !this._autoColor))}
-                            />
-                        </div>
-                        <div className="complexity">
-                            Complexity
-                            <Slider
-                                sx={{
-                                    '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
-                                    '& .MuiSlider-rail': { color: SettingsManager.userColor },
-                                    '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
-                                }}
-                                style={{ width: '80%' }}
-                                min={1}
-                                max={10}
-                                step={1}
-                                size="small"
-                                value={this._complexity}
-                                onChange={action((e, val) => this._canInteract && (this._complexity = val as number))}
-                                valueLabelDisplay="auto"
-                            />
-                        </div>
-                        <div className="size">
-                            Size (in pixels)
-                            <Slider
-                                className="size-slider"
-                                sx={{
-                                    '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
-                                    '& .MuiSlider-rail': { color: SettingsManager.userColor },
-                                    '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}20` } },
-                                }}
-                                min={50}
-                                max={700}
-                                step={10}
-                                size="small"
-                                value={this._size}
-                                onChange={action((e, val) => this._canInteract && (this._size = val as number))}
-                                valueLabelDisplay="auto"
-                            />
+                    <div>
+                        <div className="smartdraw-options">
+                            <div className="auto-color">
+                                Auto color
+                                <Switch
+                                    sx={{
+                                        '& .MuiSwitch-switchBase.Mui-checked': { color: SettingsManager.userColor },
+                                        '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { backgroundColor: SettingsManager.userVariantColor },
+                                    }}
+                                    defaultChecked={true}
+                                    value={this._autoColor}
+                                    size="small"
+                                    onChange={action(() => this._canInteract && (this._autoColor = !this._autoColor))}
+                                />
+                            </div>
+                            <div className="complexity">
+                                Complexity
+                                <Slider
+                                    sx={{
+                                        '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
+                                        '& .MuiSlider-rail': { color: SettingsManager.userColor },
+                                        '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } },
+                                    }}
+                                    style={{ width: '80%' }}
+                                    min={1}
+                                    max={10}
+                                    step={1}
+                                    size="small"
+                                    value={this._complexity}
+                                    onChange={action((e, val) => this._canInteract && (this._complexity = val as number))}
+                                    valueLabelDisplay="auto"
+                                />
+                            </div>
+                            <div className="size">
+                                Size (in pixels)
+                                <Slider
+                                    className="size-slider"
+                                    sx={{
+                                        '& .MuiSlider-track': { color: SettingsManager.userVariantColor },
+                                        '& .MuiSlider-rail': { color: SettingsManager.userColor },
+                                        '& .MuiSlider-thumb': { color: SettingsManager.userColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}20` } },
+                                    }}
+                                    min={50}
+                                    max={700}
+                                    step={10}
+                                    size="small"
+                                    value={this._size}
+                                    onChange={action((e, val) => this._canInteract && (this._size = val as number))}
+                                    valueLabelDisplay="auto"
+                                />
+                            </div>
                         </div>
+                        <div></div>
                     </div>
                 )}
             </div>
-- 
cgit v1.2.3-70-g09d2