Skip to content

Commit 9f7a49b

Browse files
raheeliftikhar5raheeliftikhar5
committed
fix: UI fixes
1 parent a19df59 commit 9f7a49b

File tree

10 files changed

+233
-205
lines changed

10 files changed

+233
-205
lines changed

‎client/packages/lowcoder-design/src/components/Menu.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -140,11 +140,13 @@ const DropDownMenuItemCss = `
140140
`;
141141

142142
const DropdownMenu = styled(AntdMenu)`
143-
padding: 8px;
144-
background: #ffffff;
145-
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
146-
border-radius: 8px;
147-
${DropDownMenuItemCss}
143+
&&& {
144+
padding: 8px;
145+
background: #ffffff;
146+
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
147+
border-radius: 8px;
148+
${DropDownMenuItemCss}
149+
}
148150
`;
149151
const StyleableDropDownSubMenu = (props: { className?: string } & SubMenuProps) => {
150152
const { className, ...restProps } = props;

‎client/packages/lowcoder-design/src/components/button.tsx

Lines changed: 66 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -25,52 +25,54 @@ const buttonStyleConfig = {
2525
}
2626
`,
2727
primary: css`
28-
background: #4965f2;
29-
border: 1px solid #4965f2;
30-
color: #ffffff;
31-
32-
&.ant-btn-background-ghost {
33-
background-color: #fafbff;
34-
color: #4965f2;
35-
border-color: #c9d1fc;
28+
&&& {
29+
background: #4965f2;
30+
border: 1px solid #4965f2;
31+
color: #ffffff;
3632
37-
:hover {
38-
color: #315efb;
39-
background-color: #f5faff;
40-
border-color: #c2d6ff;
33+
&.ant-btn-background-ghost {
34+
background-color: #fafbff;
35+
color: #4965f2;
36+
border-color: #c9d1fc;
37+
38+
:hover {
39+
color: #315efb;
40+
background-color: #f5faff;
41+
border-color: #c2d6ff;
42+
}
43+
44+
:focus {
45+
color: #315efb;
46+
background-color: #f5faff;
47+
border-color: #c2d6ff;
48+
}
4149
}
4250
4351
:focus {
44-
color: #315efb;
45-
background-color: #f5faff;
46-
border-color: #c2d6ff;
52+
background: #4965f2;
53+
border: 1px solid #4965f2;
54+
color: #ffffff;
4755
}
48-
}
4956
50-
:focus {
51-
background: #4965f2;
52-
border: 1px solid #4965f2;
53-
color: #ffffff;
54-
}
57+
:hover {
58+
border: 1px solid #315efb;
59+
background: #315efb;
60+
color: #ffffff;
61+
}
5562
56-
:hover {
57-
border: 1px solid #315efb;
58-
background: #315efb;
59-
color: #ffffff;
60-
}
63+
:disabled {
64+
:hover {
65+
border: 1px solid #dbe1fd;
66+
background: #dbe1fd;
67+
color: #ffffff;
68+
opacity: 1;
69+
}
6170
62-
:disabled {
63-
:hover {
6471
border: 1px solid #dbe1fd;
6572
background: #dbe1fd;
6673
color: #ffffff;
6774
opacity: 1;
6875
}
69-
70-
border: 1px solid #dbe1fd;
71-
background: #dbe1fd;
72-
color: #ffffff;
73-
opacity: 1;
7476
}
7577
`,
7678
blue: css`
@@ -98,37 +100,41 @@ const buttonStyleConfig = {
98100
}
99101
`,
100102
link: css`
101-
color: #4955f2;
102-
border-color: #c9d1fc;
103-
background-color: #fafbff;
104-
105-
&:hover {
106-
color: #315efb;
107-
border-color: #c2d6ff;
108-
background-color: #f9fbff;
109-
}
110-
111-
&:focus {
112-
color: #315efb;
113-
border-color: #c2d6ff;
114-
background-color: #f9fbff;
103+
&&& {
104+
color: #4955f2;
105+
border-color: #c9d1fc;
106+
background-color: #fafbff;
107+
108+
&:hover {
109+
color: #315efb;
110+
border-color: #c2d6ff;
111+
background-color: #f9fbff;
112+
}
113+
114+
&:focus {
115+
color: #315efb;
116+
border-color: #c2d6ff;
117+
background-color: #f9fbff;
118+
}
115119
}
116120
`,
117121
delete: css`
118-
color: #f73131;
119-
border-color: #fccdcd;
120-
background-color: #fef4f4;
121-
122-
&:hover {
122+
&&& {
123123
color: #f73131;
124124
border-color: #fccdcd;
125-
background-color: #feecec;
126-
}
127-
128-
&:focus {
129-
color: #f73131;
130-
border-color: #fccdcd;
131-
background-color: #feecec;
125+
background-color: #fef4f4;
126+
127+
&:hover {
128+
color: #f73131;
129+
border-color: #fccdcd;
130+
background-color: #feecec;
131+
}
132+
133+
&:focus {
134+
color: #f73131;
135+
border-color: #fccdcd;
136+
background-color: #feecec;
137+
}
132138
}
133139
`,
134140
};
@@ -142,7 +148,7 @@ const StyledAntdButton = styled(Button)<{ $buttonType: TacoButtonType; $loading:
142148
text-align: center;
143149
line-height: 13px;
144150
font-size: 13px;
145-
border-radius: 4px;
151+
// border-radius: 4px;
146152
147153
&.ant-btn {
148154
box-shadow: none;

‎client/packages/lowcoder-design/src/components/popover.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ const SimplePopover = (props: {
6262
);
6363
return (
6464
<Popover
65+
overlayInnerStyle={{padding: 0}}
6566
align={{
6667
offset: [-12, 0, 0, 0],
6768
}}
@@ -161,6 +162,9 @@ const EditPopover = (props: EditPopoverProps) => {
161162

162163
return (
163164
<Popover
165+
arrow={false}
166+
overlayStyle={{paddingTop: '15px'}}
167+
overlayInnerStyle={{padding: 0}}
164168
content={() => (
165169
<>
166170
<Wedge />

‎client/packages/lowcoder/src/components/LinkPlusButton.tsx

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,33 @@ const Icon = styled.div`
1010
`;
1111

1212
const Btn = styled(TacoButton)`
13-
height: 13px;
14-
padding: 0;
15-
color: #4965f2;
16-
border: none;
17-
display: flex;
18-
align-items: center;
19-
font-size: 13px;
20-
line-height: 13px;
21-
box-shadow: none;
22-
23-
:hover {
24-
color: #315efb;
25-
border: none;
26-
background-color: #ffffff;
27-
}
13+
&&& {
2814
29-
:focus {
30-
color: #315efb;
15+
height: 13px;
16+
padding: 0;
17+
color: #4965f2;
3118
border: none;
32-
background-color: #ffffff;
33-
}
19+
display: flex;
20+
align-items: center;
21+
font-size: 13px;
22+
line-height: 13px;
23+
box-shadow: none;
24+
25+
:hover {
26+
color: #315efb;
27+
border: none;
28+
background-color: #ffffff;
29+
}
30+
31+
:focus {
32+
color: #315efb;
33+
border: none;
34+
background-color: #ffffff;
35+
}
3436
35-
&:hover ${Icon} g {
36-
stroke: #315efb;
37+
&:hover ${Icon} g {
38+
stroke: #315efb;
39+
}
3740
}
3841
`;
3942

‎client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,38 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
1111
const hoverColor = genHoverColor(buttonStyle.background);
1212
const activeColor = genActiveColor(buttonStyle.background);
1313
return css`
14-
border-radius: ${buttonStyle.radius};
15-
margin: ${buttonStyle.margin};
16-
padding: ${buttonStyle.padding};
17-
&:not(:disabled) {
18-
// click animation color
19-
--antd-wave-shadow-color: ${buttonStyle.border};
20-
border-color: ${buttonStyle.border};
21-
color: ${buttonStyle.text};
22-
background-color: ${buttonStyle.background};
14+
&&& {
2315
border-radius: ${buttonStyle.radius};
2416
margin: ${buttonStyle.margin};
2517
padding: ${buttonStyle.padding};
26-
27-
:hover,
28-
:focus {
29-
color: ${buttonStyle.text};
30-
background-color: ${hoverColor};
31-
border-color: ${buttonStyle.border === buttonStyle.background
32-
? hoverColor
33-
: buttonStyle.border};
34-
}
35-
36-
:active {
18+
&:not(:disabled) {
19+
// click animation color
20+
--antd-wave-shadow-color: ${buttonStyle.border};
21+
border-color: ${buttonStyle.border};
3722
color: ${buttonStyle.text};
38-
background-color: ${activeColor};
39-
border-color: ${buttonStyle.border === buttonStyle.background
40-
? activeColor
41-
: buttonStyle.border};
23+
background-color: ${buttonStyle.background};
24+
border-radius: ${buttonStyle.radius};
25+
margin: ${buttonStyle.margin};
26+
padding: ${buttonStyle.padding};
27+
28+
:hover,
29+
:focus {
30+
color: ${buttonStyle.text};
31+
background-color: ${hoverColor};
32+
border-color: ${buttonStyle.border === buttonStyle.background
33+
? hoverColor
34+
: buttonStyle.border};
35+
}
36+
37+
:active {
38+
color: ${buttonStyle.text};
39+
background-color: ${activeColor};
40+
border-color: ${buttonStyle.border === buttonStyle.background
41+
? activeColor
42+
: buttonStyle.border};
43+
}
4244
}
4345
}
44-
4546
`;
4647
}
4748

‎client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ const Dropdown = styled(AntdDropdown)`
3030
`;
3131

3232
const CreateDropdownMenu = styled(AntdMenu)`
33+
&&& {
34+
3335
width: fit-content;
3436
min-width: 110px;
3537
padding: 8px;
@@ -54,7 +56,9 @@ const CreateDropdownMenu = styled(AntdMenu)`
5456
font-size: 13px;
5557
color: #333333;
5658
line-height: 13px;
59+
display: flex;
5760
}
61+
}
5862
`;
5963

6064
const CreateMenuItem = styled.div`

‎client/packages/lowcoder/src/pages/common/header.tsx

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -142,25 +142,27 @@ const LoginBtn = styled(TacoButton)`
142142
margin-right: 4px;
143143
`;
144144
const GrayBtn = styled(TacoButton)`
145-
color: #ffffff;
146-
background: #8b8fa34c;
147-
border: none;
148-
height: 28px;
149-
padding: 4px 13px;
150-
margin-right: 8px;
151-
cursor: pointer;
152-
--antd-wave-shadow-color: #8b8fa34c;
153-
154-
&:hover {
155-
background: #666666;
156-
color: #ffffff;
157-
border: none;
158-
}
159-
160-
&:focus {
161-
background: #666666;
145+
&&& {
162146
color: #ffffff;
147+
background: #8b8fa34c;
163148
border: none;
149+
height: 28px;
150+
padding: 4px 13px;
151+
margin-right: 8px;
152+
cursor: pointer;
153+
--antd-wave-shadow-color: #8b8fa34c;
154+
155+
&:hover {
156+
background: #666666;
157+
color: #ffffff;
158+
border: none;
159+
}
160+
161+
&:focus {
162+
background: #666666;
163+
color: #ffffff;
164+
border: none;
165+
}
164166
}
165167
`;
166168

0 commit comments

Comments
 (0)