Skip to content

Commit 0abe597

Browse files
iamfaraniamfaran
committed
Update Environments Table Card UI
1 parent 0697c93 commit 0abe597

File tree

1 file changed

+45
-49
lines changed

1 file changed

+45
-49
lines changed

‎client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx‎

Lines changed: 45 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface EnvironmentsTableProps {
1313
}
1414

1515
/**
16-
* Modern card-based layout for displaying environments
16+
* Clean card-based layout for displaying environments consistent with app design
1717
*/
1818
const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
1919
environments,
@@ -34,17 +34,16 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
3434

3535
// Generate background color for environment avatar
3636
const getAvatarColor = (name: string) => {
37-
let hash = 0;
38-
for (let i = 0; i < name.length; i++) {
39-
hash = name.charCodeAt(i) + ((hash << 5) - hash);
40-
}
41-
4237
const type = name.toUpperCase();
4338
if (type === 'PROD') return '#f5222d';
4439
if (type === 'PREPROD') return '#fa8c16';
4540
if (type === 'TEST') return '#722ed1';
4641
if (type === 'DEV') return '#1890ff';
4742

43+
let hash = 0;
44+
for (let i = 0; i < name.length; i++) {
45+
hash = name.charCodeAt(i) + ((hash << 5) - hash);
46+
}
4847
const hue = Math.abs(hash % 360);
4948
return `hsl(${hue}, 70%, 50%)`;
5049
};
@@ -90,7 +89,6 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
9089
}
9190
};
9291

93-
// For card display, we'll use a custom layout instead of Table
9492
if (environments.length === 0) {
9593
return null;
9694
}
@@ -107,16 +105,14 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
107105
<Card
108106
hoverable
109107
style={{
110-
borderRadius: '8px',
111-
overflow: 'hidden',
108+
borderRadius: '4px',
112109
height: '100%',
113110
cursor: 'pointer',
114-
transition: 'all 0.3s ease',
115-
boxShadow: '0 1px 3px rgba(0,0,0,0.02)',
111+
transition: 'all 0.2s ease',
116112
border: '1px solid #f0f0f0',
117113
position: 'relative'
118114
}}
119-
bodyStyle={{ padding: '20px' }}
115+
bodyStyle={{ padding: '16px' }}
120116
onClick={() => handleRowClick(env)}
121117
>
122118
{/* Subtle overlay for unlicensed environments */}
@@ -127,7 +123,7 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
127123
left: 0,
128124
right: 0,
129125
bottom: 0,
130-
background: 'rgba(255, 255, 255, 0.7)',
126+
background: 'rgba(255, 255, 255, 0.8)',
131127
zIndex: 1,
132128
display: 'flex',
133129
alignItems: 'flex-start',
@@ -138,14 +134,13 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
138134
<div style={{
139135
background: licenseDisplay.color,
140136
color: 'white',
141-
padding: '6px 12px',
142-
borderRadius: '16px',
137+
padding: '4px 8px',
138+
borderRadius: '4px',
143139
fontSize: '12px',
144-
fontWeight: 600,
140+
fontWeight: 500,
145141
display: 'flex',
146142
alignItems: 'center',
147-
gap: '6px',
148-
boxShadow: '0 2px 6px rgba(0,0,0,0.15)'
143+
gap: '4px'
149144
}}>
150145
{licenseDisplay.icon}
151146
{licenseDisplay.text}
@@ -160,25 +155,24 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
160155
backgroundColor: getAvatarColor(env.environmentType),
161156
display: 'flex',
162157
alignItems: 'center',
163-
justifyContent: 'center',
164-
fontSize: '20px'
158+
justifyContent: 'center'
165159
}}
166-
size={48}
160+
size={40}
167161
icon={<CloudServerOutlined />}
168162
/>
169163
<div>
170-
<Title level={5} style={{ margin: 0, marginBottom: '4px' }}>
164+
<Title level={5} style={{ margin: 0, marginBottom: '4px', fontSize: '14px' }}>
171165
{env.environmentName || 'Unnamed Environment'}
172166
{env.isMaster && (
173167
<Tooltip title="Master Environment">
174-
<StarFilled style={{ color: '#faad14', marginLeft: '8px', fontSize: '14px' }} />
168+
<StarFilled style={{ color: '#faad14', marginLeft: '6px', fontSize: '12px' }} />
175169
</Tooltip>
176170
)}
177171
</Title>
178172
<Space size="small">
179173
<Tag
180174
color={getEnvironmentTagColor(env.environmentType)}
181-
style={{ borderRadius: '12px' }}
175+
style={{ fontSize: '11px', borderRadius: '4px' }}
182176
>
183177
{formatEnvironmentType(env.environmentType)}
184178
</Tag>
@@ -187,7 +181,7 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
187181
color={licenseDisplay.status === 'success' ? 'green' :
188182
licenseDisplay.status === 'error' ? 'red' :
189183
licenseDisplay.status === 'warning' ? 'orange' : 'blue'}
190-
style={{ borderRadius: '12px' }}
184+
style={{ fontSize: '11px', borderRadius: '4px' }}
191185
>
192186
{licenseDisplay.text}
193187
</Tag>
@@ -204,69 +198,71 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
204198
onClick={(e) => openAuditPage(env.environmentId, e)}
205199
size="small"
206200
style={{
207-
borderRadius: '50%',
208-
width: '32px',
209-
height: '32px'
201+
width: '28px',
202+
height: '28px',
203+
display: 'flex',
204+
alignItems: 'center',
205+
justifyContent: 'center'
210206
}}
211207
/>
212208
</Tooltip>
213209
</div>
214210
)}
215211
</div>
216212

