Skip to content

Commit 0e45021

Browse files
shonsirshashonsirsha
committed
Merge branch 'frontend-reusable-pill-btn'
2 parents 523a702 + abcbe3d commit 0e45021

File tree

4 files changed

+131
-74
lines changed

4 files changed

+131
-74
lines changed

‎frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.pillbuttongroup {
2+
align-items: baseline;
3+
display: flex;
4+
flex-wrap: wrap;
5+
flex-grow: 1;
6+
}
7+
8+
.pillbuttongroup button {
9+
appearance: none;
10+
background: var(--background-secondary);
11+
border: 2px solid var(--background-secondary);
12+
border-radius: 2rem;
13+
color: var(--color-default);
14+
font-size: var(--size-default);
15+
line-height: 1.75;
16+
margin-bottom: var(--spacing-half);
17+
margin-left: var(--spacing-half);
18+
padding: 0 calc(var(--spacing-default) * .75);
19+
}
20+
21+
.pillbuttongroup button:first-child {
22+
margin-left: 0;
23+
}
24+
25+
.pillbuttongroup button:hover:not([disabled]) {
26+
cursor: pointer;
27+
}
28+
29+
.pillbuttongroup button:hover:is([disabled]) {
30+
cursor: not-allowed;
31+
}
32+
33+
.pillbuttongroup button:focus {
34+
border: 2px solid var(--color-blue);
35+
outline: none;
36+
}
37+
38+
.pillbuttongroup button.active {
39+
background: var(--color-blue);
40+
border-color: var(--color-blue);
41+
color: var(--color-alt);
42+
}
43+
44+
.pillbuttongroup button[disabled] {
45+
background: var(--background-quaternary);
46+
border-color: var(--background-quaternary);
47+
color: var(--color-alt);
48+
}
49+
50+
:global(.dark-mode) .pillbuttongroup button[disabled] {
51+
background: var(--background-secondary);
52+
border-color: var(--background-secondary);
53+
color: var(--color-disabled);
54+
}

