feat(suite): new device renders and animations (#15966)

* feat(suite): add adjusted device renders and animations * fix(suite): fix image size in viewonlypromo
trezor · Jan 22, 2025 · 7704090 · 7704090
1 parent 34cbaa4
commit 7704090
Show file tree

Hide file tree

Showing 31 changed files with 12 additions and 36 deletions.
diff --git a/packages/components/src/components/animations/DeviceAnimation.tsx b/packages/components/src/components/animations/DeviceAnimation.tsx
@@ -55,7 +55,9 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
 
         // Animations on following devices are transparent.
         const themeSuffix = [
+            DeviceModelInternal.T1B1,
             DeviceModelInternal.T2B1,
+            DeviceModelInternal.T2T1,
             DeviceModelInternal.T3B1,
             DeviceModelInternal.T3T1,
             DeviceModelInternal.T3W1,

diff --git a/packages/product-components/src/components/RotateDeviceImage/RotateDeviceImage.tsx b/packages/product-components/src/components/RotateDeviceImage/RotateDeviceImage.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 
-import styled from 'styled-components';
-
-import { DeviceAnimation, Image } from '@trezor/components';
+import { DeviceAnimation } from '@trezor/components';
 import { DeviceModelInternal } from '@trezor/connect';
 
 export type RotateDeviceImageProps = {
@@ -13,12 +11,6 @@ export type RotateDeviceImageProps = {
     animationWidth?: string;
 };
 
-// eslint-disable-next-line local-rules/no-override-ds-component
-const StyledImage = styled(Image)`
-    /* do not apply the darkening filter in dark mode on device images */
-    filter: none;
-`;
-
 export const RotateDeviceImage = ({
     deviceModel,
     deviceColor,
@@ -30,32 +22,14 @@ export const RotateDeviceImage = ({
         return null;
     }
 
-    const isDeviceImageRotating =
-        deviceModel &&
-        [DeviceModelInternal.T2B1, DeviceModelInternal.T3B1, DeviceModelInternal.T3T1].includes(
-            deviceModel,
-        );
-
     return (
-        <>
-            {isDeviceImageRotating ? (
-                <DeviceAnimation
-                    className={className}
-                    type="ROTATE"
-                    deviceModelInternal={deviceModel}
-                    deviceUnitColor={deviceColor}
-                    height={animationHeight}
-                    width={animationWidth}
-                />
-            ) : (
-                <StyledImage
-                    width={animationWidth}
-                    height={animationHeight}
-                    alt="Trezor"
-                    image={`TREZOR_${deviceModel}`}
-                    className={className}
-                />
-            )}
-        </>
+        <DeviceAnimation
+            className={className}
+            type="ROTATE"
+            deviceModelInternal={deviceModel}
+            deviceUnitColor={deviceColor}
+            height={animationHeight}
+            width={animationWidth}
+        />
     );
 };
diff --git a/packages/suite-data/files/images/png/trezor-t1b1-large.png b/packages/suite-data/files/images/png/trezor-t1b1-large.png
diff --git a/packages/suite-data/files/images/png/[email protected] b/packages/suite-data/files/images/png/[email protected]
diff --git a/packages/suite-data/files/images/png/trezor-t1b1.png b/packages/suite-data/files/images/png/trezor-t1b1.png
diff --git a/packages/suite-data/files/images/png/[email protected] b/packages/suite-data/files/images/png/[email protected]
diff --git a/packages/suite-data/files/images/png/trezor-t2t1-large.png b/packages/suite-data/files/images/png/trezor-t2t1-large.png
diff --git a/packages/suite-data/files/images/png/[email protected] b/packages/suite-data/files/images/png/[email protected]
diff --git a/packages/suite-data/files/images/png/trezor-t2t1.png b/packages/suite-data/files/images/png/trezor-t2t1.png
diff --git a/packages/suite-data/files/images/png/[email protected] b/packages/suite-data/files/images/png/[email protected]
diff --git a/packages/suite-data/files/images/png/trezor-t3b1-large.png b/packages/suite-data/files/images/png/trezor-t3b1-large.png
diff --git a/packages/suite-data/files/images/png/[email protected] b/packages/suite-data/files/images/png/[email protected]
diff --git a/packages/suite-data/files/images/png/trezor-t3b1.png b/packages/suite-data/files/images/png/trezor-t3b1.png
diff --git a/packages/suite-data/files/images/png/[email protected] b/packages/suite-data/files/images/png/[email protected]
diff --git a/packages/suite-data/files/images/png/trezor-t3t1-large.png b/packages/suite-data/files/images/png/trezor-t3t1-large.png
diff --git a/packages/suite-data/files/images/png/[email protected] b/packages/suite-data/files/images/png/[email protected]
diff --git a/packages/suite-data/files/images/png/trezor-t3t1.png b/packages/suite-data/files/images/png/trezor-t3t1.png
diff --git a/packages/suite-data/files/images/png/[email protected] b/packages/suite-data/files/images/png/[email protected]
diff --git a/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1.webm b/packages/suite-data/files/videos/device/trezor_t1b1_rotate_color_1.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t2t1_rotate_color_1.webm b/packages/suite-data/files/videos/device/trezor_t2t1_rotate_color_1.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_1.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_1.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_2.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_2.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_3.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_3.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_4.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_4.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_5.webm b/packages/suite-data/files/videos/device/trezor_t3b1_rotate_color_5.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_1.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_1.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_2.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_2.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_3.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_3.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_4.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_4.webm
diff --git a/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_5.webm b/packages/suite-data/files/videos/device/trezor_t3t1_rotate_color_5.webm
diff --git a/packages/suite/src/views/view-only/ViewOnlyPromoContent.tsx b/packages/suite/src/views/view-only/ViewOnlyPromoContent.tsx
@@ -194,7 +194,7 @@ const Top = () => {
                 <LargeDeviceImageContainer>
                     <LargeDeviceImage
                         alt="Trezor"
-                        image={`TREZOR_${selectedDeviceModelInternal}`}
+                        image={`TREZOR_${selectedDeviceModelInternal}_LARGE`}
                     />
                 </LargeDeviceImageContainer>
             </ElevationContext>