diff --git a/frontend/src/app/App.tsx b/frontend/src/app/App.tsx
index 1321469028..cb0c32e729 100644
--- a/frontend/src/app/App.tsx
+++ b/frontend/src/app/App.tsx
@@ -10,8 +10,8 @@ import InvokeTabs from '../features/tabs/InvokeTabs';
import ImageUploader from '../common/components/ImageUploader';
import { RootState, useAppSelector } from '../app/store';
-import ShowHideGalleryButton from '../features/tabs/ShowHideGalleryButton';
-import ShowHideOptionsPanelButton from '../features/tabs/ShowHideOptionsPanelButton';
+import FloatingGalleryButton from '../features/tabs/FloatingGalleryButton';
+import FloatingOptionsPanelButtons from '../features/tabs/FloatingOptionsPanelButtons';
import { createSelector } from '@reduxjs/toolkit';
import { GalleryState } from '../features/gallery/gallerySlice';
import { OptionsState } from '../features/options/optionsSlice';
@@ -72,8 +72,8 @@ const App = () => {
- {shouldShowGalleryButton && }
- {shouldShowOptionsPanelButton && }
+ {shouldShowGalleryButton && }
+ {shouldShowOptionsPanelButton && }
) : (
diff --git a/frontend/src/features/options/ProcessButtons/InvokeButton.tsx b/frontend/src/features/options/ProcessButtons/InvokeButton.tsx
index e380288e6d..b28661aa23 100644
--- a/frontend/src/features/options/ProcessButtons/InvokeButton.tsx
+++ b/frontend/src/features/options/ProcessButtons/InvokeButton.tsx
@@ -1,5 +1,7 @@
import { useHotkeys } from 'react-hotkeys-hook';
-import { BsImageFill } from 'react-icons/bs';
+import { BsImageFill, BsPlayFill } from 'react-icons/bs';
+import { FaPlay, FaPlayCircle } from 'react-icons/fa';
+import { IoPlay } from 'react-icons/io5';
import { generateImage } from '../../../app/socketio/actions';
import { useAppDispatch, useAppSelector } from '../../../app/store';
import IAIButton, {
@@ -38,10 +40,10 @@ export default function InvokeButton(props: InvokeButton) {
}
+ icon={}
isDisabled={!isReady}
onClick={handleClickGenerate}
- className="invoke-btn"
+ className="invoke-btn invoke"
tooltip="Invoke"
tooltipPlacement="bottom"
{...rest}
diff --git a/frontend/src/features/options/ProcessButtons/ProcessButtons.scss b/frontend/src/features/options/ProcessButtons/ProcessButtons.scss
index 636eb54e79..ccda441c09 100644
--- a/frontend/src/features/options/ProcessButtons/ProcessButtons.scss
+++ b/frontend/src/features/options/ProcessButtons/ProcessButtons.scss
@@ -7,6 +7,10 @@
}
.invoke-btn {
+ svg {
+ width: 18px !important;
+ height: 18px !important;
+ }
@include Button(
$btn-color: var(--accent-color),
$btn-color-hover: var(--accent-color-hover),
diff --git a/frontend/src/features/tabs/FloatingShowHideButton.scss b/frontend/src/features/tabs/FloatingButton.scss
similarity index 100%
rename from frontend/src/features/tabs/FloatingShowHideButton.scss
rename to frontend/src/features/tabs/FloatingButton.scss
diff --git a/frontend/src/features/tabs/ShowHideGalleryButton.tsx b/frontend/src/features/tabs/FloatingGalleryButton.tsx
similarity index 89%
rename from frontend/src/features/tabs/ShowHideGalleryButton.tsx
rename to frontend/src/features/tabs/FloatingGalleryButton.tsx
index d39a594adb..1ff0eec901 100644
--- a/frontend/src/features/tabs/ShowHideGalleryButton.tsx
+++ b/frontend/src/features/tabs/FloatingGalleryButton.tsx
@@ -3,7 +3,7 @@ import { useAppDispatch } from '../../app/store';
import IAIIconButton from '../../common/components/IAIIconButton';
import { setShouldShowGallery } from '../gallery/gallerySlice';
-const ShowHideGalleryButton = () => {
+const FloatingGalleryButton = () => {
const dispatch = useAppDispatch();
const handleShowGallery = () => {
@@ -23,4 +23,4 @@ const ShowHideGalleryButton = () => {
);
};
-export default ShowHideGalleryButton;
+export default FloatingGalleryButton;
diff --git a/frontend/src/features/tabs/ShowHideOptionsPanelButton.tsx b/frontend/src/features/tabs/FloatingOptionsPanelButtons.tsx
similarity index 94%
rename from frontend/src/features/tabs/ShowHideOptionsPanelButton.tsx
rename to frontend/src/features/tabs/FloatingOptionsPanelButtons.tsx
index 741e5f53b1..16d4fae07c 100644
--- a/frontend/src/features/tabs/ShowHideOptionsPanelButton.tsx
+++ b/frontend/src/features/tabs/FloatingOptionsPanelButtons.tsx
@@ -24,7 +24,7 @@ const canInvokeSelector = createSelector(
{ memoizeOptions: { resultEqualityCheck: _.isEqual } }
);
-const ShowHideOptionsPanelButton = () => {
+const FloatingOptionsPanelButtons = () => {
const dispatch = useAppDispatch();
const { shouldShowProcessButtons } = useAppSelector(canInvokeSelector);
@@ -53,4 +53,4 @@ const ShowHideOptionsPanelButton = () => {
);
};
-export default ShowHideOptionsPanelButton;
+export default FloatingOptionsPanelButtons;
diff --git a/frontend/src/features/tabs/InvokeWorkarea.scss b/frontend/src/features/tabs/InvokeWorkarea.scss
index 2f11e846c5..b9c13df295 100644
--- a/frontend/src/features/tabs/InvokeWorkarea.scss
+++ b/frontend/src/features/tabs/InvokeWorkarea.scss
@@ -37,5 +37,11 @@
border-radius: 0.5rem;
padding: 1rem;
}
+ .workarea-split-view-left {
+ padding-right: 0.5rem;
+ }
+ .workarea-split-view-right {
+ padding-left: 0.5rem;
+ }
}
}
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 56018cd27e..fd5a9e7dc1 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -40,7 +40,7 @@
@use '../features/tabs/TextToImage/TextToImage.scss';
@use '../features/tabs/ImageToImage/ImageToImage.scss';
@use '../features/tabs/Inpainting/Inpainting.scss';
-@use '../features/tabs/FloatingShowHideButton.scss';
+@use '../features/tabs/FloatingButton.scss';
// Component Shared
@use '../common/components/IAINumberInput.scss';