Skip to content

Commit 4dfa8f5

Browse files
scottsutscottsut
committed
chore: adjust theme color & global form control styles
1 parent d460e58 commit 4dfa8f5

File tree

60 files changed

+697
-671
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+697
-671
lines changed

‎frontend/src/app/components/Avatar.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,15 @@ export function Avatar(props: AvatarProps) {
1818
}
1919

2020
return (
21-
<StyledAvatar {...rest} src={safeSrc} style={style}>
21+
<StyledAvatar {...rest} src={safeSrc} size={size} style={style}>
2222
{props.children}
2323
</StyledAvatar>
2424
);
2525
}
2626

2727
const StyledAvatar = styled(AntdAvatar)`
28-
color: ${p => p.theme.textColorLight};
29-
background-color: ${p => p.theme.emphasisBackground};
28+
&.ant-avatar {
29+
color: ${p => p.theme.textColorLight};
30+
background-color: ${p => p.theme.emphasisBackground};
31+
}
3032
`;

‎frontend/src/app/components/ColorPicker/ColorTag.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,10 @@ const ColorTagBox = styled.div`
3636

3737
export const ColorPicker = styled.div<{ color?: string; size?: number }>`
3838
flex-shrink: 0;
39-
width: ${p => SPACE_TIMES(p.size || 8)};
40-
height: ${p => SPACE_TIMES(p.size || 8)};
39+
width: ${p => SPACE_TIMES(p.size || 7)};
40+
height: ${p => SPACE_TIMES(p.size || 7)};
4141
cursor: pointer;
4242
background-color: ${p => p.color || 'transparent'};
43+
border: 1px solid ${p => p.theme.borderColorEmphasis};
4344
border-radius: ${BORDER_RADIUS};
4445
`;

‎frontend/src/app/components/ColorPicker/SingleColorSelection.tsx‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ import React, { useState } from 'react';
2323
import styled from 'styled-components/macro';
2424
import {
2525
BORDER_RADIUS,
26-
FONT_SIZE_BODY,
27-
G40,
26+
SPACE,
2827
SPACE_TIMES,
28+
SPACE_XS,
2929
} from 'styles/StyleConstants';
3030
import ChromeColorPicker from './ChromeColorPicker';
3131
import { colorSelectionPropTypes } from './slice/types';
@@ -107,53 +107,52 @@ function SingleColorSelection({ color, onChange }: colorSelectionPropTypes) {
107107
export default SingleColorSelection;
108108

109109
const ColorWrap = styled.div`
110-
background-color: ${p => p.theme.bodyBackground};
111-
width: 426px;
112-
min-width: 426px;
113-
// max-width: 426px;
110+
width: 390px;
111+
min-width: 390px;
112+
background-color: ${p => p.theme.componentBackground};
114113
`;
115114

116115
const ThemeColorWrap = styled.div`
117-
border-bottom: 1px solid ${G40};
118-
padding-bottom: ${SPACE_TIMES(1.5)};
119-
margin: ${SPACE_TIMES(2.5)} 0;
116+
display: flex;
117+
padding-top: ${SPACE};
118+
border-bottom: 1px solid ${p => p.theme.borderColorEmphasis};
120119
`;
121120

122121
const ColorBlock = styled.span<{ color: string }>`
123-
display: inline-block;
124-
min-width: ${SPACE_TIMES(6)};
125-
min-height: ${SPACE_TIMES(6)};
122+
min-width: ${SPACE_TIMES(7)};
123+
min-height: ${SPACE_TIMES(7)};
124+
margin: 0 ${SPACE_XS} ${SPACE_XS} 0;
125+
cursor: pointer;
126126
background-color: ${p => p.color};
127+
border: 1px solid ${p => p.theme.borderColorEmphasis};
127128
border-radius: ${BORDER_RADIUS};
128-
cursor: pointer;
129129
transition: all 0.2s;
130-
margin-right: ${SPACE_TIMES(4)};
131-
border: 1px solid ${G40};
130+
132131
&:last-child {
133132
margin-right: 0px;
134133
}
135134
&:hover {
136135
opacity: 0.7;
137136
}
138137
&.active {
139-
border: 1px solid ${p => p.theme.primary};
138+
box-shadow: ${p => p.theme.shadow1};
140139
}
141140
`;
142141

143142
const ColorPalette = styled.div`
144-
border-bottom: 1px solid ${G40};
145-
padding-bottom: ${SPACE_TIMES(1.5)};
143+
display: flex;
144+
flex-wrap: wrap;
145+
padding-top: ${SPACE_XS};
146+
border-bottom: 1px solid ${p => p.theme.borderColorEmphasis};
146147
> span:nth-child(11n) {
147148
margin-right: 0px;
148149
}
149150
`;
150151

151152
const MoreColor = styled.div`
153+
margin-top: ${SPACE_XS};
152154
text-align: center;
153155
cursor: pointer;
154-
margin-top: ${SPACE_TIMES(2.5)};
155-
font-size: ${FONT_SIZE_BODY};
156-
color: ${p => p.theme.textColor};
157156
&:hover {
158157
color: ${p => p.theme.primary};
159158
}

