Draw: fix fallbacks

src/apps/draw/create/FallbackNoImages.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { Box, Card, Typography } from '@mui/joy';
+
+import { Brand } from '~/common/app.config';
+
+
+export function FallbackNoImages() {
+  return (
+    <Card variant='soft' sx={{
+      maxWidth: 'max(50%, 320px)',
+      mx: 'auto',
+      mt: 'auto',
+      mb: '6rem',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 1,
+      boxShadow: 'lg',
+    }}>
+      {/*<Typography level='h4'>*/}
+      {/*  {Brand.Title.Base} Draw*/}
+      {/*</Typography>*/}
+      <Typography level='body-md' sx={{ whiteSpace: 'balance' }}>
+        Simply type in a description, and the AI will bring your vision to life.
+        To get started enter your prompt and hit &quot;Draw&quot;!
+      </Typography>
+    </Card>
+  );
+}

src/apps/draw/create/FallbackUnconfigured.tsx

@@ -5,23 +5,27 @@ import { Button, Card, CardActions, CardContent, Typography } from '@mui/joy';
 import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 
 
-export function DrawUnconfigured() {
+export function FallbackUnconfigured() {
 
   // external state
   const { openPreferencesTab } = useOptimaLayout();
 
-  const handleConfigure = () => openPreferencesTab(PreferencesTab.Draw);
+  const handleConfigureDrawing = () => openPreferencesTab(PreferencesTab.Draw);
 
   return (
-    <Card variant='outlined' color='warning'>
+    <Card variant='outlined' color='neutral' sx={{
+      m: 'auto',
+      boxShadow: 'sm',
+      maxWidth: 'max(60%, 320px)',
+    }}>
       <CardContent>
         <Typography>
-          <strong>Text-to-Image</strong> does not seem available.
+          <strong>AI Text-to-Image</strong> does not seem available.<br />
           Please configure one service, such as an OpenAI LLM service, or the Prodia service.
         </Typography>
       </CardContent>
       <CardActions buttonFlex='0'>
-        <Button onClick={handleConfigure} sx={{ minWidth: '160px' }}>
+        <Button color='danger' onClick={handleConfigureDrawing} sx={{ minWidth: '160px' }}>
           Configure
         </Button>
       </CardActions>