css fixes for ai editor views.

1 files changed, 43 insertions, 35 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index eeb97bf15..796949378 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -2209,10 +2209,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                             placeholder={this._drawingFillInput || StrCast(this.Document.title) || 'Describe image'}
                             type="text"
                             value={this._drawingFillInput}
-                            onChange={action(e => {this._drawingFillInput = e.target.value})}
+                            onChange={action(e => {
+                                this._drawingFillInput = e.target.value;
+                            })}
                         />
-                        <div className="collectionfreeformview-aiView-strength">
-                            Similarity
+                        <div className="collectionFreeFormView-aiView-strength">
+                            <span className="collectionFreeFormView-aiView-similarity">Similarity</span>
                             <Slider
                                 className="collectionfreeformview-aiView-slider"
                                 sx={{
@@ -2229,23 +2231,25 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                                 valueLabelDisplay="auto"
                             />
                         </div>
-                        <Button
-                            text="Send"
-                            type={Type.SEC}
-                            icon={this._drawingFillLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
-                            iconPlacement="right"
-                            onClick={undoable(
-                                action(() => {
-                                    this._drawingFillLoading = true;
-                                    DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._drawingFillInput || StrCast(this.Document.title))?.then(
-                                        action(() => {
-                                            this._drawingFillLoading = false;
-                                        })
-                                    );
-                                }),
-                                'create image'
-                            )}
-                        />
+                        <div className="collectionFreeFormView-aiView-send">
+                            <Button
+                                text="Send"
+                                type={Type.SEC}
+                                icon={this._drawingFillLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+                                iconPlacement="right"
+                                onClick={undoable(
+                                    action(() => {
+                                        this._drawingFillLoading = true;
+                                        DrawingFillHandler.drawingToImage(this.props.Document, this._fireflyRefStrength, this._drawingFillInput || StrCast(this.Document.title))?.then(
+                                            action(() => {
+                                                this._drawingFillLoading = false;
+                                            })
+                                        );
+                                    }),
+                                    'create image'
+                                )}
+                            />
+                        </div>
                     </div>
                 </div>
                 <div className="collectionfreeformview-aiView-regenerate-container">
@@ -2256,23 +2260,27 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                             aria-label="Edit instructions input"
                             type="text"
                             value={this._regenInput}
-                            onChange={action(e => {this._regenInput = e.target.value})}
+                            onChange={action(e => {
+                                this._regenInput = e.target.value;
+                            })}
                             placeholder="..under development.."
                         />
-                        <Button
-                            text="Regenerate"
-                            type={Type.SEC}
-                            icon={this._regenLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
-                            iconPlacement="right"
-                            // onClick={action(async () => {
-                            //     this._regenLoading = true;
-                            //     SmartDrawHandler.Instance.CreateDrawingDoc = this.createDrawingDoc;
-                            //     SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
-                            //     SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing;
-                            //     await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true);
-                            //     this._regenLoading = false;
-                            // })}
-                        />
+                        <div className="collectionFreeFormView-aiView-regenBtn">
+                            <Button
+                                text="Regenerate"
+                                type={Type.SEC}
+                                icon={this._regenLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />}
+                                iconPlacement="right"
+                                // onClick={action(async () => {
+                                //     this._regenLoading = true;
+                                //     SmartDrawHandler.Instance.CreateDrawingDoc = this.createDrawingDoc;
+                                //     SmartDrawHandler.Instance.AddDrawing = this.addDrawing;
+                                //     SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing;
+                                //     await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true);
+                                //     this._regenLoading = false;
+                                // })}
+                            />
+                        </div>
                     </div>
                 </div>
             </div>