From 514c75e0b5f67a38f58ae619b99e2f08dd9b1f54 Mon Sep 17 00:00:00 2001
From: Ginger <75683114+gingershaped@users.noreply.github.com>
Date: Sun, 16 Feb 2025 12:01:20 -0500
Subject: [PATCH] Clarify variable names and wording

---
 .../components/message/MsgTypeRenderers.tsx   |  4 +--
 .../message/content/ImageContent.tsx          | 26 +++++++++----------
 .../upload-card/UploadCardRenderer.tsx        |  6 ++---
 src/app/features/room/RoomInput.tsx           |  4 +--
 src/app/features/room/msgContent.ts           |  2 +-
 src/app/state/room/roomInputDrafts.ts         |  2 +-
 6 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index a341b433..287a5ca4 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -179,7 +179,7 @@ type RenderImageContentProps = {
   mimeType?: string;
   url: string;
   encInfo?: IEncryptedFile;
-  spoiler?: boolean;
+  markedAsSpoiler?: boolean;
   spoilerReason?: string;
 };
 type MImageProps = {
@@ -208,7 +208,7 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
           mimeType: imgInfo?.mimetype,
           url: mxcUrl,
           encInfo: content.file,
-          spoiler: content[MATRIX_SPOILER_PROPERTY_NAME],
+          markedAsSpoiler: content[MATRIX_SPOILER_PROPERTY_NAME],
           spoilerReason: content[MATRIX_SPOILER_REASON_PROPERTY_NAME],
         })}
       </AttachmentBox>
diff --git a/src/app/components/message/content/ImageContent.tsx b/src/app/components/message/content/ImageContent.tsx
index 80e1e6a0..d2bde0fd 100644
--- a/src/app/components/message/content/ImageContent.tsx
+++ b/src/app/components/message/content/ImageContent.tsx
@@ -3,6 +3,7 @@ import {
   Badge,
   Box,
   Button,
+  Chip,
   Icon,
   Icons,
   Modal,
@@ -51,7 +52,7 @@ export type ImageContentProps = {
   info?: IImageInfo;
   encInfo?: EncryptedAttachmentInfo;
   autoPlay?: boolean;
-  spoiler?: boolean;
+  markedAsSpoiler?: boolean;
   spoilerReason?: string;
   renderViewer: (props: RenderViewerProps) => ReactNode;
   renderImage: (props: RenderImageProps) => ReactNode;
@@ -66,7 +67,7 @@ export const ImageContent = as<'div', ImageContentProps>(
       info,
       encInfo,
       autoPlay,
-      spoiler,
+      markedAsSpoiler,
       spoilerReason,
       renderViewer,
       renderImage,
@@ -81,7 +82,7 @@ export const ImageContent = as<'div', ImageContentProps>(
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
     const [viewer, setViewer] = useState(false);
-    const [spoiled, setSpoiled] = useState(spoiler ?? false);
+    const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
@@ -165,7 +166,7 @@ export const ImageContent = as<'div', ImageContentProps>(
           </Box>
         )}
         {srcState.status === AsyncStatus.Success && (
-          <Box className={classNames(css.AbsoluteContainer, spoiled && css.Blur)}>
+          <Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
             {renderImage({
               alt: body,
               title: body,
@@ -177,7 +178,7 @@ export const ImageContent = as<'div', ImageContentProps>(
             })}
           </Box>
         )}
-        {srcState.status === AsyncStatus.Success && spoiled && (
+        {srcState.status === AsyncStatus.Success && blurred && (
           <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
             <TooltipProvider
               tooltip={
@@ -191,17 +192,16 @@ export const ImageContent = as<'div', ImageContentProps>(
               align="Center"
             >
               {(triggerRef) => (
-                <Button
+                <Chip
                   ref={triggerRef}
                   variant="Secondary"
-                  fill="Solid"
-                  radii="300"
-                  size="300"
-                  onClick={() => setSpoiled(false)}
-                  before={<Icon size="Inherit" src={Icons.Eye} filled />}
+                  radii="Pill"
+                  size="500"
+                  outlined
+                  onClick={() => setBlurred(false)}
                 >
-                  <Text size="B300">Show</Text>
-                </Button>
+                  <Text size="B300">Spoiler</Text>
+                </Chip>
               )}
             </TooltipProvider>
           </Box>
diff --git a/src/app/components/upload-card/UploadCardRenderer.tsx b/src/app/components/upload-card/UploadCardRenderer.tsx
index e814a6f7..d943898f 100644
--- a/src/app/components/upload-card/UploadCardRenderer.tsx
+++ b/src/app/components/upload-card/UploadCardRenderer.tsx
@@ -34,7 +34,7 @@ export function UploadCardRenderer({
   if (upload.status === UploadStatus.Idle) startUpload();
 
   const toggleSpoiler = useCallback(() => {
-    setMetadata({ ...metadata, spoiled: !metadata.spoiled });
+    setMetadata({ ...metadata, markedAsSpoiler: !metadata.markedAsSpoiler });
   }, [setMetadata, metadata]);
 
   const removeUpload = () => {
@@ -70,7 +70,7 @@ export function UploadCardRenderer({
             <TooltipProvider
               tooltip={
                 <Tooltip variant="SurfaceVariant">
-                  <Text>Spoil Image</Text>
+                  <Text>Spoiler Image</Text>
                 </Tooltip>
               }
               position="Top"
@@ -85,7 +85,7 @@ export function UploadCardRenderer({
                   radii="Pill"
                   size="300"
                 >
-                  <Icon src={metadata.spoiled ? Icons.EyeBlind : Icons.Eye} size="200" />
+                  <Icon src={metadata.markedAsSpoiler ? Icons.EyeBlind : Icons.Eye} size="200" />
                 </IconButton>
               )}
             </TooltipProvider>
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index bf580aee..f183848c 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -171,7 +171,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             fileItems.push({
               ...ef,
               metadata: {
-                spoiled: false,
+                markedAsSpoiler: false,
               },
             })
           );
@@ -182,7 +182,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
               originalFile: f,
               encInfo: undefined,
               metadata: {
-                spoiled: false,
+                markedAsSpoiler: false,
               },
             })
           );
diff --git a/src/app/features/room/msgContent.ts b/src/app/features/room/msgContent.ts
index dee06807..bc660f2c 100644
--- a/src/app/features/room/msgContent.ts
+++ b/src/app/features/room/msgContent.ts
@@ -56,7 +56,7 @@ export const getImageMsgContent = async (
     msgtype: MsgType.Image,
     filename: file.name,
     body: file.name,
-    [MATRIX_SPOILER_PROPERTY_NAME]: metadata.spoiled,
+    [MATRIX_SPOILER_PROPERTY_NAME]: metadata.markedAsSpoiler,
   };
   if (imgEl) {
     const blurHash = encodeBlurHash(imgEl, 512, scaleYDimension(imgEl.width, 512, imgEl.height));
diff --git a/src/app/state/room/roomInputDrafts.ts b/src/app/state/room/roomInputDrafts.ts
index 5eb00787..855aa61a 100644
--- a/src/app/state/room/roomInputDrafts.ts
+++ b/src/app/state/room/roomInputDrafts.ts
@@ -7,7 +7,7 @@ import { createUploadAtomFamily } from '../upload';
 import { TUploadContent } from '../../utils/matrix';
 
 export type TUploadMetadata = {
-  spoiled: boolean;
+  markedAsSpoiler: boolean;
 };
 
 export type TUploadItem = {