From c632fdb4946715528117ecaf6d60a1c5ea461162 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Mon, 9 Jun 2025 15:08:56 -0700 Subject: [PATCH 01/10] fix: make overflow for content easier --- src/components/layouts/main/MainLayout/MainLayout.styles.ts | 2 +- src/components/layouts/main/MainLayout/MainLayout.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/layouts/main/MainLayout/MainLayout.styles.ts b/src/components/layouts/main/MainLayout/MainLayout.styles.ts index c89b9620..1470ba47 100644 --- a/src/components/layouts/main/MainLayout/MainLayout.styles.ts +++ b/src/components/layouts/main/MainLayout/MainLayout.styles.ts @@ -6,7 +6,7 @@ export const LayoutMaster = styled(BaseLayout)` `; export const LayoutMain = styled(BaseLayout)` - height: fit-content; + height: 100vh; @media only screen and ${media.md} { margin-left: 80px; } diff --git a/src/components/layouts/main/MainLayout/MainLayout.tsx b/src/components/layouts/main/MainLayout/MainLayout.tsx index 79d7f311..1dc07461 100644 --- a/src/components/layouts/main/MainLayout/MainLayout.tsx +++ b/src/components/layouts/main/MainLayout/MainLayout.tsx @@ -71,7 +71,7 @@ const MainLayout: React.FC = () => {
Date: Mon, 9 Jun 2025 16:26:42 -0700 Subject: [PATCH 02/10] basic redesign --- .../blocked-pubkeys/BlockedPubkeys.styles.ts | 59 +++++++++- .../blocked-pubkeys/BlockedPubkeys.tsx | 106 +++++++++--------- .../components/BlockPubkeyForm.tsx | 27 ++++- .../components/BlockedPubkeysTable.tsx | 6 +- .../components/FlaggedPubkeysTable.tsx | 9 +- src/styles/themes/dark/darkTheme.ts | 4 +- 6 files changed, 145 insertions(+), 66 deletions(-) diff --git a/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts b/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts index 97076bf6..f8f153dd 100644 --- a/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts +++ b/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts @@ -1,4 +1,54 @@ import styled from 'styled-components'; +import Card from 'antd/lib/card/Card'; +import Table from 'antd/es/table'; +import { Input } from 'antd'; +import { BaseCol } from '../common/BaseCol/BaseCol'; +export const TableRoot = styled(Table)` + border-radius: 12px; + + & .ant-table-thead .ant-table-cell { + background-color: var(--secondary-background-color); + } + .ant-table-container table > thead > tr:first-child th:last-child { + border-top-right-radius: 12px; + } + .ant-table-container table > thead > tr:first-child th:first-child { + border-top-left-radius: 12px; + } + .ant-table-tbody { + background-color: var(--layout-sider-bg-color); + } + .ant-table-placeholder .ant-table-cell { + background-color: var(--layout-sider-bg-color); + transition: none; + } + .ant-table-placeholder .ant-table-cell:hover { + background-color: var(--layout-sider-bg-color); + } +`; +export const InputRoot = styled(Input)` + background-color: var(--layout-sider-bg-color); + & input { + background-color: var(--layout-sider-bg-color); + } +`; +export const BaseColRoot = styled(BaseCol)` + overflow: auto; + border-radius: 8px; + height: 100%; +`; +export const TableContainer = styled.div` + border-radius: 8px; +`; +export const CardRoot = styled(Card)` + border: none; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + background-color: var(--background-color); + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 1rem; + padding-bottom: 2rem; +`; export const HeaderWrapper = styled.div` display: flex; @@ -6,7 +56,7 @@ export const HeaderWrapper = styled.div` margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; - + @media (max-width: 768px) { flex-direction: column; } @@ -54,3 +104,10 @@ export const CircularBadge = styled.div<{ color: string }>` font-weight: bold; margin-right: 8px; `; +export const EmptyList = styled.div` + min-height: 4rem; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-light-color); +`; diff --git a/src/components/blocked-pubkeys/BlockedPubkeys.tsx b/src/components/blocked-pubkeys/BlockedPubkeys.tsx index 6f1acb28..226afd80 100644 --- a/src/components/blocked-pubkeys/BlockedPubkeys.tsx +++ b/src/components/blocked-pubkeys/BlockedPubkeys.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Card, Space, Typography } from 'antd'; +import { Space, Typography } from 'antd'; import useBlockedPubkeys from '@app/hooks/useBlockedPubkeys'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; import { ReloadOutlined } from '@ant-design/icons'; @@ -30,57 +30,59 @@ export const BlockedPubkeys: React.FC = () => { }; return ( - - -
-
- Access Control - - Control access to your relay and manage flagged pubkeys - + + + +
+
+ Access Control + + Control access to your relay and manage flagged pubkeys + +
+ } + onClick={handleRefresh} + loading={loading || statsLoading} + > + Refresh +
- } - onClick={handleRefresh} - loading={loading || statsLoading} - > - Refresh - -
- - {activeView === 'blocked' && ( - - )} - - - setActiveView('blocked')} - > - Blocked Access - - setActiveView('flagged')} - > - Flagged Access - - - - {activeView === 'blocked' ? ( - - ) : ( - - )} - - + + {activeView === 'blocked' && ( + + )} + + + setActiveView('blocked')} + > + Blocked Access + + setActiveView('flagged')} + > + Flagged Access + + + + {activeView === 'blocked' ? ( + + ) : ( + + )} + + + ); }; diff --git a/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx b/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx index d54c1fff..c8f91ee4 100644 --- a/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx +++ b/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx @@ -1,11 +1,29 @@ import React, { useState } from 'react'; import { Form, Input, Button, Card } from 'antd'; import { PlusOutlined } from '@ant-design/icons'; +import styled from 'styled-components'; interface BlockPubkeyFormProps { onSubmit: (pubkey: string, reason?: string) => Promise; disabled: boolean; } +const CardRoot = styled(Card)` + border-color: var(--border-base-color) !important; + border-width: 1px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); + background-color: var(--secondary-background-color) !important; + + & .ant-card-head { + border-bottom-color: var(--border-base-color) !important; + } +} +`; +const TextArea = styled(Input.TextArea)` + background-color: var(--layout-sider-bg-color) !important; +` +const InputArea = styled(Input)` + background-color: var(--layout-sider-bg-color) !important; +`; export const BlockPubkeyForm: React.FC = ({ onSubmit, @@ -34,9 +52,10 @@ export const BlockPubkeyForm: React.FC = ({ } return Promise.resolve(); }; + return ( - +
= ({ label="Pubkey to block" rules={[{ validator: validatePubkey }]} > - + - @@ -72,6 +91,6 @@ export const BlockPubkeyForm: React.FC = ({ -
+ ); }; diff --git a/src/components/blocked-pubkeys/components/BlockedPubkeysTable.tsx b/src/components/blocked-pubkeys/components/BlockedPubkeysTable.tsx index e2f24b04..86fba54c 100644 --- a/src/components/blocked-pubkeys/components/BlockedPubkeysTable.tsx +++ b/src/components/blocked-pubkeys/components/BlockedPubkeysTable.tsx @@ -127,7 +127,7 @@ export const BlockedPubkeysTable: React.FC = ({ return ( <>
- setSearchText(e.target.value)} @@ -136,7 +136,7 @@ export const BlockedPubkeysTable: React.FC = ({ />
- = ({ showSizeChanger: true, showTotal: (total) => `Total: ${total} blocked pubkeys`, }} - locale={{ emptyText: 'No blocked pubkeys' }} + locale={{ emptyText: No blocked pubkeys }} /> = ({ /> -
= ({ showSizeChanger: true, showTotal: (total) => `Total: ${total} flagged pubkeys`, }} - locale={{ emptyText: statsLoading ? 'Loading...' : 'No flagged pubkeys found' }} + locale={{ emptyText: statsLoading ?Loading... : No flagged pubkeys found }} /> {/* Block Confirmation Modal */} diff --git a/src/styles/themes/dark/darkTheme.ts b/src/styles/themes/dark/darkTheme.ts index fe905825..d7d7dde8 100644 --- a/src/styles/themes/dark/darkTheme.ts +++ b/src/styles/themes/dark/darkTheme.ts @@ -66,7 +66,7 @@ export const darkColorsTheme: ITheme = { siderBackground: '#121430', spinnerBase: '#339CFD', scroll: '#797C9A', - border: '#ffffff', + border: '#a9a9a9',// changed to a grayer color borderNft: '#797C9A', textMain: '#ffffff', textLight: '#9A9B9F', @@ -91,7 +91,7 @@ export const darkColorsTheme: ITheme = { notificationWarning: '#FFF4E7', notificationError: '#FFE2E2', heading: BASE_COLORS.white, - borderBase: '#a9a9a9', + borderBase: '#c7c6ca78', disable: '#7e7e7e', disabledBg: '#1c2137', layoutBodyBg: '#1e2142', From 523be8d74026afc3c05af7a5523d51dfa3f65433 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Tue, 10 Jun 2025 17:41:19 -0700 Subject: [PATCH 03/10] add icon to card --- src/components/blocked-pubkeys/BlockedPubkeys.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/blocked-pubkeys/BlockedPubkeys.tsx b/src/components/blocked-pubkeys/BlockedPubkeys.tsx index 226afd80..9b2fc3a1 100644 --- a/src/components/blocked-pubkeys/BlockedPubkeys.tsx +++ b/src/components/blocked-pubkeys/BlockedPubkeys.tsx @@ -7,6 +7,7 @@ import { BlockedPubkeysTable } from './components/BlockedPubkeysTable'; import { FlaggedPubkeysTable } from './components/FlaggedPubkeysTable'; import { BlockPubkeyForm } from './components/BlockPubkeyForm'; import { useModerationStats } from '@app/hooks/useModerationStats'; +import { LockFilled } from '@ant-design/icons'; import * as S from './BlockedPubkeys.styles'; const { Title, Text } = Typography; @@ -35,7 +36,7 @@ export const BlockedPubkeys: React.FC = () => {
- Access Control + Access Control <LockFilled /> Control access to your relay and manage flagged pubkeys From df7cac1b7de4785f3def1549bd73d94335efaa7f Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Tue, 10 Jun 2025 17:41:45 -0700 Subject: [PATCH 04/10] add container to table --- .../components/FlaggedPubkeysTable.tsx | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/blocked-pubkeys/components/FlaggedPubkeysTable.tsx b/src/components/blocked-pubkeys/components/FlaggedPubkeysTable.tsx index 670439dd..916b0307 100644 --- a/src/components/blocked-pubkeys/components/FlaggedPubkeysTable.tsx +++ b/src/components/blocked-pubkeys/components/FlaggedPubkeysTable.tsx @@ -110,18 +110,20 @@ export const FlaggedPubkeysTable: React.FC = ({ />
- `Total: ${total} flagged pubkeys`, - }} - locale={{ emptyText: statsLoading ?Loading... : No flagged pubkeys found }} - /> + + `Total: ${total} flagged pubkeys`, + }} + locale={{ emptyText: statsLoading ?Loading... : No flagged pubkeys found }} + /> + {/* Block Confirmation Modal */} Date: Tue, 10 Jun 2025 17:54:56 -0700 Subject: [PATCH 05/10] darken light text on light theme --- src/styles/themes/light/lightTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/themes/light/lightTheme.ts b/src/styles/themes/light/lightTheme.ts index 245982e4..43490c9a 100644 --- a/src/styles/themes/light/lightTheme.ts +++ b/src/styles/themes/light/lightTheme.ts @@ -69,7 +69,7 @@ export const lightColorsTheme: ITheme = { border: '#cce1f4', borderNft: '#79819A', textMain: '#404040', - textLight: '#9A9B9F', + textLight: '#777778', textSuperLight: '#BEC0C6', textSecondary: BASE_COLORS.white, textDark: '#404040', From aac5356aa76d77b36b2fbc042a4b5a16346cc624 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Tue, 10 Jun 2025 17:55:17 -0700 Subject: [PATCH 06/10] remove border radius from table --- .../blocked-pubkeys/BlockedPubkeys.styles.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts b/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts index f8f153dd..7d187b65 100644 --- a/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts +++ b/src/components/blocked-pubkeys/BlockedPubkeys.styles.ts @@ -9,12 +9,7 @@ export const TableRoot = styled(Table)` & .ant-table-thead .ant-table-cell { background-color: var(--secondary-background-color); } - .ant-table-container table > thead > tr:first-child th:last-child { - border-top-right-radius: 12px; - } - .ant-table-container table > thead > tr:first-child th:first-child { - border-top-left-radius: 12px; - } + .ant-table-tbody { background-color: var(--layout-sider-bg-color); } @@ -38,7 +33,13 @@ export const BaseColRoot = styled(BaseCol)` height: 100%; `; export const TableContainer = styled.div` - border-radius: 8px; + border-radius: 12px; + margin: 0 2px; + padding-top: 0.4rem; + padding-bottom: 2rem; + background-color: var(--secondary-background-color); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + border: 1px solid var(--border-base-color); `; export const CardRoot = styled(Card)` border: none; @@ -110,4 +111,5 @@ export const EmptyList = styled.div` align-items: center; justify-content: center; color: var(--text-light-color); + border-bottom: none; `; From 03fae8f33a36fc1ea58773fecf14cdedda59d665 Mon Sep 17 00:00:00 2001 From: TONE-E <90010906+AnthonyMarin@users.noreply.github.com> Date: Tue, 10 Jun 2025 17:55:37 -0700 Subject: [PATCH 07/10] add container to blocked access table --- .../components/BlockedPubkeysTable.tsx | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/blocked-pubkeys/components/BlockedPubkeysTable.tsx b/src/components/blocked-pubkeys/components/BlockedPubkeysTable.tsx index 86fba54c..9d12bb6b 100644 --- a/src/components/blocked-pubkeys/components/BlockedPubkeysTable.tsx +++ b/src/components/blocked-pubkeys/components/BlockedPubkeysTable.tsx @@ -136,18 +136,20 @@ export const BlockedPubkeysTable: React.FC = ({ />
- `Total: ${total} blocked pubkeys`, - }} - locale={{ emptyText: No blocked pubkeys }} - /> + + `Total: ${total} blocked pubkeys`, + }} + locale={{ emptyText: No blocked pubkeys }} + /> + Date: Tue, 10 Jun 2025 18:17:54 -0700 Subject: [PATCH 08/10] add space to right side of form items --- .../components/BlockPubkeyForm.tsx | 59 ++++++++----------- 1 file changed, 23 insertions(+), 36 deletions(-) diff --git a/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx b/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx index c8f91ee4..5fcabead 100644 --- a/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx +++ b/src/components/blocked-pubkeys/components/BlockPubkeyForm.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { Form, Input, Button, Card } from 'antd'; import { PlusOutlined } from '@ant-design/icons'; import styled from 'styled-components'; +import { BREAKPOINTS } from '@app/styles/themes/constants'; interface BlockPubkeyFormProps { onSubmit: (pubkey: string, reason?: string) => Promise; @@ -13,22 +14,25 @@ const CardRoot = styled(Card)` box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); background-color: var(--secondary-background-color) !important; - & .ant-card-head { - border-bottom-color: var(--border-base-color) !important; + & .ant-card-head { + border-bottom-color: var(--border-base-color) !important; } } `; const TextArea = styled(Input.TextArea)` background-color: var(--layout-sider-bg-color) !important; -` +`; const InputArea = styled(Input)` background-color: var(--layout-sider-bg-color) !important; `; +export const FormItemContainer = styled.div` + width: 100%; + @media screen and (min-width: ${BREAKPOINTS.md}px) { + padding-right: 1.5rem; + } +`; -export const BlockPubkeyForm: React.FC = ({ - onSubmit, - disabled, -}) => { +export const BlockPubkeyForm: React.FC = ({ onSubmit, disabled }) => { const [form] = Form.useForm(); const [submitting, setSubmitting] = useState(false); @@ -52,41 +56,24 @@ export const BlockPubkeyForm: React.FC = ({ } return Promise.resolve(); }; - return ( -
- - - + + + + + + - -