217-
<div style={{ padding: '12px 0', borderTop: '1px solid #f5f5f5', marginTop: '4px' }}>
218-
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
219-
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
220-
<Text type="secondary" style={{ fontSize: '13px' }}>ID:</Text>
213+
<div style={{ padding: '8px 0', borderTop: '1px solid #f5f5f5' }}>
214+
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
215+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
216+
<Text type="secondary" style={{ fontSize: '12px' }}>ID:</Text>
221217
{isAccessible ? (
222-
<Text style={{ fontSize: '13px', fontFamily: 'monospace' }} copyable={{ tooltips: ['Copy ID', 'Copied!'] }}>
218+
<Text style={{ fontSize: '12px', fontFamily: 'monospace' }} copyable={{ tooltips: ['Copy ID', 'Copied!'] }}>
223219
{env.environmentId}
224220
</Text>
225221
) : (
226-
<Text style={{ fontSize: '13px', fontFamily: 'monospace' }}>
222+
<Text style={{ fontSize: '12px', fontFamily: 'monospace' }}>
227223
{env.environmentId}
228224
</Text>
229225
)}
230226
</div>
231227

232-
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
233-
<Text type="secondary" style={{ fontSize: '13px' }}>Domain:</Text>
228+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
229+
<Text type="secondary" style={{ fontSize: '12px' }}>Domain:</Text>
234230
{env.environmentFrontendUrl ? (
235231
isAccessible ? (
236232
<a
237233
href={env.environmentFrontendUrl}
238234
target="_blank"
239235
rel="noopener noreferrer"
240236
onClick={(e) => e.stopPropagation()}
241-
style={{ fontSize: '13px' }}
237+
style={{ fontSize: '12px' }}
242238
>
243239
{env.environmentFrontendUrl.replace(/^https?:\/\//, '')}
244-
<LinkOutlined style={{ marginLeft: 4, fontSize: '12px' }} />
240+
<LinkOutlined style={{ marginLeft: 4, fontSize: '10px' }} />
245241
</a>
246242
) : (
247-
<Text style={{ fontSize: '13px' }}>
243+
<Text style={{ fontSize: '12px' }}>
248244
{env.environmentFrontendUrl.replace(/^https?:\/\//, '')}
249245
</Text>
250246
)
251247
) : (
252-
<Text style={{ fontSize: '13px' }}>—</Text>
248+
<Text style={{ fontSize: '12px' }}>—</Text>
253249
)}
254250
</div>
255251

256-
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
257-
<Text type="secondary" style={{ fontSize: '13px' }}>Master:</Text>
258-
<Text style={{ fontSize: '13px' }}>
252+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
253+
<Text type="secondary" style={{ fontSize: '12px' }}>Master:</Text>
254+
<Text style={{ fontSize: '12px' }}>
259255
{env.isMaster ? 'Yes' : 'No'}
260256
</Text>
261257
</div>
262258

263-
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
264-
<Text type="secondary" style={{ fontSize: '13px' }}>License:</Text>
259+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
260+
<Text type="secondary" style={{ fontSize: '12px' }}>License:</Text>
265261
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
266-
<span style={{ color: licenseDisplay.color, fontSize: '13px' }}>
262+
<span style={{ color: licenseDisplay.color, fontSize: '12px' }}>
267263
{licenseDisplay.icon}
268264
</span>
269-
<Text style={{ fontSize: '13px', color: licenseDisplay.color }}>
265+
<Text style={{ fontSize: '12px', color: licenseDisplay.color }}>
270266
{licenseDisplay.text}
271267
</Text>
272268
</div>
@@ -280,8 +276,8 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
280276
</Row>
281277

282278
{environments.length > 10 && (
283-
<div style={{ textAlign: 'center', margin: '20px 0' }}>
284-
<Text type="secondary">
279+
<div style={{ textAlign: 'center', margin: '16px 0' }}>
280+
<Text type="secondary" style={{ fontSize: '13px' }}>
285281
Showing all {environments.length} environments
286282
</Text>
287283
</div>

0 commit comments

Comments
 (0)