‎frontend/src/app/components/ColorPicker/ThemeColorSelection.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { colorThemes } from 'app/assets/theme/colorsConfig';
2121
import React, { useState } from 'react';
2222
import { useTranslation } from 'react-i18next';
2323
import styled from 'styled-components/macro';
24-
import { FONT_SIZE_BODY, G10, SPACE_TIMES } from 'styles/StyleConstants';
24+
import { FONT_SIZE_BODY, SPACE_TIMES } from 'styles/StyleConstants';
2525
import { themeColorPropTypes } from './slice/types';
2626

2727
/**
@@ -80,14 +80,14 @@ export default ThemeColorSelection;
8080
const ChooseTheme = styled.div`
8181
display: inline-block;
8282
width: 100%;
83-
text-align: right;
8483
margin-bottom: ${SPACE_TIMES(1)};
84+
text-align: right;
8585
`;
8686
const ChooseThemeSpan = styled.div`
87-
cursor: pointer;
88-
font-size: ${FONT_SIZE_BODY};
8987
display: inline-block;
9088
width: max-content;
89+
font-size: ${FONT_SIZE_BODY};
90+
cursor: pointer;
9191
&:hover {
9292
color: ${p => p.theme.primary};
9393
}
@@ -100,10 +100,10 @@ const ColorWrapAlert = styled.div`
100100
display: flex;
101101
flex-direction: column;
102102
align-items: flex-start;
103-
cursor: pointer;
104103
padding: ${SPACE_TIMES(2.5)};
104+
cursor: pointer;
105105
&:hover {
106-
background-color: ${G10};
106+
background-color: ${p => p.theme.bodyBackground};
107107
}
108108
}
109109
`;

‎frontend/src/app/components/FormGenerator/Basic/BasicColorSelector.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ const BasicColorSelector: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
6565
{...rest}
6666
{...options}
6767
colors={COLORS}
68-
size={6}
6968
defaultValue={getColor()}
7069
onSubmit={handlePickerSelect}
7170
></ColorPickerPopover>

‎frontend/src/app/components/FormGenerator/Basic/BasicFont.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ const BasicFont: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
5252
<BW label={!options?.hideLabel ? t(data.label, true) : ''}>
5353
<Group>
5454
<Select
55+
className="datart-ant-select"
5556
placeholder={t('select')}
5657
value={data.value?.fontFamily}
5758
dropdownMatchSelectWidth={false}
@@ -67,6 +68,7 @@ const BasicFont: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
6768
))}
6869
</Select>
6970
<Select
71+
className="datart-ant-select"
7072
placeholder={t('select')}
7173
value={data.value?.fontWeight}
7274
onChange={handleSettingChange('fontWeight')}
@@ -82,6 +84,7 @@ const BasicFont: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
8284
<Group>
8385
{(isUndefined(options?.showFontSize) || options?.showFontSize) && (
8486
<Select
87+
className="datart-ant-select"
8588
placeholder={t('select')}
8689
value={data.value?.fontSize}
8790
onChange={handleSettingChange('fontSize')}
@@ -95,6 +98,7 @@ const BasicFont: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
9598
)}
9699
{options?.showLineHeight && (
97100
<Select
101+
className="datart-ant-select"
98102
placeholder={t('select')}
99103
value={data.value?.lineHeight}
100104
onChange={handleSettingChange('lineHeight')}
@@ -112,6 +116,7 @@ const BasicFont: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
112116
{(isUndefined(options?.showFontStyle) ||
113117
options?.showFontStyle) && (
114118
<Select
119+
className="datart-ant-select"
115120
placeholder={t('select')}
116121
value={data.value?.fontStyle}
117122
onChange={handleSettingChange('fontStyle')}
@@ -129,7 +134,6 @@ const BasicFont: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
129134
{...rest}
130135
{...options}
131136
defaultValue={data.value?.color}
132-
size={6}
133137
onSubmit={handlePickerSelect}
134138
/>
135139
)}

‎frontend/src/app/components/FormGenerator/Basic/BasicFontFamilySelector.tsx‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ import { Select } from 'antd';
2020
import { ChartStyleConfig } from 'app/types/ChartConfig';
2121
import { FONT_FAMILIES } from 'globalConstants';
2222
import { FC, memo } from 'react';
23-
import styled from 'styled-components/macro';
24-
import { BORDER_RADIUS } from 'styles/StyleConstants';
2523
import { ItemLayoutProps } from '../types';
2624
import { itemLayoutComparer } from '../utils';
2725
import { BW } from './components/BasicWrapper';
@@ -31,10 +29,9 @@ const BasicFontFamilySelector: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
3129
const { comType, options, ...rest } = row;
3230

3331
return (
34-
<StyledVizFontFamilySelector
35-
label={!options?.hideLabel ? t(row.label, true) : ''}
36-
>
32+
<BW label={!options?.hideLabel ? t(row.label, true) : ''}>
3733
<Select
34+
className="datart-ant-select"
3835
dropdownMatchSelectWidth
3936
{...rest}
4037
{...options}
@@ -47,23 +44,10 @@ const BasicFontFamilySelector: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
4744
</Select.Option>
4845
))}
4946
</Select>
50-
</StyledVizFontFamilySelector>
47+
</BW>
5148
);
5249
},
5350
itemLayoutComparer,
5451
);
5552

5653
export default BasicFontFamilySelector;
57-
58-
const StyledVizFontFamilySelector = styled(BW)`
59-
.ant-select {
60-
color: ${p => p.theme.textColorSnd};
61-
}
62-
63-
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
64-
background-color: ${p => p.theme.emphasisBackground};
65-
border-color: ${p => p.theme.emphasisBackground} !important;
66-
border-radius: ${BORDER_RADIUS};
67-
box-shadow: none !important;
68-
}
69-
`;

‎frontend/src/app/components/FormGenerator/Basic/BasicFontSizeSelector.tsx‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ import { Select } from 'antd';
2020
import { ChartStyleConfig } from 'app/types/ChartConfig';
2121
import { FONT_SIZES } from 'globalConstants';
2222
import { FC, memo } from 'react';
23-
import styled from 'styled-components/macro';
24-
import { BORDER_RADIUS } from 'styles/StyleConstants';
2523
import { ItemLayoutProps } from '../types';
2624
import { itemLayoutComparer } from '../utils';
2725
import { BW } from './components/BasicWrapper';
@@ -31,10 +29,9 @@ const BasicFontSizeSelector: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
3129
const { comType, options, ...rest } = row;
3230

3331
return (
34-
<StyledVizFontSelector
35-
label={!options?.hideLabel ? t(row.label, true) : ''}
36-
>
32+
<BW label={!options?.hideLabel ? t(row.label, true) : ''}>
3733
<Select
34+
className="datart-ant-select"
3835
dropdownMatchSelectWidth
3936
{...rest}
4037
{...options}
@@ -47,23 +44,10 @@ const BasicFontSizeSelector: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
4744
</Select.Option>
4845
))}
4946
</Select>
50-
</StyledVizFontSelector>
47+
</BW>
5148
);
5249
},
5350
itemLayoutComparer,
5451
);
5552

5653
export default BasicFontSizeSelector;
57-
58-
const StyledVizFontSelector = styled(BW)`
59-
.ant-select {
60-
color: ${p => p.theme.textColorSnd};
61-
}
62-
63-
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
64-
background-color: ${p => p.theme.emphasisBackground};
65-
border-color: ${p => p.theme.emphasisBackground} !important;
66-
border-radius: ${BORDER_RADIUS};
67-
box-shadow: none !important;
68-
}
69-
`;

‎frontend/src/app/components/FormGenerator/Basic/BasicFontStyle.tsx‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ import { Select } from 'antd';
2020
import { ChartStyleConfig } from 'app/types/ChartConfig';
2121
import { FONT_STYLE } from 'globalConstants';
2222
import { FC, memo } from 'react';
23-
import styled from 'styled-components/macro';
24-
import { BORDER_RADIUS } from 'styles/StyleConstants';
2523
import { ItemLayoutProps } from '../types';
2624
import { itemLayoutComparer } from '../utils';
2725
import { BW } from './components/BasicWrapper';
@@ -31,8 +29,9 @@ const BasicFontStyle: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
3129
const { comType, options, ...rest } = row;
3230

3331
return (
34-
<StyledVizFontStyle label={!options?.hideLabel ? t(row.label, true) : ''}>
32+
<BW label={!options?.hideLabel ? t(row.label, true) : ''}>
3533
<Select
34+
className="datart-ant-select"
3635
dropdownMatchSelectWidth
3736
{...rest}
3837
{...options}
@@ -45,23 +44,10 @@ const BasicFontStyle: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
4544
</Select.Option>
4645
))}
4746
</Select>
48-
</StyledVizFontStyle>
47+
</BW>
4948
);
5049
},
5150
itemLayoutComparer,
5251
);
5352

5453
export default BasicFontStyle;
55-
56-
const StyledVizFontStyle = styled(BW)`
57-
.ant-select {
58-
color: ${p => p.theme.textColorSnd};
59-
}
60-
61-
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
62-
background-color: ${p => p.theme.emphasisBackground};
63-
border-color: ${p => p.theme.emphasisBackground} !important;
64-
border-radius: ${BORDER_RADIUS};
65-
box-shadow: none !important;
66-
}
67-
`;

‎frontend/src/app/components/FormGenerator/Basic/BasicFontWeight.tsx‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ import { Select } from 'antd';
2020
import { ChartStyleConfig } from 'app/types/ChartConfig';
2121
import { FONT_WEIGHT } from 'globalConstants';
2222
import { FC, memo } from 'react';
23-
import styled from 'styled-components/macro';
24-
import { BORDER_RADIUS } from 'styles/StyleConstants';
2523
import { ItemLayoutProps } from '../types';
2624
import { itemLayoutComparer } from '../utils';
2725
import { BW } from './components/BasicWrapper';
@@ -31,10 +29,9 @@ const BasicFontWeight: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
3129
const { comType, options, ...rest } = row;
3230

3331
return (
34-
<StyledVizFontWeight
35-
label={!options?.hideLabel ? t(row.label, true) : ''}
36-
>
32+
<BW label={!options?.hideLabel ? t(row.label, true) : ''}>
3733
<Select
34+
className="datart-ant-select"
3835
dropdownMatchSelectWidth
3936
{...rest}
4037
{...options}
@@ -47,23 +44,10 @@ const BasicFontWeight: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
4744
</Select.Option>
4845
))}
4946
</Select>
50-
</StyledVizFontWeight>
47+
</BW>
5148
);
5249
},
5350
itemLayoutComparer,
5451
);
5552

5653
export default BasicFontWeight;
57-
58-
const StyledVizFontWeight = styled(BW)`
59-
.ant-select {
60-
color: ${p => p.theme.textColorSnd};
61-
}
62-
63-
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
64-
background-color: ${p => p.theme.emphasisBackground};
65-
border-color: ${p => p.theme.emphasisBackground} !important;
66-
border-radius: ${BORDER_RADIUS};
67-
box-shadow: none !important;
68-
}
69-
`;

0 commit comments

Comments
 (0)