Skip to content

Commit fed63cc

Browse files
brampauwelynbrampauwelyn
committed
III-5851 - Progress on new design
1 parent 1c16300 commit fed63cc

12 files changed

+181
-589
lines changed

‎src/pages/PictureUploadBox.tsx

+10-25
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,29 @@ import { css } from 'styled-components';
44

55
import { Scope, ScopeTypes } from '@/constants/OfferType';
66
import { Button, ButtonVariants } from '@/ui/Button';
7+
import { CustomIcon, CustomIconVariants } from '@/ui/CustomIcon';
78
import { Icons } from '@/ui/Icon';
89
import { Image } from '@/ui/Image';
910
import { Inline } from '@/ui/Inline';
1011
import type { StackProps } from '@/ui/Stack';
1112
import { getStackProps, Stack } from '@/ui/Stack';
1213
import { Text, TextVariants } from '@/ui/Text';
13-
import { getGlobalBorderRadius, getValueFromTheme } from '@/ui/theme';
14+
import { colors, getGlobalBorderRadius, getValueFromTheme } from '@/ui/theme';
1415
import { Title } from '@/ui/Title';
1516

1617
const THUMBNAIL_SIZE = 80;
1718

19+
const { udbMainBlue } = colors;
20+
1821
const getValue = getValueFromTheme('pictureUploadBox');
1922

2023
const ImageIcon = ({ width }: { width: string }) => {
2124
return (
22-
<svg
23-
xmlns="http://www.w3.org/2000/svg"
24-
data-name="Layer 1"
25-
viewBox="0 0 512 512"
25+
<CustomIcon
26+
color={udbMainBlue}
27+
name={CustomIconVariants.IMAGE}
2628
width={width}
27-
>
28-
<g fillRule="evenodd">
29-
<path
30-
fill="#f0f0f0"
31-
d="M450.31 379.78a5 5 0 0 0 0-7.06l-33.97-33.97a5 5 0 0 0-7.08 0l-33.96 33.97a5 5 0 1 0 7.07 7.06l25.43-25.42v71.52a5 5 0 0 0 10 0v-71.52l25.43 25.42a5.03 5.03 0 0 0 7.08 0zM13 268.08l118.9-100.55L298 283.94a5 5 0 1 0 5.74-8.19L267.7 250.5l114.78-82.74 55.36 55.38v68.04l-3.66-.83a96.1 96.1 0 0 0-116.86 82.14 95.57 95.57 0 0 0 8.75 53.21l2.07 4.3H62.94A49.99 49.99 0 0 1 13 380.07v-112zM212.57 138.3a39.68 39.68 0 1 0 39.67-39.67 39.72 39.72 0 0 0-39.67 39.67zm200.06 159.59c51.6 0 91.98 45.05 85.73 96.58a86.18 86.18 0 1 1-85.73-96.58z"
32-
/>
33-
<path
34-
fill="#777"
35-
d="M452.43 370.6a8 8 0 0 1-11.32 11.3l-20.31-20.3v64.28a8 8 0 0 1-16 0V361.6l-20.31 20.3a8 8 0 0 1-11.3-11.3l33.95-33.97a8.01 8.01 0 0 1 11.32 0zm42.95 23.5a83.18 83.18 0 0 0-72.56-92.6 85.26 85.26 0 0 0-10.19-.61 83.19 83.19 0 1 0 82.75 93.22zM62.93 427h260.43a99.16 99.16 0 0 1 111.48-139.57v-63.05l-52.68-52.7-109.29 78.79 32.58 22.84a8 8 0 1 1-9.18 13.1l-164.2-115.1L16 269.47v110.6A46.99 46.99 0 0 0 62.93 427zm0-382.22h324.98a46.98 46.98 0 0 1 46.93 46.93v110.04l-46.18-46.18a8 8 0 0 0-10.34-.84L259 240.75l-122.79-86.08a8 8 0 0 0-9.76.45L16 248.52V91.71a46.98 46.98 0 0 1 46.93-46.93zm427.94 278.14a98.52 98.52 0 0 0-40.03-30.4V91.7a63 63 0 0 0-62.93-62.93H62.93A63 63 0 0 0 0 91.71v288.36a63.01 63.01 0 0 0 62.93 62.94h270.1c.55.75 1.12 1.5 1.7 2.24a99.18 99.18 0 1 0 156.14-122.33zm-238.63-221.3a36.67 36.67 0 1 1-36.67 36.68 36.72 36.72 0 0 1 36.67-36.67zm0 89.35a52.67 52.67 0 1 1 52.67-52.67 52.73 52.73 0 0 1-52.67 52.67z"
36-
/>
37-
</g>
38-
</svg>
29+
/>
3930
);
4031
};
4132

