From 228511bf1265107ad74d3d1779fcf2abce530a34 Mon Sep 17 00:00:00 2001 From: isstuev Date: Thu, 19 Sep 2024 13:29:39 +0200 Subject: [PATCH] design fixes --- package.json | 2 +- public/static/logo.svg | 3 - theme/components/Tag/Tag.ts | 10 ++++ ui/pages/Chart.tsx | 4 +- ui/shared/chart/ChartIntervalSelect.tsx | 6 +- ui/shared/chart/ChartMenu.tsx | 3 +- ui/shared/chart/ChartWatermarkIcon.tsx | 25 ++++++++ ui/shared/chart/ChartWidget.tsx | 66 +++++++++++---------- ui/shared/chart/ChartWidgetContent.tsx | 15 +---- ui/shared/tagGroupSelect/TagGroupSelect.tsx | 5 +- ui/stats/StatsFilters.tsx | 4 +- yarn.lock | 8 +-- 12 files changed, 93 insertions(+), 58 deletions(-) delete mode 100644 public/static/logo.svg create mode 100644 ui/shared/chart/ChartWatermarkIcon.tsx diff --git a/package.json b/package.json index 1f80243919..f93fb29f70 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ }, "dependencies": { "@blockscout/bens-types": "1.4.1", - "@blockscout/stats-types": "^1.6.2-alpha", + "@blockscout/stats-types": "2.0.0", "@blockscout/visualizer-types": "0.2.0", "@chakra-ui/react": "2.7.1", "@chakra-ui/theme-tools": "^2.0.18", diff --git a/public/static/logo.svg b/public/static/logo.svg deleted file mode 100644 index 4545aeb9c1..0000000000 --- a/public/static/logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/theme/components/Tag/Tag.ts b/theme/components/Tag/Tag.ts index 6ea4c41d10..70f90a1752 100644 --- a/theme/components/Tag/Tag.ts +++ b/theme/components/Tag/Tag.ts @@ -47,6 +47,16 @@ const sizes = { lineHeight: 5, }, }), + md: definePartsStyle({ + container: { + minH: 8, + minW: 8, + fontSize: 'sm', + px: '6px', + py: '6px', + lineHeight: 5, + }, + }), }; const baseStyleContainer = defineStyle({ diff --git a/ui/pages/Chart.tsx b/ui/pages/Chart.tsx index 6bce9667c2..4afc423a17 100644 --- a/ui/pages/Chart.tsx +++ b/ui/pages/Chart.tsx @@ -169,7 +169,7 @@ const Chart = () => { backLink={ backLink } contentAfter={ isMobile ? shareAndMenu : undefined } secondRow={ info?.description || lineQuery.data?.info?.description } - // withTextAd + withTextAd /> @@ -177,7 +177,7 @@ const Chart = () => { { lineQuery.data?.info?.resolutions && lineQuery.data?.info?.resolutions.length > 2 && ( <> - { isMobile ? 'Res.' : 'Resolution' } + { isMobile ? 'Res.' : 'Resolution' } void; isLoading?: boolean; + selectTagSize?: TagProps['size']; } -const ChartIntervalSelect = ({ interval, onIntervalChange, isLoading }: Props) => { +const ChartIntervalSelect = ({ interval, onIntervalChange, isLoading, selectTagSize }: Props) => { return ( <> - items={ intervalListShort } onChange={ onIntervalChange } value={ interval }/> + items={ intervalListShort } onChange={ onIntervalChange } value={ interval } tagSize={ selectTagSize }/> } colorScheme="gray" - variant="ghost" + variant="simple" as={ IconButton } > @@ -132,6 +132,7 @@ const ChartMenu = ({ items, title, description, units, isLoading, chartRef, href display="flex" alignItems="center" onClick={ hasShare ? handleShare : onCopy } + closeOnSelect={ hasShare ? false : true } > { hasShare ? 'Share' : 'Copy link' } diff --git a/ui/shared/chart/ChartWatermarkIcon.tsx b/ui/shared/chart/ChartWatermarkIcon.tsx new file mode 100644 index 0000000000..36ea3c56f1 --- /dev/null +++ b/ui/shared/chart/ChartWatermarkIcon.tsx @@ -0,0 +1,25 @@ +import type { IconProps } from '@chakra-ui/react'; +import { Icon, useColorModeValue } from '@chakra-ui/react'; +import React from 'react'; + +const WatermarkIcon = (props: IconProps) => { + const watermarkColor = useColorModeValue('link', 'white'); + return ( + + { /* eslint-disable-next-line max-len */ } + + + ); +}; + +export default WatermarkIcon; diff --git a/ui/shared/chart/ChartWidget.tsx b/ui/shared/chart/ChartWidget.tsx index 28f1829812..1ec2c9cd1a 100644 --- a/ui/shared/chart/ChartWidget.tsx +++ b/ui/shared/chart/ChartWidget.tsx @@ -65,46 +65,52 @@ const ChartWidget = ({ /> ); + const chartHeader = ( + + + + { title } + + + { description && ( + + { description } + + ) } + + ); + return ( - - - - { href ? ( - - { title } - - ) : title - } - - - { description && ( - - { description } - - ) } - - + + { href ? ( + + { chartHeader } + + ) : chartHeader } - blockscout logo + ); }; diff --git a/ui/shared/tagGroupSelect/TagGroupSelect.tsx b/ui/shared/tagGroupSelect/TagGroupSelect.tsx index 4bf53b2ce1..e861bc8c77 100644 --- a/ui/shared/tagGroupSelect/TagGroupSelect.tsx +++ b/ui/shared/tagGroupSelect/TagGroupSelect.tsx @@ -1,8 +1,10 @@ +import type { TagProps } from '@chakra-ui/react'; import { HStack, Tag } from '@chakra-ui/react'; import React from 'react'; type Props = { items: Array<{ id: T; title: string }>; + tagSize?: TagProps['size']; } & ( { value: T; @@ -15,7 +17,7 @@ type Props = { } ) -const TagGroupSelect = ({ items, value, isMulti, onChange }: Props) => { +const TagGroupSelect = ({ items, value, isMulti, onChange, tagSize }: Props) => { const onItemClick = React.useCallback((event: React.SyntheticEvent) => { const itemValue = (event.currentTarget as HTMLDivElement).getAttribute('data-id') as T; if (isMulti) { @@ -44,6 +46,7 @@ const TagGroupSelect = ({ items, value, isMulti, onChange }: P fontWeight={ 500 } cursor="pointer" onClick={ onItemClick } + size={ tagSize } > { item.title } diff --git a/ui/stats/StatsFilters.tsx b/ui/stats/StatsFilters.tsx index 66a6471478..75a4476d04 100644 --- a/ui/stats/StatsFilters.tsx +++ b/ui/stats/StatsFilters.tsx @@ -37,7 +37,7 @@ const StatsFilters = ({ return ( - +