From 9bafda6a152778893df143776ae859a3b8b7f192 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Wed, 2 Nov 2022 03:02:35 +1300 Subject: [PATCH] Fix Inpainting Alerts Styling --- .../src/app/selectors/readinessSelector.ts | 16 ++++++-------- .../features/tabs/Inpainting/Inpainting.scss | 18 ---------------- .../InpaintingCanvasStatusIcons.scss | 21 ++++++++++++------- frontend/src/styles/_Colors_Dark.scss | 10 ++++++++- frontend/src/styles/_Colors_Light.scss | 8 +++++++ 5 files changed, 36 insertions(+), 37 deletions(-) diff --git a/frontend/src/app/selectors/readinessSelector.ts b/frontend/src/app/selectors/readinessSelector.ts index 711bce36a9..702f45c473 100644 --- a/frontend/src/app/selectors/readinessSelector.ts +++ b/frontend/src/app/selectors/readinessSelector.ts @@ -40,21 +40,17 @@ export const readinessSelector = createSelector( // Cannot generate without a prompt if (!prompt || Boolean(prompt.match(/^[\s\r\n]+$/))) { isReady = false; - reasonsWhyNotReady.push('Missing a prompt.'); + reasonsWhyNotReady.push('Missing prompt'); } if (activeTabName === 'img2img' && !initialImage) { isReady = false; - reasonsWhyNotReady.push( - 'On ImageToImage tab, but no initial image is selected.' - ); + reasonsWhyNotReady.push('No initial image selected'); } if (activeTabName === 'inpainting' && !imageToInpaint) { isReady = false; - reasonsWhyNotReady.push( - 'On Inpainting tab, but no initial image is selected.' - ); + reasonsWhyNotReady.push('No inpainting image selected'); } // // We don't use mask paths now. @@ -70,13 +66,13 @@ export const readinessSelector = createSelector( // Cannot generate if already processing an image if (isProcessing) { isReady = false; - reasonsWhyNotReady.push('System is already processing something.'); + reasonsWhyNotReady.push('System Busy'); } // Cannot generate if not connected if (!isConnected) { isReady = false; - reasonsWhyNotReady.push('System is disconnected.'); + reasonsWhyNotReady.push('System Disconnected'); } // Cannot generate variations without valid seed weights @@ -85,7 +81,7 @@ export const readinessSelector = createSelector( (!(validateSeedWeights(seedWeights) || seedWeights === '') || seed === -1) ) { isReady = false; - reasonsWhyNotReady.push('Seed-weight pairs are badly formatted.'); + reasonsWhyNotReady.push('Seed-Weights badly formatted.'); } // All good diff --git a/frontend/src/features/tabs/Inpainting/Inpainting.scss b/frontend/src/features/tabs/Inpainting/Inpainting.scss index 6fd2134727..f85c7cc782 100644 --- a/frontend/src/features/tabs/Inpainting/Inpainting.scss +++ b/frontend/src/features/tabs/Inpainting/Inpainting.scss @@ -64,24 +64,6 @@ position: relative; } - .inpainting-alerts { - position: absolute; - top: 0; - left: 0; - display: flex; - z-index: 2; - padding: 0.25rem; - pointer-events: none; - - button { - &[data-selected='true'] { - svg { - fill: var(--accent-color); - } - } - } - } - .inpainting-canvas-stage { border-radius: 0.5rem; canvas { diff --git a/frontend/src/features/tabs/Inpainting/InpaintingCanvasStatusIcons.scss b/frontend/src/features/tabs/Inpainting/InpaintingCanvasStatusIcons.scss index 30c54dea19..72a0764787 100644 --- a/frontend/src/features/tabs/Inpainting/InpaintingCanvasStatusIcons.scss +++ b/frontend/src/features/tabs/Inpainting/InpaintingCanvasStatusIcons.scss @@ -4,27 +4,32 @@ left: 0; display: flex; z-index: 2; - margin: 0.25rem; - padding: 0.25rem; + margin: 0.5rem; pointer-events: none; - background-color: var(--text-color); - opacity: 0.7; - border-radius: 0.5rem; + background-color: var(--inpainting-alerts-bg); + border-radius: 0.2rem; + overflow: hidden; button { + border-radius: 0; + height: 100%; + vertical-align: top; + svg { - fill: var(--background-color); + fill: var(--inpainting-alerts-icon-color); } &[data-selected='true'] { + background-color: var(--inpainting-alerts-bg-active); svg { - fill: var(--accent-color-hover); + fill: var(--inpainting-alerts-icon-active); } } &[data-alert='true'] { + background-color: var(--inpainting-alerts-bg-alert); svg { - fill: var(--destructive-color-hover); + fill: var(--inpainting-alerts-icon-alert); } } } diff --git a/frontend/src/styles/_Colors_Dark.scss b/frontend/src/styles/_Colors_Dark.scss index 2a85571933..9c2e73e276 100644 --- a/frontend/src/styles/_Colors_Dark.scss +++ b/frontend/src/styles/_Colors_Dark.scss @@ -57,7 +57,7 @@ --tab-color: rgb(30, 32, 42); --tab-hover-color: rgb(36, 38, 48); --tab-list-bg: var(--accent-color); - --tab-list-text: rgb(202,204,216); + --tab-list-text: rgb(202, 204, 216); --tab-list-text-inactive: rgb(92, 94, 114); --tab-panel-bg: rgb(20, 22, 28); @@ -103,4 +103,12 @@ // Shadows --floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(140, 101, 255, 0.5)); + + // Canvas + --inpainting-alerts-bg: rgba(20, 20, 26, 0.75); + --inpainting-alerts-icon-color: rgb(255, 255, 255); + --inpainting-alerts-bg-active: rgb(80, 40, 200); + --inpainting-alerts-icon-active: rgb(255, 255, 255); + --inpainting-alerts-bg-alert: var(--invalid); + --inpainting-alerts-icon-alert: rgb(255, 255, 255); } diff --git a/frontend/src/styles/_Colors_Light.scss b/frontend/src/styles/_Colors_Light.scss index 325c0f57f5..029de9f253 100644 --- a/frontend/src/styles/_Colors_Light.scss +++ b/frontend/src/styles/_Colors_Light.scss @@ -104,4 +104,12 @@ // Shadows --floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.3)); + + // Canvas + --inpainting-alerts-bg: rgba(220, 222, 224, 0.75); + --inpainting-alerts-icon-color: rgb(0, 0, 0); + --inpainting-alerts-bg-active: rgb(255, 200, 0); + --inpainting-alerts-icon-active: rgb(0, 0, 0); + --inpainting-alerts-bg-alert: var(--invalid); + --inpainting-alerts-icon-alert: rgb(0, 0, 0); }