feat: Popover for Upgrade icon in the status bar

packages/components/src/components/Image/images.ts

@@ -18,8 +18,6 @@ export const SVG_IMAGES = {
  DEVICE_ANOTHER_SESSION: 'device-another-session.svg',
  CONNECT_DEVICE: 'connect-device.svg',
  ERROR_404: 'error-404.svg',
- EARLY_ACCESS: 'early-access.svg',
- EARLY_ACCESS_DISABLE: 'early-access-disable.svg',
  INVITY_LOGO: 'invity-logo.svg',
  COINMARKET_AVATAR: 'coinmarket-avatar.svg',
  COINMARKET_SUCCESS: 'coinmarket-success.svg',

packages/components/src/components/NewModal/NewModal.tsx

@@ -6,6 +6,8 @@ import {
  Elevation,
  mapElevationToBackground,
  mapElevationToBackgroundToken,
+ nextElevation,
+ prevElevation,
  spacingsPx,
 } from '@trezor/theme';
 
@@ -147,7 +149,9 @@ const NewModalBase = ({
  const frameProps = pickAndPrepareFrameProps(rest, allowedNewModalFrameProps);
  const { scrollElementRef, onScroll, ShadowContainer, ShadowTop, ShadowBottom } =
  useScrollShadow();
- const modalBackgroundColor = mapElevationToBackgroundToken({ $elevation: MODAL_ELEVATION });
+ const modalBackgroundColor = mapElevationToBackgroundToken({
+ $elevation: nextElevation[MODAL_ELEVATION],
+ });
  const hasHeader = onBackClick || onCancel || heading || description;
 
  useEvent('keydown', (e: KeyboardEvent) => {
@@ -157,7 +161,7 @@ const NewModalBase = ({
  });
 
  return (
- <ElevationContext baseElevation={MODAL_ELEVATION}>
+ <ElevationContext baseElevation={prevElevation[MODAL_ELEVATION]}>
  <NewModalContext.Provider value={{ variant }}>
  <Container
  $elevation={MODAL_ELEVATION}

packages/components/src/components/Tooltip/TooltipBox.tsx

@@ -29,9 +29,10 @@ const TooltipContainerStyled = styled.div<TooltipContainerStyledProps>`
  border-radius: ${TOOLTIP_BORDER_RADIUS};
  text-align: left;
  border: solid 1.5px ${palette.darkGray100};
+ margin: ${spacingsPx.xxxs};
  max-width: ${props => props.$maxWidth}px;
- ${typography.hint}
 
+ ${typography.hint}
  > div {
  padding: ${({ $isLarge, $isWithHeader }) => getContainerPadding($isLarge, $isWithHeader)};
  }

packages/components/src/config/colors.ts

@@ -1,20 +1,31 @@
 import { boxShadows, colorVariants } from '@trezor/theme';
 
-// TODO: button hover color could be derived from its based color by applying something like opacity/darkening
-// same goes for gradients
+// TODO: button hover color could be derived from its based color
+//  by applying something like opacity/darkening, same goes for gradients
 
 type LightThemeProps = typeof intermediaryTheme.light;
 type DarkThemeProps = typeof intermediaryTheme.dark;
 
-// extracts values for common props (eg. NEUE_BG_GREEN: "#00854D" | "#e3ede0")
+// Extracts values for common props (eg. NEUE_BG_GREEN: "#00854D" | "#e3ede0")
 type CommonThemeProps = {
  [K in keyof LightThemeProps & keyof DarkThemeProps]: LightThemeProps[K] | DarkThemeProps[K];
 };
 
 type PropsOnlyInLightTheme = Omit<LightThemeProps, keyof DarkThemeProps>;
 type PropsOnlyInDarkTheme = Omit<DarkThemeProps, keyof LightThemeProps>;
 
-// all common theme props and their values are nicely listed, props that are specific to given theme are marked optional
+/**
+ * IMPORTANT:
+ *
+ * You have to do this in the every package where you are accessing these theme props
+ * 1) create `styled.d.ts` file in the root of the project with overwrite of DefaultTheme
+ * 2) add `typescript-styled-plugin` into the packages devDependencies
+ *
+ * See `suite` package for reference.
+ */
+
+// All common theme props and their values are nicely listed,
+// props that are specific to given theme are marked optional.
 export type SuiteThemeColors = CommonThemeProps &
  Partial<PropsOnlyInDarkTheme> &
  Partial<PropsOnlyInLightTheme>;

packages/suite-desktop-ui/package.json

@@ -36,6 +36,7 @@
  "@types/react": "18.2.79",
  "@types/react-dom": "18.2.19",
  "stylelint": "^16.2.1",
- "stylelint-config-standard": "^36.0.0"
+ "stylelint-config-standard": "^36.0.0",
+ "typescript-styled-plugin": "^0.18.3"
  }
 }

packages/suite-desktop-ui/src/support/DesktopUpdater.tsx

@@ -18,7 +18,6 @@ import {
 import { UpdateState } from 'src/reducers/suite/desktopUpdateReducer';
 import { ModalContextProvider } from 'src/support/suite/ModalContext';
 import { getAppUpdatePayload } from 'src/utils/suite/analytics';
-import { selectRouteName } from 'src/reducers/suite/routerReducer';
 
 import { Available } from './DesktopUpdater/Available';
 import { Downloading } from './DesktopUpdater/Downloading';
@@ -33,11 +32,8 @@ interface DesktopUpdaterProps {
 export const DesktopUpdater = ({ children }: DesktopUpdaterProps) => {
  const dispatch = useDispatch();
  const { desktopUpdate } = useSelector(state => state);
- const routeName = useSelector(selectRouteName);
 
- // Closing a modal opened by auto updater outside of device settings might confuse some users,
- // especially on app start if closing it unexpectedly by clicking outside.
- const isSettingsRoute = routeName === 'settings-index';
+ const desktopUpdateState = desktopUpdate.state;
 
  useEffect(() => {
  desktopApi.on('update/allow-prerelease', params => dispatch(allowPrerelease(params)));
@@ -90,41 +86,41 @@ export const DesktopUpdater = ({ children }: DesktopUpdaterProps) => {
  }
 
  // Non visible states
- if ([UpdateState.Checking, UpdateState.NotAvailable].includes(desktopUpdate.state)) {
+ if ([UpdateState.Checking, UpdateState.NotAvailable].includes(desktopUpdateState)) {
  return false;
  }
 
  const isEarlyAccessState = [
  UpdateState.EarlyAccessDisable,
  UpdateState.EarlyAccessEnable,
- ].includes(desktopUpdate.state);
+ ].includes(desktopUpdateState);
 
  // Enable to setup Early Access even after updater error (when desktopUpdate.latest is undefined).
  if (!isEarlyAccessState && !desktopUpdate.latest) {
  return false;
  }
 
  return true;
- }, [desktopUpdate.modalVisibility, desktopUpdate.state, desktopUpdate.latest]);
+ }, [desktopUpdate.modalVisibility, desktopUpdateState, desktopUpdate.latest]);
 
  const getUpdateModal = () => {
- switch (desktopUpdate.state) {
+ switch (desktopUpdateState) {
  case UpdateState.EarlyAccessEnable:
  return <EarlyAccessEnable hideWindow={hideWindow} />;
  case UpdateState.EarlyAccessDisable:
  return <EarlyAccessDisable hideWindow={hideWindow} />;
  case UpdateState.Available:
  return (
  <Available
- hideWindow={hideWindow}
+ onCancel={hideWindow}
  latest={desktopUpdate.latest}
- isCancelable={isSettingsRoute}
+ isAutomaticUpdateEnabled={desktopUpdate.isAutomaticUpdateEnabled}
  />
  );
  case UpdateState.Downloading:
  return <Downloading hideWindow={hideWindow} progress={desktopUpdate.progress} />;
  case UpdateState.Ready:
- return <Ready hideWindow={hideWindow} isCancelable={isSettingsRoute} />;
+ return <Ready hideWindow={hideWindow} />;
  default:
  return null;
  }