feat(suite): quick-action refactotring, simplification of the UI and …

…adding a update icon

packages/components/src/components/ComponentWithSubIcon/ComponentWithSubIcon.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { allowedIconFrameProps, iconVariants } from '../Icon/Icon';
+import {
+    ComponentWithSubIcon as ComponentWithSubIconComponent,
+    ComponentWithSubIconProps,
+} from './IconWithSubIcon';
+import { IconName, icons } from '@suite-common/icons/src/icons';
+import { getFramePropsStory } from '../../utils/frameProps';
+import { Icon } from '@suite-common/icons';
+
+const meta: Meta = {
+    title: 'IconWithSubIcon',
+    component: ComponentWithSubIconComponent,
+} as Meta;
+export default meta;
+
+const iconNames = Object.keys(icons) as IconName[];
+
+export const ComponentWithSubIcon: StoryObj<IconWithSubIconProps> = {
+    args: {
+        subIconProps: {
+            name: 'check',
+        },
+        subIconBackground: {
+            variant: 'destructive',
+        },
+        children: <Icon name="tor" />,
+    },
+    argTypes: {
+        name: {
+            options: iconNames,
+            control: {
+                type: 'select',
+            },
+        },
+
+        variant: {
+            options: iconVariants,
+            control: {
+                type: 'select',
+            },
+        },
+        ...getFramePropsStory(allowedIconFrameProps).argTypes,
+    },
+};

packages/components/src/components/ComponentWithSubIcon/ComponentWithSubIcon.tsx

@@ -0,0 +1,63 @@
+import styled, { useTheme } from 'styled-components';
+import { ExclusiveColorOrVariant, getColorForIconVariant, Icon, IconProps } from '../Icon/Icon';
+import { borders, spacingsPx } from '@trezor/theme';
+import { makePropsTransient, TransientProps } from '../../utils/transientProps';
+import { getIconSize } from '@suite-common/icons';
+import { ReactNode } from 'react';
+
+const Container = styled.div`
+    position: relative;
+`;
+
+type SubIconWrapperProps = TransientProps<ExclusiveColorOrVariant> & {
+    $subIconColor: string;
+    $subIconSize: number;
+};
+
+const SubIconWrapper = styled.div<SubIconWrapperProps>`
+    position: absolute;
+
+    right: -${({ $subIconSize }) => $subIconSize / 2}px;
+    top: -${({ $subIconSize }) => $subIconSize / 2}px;
+
+    background-color: ${({ theme, $variant, $color }) =>
+        getColorForIconVariant({ theme, variant: $variant, color: $color })};
+    border-radius: ${borders.radii.full};
+    border: 1px solid ${({ $subIconColor }) => $subIconColor};
+    padding: ${spacingsPx.xxxs};
+`;
+
+export type IconWithSubIconProps = IconProps & {
+    subIconProps: IconProps;
+    subIconBackground: ExclusiveColorOrVariant;
+    children: ReactNode;
+};
+
+export const IconWithSubIcon = ({
+    subIconProps,
+    subIconBackground,
+    children,
+}: IconWithSubIconProps) => {
+    const theme = useTheme();
+
+    const iconColor = getColorForIconVariant({
+        theme,
+        color: subIconProps.color,
+        variant: subIconProps.variant,
+    });
+
+    const subIconSize = getIconSize(subIconProps.size ?? 12);
+
+    return (
+        <Container>
+            {children}
+            <SubIconWrapper
+                {...makePropsTransient(subIconBackground)}
+                $subIconColor={iconColor}
+                $subIconSize={subIconSize}
+            >
+                <Icon {...subIconProps} size={subIconSize} />
+            </SubIconWrapper>
+        </Container>
+    );
+};

packages/components/src/components/Icon/Icon.tsx

@@ -17,7 +17,7 @@ import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/framePro
 export const iconVariants = ['primary', 'tertiary', 'info', 'warning', 'destructive'] as const;
 export type IconVariant = Extract<UIVariant, (typeof iconVariants)[number]>;
 
