@cueloop/client 0.1.0-alpha.77 → 0.1.0-alpha.79

package/src/components/Toast.tsx

@@ -10,17 +10,29 @@ export interface ToastProps {
   theme?: Theme;
 }
 
+/** A toast never spans the screen: a long message wraps inside this, like the settings dialog. */
+const TOAST_MAX_WIDTH = 64;
+
 export function Toast({ title, body, theme }: ToastProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
-  const { width: terminalWidth } = useTerminalDimensions();
-  const width = Math.min(terminalWidth - 6, Math.max(28, body.length + 4));
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+  const width = Math.min(
+    terminalWidth - 6,
+    Math.max(28, Math.min(TOAST_MAX_WIDTH, body.length + 4)),
+  );
+  // the message wraps at the content width, so grow the box to fit the wrapped lines
+  const contentWidth = Math.max(1, width - 4);
+  const lines = body
+    .split("\n")
+    .reduce((total, line) => total + Math.max(1, Math.ceil(line.length / contentWidth)), 0);
+  const height = Math.min(terminalHeight - 4, Math.max(6, lines + 4));
 
   return (
     <Dialog
       isOpen
       title={title ? ` ${title} ` : undefined}
       width={width}
-      height={6}
+      height={height}
       background={tokens.elevated}
       theme={theme}
     >
@@ -34,11 +46,6 @@ export function Toast({ title, body, theme }: ToastProps): React.ReactNode {
         }}
       >
         <text fg={tokens.text}>{body}</text>
-        <box style={{ flexGrow: 1 }} />
-        <box style={{ flexDirection: "row" }}>
-          <box style={{ flexGrow: 1 }} />
-          <text fg={tokens.textDim}>[esc]</text>
-        </box>
       </box>
     </Dialog>
   );

package/src/components/WalkWizard.stories.tsx

@@ -81,7 +81,7 @@ export const EndCard: Story = {
       onBack={noop}
     />
   ),
-  // the end card wears the green border and the solid submit button
+  // accent border and solid submit; the all-viewed line turns green
   expectedColors: [DARK.green, DARK.accent, DARK.accentInk],
 };
 
@@ -96,5 +96,5 @@ export const EndCardPartialPass: Story = {
       onBack={noop}
     />
   ),
-  expectedColors: [DARK.green],
+  expectedColors: [DARK.accent, DARK.accentInk],
 };

package/src/components/WalkWizard.tsx

@@ -13,8 +13,7 @@ import { useComponentTheme } from "./theme-context";
 import type { WalkFile } from "../walk";
 import { viewedCount } from "../walk";
 import { Card } from "./primitives/Card";
-import { Button } from "./primitives/Button";
-import { Toolbar } from "./primitives/Toolbar";
+import { DialogActions } from "./primitives/DialogActions";
 
 export interface WalkWizardProps {
   files: WalkFile[];
@@ -75,24 +74,23 @@ export function WalkWizard({
           <Card
             title=" walk complete "
             contentRows={3}
-            borderColor={tokens.green}
+            borderColor={tokens.accent}
             backgroundColor={tokens.elevated}
             theme={theme}
           >
-            <text fg={tokens.text}>
+            <text fg={viewed === files.length ? tokens.green : tokens.text}>
               {viewed === files.length
                 ? `every file viewed (${viewed}/${files.length})`
                 : `${viewed} of ${files.length} files viewed`}
             </text>
             <box style={{ height: 1 }} />
-            <Toolbar>
-              <Button variant="solid" marginRight={2} onPress={onSubmitRequest} theme={theme}>
-                {" Submit review "}
-              </Button>
-              <Button onPress={onBack} theme={theme}>
-                {" [ back "}
-              </Button>
-            </Toolbar>
+            <DialogActions
+              confirmLabel="submit"
+              cancelLabel="back"
+              onConfirm={onSubmitRequest}
+              onCancel={onBack}
+              theme={theme}
+            />
           </Card>
         ) : (
           <>