Update ai chargen instructions (#976)

agnaistic · Jul 17, 2024 · 14c4de4 · 14c4de4
1 parent 0b1d044
commit 14c4de4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/web/pages/Character/CreateCharacterForm.tsx b/web/pages/Character/CreateCharacterForm.tsx
@@ -377,21 +377,31 @@ export const CreateCharacterForm: Component<{
                   rootModalStore.info(
                     'AI Character Generation',
                     <>
-                      1. Fill out the <Pill small>Description</Pill> field
-                      <br />
-                      2. Select the Service you wish to use
-                      <br />
-                      3. Click{' '}
-                      <Pill inverse type="hl" small>
-                        Generate
-                      </Pill>
-                      &nbsp;- It may take 30-60 seconds to generate.
-                      <br />
-                      4. Adjust the <Pill small>Description</Pill> and click{' '}
-                      <Pill type="hl" inverse small>
-                        Regenerate
-                      </Pill>
-                      &nbsp;to regenerate a specific field.
+                      <p class="inline-flex gap-1">
+                        1. Fill out <Pill small>Name</Pill> and <Pill small>Description</Pill>{' '}
+                        fields
+                      </p>
+                      <p class="inline-flex gap-1">
+                        2. <i>(Optional)</i> Choose or update your preset{' '}
+                        <Pill inverse type="hl" small>
+                          <SlidersVertical size={14} />
+                        </Pill>
+                      </p>
+                      <p class="inline-flex gap-1">
+                        3. Click{' '}
+                        <Pill inverse type="hl" small>
+                          <WandSparkles size={14} />
+                        </Pill>
+                        &nbsp;on the field you'd like to generate.
+                      </p>
+
+                      <p class="inline-flex gap-1">
+                        4. Adjust the <Pill small>Description</Pill> and click{' '}
+                        <Pill inverse type="hl" small>
+                          <WandSparkles size={14} />
+                        </Pill>
+                        &nbsp;to regenerate.
+                      </p>
                     </>
                   )
                 }}

diff --git a/web/shared/Card.tsx b/web/shared/Card.tsx
@@ -195,7 +195,7 @@ export const Pill: Component<{
 
   return (
     <span
-      class={`border-[1px] px-2 py-1 text-sm`}
+      class={`flex items-center border-[1px] px-2 py-1 text-sm`}
       style={bg()}
       onClick={props.onClick}
       classList={{