Skip to content

Commit 18ffb92

Browse files
MaphikzaMaphikza
authored
Merge pull request #55 from HORNET-Storage/ui/allowed-users-improvements
UI: allowed users improvements
2 parents 41eaa60 + 4460c09 commit 18ffb92

File tree

9 files changed

+151
-92
lines changed

9 files changed

+151
-92
lines changed

‎src/components/allowed-users/components/NPubManagement/NPubManagement.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
44
import { useAllowedUsersList, useAllowedUsersValidation } from '@app/hooks/useAllowedUsers';
55
import { AllowedUsersSettings, AllowedUsersMode, AllowedUser } from '@app/types/allowedUsers.types';
66
import * as S from './NPubManagement.styles';
7+
import { TableContainer } from '../TiersConfig/TiersConfig.styles';
78

89
interface NPubManagementProps {
910
settings: AllowedUsersSettings;
@@ -158,19 +159,22 @@ export const NPubManagement: React.FC<NPubManagementProps> = ({
158159
</Space>
159160
</S.TabHeader>
160161

161-
<Table
162-
columns={columns}
163-
dataSource={users}
164-
loading={loading}
165-
pagination={{
166-
current: pagination.page,
167-
pageSize: pagination.page_size,
168-
total: pagination.total_items,
169-
showSizeChanger: false,
170-
showTotal: (total) => `Total ${total} users`
171-
}}
172-
rowKey="npub"
173-
/>
162+
<TableContainer>
163+
<Table
164+
columns={columns}
165+
dataSource={users}
166+
loading={loading}
167+
168+
pagination={{
169+
current: pagination.page,
170+
pageSize: pagination.page_size,
171+
total: pagination.total_items,
172+
showSizeChanger: false,
173+
showTotal: (total) => `Total ${total} users`
174+
}}
175+
rowKey="npub"
176+
/>
177+
</TableContainer>
174178

175179
{/* Add User Modal */}
176180
<Modal

‎src/components/allowed-users/components/PermissionsConfig/PermissionsConfig.styles.ts‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export const PermissionExplanations = styled.div`
7979
ul {
8080
margin: 0;
8181
padding-left: 1.25rem;
82-
82+
8383
li {
8484
margin-bottom: 0.5rem;
8585
font-size: 13px;
@@ -100,25 +100,27 @@ export const PermissionExplanations = styled.div`
100100
export const ForcedSelectWrapper = styled.div<{ $isForced: boolean }>`
101101
.ant-select {
102102
width: 100%;
103-
103+
.ant-select-arrow{
104+
color: ${(props) => (!props.$isForced ? `var(--text-main-color)` : `var(--text-light-color)`)};
105+
}
104106
.ant-select-selector {
105-
background-color: ${props => props.$isForced ? '#1a1d35' : '#25284B'} !important;
106-
border: ${props => props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9'} !important;
107-
color: ${props => props.$isForced ? '#8c8c8c' : '#d9d9d9'} !important;
107+
background-color: ${(props) => (props.$isForced ? '#1a1d35' : '#25284B')} !important;
108+
border: ${(props) => (props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9')} !important;
109+
color: ${(props) => (props.$isForced ? '#8c8c8c' : '#d9d9d9')} !important;
108110
}
109-
111+
110112
.ant-select-selection-item {
111-
color: ${props => props.$isForced ? '#8c8c8c' : '#d9d9d9'} !important;
113+
color: ${(props) => (props.$isForced ? '#8c8c8c' : '#d9d9d9')} !important;
112114
}
113-
115+
114116
&.ant-select-disabled {
115117
.ant-select-selector {
116-
background-color: ${props => props.$isForced ? '#1a1d35' : '#25284B'} !important;
117-
border: ${props => props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9'} !important;
118+
background-color: ${(props) => (props.$isForced ? '#1a1d35' : '#25284B')} !important;
119+
border: ${(props) => (props.$isForced ? '1px solid #434343' : '1px solid #d9d9d9')} !important;
118120
}
119-
121+
120122
.ant-select-selection-item {
121-
color: ${props => props.$isForced ? '#8c8c8c' : '#d9d9d9'} !important;
123+
color: ${(props) => (props.$isForced ? '#8c8c8c' : '#d9d9d9')} !important;
122124
}
123125
}
124126
}

‎src/components/allowed-users/components/TierEditor/TierEditor.tsx‎

Lines changed: 63 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React, { useState, useEffect } from 'react';
2-
import { Input, Select, Checkbox, Space, Typography, Alert } from 'antd';
3-
import {
4-
TierDisplayFormat,
5-
DataUnit,
6-
validateTierFormat,
2+
import { Select, Checkbox, Space, Typography, Alert } from 'antd';
3+
import {
4+
TierDisplayFormat,
5+
DataUnit,
6+
validateTierFormat,
77
displayToFriendlyString,
88
bytesToDisplayFormat,
9-
TIER_VALIDATION
9+
TIER_VALIDATION,
1010
} from '@app/utils/tierConversion.utils';
1111
import { AllowedUsersTier } from '@app/types/allowedUsers.types';
12+
import { StyledInput } from '@app/styles/themes/reusableComponentStyles';
13+
import styled from 'styled-components';
1214

1315
const { Text } = Typography;
1416
const { Option } = Select;
@@ -21,12 +23,25 @@ interface TierEditorProps {
2123
showPrice?: boolean;
2224
}
2325

26+
const PreviewTextWrapper = styled.div`
27+
display: flex;
28+
flex-direction: column;
29+
gap: 1rem;
30+
.ant-typography {
31+
color: var(--text-main-color);
32+
}
33+
`;
34+
const SelectWrapper = styled.div`
35+
.ant-select-arrow {
36+
color: var(--text-main-color);
37+
}
38+
`
2439
export const TierEditor: React.FC<TierEditorProps> = ({
2540
tier,
2641
onTierChange,
2742
disabled = false,
2843
showName = true,
29-
showPrice = true
44+
showPrice = true,
3045
}) => {
3146
// Convert backend format to display format for editing
3247
const [displayFormat, setDisplayFormat] = useState<TierDisplayFormat>(() => {
@@ -49,34 +64,39 @@ export const TierEditor: React.FC<TierEditorProps> = ({
4964
const updatedTier: AllowedUsersTier = {
5065
name,
5166
price_sats: priceSats,
52-
monthly_limit_bytes: displayFormat.unlimited ? 0 :
53-
Math.round(displayFormat.value * getUnitMultiplier(displayFormat.unit)),
54-
unlimited: displayFormat.unlimited
67+
monthly_limit_bytes: displayFormat.unlimited
68+
? 0
69+
: Math.round(displayFormat.value * getUnitMultiplier(displayFormat.unit)),
70+
unlimited: displayFormat.unlimited,
5571
};
5672
onTierChange(updatedTier);
5773
}
5874
}, [displayFormat, name, priceSats, isValid, onTierChange]);
5975

6076
const getUnitMultiplier = (unit: DataUnit): number => {
6177
switch (unit) {
62-
case 'MB': return 1048576; // 1024 * 1024
63-
case 'GB': return 1073741824; // 1024 * 1024 * 1024
64-
case 'TB': return 1099511627776; // 1024 * 1024 * 1024 * 1024
65-
default: return 1048576;
78+
case 'MB':
79+
return 1048576; // 1024 * 1024
80+
case 'GB':
81+
return 1073741824; // 1024 * 1024 * 1024
82+
case 'TB':
83+
return 1099511627776; // 1024 * 1024 * 1024 * 1024
84+
default:
85+
return 1048576;
6686
}
6787
};
6888

6989
const handleValueChange = (value: string) => {
7090
const numericValue = parseFloat(value) || 0;
71-
setDisplayFormat(prev => ({ ...prev, value: numericValue }));
91+
setDisplayFormat((prev) => ({ ...prev, value: numericValue }));
7292
};
7393

7494
const handleUnitChange = (unit: DataUnit) => {
75-
setDisplayFormat(prev => ({ ...prev, unit }));
95+
setDisplayFormat((prev) => ({ ...prev, unit }));
7696
};
7797

7898
const handleUnlimitedChange = (unlimited: boolean) => {
79-
setDisplayFormat(prev => ({ ...prev, unlimited }));
99+
setDisplayFormat((prev) => ({ ...prev, unlimited }));
80100
};
81101

82102
const handleNameChange = (value: string) => {
@@ -94,7 +114,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
94114
{showName && (
95115
<div>
96116
<Text strong>Tier Name</Text>
97-
<Input
117+
<StyledInput
98118
value={name}
99119
onChange={(e) => handleNameChange(e.target.value)}
100120
placeholder="Enter tier name"
@@ -108,7 +128,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
108128
{showPrice && (
109129
<div>
110130
<Text strong>Price (sats)</Text>
111-
<Input
131+
<StyledInput
112132
type="number"
113133
value={priceSats}
114134
onChange={(e) => handlePriceChange(e.target.value)}
@@ -123,7 +143,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
123143
{/* Data Limit */}
124144
<div>
125145
<Text strong>Monthly Data Limit</Text>
126-
146+
127147
{/* Unlimited Checkbox */}
128148
<div style={{ marginTop: 8, marginBottom: 8 }}>
129149
<Checkbox
@@ -138,7 +158,7 @@ export const TierEditor: React.FC<TierEditorProps> = ({
138158
{/* Value and Unit Inputs */}
139159
{!displayFormat.unlimited && (
140160
<Space.Compact style={{ width: '100%' }}>
141-
<Input
161+
<StyledInput
142162
type="number"
143163
value={displayFormat.value || ''}
144164
onChange={(e) => handleValueChange(e.target.value)}
@@ -147,43 +167,39 @@ export const TierEditor: React.FC<TierEditorProps> = ({
147167
min={TIER_VALIDATION.MIN_VALUE}
148168
style={{ flex: 1 }}
149169
/>
150-
<Select
151-
value={displayFormat.unit}
152-
onChange={handleUnitChange}
153-
disabled={disabled}
154-
style={{ width: 80 }}
155-
>
156-
<Option value="MB">MB</Option>
157-
<Option value="GB">GB</Option>
158-
<Option value="TB">TB</Option>
159-
</Select>
170+
<SelectWrapper>
171+
<Select value={displayFormat.unit} onChange={handleUnitChange} disabled={disabled} style={{ width: 80 }}>
172+
<Option value="MB">MB</Option>
173+
<Option value="GB">GB</Option>
174+
<Option value="TB">TB</Option>
175+
</Select>
176+
</SelectWrapper>
160177
</Space.Compact>
161178
)}
162179

163180
{/* Preview */}
164-
<div style={{ marginTop: 8 }}>
165-
<Text type="secondary">
166-
Preview: {displayToFriendlyString(displayFormat)}
167-
</Text>
168-
</div>
181+
<PreviewTextWrapper>
182+
<div style={{ marginTop: 8 }}>
183+
<Text color="" type="secondary">
184+
Preview: {displayToFriendlyString(displayFormat)}
185+
</Text>
186+
</div>
187+
</PreviewTextWrapper>
169188

170189
{/* Validation Error */}
171190
{!isValid && validation.error && (
172-
<Alert
173-
message={validation.error}
174-
type="error"
175-
style={{ marginTop: 8 }}
176-
showIcon
177-
/>
191+
<Alert message={validation.error} type="error" style={{ marginTop: 8 }} showIcon />
178192
)}
179193
</div>
180194

181195
{/* Helpful Information */}
182-
<div style={{ marginTop: 8 }}>
183-
<Text type="secondary" style={{ fontSize: '12px' }}>
184-
Valid range: 1 MB to 1 TB
185-
</Text>
186-
</div>
196+
<PreviewTextWrapper>
197+
<div style={{ marginTop: 8 }}>
198+
<Text type="secondary" style={{ fontSize: '12px' }}>
199+
Valid range: 1 MB to 1 TB
200+
</Text>
201+
</div>
202+
</PreviewTextWrapper>
187203
</Space>
188204
);
189205
};

‎src/components/allowed-users/components/TiersConfig/TiersConfig.styles.ts‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,30 @@ export const TiersHeader = styled.div`
1818
}
1919
`;
2020

21+
export const TableContainer = styled.div`
22+
border-radius: 12px;
23+
margin: 0 2px;
24+
padding-bottom: 1.5rem;
25+
background-color: var(--background-color);
26+
border: 1px solid var(--border-base-color);
27+
.ant-table {
28+
border-radius: 12px;
29+
}
30+
.ant-table-tbody {
31+
background-color: var(--layout-sider-bg-color);
32+
}
33+
.ant-table-placeholder .ant-table-cell {
34+
background-color: var(--layout-sider-bg-color);
35+
transition: none;
36+
}
37+
.ant-table-placeholder .ant-table-cell:hover {
38+
background-color: var(--layout-sider-bg-color);
39+
}
40+
.ant-empty-description {
41+
color: var(--text-light-color);
42+
}
43+
`;
44+
2145
export const TiersTitle = styled.h3`
2246
margin: 0;
2347
color: var(--text-main-color);
@@ -36,5 +60,5 @@ interface PriceProps {
3660

3761
export const Price = styled.span<PriceProps>`
3862
font-weight: 600;
39-
color: ${({ $isFree }) => $isFree ? 'var(--success-color)' : 'var(--primary-color)'};
40-
`;
63+
color: ${({ $isFree }) => ($isFree ? 'var(--success-color)' : 'var(--primary-color)')};
64+
`;

‎src/components/allowed-users/components/TiersConfig/TiersConfig.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -345,13 +345,15 @@ export const TiersConfig: React.FC<TiersConfigProps> = ({
345345
</Radio.Group>
346346
</div>
347347
) : (
348-
<Table
349-
columns={columns}
350-
dataSource={settings.tiers.map((tier, index) => ({ ...tier, key: index }))}
351-
pagination={false}
352-
size="small"
353-
locale={{ emptyText: 'No tiers configured' }}
354-
/>
348+
<S.TableContainer>
349+
<Table
350+
columns={columns}
351+
dataSource={settings.tiers.map((tier, index) => ({ ...tier, key: index }))}
352+
pagination={false}
353+
size="small"
354+
locale={{ emptyText: 'No tiers configured' }}
355+
/>
356+
</S.TableContainer>
355357
)}
356358

357359
<Modal

‎src/components/allowed-users/layouts/AllowedUsersLayout.styles.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import styled from 'styled-components';
22
import { FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
3+
import { Card } from 'antd';
34

45
export const Container = styled.div`
56
padding: 1.5rem;
@@ -64,4 +65,9 @@ export const ChangesIndicator = styled.span`
6465
color: var(--warning-color);
6566
font-size: 14px;
6667
font-style: italic;
68+
`;
69+
export const ContentCard = styled(Card)`
70+
background: var(--secondary-background-color);
71+
border-color: var(--border-base-color);
72+
6773
`;

0 commit comments

Comments
 (0)