Skip to content

Commit ef41663

Browse files
gratestasgratestas
committed
refactor(appeal-period): add responsive styling
1 parent 5cb97b1 commit ef41663

File tree

4 files changed

+118
-77
lines changed

4 files changed

+118
-77
lines changed

‎src/components/others/route_article/arbitrationDetails/appeal/croudfundingCard/index.jsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,28 @@ export default function CrowdfundingCard({
1717
const timeLeft = useCountdown(parseInt(appealDeadline));
1818
return (
1919
<div key={rulingOption} className={styles.crowdfundingCard}>
20-
<div className={styles.topRow}>
21-
<Radio value={rulingOption}>{title}</Radio>
22-
<EtherValue value={totalToBeRaised} modifiers={styles.ethValue} />
23-
</div>
20+
<Radio value={rulingOption} className={styles.radioButton}>
21+
{title}
22+
</Radio>
23+
<EtherValue value={totalToBeRaised} modifiers={styles.ethValue} />
2424
<Tooltip
2525
placement="top"
2626
title={`Raised so far: ${formatToEther(raisedSoFar)} ${
2727
constants.EtherSymbol
2828
} / Your contribution: ${formatToEther(amount)} ${constants.EtherSymbol}`}
2929
>
30-
<ProgressBar
31-
percent={getPercentage(raisedSoFar, totalToBeRaised)}
32-
success={{
33-
percent: getPercentage(amount, totalToBeRaised),
34-
}}
35-
/>
36-
<div>{`Appeal ends in: ${formatTime(timeLeft)}`}</div>
30+
<div className={styles.indicator}>
31+
<ProgressBar
32+
percent={getPercentage(raisedSoFar, totalToBeRaised)}
33+
success={{
34+
percent: getPercentage(amount, totalToBeRaised),
35+
}}
36+
/>
37+
</div>
3738
</Tooltip>
39+
<div className={styles.appealDeadline}>
40+
Appeal ends in: <span>{formatTime(timeLeft)}</span>
41+
</div>
3842
</div>
3943
);
4044
}

‎src/components/others/route_article/arbitrationDetails/appeal/croudfundingCard/index.module.scss‎

Lines changed: 69 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,85 @@
11
@use "src/stylesheets/variables/spacings";
22
@use "src/stylesheets/variables/typo";
3+
@use "src/stylesheets/variables/breakpoints";
34

45
.crowdfundingCard {
6+
display: grid;
7+
justify-items: center;
8+
align-items: center;
9+
gap: spacings.$s-3;
510
flex-grow: 1;
6-
display: flex;
7-
flex-direction: column;
811
padding: spacings.$s-4;
912
margin-bottom: spacings.$s-5;
1013
border: 1px solid hsl(var(--english-breakfast-900));
1114
border-radius: 4px;
1215

13-
.topRow {
16+
grid-template-areas:
17+
"radio"
18+
"indicator"
19+
"ethValue"
20+
"appealDeadline";
21+
22+
@media (min-width: breakpoints.$large) {
23+
gap: spacings.$s-3;
24+
justify-items: flex-start;
25+
grid-template-areas:
26+
"radio . ethValue"
27+
"indicator indicator indicator"
28+
"appealDeadline appealDeadline .";
29+
}
30+
31+
.radioButton {
32+
grid-area: radio;
33+
34+
:global(.ant-radio-inner) {
35+
border-color: hsl(var(--english-breakfast-800));
36+
background-color: transparent;
37+
38+
&::after {
39+
background-color: hsl(var(--english-breakfast-800));
40+
}
41+
}
42+
span {
43+
font-weight: bold;
44+
font-size: typo.$s;
45+
}
46+
}
47+
48+
.ethValue {
49+
grid-area: ethValue;
50+
font-size: typo.$xl;
51+
color: hsl(var(--english-breakfast-600));
52+
@media (min-width: breakpoints.$large) {
53+
justify-self: end;
54+
}
55+
}
56+
57+
.indicator {
58+
grid-area: indicator;
59+
margin-top: spacings.$s-3;
60+
@media (min-width: breakpoints.$large) {
61+
width: 100%;
62+
margin-top: 0;
63+
}
64+
}
65+
66+
.appealDeadline {
67+
grid-area: appealDeadline;
1468
display: flex;
15-
justify-content: space-between;
69+
flex-direction: column;
1670
align-items: center;
71+
flex-wrap: wrap;
72+
font-size: typo.$s;
73+
span {
74+
font-weight: bold;
75+
color: hsl(var(--english-breakfast-600));
76+
}
1777

18-
.ethValue {
19-
font-size: typo.$xl;
78+
@media (min-width: breakpoints.$large) {
79+
flex-direction: row;
80+
span {
81+
margin-left: spacings.$s-2;
82+
}
2083
}
2184
}
2285
}

‎src/components/others/route_article/arbitrationDetails/appeal/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export default function AppealPeriod({ currentRound, setEvidenceModalOpen }) {
9696
<div className={styles.label}>
9797
<div className={styles.colorBox} /> Your contribution
9898
</div>
99-
<div style={{ display: "flex", flexWrap: "wrap", gap: "10px" }}>
99+
<div className={styles.fundInput}>
100100
<div>
101101
<label htmlFor="contribution">{`Fund amount ( ${constants.EtherSymbol} ) `}</label>
102102
<input
@@ -108,7 +108,7 @@ export default function AppealPeriod({ currentRound, setEvidenceModalOpen }) {
108108
step="0.001"
109109
onChange={handleInputChange}
110110
value={amount}
111-
style={{ marginLeft: "10px" }}
111+
style={{ marginLeft: "6px" }}
112112
/>
113113
</div>
114114
<CustomButton modifiers="small" onClick={handleFundAppeal}>

‎src/components/others/route_article/arbitrationDetails/appeal/index.module.scss‎

Lines changed: 32 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
@use "src/stylesheets/variables/spacings";
22
@use "src/stylesheets/variables/typo";
3+
@use "src/stylesheets/variables/breakpoints";
34

45
.appealPeriod {
56
display: flex;
67
flex-direction: column;
78
align-items: center;
89

910
.crowdFundingPanel {
11+
display: flex;
12+
flex-direction: column;
1013
width: 100%;
11-
padding: spacings.$s-4 spacings.$s-7;
1214
margin-bottom: spacings.$s-18;
13-
border: 1px solid hsl(var(--english-breakfast-800));
14-
border-radius: 4px;
15+
16+
@media (min-width: breakpoints.$small) {
17+
padding: spacings.$s-4 spacings.$s-7;
18+
border: 1px solid hsl(var(--english-breakfast-800));
19+
border-radius: 4px;
20+
}
1521

1622
.title {
1723
margin-bottom: spacings.$s-4;
@@ -20,29 +26,49 @@
2026

2127
.appealOptions {
2228
display: flex;
23-
flex-wrap: wrap;
2429
justify-content: space-between;
2530
gap: spacings.$s-4;
31+
flex: 1 0 0;
2632
}
2733

2834
.footer {
2935
display: flex;
3036
flex-wrap: wrap;
3137
justify-content: space-between;
32-
align-items: center;
38+
align-items: baseline;
3339

3440
.label {
3541
display: flex;
3642
align-items: center;
3743
gap: spacings.$s-1;
38-
margin-bottom: spacings.$s-2;
44+
margin-bottom: spacings.$s-4;
3945
font-size: typo.$xs;
46+
47+
@media (min-width: breakpoints.$large) {
48+
margin-bottom: spacings.$s-2;
49+
align-self: end;
50+
}
4051
.colorBox {
4152
width: spacings.$s-3;
4253
height: spacings.$s-3;
4354
background-color: hsl(313, 74%, 35%);
4455
}
4556
}
57+
58+
.fundInput {
59+
width: 100%;
60+
display: flex;
61+
justify-content: space-between;
62+
63+
@media (min-width: breakpoints.$large) {
64+
width: max-content;
65+
gap: spacings.$s-2;
66+
}
67+
68+
input {
69+
margin-top: 0;
70+
}
71+
}
4672
}
4773
}
4874

@@ -63,58 +89,6 @@
6389
color: hsl(var(--red-reign-600));
6490
}
6591
}
66-
67-
.crowdFundingPanel :global {
68-
.ant-progress {
69-
.ant-progress-text {
70-
font-size: typo.$xl;
71-
width: 98%;
72-
text-align: right;
73-
margin-top: spacings.$s-2;
74-
margin-bottom: spacings.$s-2;
75-
}
76-
.ant-progress-outer {
77-
padding-right: 0;
78-
.ant-progress-inner {
79-
border: 1px solid hsl(var(--english-breakfast-800));
80-
border-radius: 4px;
81-
height: spacings.$s-4;
82-
83-
.ant-progress-bg {
84-
background: hsl(180, 46%, 15%);
85-
border: 1px solid hsl(180, 100%, 38%);
86-
}
87-
.ant-progress-success-bg {
88-
background: hsl(313, 74%, 35%);
89-
border: 1px solid hsl(314, 65%, 82%);
90-
}
91-
92-
.ant-progress-bg,
93-
.ant-progress-success-bg {
94-
border-radius: inherit;
95-
height: inherit !important;
96-
}
97-
}
98-
}
99-
}
100-
101-
.ant-radio-group {
102-
width: 100%;
103-
span {
104-
font-size: typo.$s;
105-
font-weight: bold;
106-
}
107-
108-
.ant-radio-inner {
109-
border-color: hsl(var(--english-breakfast-800));
110-
background-color: transparent;
111-
}
112-
.ant-radio-inner:after,
113-
.ant-radio-checked:after {
114-
background-color: hsl(var(--english-breakfast-800));
115-
}
116-
}
117-
}
11892
}
11993

12094
.appealFundingModal {

0 commit comments

Comments
 (0)