Skip to content

Commit

Permalink
[DDW-788] Emotion.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@renanvalentin
renanvalentin committed Jan 19, 2022
1 parent be4d776 commit 6bc45dc
Show file tree
Hide file tree
Showing 3 changed files with 189 additions and 63 deletions.
67 changes: 35 additions & 32 deletions source/renderer/app/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ 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 { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
import { Routes } from './Routes';
import { daedalusTheme } from './themes/daedalus';
import { themeOverrides } from './themes/overrides';
Expand Down Expand Up @@ -49,39 +50,41 @@ export default class App extends Component<{
!isNodeStopped; // Daedalus is not shutting down

return (
<Fragment>
<ThemeManager variables={themeVars} />
<Provider stores={stores} actions={actions}>
<ThemeProvider
theme={daedalusTheme}
skins={SimpleSkins}
variables={SimpleDefaults}
themeOverrides={themeOverrides}
>
<IntlProvider
{...{ locale, key: locale, messages: translations[locale] }}
<EmotionThemeProvider theme={{}}>
<Fragment>
<ThemeManager variables={themeVars} />
<Provider stores={stores} actions={actions}>
<ThemeProvider
theme={daedalusTheme}
skins={SimpleSkins}
variables={SimpleDefaults}
themeOverrides={themeOverrides}
>
<Fragment>
<Router history={history}>
<Routes />
</Router>
{mobxDevTools}
{[
isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
<DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
),
<NotificationsContainer key="notificationsContainer" />,
]}
{canShowNews && [
<NewsFeedContainer key="newsFeedList" />,
<NewsOverlayContainer key="newsFeedOverlay" />,
]}
</Fragment>
</IntlProvider>
</ThemeProvider>
</Provider>
</Fragment>
<IntlProvider
{...{ locale, key: locale, messages: translations[locale] }}
>
<Fragment>
<Router history={history}>
<Routes />
</Router>
{mobxDevTools}
{[
isActiveDialog(ABOUT) && <AboutDialog key="aboutDialog" />,
isActiveDialog(DAEDALUS_DIAGNOSTICS) && (
<DaedalusDiagnosticsDialog key="daedalusDiagnosticsDialog" />
),
<NotificationsContainer key="notificationsContainer" />,
]}
{canShowNews && [
<NewsFeedContainer key="newsFeedList" />,
<NewsOverlayContainer key="newsFeedOverlay" />,
]}
</Fragment>
</IntlProvider>
</ThemeProvider>
</Provider>
</Fragment>
</EmotionThemeProvider>
);
}
}
64 changes: 39 additions & 25 deletions source/renderer/app/components/staking/widgets/ThumbPoolContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@
import BigNumber from 'bignumber.js';
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import SVGInline from 'react-svg-inline';
import classnames from 'classnames';
import clockIcon from '../../../assets/images/clock-corner.inline.svg';
import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg';
import styles from './ThumbPoolContent.scss';
import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
import StakePool from '../../../domains/StakePool';
import {
Expand All @@ -12,6 +15,21 @@ import {
} from '../../../config/stakingConfig';
import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
import { formattedWalletAmount } from '../../../utils/formatters';
import {
Container,
Ticker,
Ranking,
RankingStar,
Rewards,
AdaIcon,
NoDataDash,
NoDataDashIcon,
Clock,
ClockIcon,
ColorBand,
GreyColorBand,
SaturationBar,
} from './ThumbPoolContent.styles';

type Props = {
stakePool: StakePool,
Expand Down Expand Up @@ -52,74 +70,70 @@ export default class ThumbPoolContent extends Component<Props> {
} = stakePool;
const color = getColorFromRange(ranking, numberOfRankedStakePools);

const componentClassnames = classnames([
styles.component,
!IS_SATURATION_DATA_AVAILABLE ? styles.hideSaturation : null,
]);

const saturationClassnames = classnames([
styles.saturationBar,
styles[getSaturationColor(saturation)],
]);

return (
<div className={componentClassnames}>
<div className={styles.ticker}>{ticker}</div>
<Container isSaturationDataAvailable={IS_SATURATION_DATA_AVAILABLE}>
<Ticker isSaturationDataAvailable={IS_SATURATION_DATA_AVAILABLE}>
{ticker}
</Ticker>
{isGridRewardsView &&
(IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
<div className={styles.rewards}>
<Rewards>
{this.formattedRewards(potentialRewards)}
<SVGInline svg={adaIcon} className={styles.adaIcon} />
</div>
<AdaIcon svg={adaIcon} />
</Rewards>
) : (
<div className={styles.noDataDash}>
<SVGInline svg={noDataDashBigImage} />
</div>
))}
{!isGridRewardsView &&
(IS_RANKING_DATA_AVAILABLE ? (
<div className={styles.ranking} style={{ color }}>
<Ranking style={{ color }}>
{nonMyopicMemberRewards ? (
ranking
) : (
<>
{numberOfRankedStakePools + 1}
<sup>*</sup>
<RankingStar>*</RankingStar>
</>
)}
</div>
</Ranking>
) : (
<div className={styles.noDataDash}>
<SVGInline svg={noDataDashBigImage} />
</div>
<NoDataDash>
<NoDataDashIcon svg={noDataDashBigImage} />
</NoDataDash>
))}
{IS_SATURATION_DATA_AVAILABLE && (
<div className={saturationClassnames}>
<SaturationBar>
<span
style={{
width: `${parseFloat(saturation).toFixed(2)}%`,
}}
/>
</div>
</SaturationBar>
)}
{IS_RANKING_DATA_AVAILABLE ? (
<>
{retiring && (
<div className={styles.clock}>
<SVGInline svg={clockIcon} className={styles.clockIcon} />
</div>
<Clock>
<ClockIcon svg={clockIcon} />
</Clock>
)}
<div
className={styles.colorBand}
<ColorBand
style={{
background: color,
}}
/>
</>
) : (
<div className={styles.greyColorBand} />
<GreyColorBand />
)}
</div>
</Container>
);
}
}
121 changes: 115 additions & 6 deletions source/renderer/app/components/staking/widgets/ThumbPoolContent.styles.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,57 @@
// @flow
import SVGInline from 'react-svg-inline';
import styled from '@emotion/styled';