‎frontends/web/src/components/pillbuttongroup/pillbuttongroup.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
2+
/**
3+
* Copyright 2024 Shift Crypto AG
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
import { ReactNode } from 'react';
19+
import styles from './pillbuttongroup.module.css';
20+
21+
type TPillTabProps = {
22+
children: ReactNode;
23+
className?: string;
24+
}
25+
26+
type TPillTabButtonProps = {
27+
active: boolean;
28+
children: ReactNode;
29+
disabled?: boolean;
30+
onClick: () => void;
31+
}
32+
33+
export const PillButtonGroup = ({ className = '', children }: TPillTabProps) => {
34+
return <div className={`${styles.pillbuttongroup} ${className}`}>{children}</div>;
35+
};
36+
37+
export const PillButton = ({
38+
active,
39+
children,
40+
onClick,
41+
disabled = false,
42+
}: TPillTabButtonProps) => {
43+
return (
44+
<button
45+
className={active ? styles.active : ''}
46+
disabled={disabled}
47+
onClick={onClick}
48+
>
49+
{children}
50+
</button>
51+
);
52+
};

‎frontends/web/src/routes/account/summary/chart.module.css

Lines changed: 2 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,11 @@
3333
}
3434

3535
.filters {
36-
align-items: baseline;
37-
display: flex;
38-
flex-wrap: wrap;
39-
flex-grow: 1;
4036
justify-content: flex-end;
4137
margin: var(--spacing-half) 0 0 0;
4238
}
4339

4440
@media (max-width: 640px){
45-
4641
.chart{
4742
margin-bottom: var(--spacing-default);
4843
}
@@ -55,7 +50,7 @@
5550
align-items: center;
5651
}
5752

58-
.filters{
53+
.filters {
5954
justify-content: center;
6055
margin-top: var(--spacing-default);
6156
}
@@ -68,54 +63,6 @@
6863
}
6964
}
7065

71-
.filters button {
72-
appearance: none;
73-
background: var(--background-secondary);
74-
border: 2px solid var(--background-secondary);
75-
border-radius: 2rem;
76-
color: var(--color-default);
77-
font-size: var(--size-default);
78-
line-height: 1.75;
79-
margin-bottom: var(--spacing-half);
80-
margin-left: var(--spacing-half);
81-
padding: 0 calc(var(--spacing-default) * .75);
82-
}
83-
84-
.filters button:first-child {
85-
margin-left: 0;
86-
}
87-
88-
.filters button:hover:not([disabled]) {
89-
cursor: pointer;
90-
}
91-
92-
.filters button:hover:is([disabled]) {
93-
cursor: not-allowed;
94-
}
95-
96-
.filters button:focus {
97-
border: 2px solid var(--color-blue);
98-
outline: none;
99-
}
100-
101-
.filters button.filterActive {
102-
background: var(--color-blue);
103-
border-color: var(--color-blue);
104-
color: var(--color-alt);
105-
}
106-
107-
.filters button[disabled] {
108-
background: var(--background-quaternary);
109-
border-color: var(--background-quaternary);
110-
color: var(--color-alt);
111-
}
112-
:global(.dark-mode) .filters button[disabled] {
113-
background: var(--background-secondary);
114-
border-color: var(--background-secondary);
115-
color: var(--color-disabled);
116-
}
117-
118-
11966
.totalValue {
12067
font-size: 2rem;
12168
display: flex;
@@ -140,7 +87,6 @@
14087
overflow: hidden;
14188
}
14289
}
143-
14490

14591
.tooltip {
14692
background: var(--background-secondary);
@@ -171,4 +117,4 @@
171117

172118
.toolTipTime {
173119
white-space: nowrap;
174-
}
120+
}

‎frontends/web/src/routes/account/summary/filters.tsx

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
import { useTranslation } from 'react-i18next';
1818
import { TChartFiltersProps } from './types';
19+
import { PillButton, PillButtonGroup } from '../../../components/pillbuttongroup/pillbuttongroup';
1920
import styles from './chart.module.css';
2021

2122
export const Filters = ({
@@ -29,31 +30,35 @@ export const Filters = ({
2930
}: TChartFiltersProps) => {
3031
const { t } = useTranslation();
3132
return (
32-
<div className={styles.filters}>
33-
<button
34-
className={display === 'week' ? styles.filterActive : undefined}
33+
<PillButtonGroup className={styles.filters}>
34+
<PillButton
35+
active={display === 'week'}
3536
disabled={disableFilters || disableWeeklyFilters}
36-
onClick={onDisplayWeek}>
37+
onClick={onDisplayWeek}
38+
>
3739
{t('chart.filter.week')}
38-
</button>
39-
<button
40-
className={display === 'month' ? styles.filterActive : undefined}
40+
</PillButton>
41+
<PillButton
42+
active={display === 'month'}
4143
disabled={disableFilters}
42-
onClick={onDisplayMonth}>
44+
onClick={onDisplayMonth}
45+
>
4346
{t('chart.filter.month')}
44-
</button>
45-
<button
46-
className={display === 'year' ? styles.filterActive : undefined}
47+
</PillButton>
48+
<PillButton
49+
active={display === 'year'}
4750
disabled={disableFilters}
48-
onClick={onDisplayYear}>
51+
onClick={onDisplayYear}
52+
>
4953
{t('chart.filter.year')}
50-
</button>
51-
<button
52-
className={display === 'all' ? styles.filterActive : undefined}
54+
</PillButton>
55+
<PillButton
56+
active={display === 'all'}
5357
disabled={disableFilters}
54-
onClick={onDisplayAll}>
58+
onClick={onDisplayAll}
59+
>
5560
{t('chart.filter.all')}
56-
</button>
57-
</div>
61+
</PillButton>
62+
</PillButtonGroup>
5863
);
5964
};

0 commit comments

Comments
 (0)