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';