fix(suite): device rotating image

trezor · May 10, 2024 · 689d17e · 689d17e
1 parent 8af325a
commit 689d17e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 22 deletions.
diff --git a/packages/components/src/components/ConfirmOnDevice/RotateDeviceImage.tsx b/packages/components/src/components/ConfirmOnDevice/RotateDeviceImage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { DeviceAnimation } from '../animations/DeviceAnimation';
 import { DeviceModelInternal } from '@trezor/connect';
 import { Image } from '../Image/Image';
+import styled from 'styled-components';
 
 interface DeviceImageProps {
     deviceModel?: DeviceModelInternal;
@@ -11,6 +12,11 @@ interface DeviceImageProps {
     animationWidth?: string;
 }
 
+const StyledImage = styled(Image)`
+    /* do not apply the darkening filter in dark mode on device images */
+    filter: none;
+`;
+
 export const RotateDeviceImage = ({
     deviceModel,
     deviceColor,
@@ -37,7 +43,7 @@ export const RotateDeviceImage = ({
                     width={animationWidth}
                 />
             ) : (
-                <Image alt="Trezor" image={`TREZOR_${deviceModel}`} className={className} />
+                <StyledImage alt="Trezor" image={`TREZOR_${deviceModel}`} className={className} />
             )}
         </>
     );

diff --git a/packages/suite/src/views/suite/SwitchDevice/DeviceItemLegacy/DeviceItem.tsx b/packages/suite/src/views/suite/SwitchDevice/DeviceItemLegacy/DeviceItem.tsx
@@ -2,8 +2,7 @@ import { useState } from 'react';
 
 import { AnimatePresence, motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
-import { variables, Icon, Image, motionAnimation, DeviceAnimation } from '@trezor/components';
-import { DeviceModelInternal } from '@trezor/connect';
+import { variables, Icon, motionAnimation, RotateDeviceImage } from '@trezor/components';
 import * as deviceUtils from '@suite-common/suite-utils';
 
 import {
@@ -118,13 +117,6 @@ const ColEjectHeader = styled(ColHeader)`
     margin: 0 20px 0 32px;
 `;
 
-const StyledImage = styled(Image)`
-    height: 36px;
-
-    /* do not apply the darkening filter in dark mode on device images */
-    filter: none;
-`;
-
 interface DeviceItemProps {
     device: TrezorDevice;
     instances: AcquiredDevice[];
@@ -207,18 +199,12 @@ export const DeviceItemLegacy = ({
                 <DeviceHeader>
                     {deviceModelInternal && (
                         <DeviceImageWrapper>
-                            {deviceModelInternal === DeviceModelInternal.T2B1 && (
-                                <DeviceAnimation
-                                    type="ROTATE"
-                                    height="36px"
-                                    width="36px"
-                                    deviceModelInternal={deviceModelInternal}
-                                    deviceUnitColor={device?.features?.unit_color}
-                                />
-                            )}
-                            {deviceModelInternal !== DeviceModelInternal.T2B1 && (
-                                <StyledImage alt="Trezor" image={`TREZOR_${deviceModelInternal}`} />
-                            )}
+                            <RotateDeviceImage
+                                animationHeight="36px"
+                                animationWidth="36px"
+                                deviceModel={deviceModelInternal}
+                                deviceColor={device?.features?.unit_color}
+                            />
                         </DeviceImageWrapper>
                     )}
                     <Col $grow={1}>