fix(suite): Fix firmware update progress bar

packages/components/src/components/loaders/ProgressBar/ProgressBar.tsx

@@ -1,35 +1,58 @@
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
-const Wrapper = styled.div`
-    background: ${({ theme }) => theme.backgroundNeutralSubdued};
+import { CSSColor } from '@trezor/theme';
+
+const Wrapper = styled.div<{ $color: CSSColor }>`
+    background: ${({ $color }) => $color};
     width: 100%;
     overflow: hidden;
 `;
 
 type ValueProps = {
     $max: number;
     $value: number;
+    $color: CSSColor;
 };
 
 const Value = styled.div<ValueProps>`
-    background: ${({ theme }) => theme.iconPrimaryDefault};
+    background: ${({ $color }) => $color};
     height: 5px;
     max-width: 100%;
-    width: 1%;
-    transform: ${({ $max, $value }) => `scaleX(${(100 / $max) * $value})`};
-    transform-origin: left;
-    transition: transform 0.5s;
+    width: ${({ $max, $value }) => `calc((100% / ${$max}) * ${$value})`};
+    transition: width 0.5s;
 `;
 
 export type ProgressBarProps = {
     max?: number;
     value: number;
+    backgroundColor?: CSSColor;
+    foregroundColor?: CSSColor;
+    'data-testid'?: string;
+    /**
+     *  @deprecated Legacy prop - do not add non-standard properties
+     */
+    className?: string;
 };
 
-export const ProgressBar = ({ max = 100, value, ...props }: ProgressBarProps) => (
-    <Wrapper {...props}>
-        <Value $max={max} $value={value} />
-    </Wrapper>
-);
+export const ProgressBar = ({
+    max = 100,
+    value,
+    backgroundColor,
+    foregroundColor,
+    className,
+    'data-testid': dataTestId,
+}: ProgressBarProps) => {
+    const theme = useTheme();
+
+    return (
+        <Wrapper
+            $color={backgroundColor || theme.backgroundNeutralSubdued}
+            data-testid={dataTestId}
+            className={className}
+        >
+            <Value $max={max} $value={value} $color={foregroundColor || theme.iconPrimaryDefault} />
+        </Wrapper>
+    );
+};
 
 ProgressBar.Value = Value;

packages/components/src/utils/frameProps.tsx

@@ -80,7 +80,7 @@ export type FramePropsKeys = keyof FrameProps;
 type TransientFrameProps = TransientProps<FrameProps>;
 
 const getValueWithUnit = (value: string | number) =>
-    typeof value === 'string' ? value : `${value}px`;
+    typeof value === 'number' ? `${value}px` : value;
 
 export const pickAndPrepareFrameProps = (
     props: Record<string, any>,

packages/suite/src/components/firmware/FirmwareProgressBar.tsx

@@ -1,54 +1,15 @@
 import styled, { useTheme } from 'styled-components';
 
-import { Icon, ProgressBar, variables } from '@trezor/components';
-import { borders, spacingsPx } from '@trezor/theme';
+import { Box, Column, Icon, ProgressBar, Row, Text } from '@trezor/components';
+import { spacings } from '@trezor/theme';
 import { TranslationKey } from '@suite-common/intl-types';
 import { FirmwareOperationStatus, useFirmwareInstallation } from '@suite-common/firmware';
 
 import { Translation } from '../suite';
 
-const Wrapper = styled.div`
-    display: flex;
-    border-radius: ${borders.radii.xs};
-    padding: ${spacingsPx.lg} ${spacingsPx.xl};
-    width: 100%;
-    font-size: ${variables.FONT_SIZE.SMALL};
-    color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY};
-    align-items: center;
-
-    ${variables.SCREEN_QUERY.ABOVE_LAPTOP} {
-        &:last-child {
-            border-radius: 0 0 ${borders.radii.md} ${borders.radii.md};
-        }
-    }
-`;
-
-const Label = styled.div`
-    display: flex;
-    margin-right: ${spacingsPx.lg};
-    font-weight: ${variables.FONT_WEIGHT.MEDIUM};
-`;
-
-// eslint-disable-next-line local-rules/no-override-ds-component
-const StyledProgressBar = styled(ProgressBar)`
-    display: flex;
-    margin-right: ${spacingsPx.lg};
-    border-radius: ${borders.radii.xxs};
-    background: ${({ theme }) => theme.legacy.STROKE_GREY_ALT};
-    flex: 1;
-
-    ${ProgressBar.Value} {
-        height: 3px;
-        position: relative;
-        border-radius: ${borders.radii.xxs};
-    }
-`;
 const Percentage = styled.div`
-    display: flex;
-    margin-left: ${spacingsPx.sm};
-    font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD};
     font-variant-numeric: tabular-nums;
-    height: ${spacingsPx.xl};
+    width: 30px;
 `;
 
 const mapOperationToTransaltionId: Record<
@@ -68,20 +29,29 @@ export const FirmwareProgressBar = () => {
     const isDone = progress === 100;
 
     return (
-        <Wrapper>
-            {operation && (
-                <Label>
-                    <Translation id={mapOperationToTransaltionId[operation]} />
-                </Label>
-            )}
-            <StyledProgressBar value={progress} />
-            <Percentage>
-                {isDone ? (
-                    <Icon name="check" color={theme.legacy.TYPE_GREEN} size={24} />
-                ) : (
-                    `${progress} %`
-                )}
-            </Percentage>
-        </Wrapper>
+        <Box width="100%">
+            <Column margin={{ vertical: spacings.md, horizontal: spacings.lg }}>
+                <Text typographyStyle="hint" variant="tertiary">
+                    {operation ? <Translation id={mapOperationToTransaltionId[operation]} /> : ' '}
+                </Text>
+
+                <Row gap={spacings.lg} justifyContent="space-between">
+                    <ProgressBar
+                        value={progress}
+                        backgroundColor={theme.backgroundNeutralSubtleOnElevationNegative}
+                    />
+                    <Percentage>
+                        {isDone ? (
+                            <Icon name="check" variant="primary" size={24} />
+                        ) : (
+                            <Text typographyStyle="highlight">
+                                {progress}
+                                {'\u00A0'}%
+                            </Text>
+                        )}
+                    </Percentage>
+                </Row>
+            </Column>
+        </Box>
     );
 };