Skip to content

Commit

Permalink
fix(suite): device animation aspect ratio
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamhavel
adamhavel committed Dec 16, 2024
1 parent e3b5293 commit 0a1fca5
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 125 deletions.
10 changes: 2 additions & 8 deletions packages/components/src/components/animations/DeviceAnimation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import { AnimationWrapper, Shape } from './AnimationPrimitives';
import { resolveStaticPath } from '../../utils/resolveStaticPath';

const StyledVideo = styled.video`
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
`;

export type AnimationDeviceType =
Expand Down Expand Up @@ -80,8 +80,6 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
loop={loop}
autoPlay
muted
width={width}
height={height}
ref={videoRef}
onMouseOver={onVideoMouseOver}
key={key}
Expand All @@ -100,8 +98,6 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
loop={loop}
autoPlay
muted
height={height}
width={width}
ref={videoRef}
onMouseOver={onVideoMouseOver}
key={key}
Expand Down Expand Up @@ -136,8 +132,6 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
loop={loop}
autoPlay
muted
width={height}
height={height}
ref={videoRef}
onMouseOver={onVideoMouseOver}
key={key}
Expand Down
11 changes: 5 additions & 6 deletions packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDevice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,13 @@ export const SLIDE_DOWN = keyframes`
}
`;

const Wrapper = styled.div<{ $animation?: AnimationDirection }>`
display: flex;
width: 300px;
height: 62px;
padding: 0 ${spacingsPx.md} 0 ${spacingsPx.xxl};
const Wrapper = styled.div<{ $animation?: AnimationDirection; $isCancelable?: boolean }>`
padding: ${spacingsPx.sm} ${spacingsPx.sm} ${spacingsPx.sm} ${spacingsPx.xxl};
border-radius: ${borders.radii.full};
background: ${({ theme }) => theme.backgroundSurfaceElevation0};
box-shadow: ${({ theme }) => theme.boxShadowBase};
align-items: center;
${({ $isCancelable }) => !$isCancelable && `padding-right: ${spacingsPx.xxl};`}
${({ $animation }) =>
$animation === AnimationDirection.Up &&
Expand Down Expand Up @@ -70,6 +68,7 @@ export interface ConfirmOnDeviceProps {
export const ConfirmOnDevice = ({ isConfirmed, ...rest }: ConfirmOnDeviceProps) => (
<Wrapper
$animation={isConfirmed ? AnimationDirection.Down : AnimationDirection.Up}
$isCancelable={!!rest.onCancel}
data-testid="@prompts/confirm-on-device"
onClick={e => e.stopPropagation()}
>
Expand Down
142 changes: 34 additions & 108 deletions packages/product-components/src/components/ConfirmOnDevice/ConfirmOnDeviceContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,17 @@
import { ReactNode } from 'react';

import styled, { css, useTheme } from 'styled-components';
import styled, { css } from 'styled-components';

import { Icon, useElevation } from '@trezor/components';
import { Column, Row, IconButton, Text } from '@trezor/components';
import { DeviceModelInternal } from '@trezor/connect';
import {
Elevation,
borders,
mapElevationToBackground,
spacingsPx,
typography,
} from '@trezor/theme';
import { borders, spacings, spacingsPx } from '@trezor/theme';

import { RotateDeviceImage } from '../RotateDeviceImage/RotateDeviceImage';

const Column = styled.div`
display: flex;
`;

const Title = styled.div`
display: flex;
justify-content: center;
${typography.body};
color: ${({ theme }) => theme.textDefault};
`;

const Left = styled(Column)``;

const Middle = styled(Column)`
flex: 1;
justify-content: center;
flex-direction: column;
`;

const Right = styled(Column)``;

const Steps = styled.div`
display: flex;
margin-top: ${spacingsPx.sm};
max-width: 200px;
padding: 0 ${spacingsPx.sm};
justify-content: center;
`;

const CloseWrapper = styled.div`
margin-left: ${spacingsPx.xs};
`;

const Close = styled.div<{ $elevation: Elevation }>`
border-radius: 100%;
cursor: pointer;
background: ${mapElevationToBackground};
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.1s;
:hover {
opacity: 0.7;
}
`;

const Success = styled.div`
display: flex;
flex: 1;
${typography.callout}
color: ${({ theme }) => theme.textPrimaryDefault};
text-align: center;
justify-content: center;
`;

const Step = styled.div<{ $isActive: boolean }>`
width: 18px;
height: 4px;
flex: 1;
height: ${spacingsPx.xxs};
border-radius: ${borders.radii.xxs};
margin-right: ${spacingsPx.xxs};
background: ${({ theme }) => theme.backgroundNeutralSubdued};
${({ $isActive }) =>
Expand All @@ -86,10 +21,6 @@ const Step = styled.div<{ $isActive: boolean }>`
`}
`;

const StyledRotateDeviceImage = styled(RotateDeviceImage)`
height: 34px;
`;

const isStepActive = (index: number, activeStep?: number) => {
if (!activeStep) {
return false;
Expand All @@ -114,39 +45,38 @@ export interface ConfirmOnDeviceProps {

export const ConfirmOnDeviceContent = ({
title,
steps,
steps = 3,
activeStep,
onCancel,
successText,
deviceModelInternal,
deviceUnitColor,
}: ConfirmOnDeviceProps) => {
const { elevation } = useElevation();
const hasSteps = steps && activeStep !== undefined;
const theme = useTheme();

return (
<>
<Left>
<StyledRotateDeviceImage
deviceModel={deviceModelInternal}
deviceColor={deviceUnitColor}
animationHeight="34px"
animationWidth="34px"
/>
</Left>
<Row gap={spacings.xl}>
<RotateDeviceImage
deviceModel={deviceModelInternal}
deviceColor={deviceUnitColor}
animationHeight="34px"
/>

<Middle>
<Title>{title}</Title>
<Column alignItems="center">
<Text>{title}</Text>

{successText && hasSteps && activeStep > steps && (
<Success data-testid="@prompts/confirm-on-device/success">
<Text
typographyStyle="callout"
variant="primary"
data-testid="@prompts/confirm-on-device/success"
>
{successText}
</Success>
</Text>
)}

{hasSteps && activeStep <= steps && (
<Steps>
<Row gap={spacings.xxs} width={70} margin={{ top: spacings.xs }}>
{Array.from(Array(steps).keys()).map((step, index) => (
<Step
key={step}
Expand All @@ -156,23 +86,19 @@ export const ConfirmOnDeviceContent = ({
}`}
/>
))}
</Steps>
</Row>
)}
</Middle>

<Right>
<CloseWrapper>
{onCancel && (
<Close
$elevation={elevation}
onClick={onCancel}
data-testid="@confirm-on-device/close-button"
>
<Icon name="close" size={16} color={theme.textOnTertiary} />
</Close>
)}
</CloseWrapper>
</Right>
</>
</Column>

{onCancel && (
<IconButton
icon="close"
onClick={onCancel}
data-testid="@confirm-on-device/close-button"
variant="tertiary"
size="small"
/>
)}
</Row>
);
};
8 changes: 7 additions & 1 deletion packages/product-components/src/components/RotateDeviceImage/RotateDeviceImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,13 @@ export const RotateDeviceImage = ({
width={animationWidth}
/>
) : (
<StyledImage alt="Trezor" image={`TREZOR_${deviceModel}`} className={className} />
<StyledImage
width={animationWidth}
height={animationHeight}
alt="Trezor"
image={`TREZOR_${deviceModel}`}
className={className}
/>
)}
</>
);
Expand Down
2 changes: 0 additions & 2 deletions packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ type DeviceStatusProps = {

const DeviceWrapper = styled.div<{ $isLowerOpacity: boolean }>`
display: flex;
width: 24px;
opacity: ${({ $isLowerOpacity }) => $isLowerOpacity && 0.4};
`;

Expand All @@ -44,7 +43,6 @@ export const DeviceStatus = ({
deviceModel={deviceModel}
deviceColor={device?.features?.unit_color}
animationHeight="34px"
animationWidth="24px"
/>
</DeviceWrapper>
);
Expand Down

0 comments on commit 0a1fca5

Please sign in to comment.