diff --git a/CHANGELOG.md b/CHANGELOG.md index 31a404965e..1232f81bf4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ### Features +- Implemented hover tooltips for menu ([PR 2938](https://github.com/input-output-hk/daedalus/pull/2938)) - Improved UI regarding the Hardware Wallet public key export error ([PR 2922](https://github.com/input-output-hk/daedalus/pull/2922)) - Added ASCII name to token header when metadata name is missing ([PR 2904](https://github.com/input-output-hk/daedalus/pull/2904)) - Improved IPC by reducing the amount of messages from periodic events ([PR 2892](https://github.com/input-output-hk/daedalus/pull/2892)) @@ -12,6 +13,7 @@ ### Fixes +- Fixed stake pool list styling ([PR 2920](https://github.com/input-output-hk/daedalus/pull/2920)) - Fixed PopOver overlap ([PR 2954](https://github.com/input-output-hk/daedalus/pull/2954)) - Fixed tooltip being hidden in several places ([PR-2934](https://github.com/input-output-hk/daedalus/pull/2934)) - Adjusted padding for search field in stake pools ([PR 2945](https://github.com/input-output-hk/daedalus/pull/2945)) diff --git a/source/renderer/app/components/sidebar/SidebarCategory.messages.ts b/source/renderer/app/components/sidebar/SidebarCategory.messages.ts new file mode 100644 index 0000000000..8e683e9616 --- /dev/null +++ b/source/renderer/app/components/sidebar/SidebarCategory.messages.ts @@ -0,0 +1,24 @@ +import { defineMessages } from 'react-intl'; + +export const messages = defineMessages({ + wallets: { + id: 'sidebar.categoryTooltip.wallets', + defaultMessage: '!!!Wallets', + description: 'Text for the tooltip of wallets category', + }, + staking: { + id: 'sidebar.categoryTooltip.staking', + defaultMessage: '!!!Staking', + description: 'Text for the tooltip of staking category', + }, + settings: { + id: 'sidebar.categoryTooltip.settings', + defaultMessage: '!!!Settings', + description: 'Text for the tooltip of settings category', + }, + voting: { + id: 'sidebar.categoryTooltip.voting', + defaultMessage: '!!!Voting', + description: 'Text for the tooltip of voting category', + }, +}); diff --git a/source/renderer/app/components/sidebar/SidebarCategory.tsx b/source/renderer/app/components/sidebar/SidebarCategory.tsx index a4412b1cde..cd5fa92a55 100644 --- a/source/renderer/app/components/sidebar/SidebarCategory.tsx +++ b/source/renderer/app/components/sidebar/SidebarCategory.tsx @@ -1,42 +1,53 @@ -import React, { Component } from 'react'; -// @ts-ignore ts-migrate(2305) FIXME: Module '"react"' has no exported member 'Node'. -import type { Node } from 'react'; +import React from 'react'; import SVGInline from 'react-svg-inline'; import { observer } from 'mobx-react'; import classNames from 'classnames'; import { camelCase } from 'lodash'; +import { PopOver } from 'react-polymorph/lib/components/PopOver'; +import { injectIntl } from 'react-intl'; import type { SidebarCategoryInfo } from '../../config/sidebarConfig'; import styles from './SidebarCategory.scss'; +import { messages } from './SidebarCategory.messages'; +import type { Intl } from '../../types/i18nTypes'; +import { TOOLTIP_DELAY } from '../../config/timingConfig'; type Props = { category: SidebarCategoryInfo; + intl: Intl; isActive: boolean; onClick: (...args: Array) => any; - content?: Node; + content?: React.ReactNode; }; -@observer -class SidebarCategory extends Component { - render() { - const { category, isActive, onClick, content } = this.props; - const { name, icon, route } = category; - const className = camelCase(name); - const componentStyles = classNames( - styles.component, - className, - styles[className], - { - [styles.active]: isActive, - } - ); - const iconClassName = classNames(styles.icon, styles[`${className}Icon`]); - return ( +function SidebarCategory({ + category, + intl, + isActive, + onClick, + content, +}: Props) { + const { name, icon, route, tooltipTextId } = category; + const className = camelCase(name); + const componentStyles = classNames( + styles.component, + className, + styles[className], + isActive && styles.active + ); + const iconClassName = classNames(styles.icon, styles[`${className}Icon`]); + return ( + - ); - } + + ); } -export default SidebarCategory; +export default injectIntl(observer(SidebarCategory)); diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index cda9cd648a..dd8d96ba0f 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -94,20 +94,25 @@ .table { border-style: hidden; + margin-bottom: -10px; user-select: text; width: 100%; .thead { background: var(--theme-bordered-box-background-color); border-radius: 4px 4px 0 0; - box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); display: block; - margin: -20px -20px 0; + margin: -10px -20px 0; padding: 0 20px; position: sticky; top: 0; + transition: box-shadow 0.1s ease-in-out; z-index: $sticky-header-z-index; + &.stickyHeader { + box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); + } + .tr { border: 0; display: flex; @@ -145,7 +150,7 @@ } } - .tr { + .tr:not(:last-child) { border-bottom: 1px solid var(--theme-staking-table-border-color); } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index 687e5223ff..af8646876b 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -12,13 +12,13 @@ import styles from './StakePoolsTable.scss'; import StakePool from '../../../domains/StakePool'; import LoadingSpinner from '../../widgets/LoadingSpinner'; import BorderedBox from '../../widgets/BorderedBox'; -import { StakePoolsTableHeaderCell } from './StakePoolsTableHeaderCell'; import { useSortedStakePoolList, useCreateColumns, StakePoolsOrder, StakePoolSortableProps, } from './hooks'; +import { StakePoolsTableHeader } from './StakePoolsTableHeader'; export const defaultTableOrdering: Record< StakePoolSortableProps, @@ -186,34 +186,14 @@ function StakePoolsTableComponent({ {sortedStakePoolList.length > 0 && (
-
- {headerGroups.map((headerGroup) => ( - /* eslint-disable-next-line react/jsx-key */ -
- {headerGroup.headers.map((column) => ( - - {column.render('Header')} - - ))} -
- ))} -
+ {({ width }) => ( diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeader.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeader.tsx new file mode 100644 index 0000000000..a08ea9ef71 --- /dev/null +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeader.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { observer } from 'mobx-react'; +import classNames from 'classnames'; +import { HeaderGroup } from 'react-table'; +import { StakePoolsTableHeaderCell } from './StakePoolsTableHeaderCell'; +import StakePool from '../../../domains/StakePool'; +import { + useInViewPort, + StakePoolsOrder, + StakePoolSortableProps, +} from './hooks'; +import styles from './StakePoolsTable.scss'; + +type Props = { + headerGroups: HeaderGroup[]; + stakePoolsOrder: StakePoolsOrder; + stakePoolsSortBy: StakePoolSortableProps; + onHandleSort: (name: string) => void; + onTableHeaderMouseEnter: () => void; + onTableHeaderMouseLeave: () => void; +}; + +export const Component = ({ + stakePoolsSortBy, + stakePoolsOrder, + headerGroups, + onHandleSort, + onTableHeaderMouseEnter, + onTableHeaderMouseLeave, +}: Props) => { + const { setTargetRef, isInViewport } = useInViewPort(); + + return ( + <> +
+
+ {headerGroups.map((headerGroup) => ( + /* eslint-disable-next-line react/jsx-key */ +
+ {headerGroup.headers.map((column) => ( + + {column.render('Header')} + + ))} +
+ ))} +
+ + ); +}; + +export const StakePoolsTableHeader = observer(Component); diff --git a/source/renderer/app/components/staking/stake-pools/hooks/index.ts b/source/renderer/app/components/staking/stake-pools/hooks/index.ts index ef17e7c126..e839f07946 100644 --- a/source/renderer/app/components/staking/stake-pools/hooks/index.ts +++ b/source/renderer/app/components/staking/stake-pools/hooks/index.ts @@ -1,4 +1,5 @@ export { useCreateColumns } from './useCreateColumns'; +export { useInViewPort } from './useInViewPort'; export { useSortedStakePoolList, StakePoolsOrder, diff --git a/source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx b/source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx new file mode 100644 index 0000000000..30a466ae89 --- /dev/null +++ b/source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx @@ -0,0 +1,29 @@ +import { useRef, useState, useCallback } from 'react'; + +export const useInViewPort = () => { + const [isInViewport, setIsInViewport] = useState(true); + const targetRef = useRef(null); + const observerRef = useRef( + new IntersectionObserver((entries) => { + entries.forEach((entry) => { + setIsInViewport(entry.isIntersecting); + }); + }) + ); + + // React will call the ref callback twice. Once when the component mounts and again when it unmounts. + // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node + const setTargetRef = useCallback((target: HTMLElement) => { + if (targetRef.current) { + observerRef.current.unobserve(targetRef.current); + } + + if (target) { + observerRef.current.observe(target); + } + + targetRef.current = target; + }, []); + + return { isInViewport, setTargetRef }; +}; diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.scss b/source/renderer/app/components/widgets/NewsFeedIcon.scss index d737e47e72..71c824550d 100644 --- a/source/renderer/app/components/widgets/NewsFeedIcon.scss +++ b/source/renderer/app/components/widgets/NewsFeedIcon.scss @@ -3,21 +3,7 @@ right: 29px; top: 20px; - &.notificationDot { - @extend .dot; - - &:after { - background: var( - --theme-news-feed-icon-red-dot-background-color - ) !important; - } - } - - &.updateDot { - @extend .dot; - } - - .icon { + .button { border-radius: 50%; cursor: pointer; display: block; @@ -25,6 +11,30 @@ position: relative; width: 44px; + &:hover { + background-color: var( + --theme-news-feed-icon-toggle-hover-background-color + ); + } + + &.notificationDot { + @extend .dot; + + &:after { + background: var(--theme-news-feed-icon-red-dot-background-color); + } + } + + &.updateDot { + @extend .dot; + + &:after { + background: var(--theme-news-feed-icon-green-dot-background-color); + } + } + } + + .icon { svg { height: 22px; left: 11px; @@ -36,18 +46,11 @@ stroke: var(--theme-news-feed-icon-color); } } - - &:hover { - background-color: var( - --theme-news-feed-icon-toggle-hover-background-color - ); - } } } .dot { &:after { - background: var(--theme-news-feed-icon-green-dot-background-color); border-radius: 12.5px; content: ''; display: block; @@ -59,3 +62,7 @@ width: 8px; } } + +.tooltip { + white-space: nowrap; +} diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.tsx b/source/renderer/app/components/widgets/NewsFeedIcon.tsx index 70f9f971ee..83794383c6 100644 --- a/source/renderer/app/components/widgets/NewsFeedIcon.tsx +++ b/source/renderer/app/components/widgets/NewsFeedIcon.tsx @@ -1,33 +1,60 @@ -import React, { Component } from 'react'; +import React from 'react'; import SVGInline from 'react-svg-inline'; import classNames from 'classnames'; +import { PopOver } from 'react-polymorph/lib/components/PopOver'; +import { defineMessages, injectIntl } from 'react-intl'; import newsFeedIcon from '../../assets/images/top-bar/news-feed-icon.inline.svg'; import styles from './NewsFeedIcon.scss'; +import type { Intl } from '../../types/i18nTypes'; +import { TOOLTIP_DELAY } from '../../config/timingConfig'; type Props = { + intl: Intl; onNewsFeedIconClick: (...args: Array) => any; newsFeedIconClass?: string; hasNotification: boolean; hasUpdate: boolean; }; -export default class NewsFeedIcon extends Component { - render() { - const { - onNewsFeedIconClick, - newsFeedIconClass, - hasNotification, - hasUpdate, - } = this.props; - const componentClasses = classNames([ - styles.component, - hasNotification && !hasUpdate ? styles.notificationDot : null, - hasUpdate ? styles.updateDot : null, - newsFeedIconClass, - ]); - return ( - - ); - } + +const messages = defineMessages({ + iconTooltip: { + id: 'news.newsfeed.iconTooltip', + defaultMessage: '!!!Newsfeed', + description: 'Newsfeed', + }, +}); + +function NewsFeedIcon({ + intl, + onNewsFeedIconClick, + newsFeedIconClass, + hasNotification, + hasUpdate, +}: Props) { + const buttonClasses = classNames([ + styles.button, + hasNotification && !hasUpdate && styles.notificationDot, + hasUpdate && styles.updateDot, + newsFeedIconClass, + ]); + return ( +
+ + {intl.formatMessage(messages.iconTooltip)} + + } + > + + +
+ ); } + +export default injectIntl(NewsFeedIcon); diff --git a/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx b/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx index f60a313d46..edadca28dd 100644 --- a/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx +++ b/source/renderer/app/components/widgets/NodeSyncStatusIcon.tsx @@ -7,6 +7,7 @@ import { formattedNumber } from '../../utils/formatters'; import spinnerIcon from '../../assets/images/top-bar/node-sync-spinner.inline.svg'; import syncedIcon from '../../assets/images/top-bar/node-sync-synced.inline.svg'; import styles from './NodeSyncStatusIcon.scss'; +import { TOOLTIP_DELAY } from '../../config/timingConfig'; const messages = defineMessages({ blocksSynced: { @@ -32,13 +33,15 @@ export default class NodeSyncStatusIcon extends Component { const statusIcon = isSynced ? syncedIcon : spinnerIcon; const componentClasses = classNames([ styles.component, - isSynced ? null : styles.syncing, - hasTadaIcon ? styles.hasTadaIcon : null, + !isSynced && styles.syncing, + hasTadaIcon && styles.hasTadaIcon, ]); const percentage = syncPercentage.toFixed(syncPercentage === 100 ? 0 : 2); return (
setVisible(true)} - onMouseLeave={() => setVisible(false)} - > +
+ {intl.formatMessage(messages[isDiscreetMode ? 'off' : 'on'])} {` `} diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json index 1511a2307d..55a5ed7363 100755 --- a/source/renderer/app/i18n/locales/en-US.json +++ b/source/renderer/app/i18n/locales/en-US.json @@ -251,6 +251,7 @@ "loading.screen.validatingChunk": "Verifying on-disk blockchain state", "loading.screen.validatingChunkDescription": "Verifying the integrity of the blockchain calculating hashes", "news.newsfeed.empty": "Newsfeed is empty", + "news.newsfeed.iconTooltip": "Newsfeed", "news.newsfeed.noFetch": "Trying to fetch the newsfeed...", "news.newsfeed.title": "Newsfeed", "noDiskSpace.error.overlayContent": "Daedalus requires at least {diskSpaceRequired} of hard drive space to operate. Your computer is missing {diskSpaceMissing} of available space. Please delete some files to increase available hard drive space to continue using Daedalus.

It is recommended to have at least 15% of hard drive space available ({diskSpaceRecommended} in your case) for normal and stable operation of the operating system and installed programs. We strongly recommend that you free up at least that amount of space from your hard drive.", @@ -384,6 +385,10 @@ "settings.wallets.currency.poweredBy.label": "Powered by ", "settings.wallets.currency.selectLabel": "Select currency", "settings.wallets.currency.titleLabel": "Display ada balances in other currency", + "sidebar.categoryTooltip.settings": "Settings", + "sidebar.categoryTooltip.staking": "Staking", + "sidebar.categoryTooltip.voting": "Voting", + "sidebar.categoryTooltip.wallets": "Wallets", "sidebar.wallets.addWallet": "Add wallet", "sidebar.wallets.search.placeholder": "Filter", "sidebar.wallets.sortByBalanceButton": "Balance", diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json index 9c352aa991..3221757835 100755 --- a/source/renderer/app/i18n/locales/ja-JP.json +++ b/source/renderer/app/i18n/locales/ja-JP.json @@ -148,9 +148,9 @@ "dapp.transaction.request.transactionFee.label": "トランザクション手数料", "dapp.transaction.request.walletsDropdown.addWalletLabel": "+ ウォレット追加", "dapp.transaction.request.walletsDropdown.placeholder": "ウォレットを選択してください", - "discreetMode.discreetToggle.description": "設定で自動ディスクリートモードに切り替えられます。", - "discreetMode.discreetToggle.off": "ディスクリートモードオフ.", - "discreetMode.discreetToggle.on": "ディスクリートモードオン.", + "discreetMode.discreetToggle.description": "設定で自動ディスクリートモードに切り替えられます", + "discreetMode.discreetToggle.off": "ディスクリートモードオフ。", + "discreetMode.discreetToggle.on": "ディスクリートモードオン。", "environment.apiName.cardano": "Cardano", "environment.currency.ada": "ADA", "environment.network.alonzo_purple": "Alonzo Purple", @@ -251,6 +251,7 @@ "loading.screen.validatingChunk": "ディスクのブロックチェーンステータスの検証", "loading.screen.validatingChunkDescription": "ブロックチェーンのハッシュ計算の整合性を検証します", "news.newsfeed.empty": "Newsfeed is empty", + "news.newsfeed.iconTooltip": "ニュースフィード", "news.newsfeed.noFetch": "ニュースフィードを読み込んでいます...", "news.newsfeed.title": "ニュースフィード", "noDiskSpace.error.overlayContent": "Daedalusを動作させるには、ハードディスクに{diskSpaceRequired}以上の空き容量が必要です。ご使用のコンピューターには空き容量が{diskSpaceMissing}不足しています。Daedalusのご利用を続けるためには、ファイルをいくつか削除して空き容量を増やしてください。

オペレーティングシステムとインストール済みプログラムを正常かつ安定した状態で動作させるには、ハードディスクに少なくとも15%（ご使用のコンピューターの場合は{diskSpaceRecommended}）の空き容量が必要です。ハードディスクにこれ以上の空き容量を確保してください。", @@ -384,6 +385,10 @@ "settings.wallets.currency.poweredBy.label": "提供：", "settings.wallets.currency.selectLabel": "通貨を選択してください", "settings.wallets.currency.titleLabel": "ADA残高を別の通貨で表示する", + "sidebar.categoryTooltip.settings": "設定", + "sidebar.categoryTooltip.staking": "ステーキング", + "sidebar.categoryTooltip.voting": "投票", + "sidebar.categoryTooltip.wallets": "ウォレット", "sidebar.wallets.addWallet": "ウォレット追加", "sidebar.wallets.search.placeholder": "フィルター", "sidebar.wallets.sortByBalanceButton": "残高", diff --git a/source/renderer/app/themes/daedalus/cardano.ts b/source/renderer/app/themes/daedalus/cardano.ts index ba3d02ee9a..0387de1a91 100644 --- a/source/renderer/app/themes/daedalus/cardano.ts +++ b/source/renderer/app/themes/daedalus/cardano.ts @@ -896,7 +896,7 @@ export const CARDANO_THEME_OUTPUT = { '--theme-staking-font-color-light': 'rgba(94, 96, 102, 0.7)', '--theme-staking-font-color-lighter': 'rgba(94, 96, 102, 0.5)', '--theme-staking-table-head-background-color': 'rgba(32, 34, 37, 0.07)', - '--theme-staking-table-border-color': '#d2d3d3', + '--theme-staking-table-border-color': 'rgba(94, 96, 102, 0.15)', '--theme-staking-link-color': 'rgba(28, 172, 99, 1)', '--theme-staking-link-color-light': 'rgba(28, 172, 99, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(32, 34, 37, 0.1)', diff --git a/source/renderer/app/themes/daedalus/dark-blue.ts b/source/renderer/app/themes/daedalus/dark-blue.ts index 00f43cff9c..fac12d93dd 100644 --- a/source/renderer/app/themes/daedalus/dark-blue.ts +++ b/source/renderer/app/themes/daedalus/dark-blue.ts @@ -900,7 +900,7 @@ export const DARK_BLUE_THEME_OUTPUT = { '--theme-staking-font-color-light': 'rgba(233, 244, 254, 0.7)', '--theme-staking-font-color-lighter': 'rgba(233, 244, 254, 0.5)', '--theme-staking-table-head-background-color': '#536370', - '--theme-staking-table-border-color': '#c6cdd6', + '--theme-staking-table-border-color': 'rgba(233, 244, 254, 0.15)', '--theme-staking-link-color': 'rgba(32, 181, 107, 1)', '--theme-staking-link-color-light': 'rgba(32, 181, 107, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(233, 244, 254, 0.1)', diff --git a/source/renderer/app/themes/daedalus/dark-cardano.ts b/source/renderer/app/themes/daedalus/dark-cardano.ts index 86bf01adff..946a8837e0 100644 --- a/source/renderer/app/themes/daedalus/dark-cardano.ts +++ b/source/renderer/app/themes/daedalus/dark-cardano.ts @@ -885,7 +885,7 @@ export const DARK_CARDANO_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': '#1fc1c3', '--theme-staking-link-color-light': 'rgba(31, 193, 195, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/flight-candidate.ts b/source/renderer/app/themes/daedalus/flight-candidate.ts index bed89525e1..ddb94c2a95 100644 --- a/source/renderer/app/themes/daedalus/flight-candidate.ts +++ b/source/renderer/app/themes/daedalus/flight-candidate.ts @@ -883,7 +883,7 @@ export const FLIGHT_CANDIDATE_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': '#ffb923', '--theme-staking-link-color-light': 'rgba(255, 185, 35, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/incentivized-testnet.ts b/source/renderer/app/themes/daedalus/incentivized-testnet.ts index 8ce56bef49..0f10dd23b2 100644 --- a/source/renderer/app/themes/daedalus/incentivized-testnet.ts +++ b/source/renderer/app/themes/daedalus/incentivized-testnet.ts @@ -886,7 +886,7 @@ export const INCENTIVIZED_TESTNET_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': 'rgba(246, 154, 178, 1)', '--theme-staking-link-color-light': 'rgba(246, 154, 178, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/light-blue.ts b/source/renderer/app/themes/daedalus/light-blue.ts index 71c3abf722..ecc36039ce 100644 --- a/source/renderer/app/themes/daedalus/light-blue.ts +++ b/source/renderer/app/themes/daedalus/light-blue.ts @@ -892,7 +892,7 @@ export const LIGHT_BLUE_THEME_OUTPUT = { '--theme-staking-font-color-light': 'rgba(94, 96, 102, 0.7)', '--theme-staking-font-color-lighter': 'rgba(94, 96, 102, 0.5)', '--theme-staking-table-head-background-color': '#f1f3f5', - '--theme-staking-table-border-color': '#c6cdd6', + '--theme-staking-table-border-color': 'rgba(94, 96, 102, 0.15)', '--theme-staking-link-color': 'rgba(41, 111, 208, 1)', '--theme-staking-link-color-light': 'rgba(41, 111, 208, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(52, 70, 94, 0.1)', diff --git a/source/renderer/app/themes/daedalus/shelley-testnet.ts b/source/renderer/app/themes/daedalus/shelley-testnet.ts index 4017b6330a..a04ecc862c 100644 --- a/source/renderer/app/themes/daedalus/shelley-testnet.ts +++ b/source/renderer/app/themes/daedalus/shelley-testnet.ts @@ -883,7 +883,7 @@ export const SHELLEY_TESTNET_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': '#898ee6', '--theme-staking-link-color-light': 'rgba(137, 142, 230, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/white.ts b/source/renderer/app/themes/daedalus/white.ts index 3e63b73bea..5bc117b24c 100644 --- a/source/renderer/app/themes/daedalus/white.ts +++ b/source/renderer/app/themes/daedalus/white.ts @@ -886,7 +886,7 @@ export const WHITE_THEME_OUTPUT = { '--theme-staking-font-color-light': '#2d2d2db3', '--theme-staking-font-color-lighter': 'rgba(45, 45, 45, 0.5)', '--theme-staking-table-head-background-color': '#f9f9f9', - '--theme-staking-table-border-color': 'rgba(45, 45, 45, 0.1)', + '--theme-staking-table-border-color': 'rgba(45, 45, 45, 0.15)', '--theme-staking-link-color': '#29b595', '--theme-staking-link-color-light': 'rgba(41, 181, 149, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(94, 96, 102, 0.07)', diff --git a/source/renderer/app/themes/daedalus/yellow.ts b/source/renderer/app/themes/daedalus/yellow.ts index ea12aa398a..cc66661e19 100644 --- a/source/renderer/app/themes/daedalus/yellow.ts +++ b/source/renderer/app/themes/daedalus/yellow.ts @@ -882,7 +882,7 @@ export const YELLOW_THEME_OUTPUT = { '--theme-staking-font-color-light': '#2d2d2db3', '--theme-staking-font-color-lighter': 'rgba(45, 45, 45, 0.5)', '--theme-staking-table-head-background-color': 'rgba(45, 45, 45, 0.07)', - '--theme-staking-table-border-color': '#e1dac6', + '--theme-staking-table-border-color': 'rgba(45, 45, 45, 0.15)', '--theme-staking-link-color': '#d6902f', '--theme-staking-link-color-light': 'rgba(214, 144, 47, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(45, 45, 45, 0.07)', diff --git a/storybook/stories/navigation/SidebarCategory.stories.tsx b/storybook/stories/navigation/SidebarCategory.stories.tsx index aed711ea4c..ea9ccb3ced 100644 --- a/storybook/stories/navigation/SidebarCategory.stories.tsx +++ b/storybook/stories/navigation/SidebarCategory.stories.tsx @@ -10,6 +10,7 @@ const category = { name: 'Wallets', icon: walletsIcon, route: 'WALLETS', + tooltipTextId: 'wallets', }; storiesOf('Navigation|Sidebar', module) .addDecorator((story) => {story()}) // ====== Stories ======