Skip to content

Commit

Permalink
[DDW-788] Chakra-ui - cleaner version
Browse files Browse the repository at this point in the history
  • Loading branch information
@renanvalentin
renanvalentin committed Feb 8, 2022
1 parent 8da492f commit e70a04f
Show file tree
Hide file tree
Showing 4 changed files with 210 additions and 179 deletions.
105 changes: 35 additions & 70 deletions source/renderer/app/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { SimpleDefaults } from 'react-polymorph/lib/themes/simple';
import DevTools from 'mobx-react-devtools';
import { Router } from 'react-router-dom';
import { IntlProvider } from 'react-intl';
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { Routes } from './Routes';
import { daedalusTheme } from './themes/daedalus';
import { themeOverrides } from './themes/overrides';
Expand All @@ -21,29 +20,6 @@ import type { StoresMap } from './stores/index';
import type { ActionsMap } from './actions/index';
import NewsFeedContainer from './containers/news/NewsFeedContainer';

const theme = extendTheme({
fonts: {
body: 'NotoSans-Regular, NotoSansCJKjp-Regular',
heading: 'NotoSans-Regular, NotoSansCJKjp-Regular',
mono: 'NotoSans-Regular, NotoSansCJKjp-Regular',
},
components: {
Text: {
baseStyle: {
fontFamily: 'NotoSans-Regular, NotoSansCJKjp-Regular',
},
},
},
colors: {
stakePoolSaturation: {
green: '--theme-staking-stake-pool-saturation-green-color',
orange: '--theme-staking-stake-pool-saturation-orange-color',
red: '--theme-staking-stake-pool-saturation-red-color',
yellow: '--theme-staking-stake-pool-saturation-yellow-color',
},
},
});

@observer
class App extends Component<{
stores: StoresMap;
Expand Down Expand Up @@ -73,54 +49,43 @@ class App extends Component<{
!isNodeStopping && // Daedalus is not shutting down
!isNodeStopped;

// Daedalus is not shutting down
if (document.documentElement) {
document.documentElement.lang = locale;
}

return (
<ChakraProvider theme={theme}>
<Fragment>
{/* @ts-ignore ts-migrate(2769) FIXME: No overload matches this call. */}
<ThemeManager variables={themeVars} />
<Provider stores={stores} actions={actions}>
<ThemeProvider
theme={daedalusTheme}
skins={SimpleSkins}
variables={SimpleDefaults}
themeOverrides={themeOverrides}
<Fragment>
{/* @ts-ignore ts-migrate(2769) FIXME: No overload matches this call. */}
<ThemeManager variables={themeVars} />
<Provider stores={stores} actions={actions}>
<ThemeProvider
theme={daedalusTheme}
skins={SimpleSkins}
variables={SimpleDefaults}
themeOverrides={themeOverrides}
>
<IntlProvider
{...{ locale, key: locale, messages: translations[locale] }}
>
<IntlProvider
{...{
locale,
key: locale,
messages: translations[locale],
}}
>
<Fragment>
<Router history={history}>
<Routes />
</Router>
{mobxDevTools}
{[
// @ts-ignore ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
// @ts-ignore ts-migrate(2345) FIXME: Argument of type 'string' is not assignable to par... Remove this comment to see the full error message
isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
<DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
),
<NotificationsContainer key="notificationsContainer" />,
]}
{canShowNews && [
<NewsFeedContainer key="newsFeedList" />,
<NewsOverlayContainer key="newsFeedOverlay" />,
]}
</Fragment>
</IntlProvider>
</ThemeProvider>
</Provider>
</Fragment>
</ChakraProvider>
<Fragment>
<Router history={history}>
<Routes />
</Router>
{mobxDevTools}
{[
// @ts-ignore Argument of type 'string' is not assignable to parameter of type 'ApplicationDialog'.ts(2345)
isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
// @ts-ignore Argument of type 'string' is not assignable to parameter of type 'ApplicationDialog'.ts(2345)
isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
<DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
),
<NotificationsContainer key="notificationsContainer" />,
]}
{canShowNews && [
<NewsFeedContainer key="newsFeedList" />,
<NewsOverlayContainer key="newsFeedOverlay" />,
]}
</Fragment>
</IntlProvider>
</ThemeProvider>
</Provider>
</Fragment>
);
}
}
Expand Down
35 changes: 0 additions & 35 deletions source/renderer/app/components/staking/widgets/ThumbPoolContent.styles.ts
View file

This file was deleted.

134 changes: 134 additions & 0 deletions source/renderer/app/components/staking/widgets/ThumbPoolContent.styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import React from 'react';
import SVGInline from 'react-svg-inline';
import { Box, Text, Center, Flex } from '@chakra-ui/react';
import styled from '@emotion/styled';
import clockIcon from '../../../assets/images/clock-corner.inline.svg';
import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg';

export const Container = ({ children, isSaturationDataAvailable }) => (
<Flex
h="16"
w="20"
flexDirection="column"
pt={!isSaturationDataAvailable ? '3' : '2'}
pos="relative"
>
{children}
</Flex>
);

export const Ticker = ({ children, isSaturationDataAvailable }) => (
<Center mb={!isSaturationDataAvailable ? '1' : 'px'}>
<Text
fontWeight="semibold"
fontSize="sm"
sx={{ color: 'var(--theme-staking-stake-pool-ticker-color)' }}
lineHeight="none"
>
{children}
</Text>
</Center>
);

export const Rewards = ({ children }) => (
<Center py="0.5" pos="relative" flex="1 1 auto">
<Text fontSize="sm" fontWeight="semibold">
{children}
</Text>
<AdaIcon svg={adaIcon} />
</Center>
);

export const NoDataDash = () => (
<Center flex="1 1 auto">
<NoDataDashIcon svg={noDataDashBigImage} />
</Center>
);

export const Ranking = ({ children, color }) => (
<Center flex="1" style={{ color }} mt="1">
<Text fontSize="xl" fontWeight="bold" lineHeight="none">
{children}
</Text>
</Center>
);

export const RankingStar = ({ children }) => (
<Text display="inline-block">{children}</Text>
);

export const AdaIcon = styled(SVGInline)`
svg {
height: 11px;
margin-left: 3px;
width: 10px;
& > g {
& > g {
stroke: var(--theme-staking-wallet-row-ticker-ada-icon-fill-color);
}
}
}
`;

export const NoDataDashIcon = styled(SVGInline)`
svg {
height: 3px;
width: 12px;
path {
fill: var(--theme-staking-stake-pool-grey-color) !important;
opacity: 1 !important;
}
}
`;

export const Clock = ({ children }) => (
<Box pos="absolute" right="0" top="0">
{children}
</Box>
);

export const ClockIcon = styled(SVGInline)`
svg {
height: 15px;
width: 15px;
}
`;

export const ColorBand = ({ color }) => (
<Box h="1" w="full" sx={{ background: color }} flexShrink="0" />
);

export const GreyColorBand = () => (
<Box
h="1"
w="full"
sx={{ background: 'var(--theme-staking-stake-pool-grey-color)' }}
flexShrink="0"
/>
);

export const SaturationBar = ({ width, color }) => (
<Center my="1">
<Flex
h="1"
w="10"
sx={{
background:
'var(--theme-staking-stake-pool-saturation-background-color)',
}}
borderRadius="sm"
>
<Box
as="span"
h="1"
sx={{
width: `${width}%`,
}}
bg={`stakePoolSaturation.${color}`}
/>
</Flex>
</Center>
);
Loading

0 comments on commit e70a04f

Please sign in to comment.