Skip to content

Commit e8ba1c7

Browse files
AnthonyMarinAnthonyMarin
committed
basic redesign
1 parent c632fdb commit e8ba1c7

6 files changed

Lines changed: 145 additions & 66 deletions

File tree

‎src/components/blocked-pubkeys/BlockedPubkeys.styles.ts‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,62 @@
11
import styled from 'styled-components';
2+
import Card from 'antd/lib/card/Card';
3+
import Table from 'antd/es/table';
4+
import { Input } from 'antd';
5+
import { BaseCol } from '../common/BaseCol/BaseCol';
6+
export const TableRoot = styled(Table)`
7+
border-radius: 12px;
8+
9+
& .ant-table-thead .ant-table-cell {
10+
background-color: var(--secondary-background-color);
11+
}
12+
.ant-table-container table > thead > tr:first-child th:last-child {
13+
border-top-right-radius: 12px;
14+
}
15+
.ant-table-container table > thead > tr:first-child th:first-child {
16+
border-top-left-radius: 12px;
17+
}
18+
.ant-table-tbody {
19+
background-color: var(--layout-sider-bg-color);
20+
}
21+
.ant-table-placeholder .ant-table-cell {
22+
background-color: var(--layout-sider-bg-color);
23+
transition: none;
24+
}
25+
.ant-table-placeholder .ant-table-cell:hover {
26+
background-color: var(--layout-sider-bg-color);
27+
}
28+
`;
29+
export const InputRoot = styled(Input)`
30+
background-color: var(--layout-sider-bg-color);
31+
& input {
32+
background-color: var(--layout-sider-bg-color);
33+
}
34+
`;
35+
export const BaseColRoot = styled(BaseCol)`
36+
overflow: auto;
37+
border-radius: 8px;
38+
height: 100%;
39+
`;
40+
export const TableContainer = styled.div`
41+
border-radius: 8px;
42+
`;
43+
export const CardRoot = styled(Card)`
44+
border: none;
45+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
46+
background-color: var(--background-color);
47+
padding-left: 1.5rem;
48+
padding-right: 1.5rem;
49+
padding-top: 1rem;
50+
padding-bottom: 2rem;
51+
`;
252