@@ -173,7 +164,7 @@ const PictureUploadBox = ({
173164
{images.length === 0 && (
174165
<Stack alignItems="center">
175166
<Stack>
176-
<ImageIcon width="60" />
167+
<ImageIcon width="80" />
177168
</Stack>
178169
<Text variant={TextVariants.MUTED} textAlign="center">
179170
{scope === ScopeTypes.ORGANIZERS
@@ -183,14 +174,8 @@ const PictureUploadBox = ({
183174
</Stack>
184175
)}
185176
<Button
186-
variant={ButtonVariants.SECONDARY}
177+
variant={ButtonVariants.SECONDARY_OUTLINE}
187178
onClick={onClickAddImage}
188-
css={`
189-
&.btn {
190-
box-shadow: ${({ theme }) =>
191-
theme.components.button.boxShadow.large};
192-
}
193-
`}
194179
>
195180
{t('pictures.add_button')}
196181
</Button>

‎src/pages/VideoUploadBox.tsx

+10-25
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import { useTranslation } from 'react-i18next';
22
import { css } from 'styled-components';
33

44
import { Button, ButtonVariants } from '@/ui/Button';
5+
import { CustomIcon, CustomIconVariants } from '@/ui/CustomIcon';
56
import { Icons } from '@/ui/Icon';
67
import { Image } from '@/ui/Image';
78
import { Inline } from '@/ui/Inline';
89
import type { StackProps } from '@/ui/Stack';
910
import { getStackProps, Stack } from '@/ui/Stack';
1011
import { Text, TextVariants } from '@/ui/Text';
11-
import { getGlobalBorderRadius, getValueFromTheme } from '@/ui/theme';
12+
import { colors, getGlobalBorderRadius, getValueFromTheme } from '@/ui/theme';
1213
import { Title } from '@/ui/Title';
1314

1415
import { Features, NewFeatureTooltip } from './NewFeatureTooltip';
@@ -17,25 +18,15 @@ const THUMBNAIL_SIZE = 80;
1718

1819
const getValue = getValueFromTheme('videoUploadBox');
1920

21+
const { udbMainBlue } = colors;
22+
2023
const VideoIcon = ({ width }: { width: string }) => {
2124
return (
22-
<svg
23-
xmlns="http://www.w3.org/2000/svg"
24-
data-name="Layer 1"
25-
viewBox="0 0 512 512"
25+
<CustomIcon
26+
color={udbMainBlue}
27+
name={CustomIconVariants.VIDEO}
2628
width={width}
27-
>
28-
<g fillRule="evenodd">
29-
<path
30-
fill="#f0f0f0"
31-
d="M306 267.97a37.06 37.06 0 0 0 0-64.21L181.89 132.1a37.08 37.08 0 0 0-55.6 32.1v143.32a37.08 37.08 0 0 0 55.6 32.11zM13 380.04V91.68a49.98 49.98 0 0 1 49.94-49.93H387.9a49.98 49.98 0 0 1 49.94 49.93v199.49l-3.66-.83a96.9 96.9 0 0 0-41.7-.28 96.23 96.23 0 0 0-66.42 135.62l2.08 4.3H62.94A49.98 49.98 0 0 1 13 380.04zm346.63-63.82a86.18 86.18 0 0 1 136.31 45.26c16.18 59.86-33.76 115.34-93.52 108.09a86.18 86.18 0 0 1-42.79-153.35z"
32-
/>
33-
<path
34-
fill="#777"
35-
d="M463.71 384.06a8 8 0 0 1-8.02 8h-34.9v34.93a8 8 0 1 1-16 0v-34.93h-34.91a8 8 0 1 1 0-16h34.91v-34.93a8 8 0 1 1 16 0v34.93h34.91a8 8 0 0 1 8.02 8zM299.5 256.71l-124.1 71.66a24.08 24.08 0 0 1-36.14-20.85V164.2a23.26 23.26 0 0 1 12.03-20.84 23.3 23.3 0 0 1 24.11 0l124.08 71.66a24.07 24.07 0 0 1 0 41.7zm28.07-20.85a39.16 39.16 0 0 0-20.05-34.7L183.38 129.5a40.08 40.08 0 0 0-60.1 34.7v143.32a39.17 39.17 0 0 0 20.05 34.71 39.15 39.15 0 0 0 40.06 0l124.12-71.66a39.16 39.16 0 0 0 20.05-34.71zM464.1 449.53a83.18 83.18 0 1 0-116.76-14.17 83.26 83.26 0 0 0 116.76 14.17zM62.94 426.98h260.42a99.14 99.14 0 0 1 111.48-139.57V91.68a46.98 46.98 0 0 0-46.94-46.93H62.94A46.98 46.98 0 0 0 16 91.68v288.36a46.98 46.98 0 0 0 46.94 46.94zm427.9-104.1a98.34 98.34 0 0 0-40-30.4V91.69a63.02 63.02 0 0 0-62.94-62.93H62.94A63 63 0 0 0 0 91.68v288.36a63 63 0 0 0 62.94 62.94h270.1c.51.76 1.08 1.5 1.7 2.25a99.17 99.17 0 1 0 156.1-122.34z"
36-
/>
37-
</g>
38-
</svg>
29+
/>
3930
);
4031
};
4132

@@ -126,22 +117,16 @@ const VideoUploadBox = ({
126117
{videos?.length === 0 && (
127118
<Stack alignItems="center">
128119
<Stack>
129-
<VideoIcon width="60" />
120+
<VideoIcon width="80" />
130121
</Stack>
131122
<Text variant={TextVariants.MUTED} textAlign="center">
132123
{t('videos.intro')}
133124
</Text>
134125
</Stack>
135126
)}
136127
<Button
137-
variant={ButtonVariants.SECONDARY}
128+
variant={ButtonVariants.SECONDARY_OUTLINE}
138129
onClick={onClickAddVideo}
139-
css={`
140-
&.btn {
141-
box-shadow: ${({ theme }) =>
142-
theme.components.button.boxShadow.large};
143-
}
144-
`}
145130
>
146131
{t('videos.add_button')}
147132
</Button>

‎src/pages/steps/CalendarStep/CalendarOptionToggle.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import { useTranslation } from 'react-i18next';
22

33
import { parseSpacing } from '@/ui/Box';
4+
import { CustomIcon, CustomIconVariants } from '@/ui/CustomIcon';
45
import { getInlineProps, Inline, InlineProps } from '@/ui/Inline';
56
import { ToggleBox } from '@/ui/ToggleBox';
67

78
import {
89
useIsFixedDays,
910
useIsOneOrMoreDays,
1011
} from '../machines/calendarMachine';
11-
import { IconFixedDays } from './IconFixedDays';
12-
import { IconOneOrMoreDays } from './IconOneOrMoreDays';
1312

1413
type CalendarOptionToggleProps = InlineProps & {
1514
onChooseOneOrMoreDays: () => void;
@@ -32,15 +31,17 @@ export const CalendarOptionToggle = ({
3231
<ToggleBox
3332
onClick={onChooseOneOrMoreDays}
3433
active={isOneOrMoreDays}
35-
icon={<IconOneOrMoreDays />}
34+
icon={<CustomIcon name={CustomIconVariants.CALENDAR} width="80" />}
3635
text={t('create.calendar.types.one_or_more_days')}
3736
minHeight={parseSpacing(7)}
3837
flex={1}
3938
/>
4039
<ToggleBox
4140
onClick={onChooseFixedDays}
4241
active={isFixedDays}
43-
icon={<IconFixedDays />}
42+
icon={
43+
<CustomIcon name={CustomIconVariants.CALENDAR_MULTIPLE} width="80" />
44+
}
4445
text={t('create.calendar.types.fixed_days')}
4546
minHeight={parseSpacing(7)}
4647
flex={1}

‎src/pages/steps/CalendarStep/IconFixedDays.tsx

-27
This file was deleted.

‎src/pages/steps/CalendarStep/IconOneOrMoreDays.tsx

-28
This file was deleted.

0 commit comments

Comments
 (0)