Skip to content

Commit 145c774

Browse files
author
Lucas Araujo
committed
[DDW-796] Refactor and voting phases
1 parent 516f47b commit 145c774

File tree

17 files changed

+293
-100
lines changed

17 files changed

+293
-100
lines changed

‎source/renderer/app/components/voting/voting-info/CurrentPhase.messages.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// @flow
2+
import { defineMessages } from 'react-intl';
3+
4+
export const messages = defineMessages({
5+
currentFundName: {
6+
id: 'voting.currentPhase.fundName',
7+
defaultMessage: '!!!Fund{currentVotingFundNumber}',
8+
description: 'Current fund name',
9+
},
10+
});

‎source/renderer/app/components/voting/voting-info/CurrentFund.scss‎ renamed to ‎source/renderer/app/components/voting/voting-info/CurrentPhase.scss‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
@import '../votingConfig';
22

3-
.component {
3+
.root {
44
@extend %regularText;
55
align-items: start;
66
background-color: var(--theme-button-flat-background-color);
77
border-radius: 5px;
88
display: flex;
99
flex-direction: column;
10-
height: 175px;
1110
padding: 20px;
1211
width: 271px;
1312

@@ -16,23 +15,32 @@
1615
font-family: var(--font-bold);
1716
font-size: 18px;
1817
line-height: 1.33;
18+
margin-bottom: 11px;
1919
}
2020

21-
.endDateBlock {
21+
.block {
2222
align-items: start;
2323
display: flex;
2424
flex-direction: column;
25-
margin-bottom: 20px;
26-
margin-top: 11px;
2725

28-
.endDateText {
26+
.label {
2927
color: var(--theme-button-flat-text-color);
3028
display: block;
3129
}
3230

33-
.endDate {
31+
.value {
3432
color: var(--theme-button-flat-text-color);
3533
font-family: var(--font-medium);
3634
}
35+
36+
& + .block {
37+
margin-top: 11px;
38+
}
39+
}
40+
41+
.rectangle {
42+
background-color: var(--theme-voting-separator-color);
43+
height: 1px;
44+
opacity: 0.15;
3745
}
3846
}

‎source/renderer/app/components/voting/voting-info/CurrentFund.js‎ renamed to ‎source/renderer/app/components/voting/voting-info/FundResults.js‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React from 'react';
33
import { injectIntl } from 'react-intl';
44
import {
5-
VOTING_REGISTRATION_CAST_END_DATE,
5+
VOTING_CAST_END_DATE,
66
CURRENT_VOTING_FUND_NUMBER,
77
} from '../../../config/votingConfig';
88
import {
@@ -12,8 +12,8 @@ import {
1212
import type { Locale } from '../../../../../common/types/locales.types';
1313
import { ExternalLinkButton } from '../../widgets/ExternalLinkButton';
1414
import type { Intl } from '../../../types/i18nTypes';
15-
import styles from './CurrentFund.scss';
16-
import { messages } from './CurrentFund.messages';
15+
import styles from './CurrentPhase.scss';
16+
import { messages } from './FundResults.messages';
1717

1818
type Props = {
1919
currentLocale: Locale,
@@ -23,38 +23,38 @@ type Props = {
2323
intl: Intl,
2424
};
2525

26-
function CurrentFund({
26+
function FundResults({
2727
currentLocale,
2828
currentDateFormat,
2929
currentTimeFormat,
3030
onExternalLinkClick,
3131
intl,
3232
}: Props) {
33-
const currentFundEndDate = formattedDateTime(
34-
VOTING_REGISTRATION_CAST_END_DATE,
35-
{
36-
currentLocale,
37-
...mapToLongDateTimeFormat({
38-
currentLocale,
39-
currentDateFormat,
40-
currentTimeFormat,
41-
}),
42-
}
43-
);
33+
const mappedFormats = mapToLongDateTimeFormat({
34+
currentLocale,
35+
currentDateFormat,
36+
currentTimeFormat,
37+
});
38+
39+
const endDate = formattedDateTime(VOTING_CAST_END_DATE, {
40+
currentLocale,
41+
currentDateFormat: mappedFormats.currentDateFormat,
42+
currentTimeFormat: mappedFormats.currentTimeFormat,
43+
});
4444

4545
return (
46-
<section className={styles.component}>
46+
<section className={styles.root}>
4747
<h1 className={styles.fundName}>
48-
{intl.formatMessage(messages.name, {
48+
{intl.formatMessage(messages.currentFundName, {
4949
currentVotingFundNumber: CURRENT_VOTING_FUND_NUMBER,
5050
})}
5151
</h1>
5252

53-
<div className={styles.endDateBlock}>
54-
<span className={styles.endDateText}>
55-
{intl.formatMessage(messages.headingForEndDate)}
53+
<div className={styles.block}>
54+
<span className={styles.label}>
55+
{intl.formatMessage(messages.date)}
5656
</span>
57-
<span className={styles.endDate}>{currentFundEndDate}</span>
57+
<span className={styles.value}>{endDate}</span>
5858
</div>
5959

6060
<ExternalLinkButton
@@ -67,4 +67,4 @@ function CurrentFund({
6767
);
6868
}
6969

70-
export default injectIntl(CurrentFund);
70+
export default injectIntl(FundResults);

‎source/renderer/app/components/voting/voting-info/CurrentFund.messages.js‎ renamed to ‎source/renderer/app/components/voting/voting-info/FundResults.messages.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,18 @@
22
import { defineMessages } from 'react-intl';
33

44
export const messages = defineMessages({
5-
name: {
6-
id: 'voting.currentFund.name',
7-
defaultMessage: '!!!Fund{currentVotingFundNumber}',
8-
description: 'Current fund name',
9-
},
105
headingForEndDate: {
11-
id: 'voting.currentFund.headingForEndDate',
6+
id: 'voting.fundResults.headingForEndDate',
127
defaultMessage: '!!!End of voting:',
138
description: 'Headline for end date',
149
},
1510
viewResultsLinkLabel: {
16-
id: 'voting.currentFund.viewResultsLinkLabel',
11+
id: 'voting.fundResults.viewResultsLinkLabel',
1712
defaultMessage: '!!!View results',
1813
description: 'View resuls link label for Fund{currentVotingFundNumber}',
1914
},
2015
viewResultsLinkURL: {
21-
id: 'voting.currentFund.viewResultsLinkURL',
16+
id: 'voting.fundResults.viewResultsLinkURL',
2217
defaultMessage: 'https://cardano.ideascale.com/a/pages/results',
2318
description: 'View results from Fund{currentVotingFundNumber}',
2419
},

‎source/renderer/app/components/voting/voting-info/RegisterToVote.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { injectIntl } from 'react-intl';
44
import { Button } from 'react-polymorph/lib/components/Button';
55
import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
66
import {
7-
VOTING_REGISTRATION_END_DATE,
7+
VOTING_NEW_SNAPSHOT_DATE,
88
NEXT_VOTING_FUND_NUMBER,
99
} from '../../../config/votingConfig';
1010
import {
@@ -34,7 +34,7 @@ function RegisterToVote({
3434
const [step1, setStep1] = useState(false);
3535
const [step2, setStep2] = useState(false);
3636
const canRegister = step1 && step2;
37-
const castEndDate = formattedDateTime(VOTING_REGISTRATION_END_DATE, {
37+
const castEndDate = formattedDateTime(VOTING_NEW_SNAPSHOT_DATE, {
3838
currentLocale,
3939
...mapToLongDateTimeFormat({
4040
currentLocale,
@@ -54,7 +54,7 @@ function RegisterToVote({
5454
{intl.formatMessage(messages.dateLabel)}
5555
</span>
5656
<span className={styles.date}>{castEndDate}</span>
57-
<div className={styles.separator} />
57+
<hr />
5858
<span className={styles.stepsTitle}>
5959
{intl.formatMessage(messages.stepsTitle)}
6060
</span>

‎source/renderer/app/components/voting/voting-info/RegisterToVote.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,6 @@
2222
font-family: var(--font-medium);
2323
}
2424

25-
.separator {
26-
background-color: var(--theme-voting-separator-color);
27-
height: 1px;
28-
margin: 20px 0;
29-
width: 100%;
30-
}
31-
3225
.stepsTitle {
3326
font-family: var(--font-medium);
3427
}

‎source/renderer/app/components/voting/voting-info/UpcomingFund.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
// @flow
2+
import React from 'react';
3+
import { injectIntl } from 'react-intl';
4+
import {
5+
CURRENT_VOTING_FUND_NUMBER,
6+
VOTING_SNAPSHOT_DATE,
7+
VOTING_CAST_START_DATE,
8+
VOTING_CAST_END_DATE,
9+
} from '../../../config/votingConfig';
10+
import {
11+
formattedDateTime,
12+
mapToLongDateTimeFormat,
13+
} from '../../../utils/formatters';
14+
import type { Locale } from '../../../../../common/types/locales.types';
15+
import type { Intl } from '../../../types/i18nTypes';
16+
import styles from './CurrentPhase.scss';
17+
import { messages } from './UpcomingFund.messages';
18+
import { messages as votingMessages } from './CurrentPhase.messages';
19+
20+
type Props = {
21+
currentLocale: Locale,
22+
currentDateFormat: string,
23+
currentTimeFormat: string,
24+
intl: Intl,
25+
};
26+
27+
function UpcomingFund({
28+
currentLocale,
29+
currentDateFormat,
30+
currentTimeFormat,
31+
intl,
32+
}: Props) {
33+
const mappedFormats = mapToLongDateTimeFormat({
34+
currentLocale,
35+
currentDateFormat,
36+
currentTimeFormat,
37+
});
38+
39+
const upcomingFundSnapshotDate = formattedDateTime(VOTING_SNAPSHOT_DATE, {
40+
currentLocale,
41+
currentDateFormat: mappedFormats.currentDateFormat,
42+
currentTimeFormat: mappedFormats.currentTimeFormat,
43+
});
44+
45+
const upcomingFundStartDate = formattedDateTime(VOTING_CAST_START_DATE, {
46+
currentLocale,
47+
currentDateFormat: mappedFormats.currentDateFormat,
48+
});
49+
50+
const upcomingFundEndDate = formattedDateTime(VOTING_CAST_END_DATE, {
51+
currentLocale,
52+
currentDateFormat: mappedFormats.currentDateFormat,
53+
});
54+
55+
return (
56+
<section className={styles.root}>
57+
<h1 className={styles.fundName}>
58+
{intl.formatMessage(votingMessages.currentFundName, {
59+
currentVotingFundNumber: CURRENT_VOTING_FUND_NUMBER,
60+
})}
61+
</h1>
62+
<div className={styles.block}>
63+
<span className={styles.label}>
64+
{intl.formatMessage(messages.snapshotDateLabel)}
65+
</span>
66+
<span className={styles.value}>{upcomingFundSnapshotDate}</span>
67+
</div>
68+
<div className={styles.block}>
69+
<span className={styles.label}>
70+
{intl.formatMessage(messages.votingDateLabel)}
71+
</span>
72+
<span className={styles.value}>
73+
{upcomingFundStartDate} – {upcomingFundEndDate}
74+
</span>
75+
</div>
76+
</section>
77+
);
78+
}
79+
80+
export default injectIntl(UpcomingFund);

‎source/renderer/app/components/voting/voting-info/UpcomingFund.messages.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// @flow
2+
import { defineMessages } from 'react-intl';
3+
4+
export const messages = defineMessages({
5+
snapshotDateLabel: {
6+
id: 'voting.upcomingFund.snapshotDateLabel',
7+
defaultMessage: '!!!Snapshot date:',
8+
description: 'Snapshot date label',
9+
},
10+
votingDateLabel: {
11+
id: 'voting.upcomingFund.votingDateLabel',
12+
defaultMessage: '!!!Next voting period:',
13+
description: 'Next voting date label',
14+
},
15+
});

‎source/renderer/app/components/voting/voting-info/VotingInfo.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,16 @@ import { intlShape } from 'react-intl';
55
import BorderedBox from '../../widgets/BorderedBox';
66
import type { Locale } from '../../../../../common/types/locales.types';
77
import styles from './VotingInfo.scss';
8-
import CurrentFund from './CurrentFund';
8+
import UpcomingFund from './UpcomingFund';
9+
import VotingOpen from './VotingOpen';
910
import Headline from './Headline';
1011
import AppStore from './AppStore';
1112
import RegisterToVote from './RegisterToVote';
13+
import {
14+
VOTING_SNAPSHOT_DATE,
15+
VOTING_CAST_START_DATE,
16+
VOTING_CAST_END_DATE,
17+
} from '../../../config/votingConfig';
1218

1319
type Props = {
1420
currentLocale: Locale,
@@ -40,11 +46,10 @@ export default class VotingInfo extends Component<Props> {
4046
<hr className={styles.separator} />
4147
<div className={styles.bottomContent}>
4248
<div className={styles.leftContent}>
43-
<CurrentFund
49+
<VotingOpen
4450
currentLocale={currentLocale}
4551
currentDateFormat={currentDateFormat}
4652
currentTimeFormat={currentTimeFormat}
47-
onExternalLinkClick={onExternalLinkClick}
4853
/>
4954
<div className={styles.appStoreSpacing}>
5055
<AppStore

‎source/renderer/app/components/voting/voting-info/VotingInfo.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@
44
flex: 1 0 0;
55
padding: 20px;
66

7-
.separator {
7+
hr {
8+
border: 1px solid var(--theme-voting-separator-color);
9+
border-bottom-width: 0;
810
margin: 20px 0;
9-
opacity: 0.2;
11+
width: 100%;
1012
}
1113

1214
.bottomContent {

0 commit comments

Comments
 (0)