export const Container = styled.div`
height: 69px;
position: relative;
width: 78px;
padding-top: ${({ isSaturationDataAvailable }) =>
isSaturationDataAvailable ? '9px' : '11px'};
`;

export const Ticker = styled.div`
color: var(--theme-staking-stake-pool-ticker-color);
font-family: var(--font-semibold);
font-size: 14px;
letter-spacing: -0.5px;
line-height: 1;
text-align: center;
margin-bottom: ${({ isSaturationDataAvailable }) =>
isSaturationDataAvailable ? '1px' : '5px'};
`;

export const Ranking = styled.div`
font-family: var(--font-bold);
font-size: 20px;
font-weight: bold;
position: relative;
text-align: center;
`;

export const RankingStar = styled.sub`
font-family: Verdana;
font-size: 14px;
margin-left: -1px;
position: absolute;
top: -2px;
`;

export const Rewards = styled.div`
font-family: var(--font-regular);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1.57;
padding: 3px 0;
position: relative;
text-align: center;
`;

export const AdaIcon = styled(SVGInline)`
svg {
height: 11px;
margin-left: 3px;
width: 10px;
& > g {
Expand All @@ -15,11 +62,11 @@ export const AdaIcon = styled(SVGInline)`
}
`;

export const ClockIcon = styled(SVGInline)`
svg {
height: 15px;
width: 15px;
}
export const NoDataDash = styled.div`
align-items: center;
display: flex;
height: 27px;
justify-content: center;
`;

export const NoDataDashIcon = styled(SVGInline)`
Expand All @@ -33,3 +80,65 @@ export const NoDataDashIcon = styled(SVGInline)`
}
}
`;

export const Clock = styled.div`
background: var(--theme-staking-stake-pool-retirement-background-color);
border-radius: 0 2px 0 4px;
height: 18px;
position: absolute;
right: 0;
top: 0;
width: 18px;
`;

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

export const ColorBand = styled.div`
bottom: 0;
display: block;
height: 5px;
left: 0;
position: absolute;
width: 100%;
`;

export const GreyColorBand = styled.div`
bottom: 0;
display: block;
height: 5px;
left: 0;
position: absolute;
width: 100%;
`;

const colors = {
green: 'var(--theme-staking-stake-pool-saturation-green-color)',
orange: 'var(--theme-staking-stake-pool-saturation-orange-color)',
red: 'var(--theme-staking-stake-pool-saturation-red-color)',
yellow: 'var(--theme-staking-stake-pool-saturation-yellow-color)',
};

export const SaturationBar = styled.div`
bottom: 0;
display: block;
height: 5px;
left: 0;
position: absolute;
width: 100%;
span {
border-radius: 2px;
bottom: 0;
height: inherit;
left: 0;
position: absolute;
top: 0;
}
background: ${({ color }) => colors[color]};
`;

0 comments on commit 6bc45dc

Please sign in to comment.