353
export const HeaderWrapper = styled.div`
454
display: flex;
555
justify-content: space-between;
656
margin-bottom: 1.5rem;
757
flex-wrap: wrap;
858
gap: 1rem;
9-
59+
1060
@media (max-width: 768px) {
1161
flex-direction: column;
1262
}
@@ -54,3 +104,10 @@ export const CircularBadge = styled.div<{ color: string }>`
54104
font-weight: bold;
55105
margin-right: 8px;
56106
`;
107+
export const EmptyList = styled.div`
108+
min-height: 4rem;
109+
display: flex;
110+
align-items: center;
111+
justify-content: center;
112+
color: var(--text-light-color);
113+
`;

‎src/components/blocked-pubkeys/BlockedPubkeys.tsx‎

Lines changed: 54 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from 'react';
2-
import { Card, Space, Typography } from 'antd';
2+
import { Space, Typography } from 'antd';
33
import useBlockedPubkeys from '@app/hooks/useBlockedPubkeys';
44
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
55
import { ReloadOutlined } from '@ant-design/icons';
@@ -30,57 +30,59 @@ export const BlockedPubkeys: React.FC = () => {
3030
};
3131

3232
return (
33-
<Card>
34-
<Space direction="vertical" size="large" style={{ width: '100%' }}>
35-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
36-
<div>
37-
<Title level={4}>Access Control</Title>
38-
<Text type="secondary">
39-
Control access to your relay and manage flagged pubkeys
40-
</Text>
33+
<S.BaseColRoot >
34+
<S.CardRoot>
35+
<Space direction="vertical" size="large" style={{ width: '100%' }}>
36+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
37+
<div>
38+
<Title level={3}>Access Control</Title>
39+
<Text style={{color:"var(--text-light-color)"}}>
40+
Control access to your relay and manage flagged pubkeys
41+
</Text>
42+
</div>
43+
<BaseButton
44+
icon={<ReloadOutlined />}
45+
onClick={handleRefresh}
46+
loading={loading || statsLoading}
47+
>
48+
Refresh
49+
</BaseButton>
4150
</div>
42-
<BaseButton
43-
icon={<ReloadOutlined />}
44-
onClick={handleRefresh}
45-
loading={loading || statsLoading}
46-
>
47-
Refresh
48-
</BaseButton>
49-
</div>
50-
51-
{activeView === 'blocked' && (
52-
<BlockPubkeyForm onSubmit={addBlockedPubkey} disabled={loading} />
53-
)}
54-
55-
<S.NavContainer>
56-
<S.NavLink
57-
active={activeView === 'blocked'}
58-
onClick={() => setActiveView('blocked')}
59-
>
60-
Blocked Access
61-
</S.NavLink>
62-
<S.NavLink
63-
active={activeView === 'flagged'}
64-
onClick={() => setActiveView('flagged')}
65-
>
66-
Flagged Access
67-
</S.NavLink>
68-
</S.NavContainer>
69-
70-
{activeView === 'blocked' ? (
71-
<BlockedPubkeysTable
72-
blockedPubkeys={blockedPubkeys}
73-
loading={loading}
74-
onUnblock={removeBlockedPubkey}
75-
/>
76-
) : (
77-
<FlaggedPubkeysTable
78-
blockedPubkeys={blockedPubkeys}
79-
onBlock={addBlockedPubkey}
80-
disabled={loading}
81-
/>
82-
)}
83-
</Space>
84-
</Card>
51+
52+
{activeView === 'blocked' && (
53+
<BlockPubkeyForm onSubmit={addBlockedPubkey} disabled={loading} />
54+
)}
55+
56+
<S.NavContainer>
57+
<S.NavLink
58+
active={activeView === 'blocked'}
59+
onClick={() => setActiveView('blocked')}
60+
>
61+
Blocked Access
62+
</S.NavLink>
63+
<S.NavLink
64+
active={activeView === 'flagged'}
65+
onClick={() => setActiveView('flagged')}
66+
>
67+
Flagged Access
68+
</S.NavLink>
69+
</S.NavContainer>
70+
71+
{activeView === 'blocked' ? (
72+
<BlockedPubkeysTable
73+
blockedPubkeys={blockedPubkeys}
74+
loading={loading}
75+
onUnblock={removeBlockedPubkey}
76+
/>
77+
) : (
78+
<FlaggedPubkeysTable
79+
blockedPubkeys={blockedPubkeys}
80+
onBlock={addBlockedPubkey}
81+
disabled={loading}
82+
/>
83+
)}
84+
</Space>
85+
</S.CardRoot>
86+
</S.BaseColRoot>
8587
);
8688
};

‎src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,29 @@
11
import React, { useState } from 'react';
22
import { Form, Input, Button, Card } from 'antd';
33
import { PlusOutlined } from '@ant-design/icons';
4+
import styled from 'styled-components';
45

56
interface BlockPubkeyFormProps {
67
onSubmit: (pubkey: string, reason?: string) => Promise<void>;
78
disabled: boolean;
89
}
10+
const CardRoot = styled(Card)`
11+
border-color: var(--border-base-color) !important;
12+
border-width: 1px;
13+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
14+
background-color: var(--secondary-background-color) !important;
15+
16+
& .ant-card-head {
17+
border-bottom-color: var(--border-base-color) !important;
18+
}
19+
}
20+
`;
21+
const TextArea = styled(Input.TextArea)`
22+
background-color: var(--layout-sider-bg-color) !important;
23+
`
24+
const InputArea = styled(Input)`
25+
background-color: var(--layout-sider-bg-color) !important;
26+
`;
927

1028
export const BlockPubkeyForm: React.FC<BlockPubkeyFormProps> = ({
1129
onSubmit,
@@ -34,9 +52,10 @@ export const BlockPubkeyForm: React.FC<BlockPubkeyFormProps> = ({
3452
}
3553
return Promise.resolve();
3654
};
55+
3756

3857
return (
39-
<Card title="Block a Pubkey" size="small">
58+
<CardRoot title="Block a Pubkey" size="small">
4059
<Form
4160
form={form}
4261
layout="vertical"
@@ -47,14 +66,14 @@ export const BlockPubkeyForm: React.FC<BlockPubkeyFormProps> = ({
4766
label="Pubkey to block"
4867
rules={[{ validator: validatePubkey }]}
4968
>
50-
<Input placeholder="Enter the 64-character hex pubkey" />
69+
<InputArea placeholder="Enter the 64-character hex pubkey" />
5170
</Form.Item>
5271

5372
<Form.Item
5473
name="reason"
5574
label="Reason (optional)"
5675
>
57-
<Input.TextArea
76+
<TextArea
5877
placeholder="Enter reason for blocking this pubkey"
5978
rows={2}
6079
/>
@@ -72,6 +91,6 @@ export const BlockPubkeyForm: React.FC<BlockPubkeyFormProps> = ({
7291
</Button>
7392
</Form.Item>
7493
</Form>
75-
</Card>
94+
</CardRoot>
7695
);
7796
};

‎src/components/blocked-pubkeys/components/BlockedPubkeysTable.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({
127127
return (
128128
<>
129129
<div style={{ marginBottom: '1rem' }}>
130-
<Input
130+
<S.InputRoot
131131
placeholder="Search pubkeys or reasons"
132132
value={searchText}
133133
onChange={e => setSearchText(e.target.value)}
@@ -136,7 +136,7 @@ export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({
136136
/>
137137
</div>
138138

139-
<Table
139+
<S.TableRoot
140140
dataSource={filteredPubkeys}
141141
columns={columns}
142142
rowKey="pubkey"
@@ -146,7 +146,7 @@ export const BlockedPubkeysTable: React.FC<BlockedPubkeysTableProps> = ({
146146
showSizeChanger: true,
147147
showTotal: (total) => `Total: ${total} blocked pubkeys`,
148148
}}
149-
locale={{ emptyText: 'No blocked pubkeys' }}
149+
locale={{ emptyText: <S.EmptyList>No blocked pubkeys</S.EmptyList> }}
150150
/>
151151

152152
<Modal

‎src/components/blocked-pubkeys/components/FlaggedPubkeysTable.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { useState } from 'react';
2-
import { Table, Input, Button, Space, Badge, Spin, Modal } from 'antd';
3-
import { StopOutlined, SearchOutlined, FlagOutlined } from '@ant-design/icons';
2+
import { Input, Button, Modal } from 'antd';
3+
import { StopOutlined, SearchOutlined } from '@ant-design/icons';
44
import { useModerationStats, UserStat } from '@app/hooks/useModerationStats';
55
import { BlockedPubkey } from '@app/api/blockedPubkeys.api';
6+
67
import * as S from '../BlockedPubkeys.styles';
78

89
interface FlaggedPubkeysTableProps {
@@ -109,7 +110,7 @@ export const FlaggedPubkeysTable: React.FC<FlaggedPubkeysTableProps> = ({
109110
/>
110111
</div>
111112

112-
<Table
113+
<S.TableRoot
113114
dataSource={filteredPubkeys}
114115
columns={columns}
115116
rowKey="pubkey"
@@ -119,7 +120,7 @@ export const FlaggedPubkeysTable: React.FC<FlaggedPubkeysTableProps> = ({
119120
showSizeChanger: true,
120121
showTotal: (total) => `Total: ${total} flagged pubkeys`,
121122
}}
122-
locale={{ emptyText: statsLoading ? 'Loading...' : 'No flagged pubkeys found' }}
123+
locale={{ emptyText: statsLoading ?<S.EmptyList>Loading... </S.EmptyList>: <S.EmptyList>No flagged pubkeys found</S.EmptyList> }}
123124
/>
124125

125126
{/* Block Confirmation Modal */}

‎src/styles/themes/dark/darkTheme.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const darkColorsTheme: ITheme = {
6666
siderBackground: '#121430',
6767
spinnerBase: '#339CFD',
6868
scroll: '#797C9A',
69-
border: '#ffffff',
69+
border: '#a9a9a9',// changed to a grayer color
7070
borderNft: '#797C9A',
7171
textMain: '#ffffff',
7272
textLight: '#9A9B9F',
@@ -91,7 +91,7 @@ export const darkColorsTheme: ITheme = {
9191
notificationWarning: '#FFF4E7',
9292
notificationError: '#FFE2E2',
9393
heading: BASE_COLORS.white,
94-
borderBase: '#a9a9a9',
94+
borderBase: '#c7c6ca78',
9595
disable: '#7e7e7e',
9696
disabledBg: '#1c2137',
9797
layoutBodyBg: '#1e2142',

0 commit comments

Comments
 (0)