diff --git a/packages/@uppy/core/src/_common.scss b/packages/@uppy/core/src/_common.scss
index 315ae8033..b33c4917d 100644
--- a/packages/@uppy/core/src/_common.scss
+++ b/packages/@uppy/core/src/_common.scss
@@ -187,3 +187,14 @@
color: $gray-500;
}
}
+
+.sr-only {
+ clip: rect(1px, 1px, 1px, 1px);
+ clip-path: inset(50%);
+ height: 1px;
+ width: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+}
diff --git a/packages/@uppy/image-generator/src/index.tsx b/packages/@uppy/image-generator/src/index.tsx
index 95129e777..526f41804 100644
--- a/packages/@uppy/image-generator/src/index.tsx
+++ b/packages/@uppy/image-generator/src/index.tsx
@@ -1,7 +1,6 @@
import type { Body, Meta, UIPluginOptions, Uppy } from '@uppy/core'
import { UIPlugin } from '@uppy/core'
import { SearchInput } from '@uppy/provider-views'
-// eslint-disable-next-line import/no-extraneous-dependencies
import type Transloadit from '@uppy/transloadit'
import type { AssemblyResult } from '@uppy/transloadit'
import locale from './locale.js'
@@ -69,7 +68,7 @@ export default class ImageGenerator<
this.setPluginState({ loading: true })
await this.uppy.upload()
} catch {
- // TODO: inform the user
+ // TODO: inform the user?
} finally {
// Normally uppy.upload() is only used to upload your files
// but here we need it to _get_ the results from the AI image generator Robot.
@@ -120,7 +119,9 @@ export default class ImageGenerator<
this.setPluginState({
prompt: (e.target as HTMLInputElement).value,
@@ -128,6 +129,26 @@ export default class ImageGenerator<
}
/>
+
diff --git a/packages/@uppy/image-generator/src/style.scss b/packages/@uppy/image-generator/src/style.scss
index 5cd68b736..63561628b 100644
--- a/packages/@uppy/image-generator/src/style.scss
+++ b/packages/@uppy/image-generator/src/style.scss
@@ -10,18 +10,38 @@
.uppy-ImageGenerator-prompt {
width: 100%;
+ display: flex;
+ padding: 12px;
+ gap: 1em;
input {
+ width: 100%;
color: $gray-800;
- border-radius: 10px;
- border: none;
- font-size: 1em;
- padding: 0.5em 1em;
+ border-radius: 8px 8px;
+ border: 0;
+ background-color: $gray-200;
+ text-align: left;
}
label {
display: none;
}
+
+ button {
+ color: $blue;
+ font-size: 14px;
+
+ &:hover svg {
+ transform: rotate(30deg);
+ transition: transform 100ms ease-in-out;
+ }
+
+ svg {
+ transition: transform 100ms ease-in-out;
+ height: 24px;
+ width: 24px;
+ }
+ }
}
.uppy-ImageGenerator-grid {
diff --git a/packages/@uppy/image-generator/turbo.json b/packages/@uppy/image-generator/turbo.json
new file mode 100644
index 000000000..c7d5acc18
--- /dev/null
+++ b/packages/@uppy/image-generator/turbo.json
@@ -0,0 +1,8 @@
+{
+ "extends": ["//"],
+ "tasks": {
+ "build": {
+ "dependsOn": ["^build", "@uppy/core#build", "@uppy/transloadit#build"]
+ }
+ }
+}
diff --git a/private/dev/index.js b/private/dev/index.js
index a3ba4efd6..7591a0b61 100644
--- a/private/dev/index.js
+++ b/private/dev/index.js
@@ -1,4 +1,13 @@
-import 'uppy/dist/uppy.css'
+import '@uppy/core/css/style.css'
+import '@uppy/dashboard/css/style.css'
+import '@uppy/provider-views/css/style.css'
+import '@uppy/url/css/style.css'
+import '@uppy/webcam/css/style.css'
+import '@uppy/audio/css/style.css'
+import '@uppy/screen-capture/css/style.css'
+import '@uppy/image-editor/css/style.css'
+import '@uppy/image-generator/css/style.css'
+import '@uppy/drop-target/css/style.css'
import Dashboard from './Dashboard.js'
import DragDrop from './DragDrop.js'
diff --git a/yarn.lock b/yarn.lock
index 9b8ee29eb..9c591932a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9432,7 +9432,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@uppy/image-generator@workspace:packages/@uppy/image-generator":
+"@uppy/image-generator@workspace:^, @uppy/image-generator@workspace:packages/@uppy/image-generator":
version: 0.0.0-use.local
resolution: "@uppy/image-generator@workspace:packages/@uppy/image-generator"
dependencies:
@@ -23901,6 +23901,7 @@ __metadata:
"@uppy/google-drive-picker": "workspace:^"
"@uppy/google-photos-picker": "workspace:^"
"@uppy/image-editor": "workspace:^"
+ "@uppy/image-generator": "workspace:^"
"@uppy/instagram": "workspace:^"
"@uppy/locales": "workspace:^"
"@uppy/onedrive": "workspace:^"