Skip to content

Commit c8f1ddb

Browse files
vbaronivbaroni
authored
feat: implement light theme and update button styles across map components (#376)
* feat: add REACT_APP_API_BASE_URL variable to .env.example file * feat: implement light theme and update button styles across map components * refactor: remove dark theme import from MapControlFactory and MapPopoverFactory * feat: update color scheme in map filters to use black instead of white * feat: enhance MapPopover styling for mobile and expanded states
1 parent 5ef0a72 commit c8f1ddb

File tree

8 files changed

+78
-29
lines changed

8 files changed

+78
-29
lines changed

‎.env.example‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,4 @@ REACT_APP_MAPBOX_ACCESS_TOKEN="defaultMapboxToken"
2121
REACT_APP_CONTACT_EMAIL=[email protected]
2222
REACT_APP_MATOMO_TRACKER_URL=https://matomo.example.org/
2323
REACT_APP_MATOMO_SITE_ID=1234
24+
REACT_APP_API_BASE_URL=http://localhost:3333/api

‎apps/frontend/src/components/keplerGl/factories/MapControlFactory.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { useForward } from '../../../hooks';
1616
import { selectFilters, selectFiltersConfig } from '../../../store/selectors';
1717
import { FiltersConfigInterface } from '@datatlas/models';
1818
import { PublishButton } from '../../buttons/PublishButton';
19-
import { darkTheme } from '../../../style/theme';
19+
import { lightTheme } from '../../../style/theme';
2020

2121
const StyledMapControl = styled.div<Pick<MapControlProps, 'theme' | 'top'>>`
2222
right: 0;
@@ -72,7 +72,7 @@ function MapControlFactory(_, Toggle3dButton) {
7272
const filtersConfig = useSelector<RootState, FiltersConfigInterface>((state) => selectFiltersConfig(state, id));
7373

7474
return (
75-
<ThemeProvider theme={darkTheme}>
75+
<ThemeProvider theme={lightTheme}>
7676
<StyledMapControl className="map-control" top={top} role="menubar">
7777
<MapMenu
7878
role="toolbar"

‎apps/frontend/src/components/keplerGl/factories/filter-panel/RangeFilterFactory.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function RangeFilterFactory(RangeSlider) {
2626
);
2727
})`
2828
.kg-range-slider .kg-range-slider__plot .histogram-bars rect {
29-
fill: rgba(255, 255, 255, 0.5);
29+
fill: rgba(0, 0, 0, 0.5);
3030
}
3131
3232
.kg-range-slider .kg-range-slider__brush .selection {
@@ -35,23 +35,23 @@ export function RangeFilterFactory(RangeSlider) {
3535
}
3636
3737
.kg-range-slider .kg-range-slider__slider .kg-range-slider {
38-
background-color: rgba(255, 255, 255, 0.5);
38+
background-color: rgba(0, 0, 0, 0.5);
3939
}
4040
4141
.kg-range-slider .kg-range-slider__slider .kg-range-slider__bar {
42-
background-color: rgba(255, 255, 255, 0.9);
42+
background-color: rgba(0, 0, 0, 0.9);
4343
}
4444
4545
.kg-range-slider .kg-range-slider__brush .handle--custom {
46-
fill: rgba(255, 255, 255, 0.8);
46+
fill: rgba(0, 0, 0, 0.8);
4747
}
4848
.kg-range-slider .kg-range-slider__slider .kg-range-slider__handle {
49-
background-color: rgba(255, 255, 255, 0.8);
50-
border-color: rgba(255, 255, 255, 0.5);
49+
background-color: rgba(0, 0, 0, 0.8);
50+
border-color: rgba(0, 0, 0, 0.5);
5151
}
5252
5353
.kg-range-slider .kg-range-slider__slider .kg-range-slider__handle:hover {
54-
background-color: rgba(255, 255, 255, 1);
54+
background-color: rgba(0, 0, 0, 1);
5555
}
5656
5757
.kg-range-slider .range-slider__input-group .kg-range-slider__input {

‎apps/frontend/src/components/keplerGl/factories/map/MapPopoverFactory.tsx‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
FloatingContext,
1919
FloatingFocusManager,
2020
} from '@floating-ui/react';
21-
import { darkTheme } from '../../../../style/theme';
21+
import { lightTheme } from '../../../../style/theme';
2222
import { LayerHoverInfoProps } from './LayerHoverInfo';
2323
import { useIsMobile } from '../../../../hooks';
2424

@@ -34,12 +34,16 @@ const StyledMapPopover = styled.div`
3434
z-index: 1000;
3535
3636
&.full-width {
37+
width: calc(50% - 26px);
38+
}
39+
40+
&.full-width-mobile {
3741
width: calc(100% - 26px);
3842
}
3943
4044
&.expanded {
41-
height: 100%;
4245
max-height: 100%;
46+
word-break: break-word;
4347
}
4448
`;
4549

@@ -73,6 +77,34 @@ const PopoverContent = styled.div<{ expandable: boolean; maxTooltipFields: numbe
7377
7478
.map-popover__actions {
7579
display: ${({ expandable }) => (expandable ? 'flex' : 'none')};
80+
.button {
81+
background-color: #ff0032;
82+
font-size: 16px;
83+
border: 1px solid #ff0032;
84+
text-transform: none;
85+
border-radius: 16px;
86+
letter-spacing: 0px;
87+
padding: 7px 20px;
88+
color: #ffffff;
89+
line-height: 19px;
90+
font-weight: 600;
91+
92+
:hover {
93+
background-color: #ffffff;
94+
border: 1px solid #ff0032;
95+
color: #ff0032;
96+
}
97+
98+
:focus {
99+
color: #ff0032;
100+
background-color: #ffffff;
101+
}
102+
103+
:active {
104+
color: #ffffff;
105+
background-color: #ff0032;
106+
}
107+
}
76108
}
77109
78110
.map-popover__layer-info {
@@ -118,7 +150,7 @@ const PopoverContent = styled.div<{ expandable: boolean; maxTooltipFields: numbe
118150
119151
.row:not(.aggregated):nth-child(1) .row__value,
120152
.row .row__value h3 {
121-
font-size: 32px;
153+
font-size: 24px;
122154
text-transform: uppercase;
123155
padding-bottom: 13px;
124156
font-weight: 700;
@@ -171,8 +203,6 @@ const PopoverContent = styled.div<{ expandable: boolean; maxTooltipFields: numbe
171203
}
172204
173205
&.expanded {
174-
width: 100%;
175-
height: 100%;
176206
max-width: 100%;
177207
max-height: 100%;
178208
padding: 32px;
@@ -191,7 +221,12 @@ const PopoverContent = styled.div<{ expandable: boolean; maxTooltipFields: numbe
191221
.map-popover__layer-info {
192222
.map-popover__topbar {
193223
display: flex;
194-
background-color: rgba(0, 0, 0, 0.5);
224+
background-color: rgb(255, 255, 255);
225+
226+
.button {
227+
color: rgb(0, 0, 0);
228+
align-items: center;
229+
}
195230
}
196231
197232
.map-popover__content .row.empty {
@@ -282,13 +317,14 @@ function MapPopoverFactory(LayerHoverInfo, CoordinateInfo) {
282317
}, [layerHoverProp.fieldsToShow, maxTooltipFields]);
283318

284319
return (
285-
<ThemeProvider theme={darkTheme}>
320+
<ThemeProvider theme={lightTheme}>
286321
<FloatingFocusManager context={context} modal={frozen}>
287322
<StyledMapPopover
288323
className={classNames([
289324
'map-popover-container',
290325
expanded && 'expanded',
291-
(expanded || isMobile) && 'full-width',
326+
expanded && !isMobile && 'full-width',
327+
expanded && isMobile && 'full-width-mobile',
292328
])}
293329
ref={refs.setFloating}
294330
style={floatingStyles}

‎apps/frontend/src/components/map-menu/DatasetMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const ToggleVisibilityMenuIcon = styled(({ visible, ...props }) => (
1616
))`
1717
width: 52px;
1818
padding: 3px 7px 3px 7px;
19-
border: 1px solid white;
19+
border: 1px solid black;
2020
border-radius: 17px;
2121
background-color: ${({ visible }) => (visible ? 'white' : 'black')};
2222
color: ${({ visible }) => (visible ? 'black' : 'white')};

‎apps/frontend/src/components/map-menu/MapMenu.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -127,42 +127,45 @@ export const MapMenu = styled(
127127
}
128128
129129
${MenuSectionHeading} {
130+
background-color: rgb(255, 255, 255);
131+
color: rgb(0, 0, 0);
130132
display: flex;
131133
padding: 23px 21px 21px 23px;
132134
h2,
133135
h3 {
134136
font-family: 'Roboto', Verdana, 'Helvetica Neue', Helvetica, sans-serif;
135-
font-size: 24px;
137+
font-size: 16px;
136138
font-weight: 400;
137-
text-transform: capitalize;
139+
text-transform: none;
138140
line-height: 130%;
139141
}
140142
}
141143
142144
button${MenuSectionHeading} {
143145
:hover {
144-
color: rgba(255, 255, 255, 0.9);
145-
background-color: #202020;
146+
color: rgba(0, 0, 0, 0.9);
147+
background-color: #bdbdbd;
146148
}
147149
148150
:active {
149-
color: rgba(255, 255, 255, 0.8);
150-
background-color: #383838;
151+
color: rgba(0, 0, 0, 0.8);
152+
background-color: #bdbdbd;
151153
}
152154
}
153155
154156
li.map-menu__list-item-container > ${MenuSectionHeading}, li.map-menu__list-item-container > ul > li {
155-
background-color: #0c0c0c;
157+
background-color: rgb(255, 255, 255);
156158
border-radius: 7px;
157159
margin-bottom: 7px;
160+
color: rgb(0, 0, 0);
158161
}
159162
160163
${MenuSectionHeading}, ${MultiSelectFilterOption} {
161164
column-gap: 13px;
162165
}
163166
164167
ul .unfolded ${MenuSectionHeading}, ${MultiSelectFilterOption} {
165-
border-bottom: 1px solid white;
168+
border-bottom: 1px solid black;
166169
}
167170
168171
ul li ${MenuSectionHeading}:last-child {

‎apps/frontend/src/components/map-menu/MultiSelectFillter.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { grayscale, rgbToHsl, toCss } from '../../utils/color';
44

55
export const MultiSelectFilterOption = styled(({ hslCssColor, selected, ...props }) => <button {...props} />)`
66
display: inline;
7-
color: ${({ selected }) => `rgba(255, 255, 255, ${selected ? 1 : 0.5})`};
7+
color: ${({ selected }) => `rgba(0, 0, 0, ${selected ? 1 : 0.5})`};
88
background-color: ${({ hslCssColor }) => `hsl(${hslCssColor}, 0.60)`};
99
transition: background, color 0.3s ease;
1010
text-overflow: ellipsis;
@@ -13,12 +13,12 @@ export const MultiSelectFilterOption = styled(({ hslCssColor, selected, ...props
1313
overflow: hidden;
1414
1515
:hover {
16-
color: ${({ selected }) => `rgba(255, 255, 255, ${selected ? 1 : 0.9})`};
16+
color: ${({ selected }) => `rgba(0, 0, 0, ${selected ? 1 : 0.9})`};
1717
background-color: ${({ hslCssColor }) => `hsl(${hslCssColor}, 0.35)`};
1818
}
1919
2020
:active {
21-
color: ${({ selected }) => `rgba(255, 255, 255, ${selected ? 1 : 0.8})`};
21+
color: ${({ selected }) => `rgba(0, 0, 0, ${selected ? 1 : 0.8})`};
2222
background-color: ${({ hslCssColor }) => `hsl(${hslCssColor}, 0.20)`};
2323
}
2424
`;

‎apps/frontend/src/style/theme.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,3 +269,12 @@ export const darkTheme = {
269269
// floatingBtnBorderHover: '',
270270
// floatingBtnBorder: '',
271271
};
272+
273+
export const lightTheme = {
274+
...keplerTheme,
275+
...theme,
276+
primaryBtnRadius: '7px',
277+
primaryBtnBgd: '#07509f',
278+
primaryBtnBorder: '#005a9f',
279+
primaryBtnBgdHover: '#5AB6EB',
280+
};

0 commit comments

Comments
 (0)