fix(gui): make all image cards show at the default size

ssube · Jan 18, 2023 · 20ed8f6 · 20ed8f6
1 parent 521fa88
commit 20ed8f6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/gui/src/components/ImageCard.tsx b/gui/src/components/ImageCard.tsx
@@ -6,7 +6,7 @@ import { useContext } from 'react';
 import { useStore } from 'zustand';
 
 import { ImageResponse } from '../client.js';
-import { StateContext } from '../state.js';
+import { ConfigContext, StateContext } from '../state.js';
 
 export interface ImageCardProps {
   value: ImageResponse;
@@ -24,6 +24,7 @@ export function ImageCard(props: ImageCardProps) {
   const { value } = props;
   const { params, output, size } = value;
 
+  const config = mustExist(useContext(ConfigContext));
   const state = mustExist(useContext(StateContext));
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const setImg2Img = useStore(state, (s) => s.setImg2Img);
@@ -59,8 +60,8 @@ export function ImageCard(props: ImageCardProps) {
     window.open(output.url, '_blank');
   }
 
-  return <Card sx={{ maxWidth: 512 }} elevation={2}>
-    <CardMedia sx={{ height: 512 }}
+  return <Card sx={{ maxWidth: config.width.default }} elevation={2}>
+    <CardMedia sx={{ height: config.height.default }}
       component='img'
       image={output.url}
       title={params.prompt}

diff --git a/gui/src/components/LoadingCard.tsx b/gui/src/components/LoadingCard.tsx
@@ -7,14 +7,15 @@ import { useStore } from 'zustand';
 
 import { ImageResponse } from '../client.js';
 import { POLL_TIME } from '../config.js';
-import { ClientContext, StateContext } from '../state.js';
+import { ClientContext, ConfigContext, StateContext } from '../state.js';
 
 export interface LoadingCardProps {
   loading: ImageResponse;
 }
 
 export function LoadingCard(props: LoadingCardProps) {
   const client = mustExist(React.useContext(ClientContext));
+  const config = mustExist(useContext(ConfigContext));
 
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const pushHistory = useStore(mustExist(useContext(StateContext)), (state) => state.pushHistory);
@@ -31,9 +32,14 @@ export function LoadingCard(props: LoadingCardProps) {
     }
   }, [ready.status, ready.data?.ready]);
 
-  return <Card sx={{ maxWidth: props.loading.size.width }}>
-    <CardContent sx={{ height: props.loading.size.height }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: props.loading.size.height }}>
+  return <Card sx={{ maxWidth: config.width.default }}>
+    <CardContent sx={{ height: config.height.default }}>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: config.height.default,
+      }}>
         <CircularProgress />
       </div>
     </CardContent>