-type ExclusiveColorOrVariant =
+export type ExclusiveColorOrVariant =
     | { variant?: IconVariant; color?: undefined }
     | {
           variant?: undefined;
@@ -36,14 +36,17 @@ const variantColorMap: Record<IconVariant, Color> = {
     destructive: 'iconAlertRed',
 };
 
-const getColorForIconVariant = ({
+export const getColorForIconVariant = ({
     variant,
     theme,
     color,
 }: Pick<IconProps, 'color' | 'variant'> & { theme: DefaultTheme }):
     | CSSColor
     | 'inherit'
     | string => {
+    console.log('color', color);
+    console.log('variant', variant, variant !== undefined ? theme[variantColorMap[variant]] : '');
+
     if (color !== undefined) {
         return color;
     }

packages/components/src/index.ts

@@ -18,6 +18,7 @@ export * from './components/buttons/Button/Button';
 export * from './components/buttons/ButtonGroup/ButtonGroup';
 export * from './components/buttons/IconButton/IconButton';
 export * from './components/Icon/Icon';
+export { IconWithSubIcon } from './components/IconWithSubIcon/IconWithSubIcon';
 export * from './components/buttons/PinButton/PinButton';
 export * from './components/buttons/TextButton/TextButton';
 export * from './components/buttons/TooltipButton/TooltipButton';

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/CustomBackend.tsx

@@ -0,0 +1,39 @@
+import styled, { useTheme } from 'styled-components';
+import { useTranslation } from '../../../../../../hooks/suite';
+import { useEnabledBackends } from '../../utils';
+import { Icon, Tooltip } from '@trezor/components';
+import { NavBackends } from '../NavBackends';
+import { borders } from '@trezor/theme';
+
+const StyledCheckIcon = styled(Icon)`
+    position: absolute;
+    bottom: 50%;
+    left: 50%;
+    background: ${({ theme }) => theme.backgroundSurfaceElevationNegative};
+    border-radius: ${borders.radii.full};
+`;
+
+export const CustomBackend = () => {
+    const theme = useTheme();
+    const { translationString } = useTranslation();
+
+    const enabledBackends = useEnabledBackends();
+    const isCustomBackendIconVisible = enabledBackends.length > 0;
+
+    console.log(enabledBackends);
+
+    const CheckIcon = () => (
+        <StyledCheckIcon name="checkActive" size={12} color={theme.iconPrimaryDefault} />
+    );
+
+    return (
+        isCustomBackendIconVisible && (
+            <Tooltip content={translationString('TR_CUSTOM_BACKEND')} cursor="pointer">
+                <div style={{ position: 'absolute' }}>
+                    <NavBackends customBackends={enabledBackends} />
+                    <CheckIcon />
+                </div>
+            </Tooltip>
+        )
+    );
+};

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/HelperIcons.tsx → packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/DebugAndExperimental.tsx

@@ -44,7 +44,7 @@ const DebugModeIcon = styled(HelperIcon)`
     background-color: ${({ theme }) => theme.backgroundAlertRedBold};
 `;
 
-export const HelperIcons = () => {
+export const DebugAndExperimental = () => {
     const isEapEnabled = useSelector(state => state.desktopUpdate.allowPrerelease);
     const isExperimental = useSelector(state => !!state.suite.settings.experimental);
     const showExperimental = isEapEnabled || isExperimental;

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/HideBalances.tsx

@@ -0,0 +1,24 @@
+import { setDiscreetMode } from '../../../../../../actions/settings/walletSettingsActions';
+import { useDispatch, useSelector, useTranslation } from '../../../../../../hooks/suite';
+import { selectIsDiscreteModeActive } from '../../../../../../reducers/wallet/settingsReducer';
+import { ActionButton } from './../ActionButton';
+
+export const HideBalances = () => {
+    const dispatch = useDispatch();
+    const { translationString } = useTranslation();
+
+    const isDiscreetModeActive = useSelector(selectIsDiscreteModeActive);
+    const translationLabel = isDiscreetModeActive ? 'TR_SHOW_BALANCES' : 'TR_HIDE_BALANCES';
+
+    const handleDiscreetModeClick = () => dispatch(setDiscreetMode(!isDiscreetModeActive));
+
+    return (
+        <ActionButton
+            title={translationString(translationLabel)}
+            icon={isDiscreetModeActive ? 'hide' : 'show'}
+            onClick={handleDiscreetModeClick}
+            variant="tertiary"
+            size="small"
+        />
+    );
+};

packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import { spacingsPx } from '@trezor/theme';
+
+import { Update } from './Update';
+import { DebugAndExperimental } from './DebugAndExperimental';
+import { Tor } from './Tor';
+import { HideBalances } from './HideBalances';
+import { CustomBackend } from './CustomBackend';
+
+const Container = styled.div`
+    display: flex;
+    border-top: 1px solid ${({ theme }) => theme.borderElevation1};
+`;
+
+const ActionsContainer = styled.div`
+    flex: 1;
+    position: relative;
+    display: flex;
+    gap: ${spacingsPx.xxs};
+    padding: ${spacingsPx.xxs};
+    align-items: stretch;
+
+    > * {
+        flex: 1;
+    }
+`;
+
+export const QuickActions = () => (
+    <Container>
+        <ActionsContainer>
+            <Update />
+            <DebugAndExperimental />
+            <CustomBackend />
+            <Tor />
+            <HideBalances />
+        </ActionsContainer>
+    </Container>
+);