diff --git a/src/components/layouts/main/sider/sidebarNavigation.tsx b/src/components/layouts/main/sider/sidebarNavigation.tsx index 16d243d..3930882 100644 --- a/src/components/layouts/main/sider/sidebarNavigation.tsx +++ b/src/components/layouts/main/sider/sidebarNavigation.tsx @@ -27,8 +27,8 @@ export const useSidebarNavigation = (): SidebarNavigationItem[] => { }, { title: 'common.relay-settings', - key: 'storage-settings', - url: '/storage-settings', + key: 'relay-settings', + url: '/relay-settings', icon: , }, { diff --git a/src/components/router/AppRouter.tsx b/src/components/router/AppRouter.tsx index d3163dc..f4cb1fd 100644 --- a/src/components/router/AppRouter.tsx +++ b/src/components/router/AppRouter.tsx @@ -69,7 +69,7 @@ const Logout = React.lazy(() => import('./Logout')); export const NFT_DASHBOARD_PATH = '/'; export const MEDICAL_DASHBOARD_PATH = '/medical-dashboard'; -export const RELAY_SETTINGS_PATH = '/storage-settings'; +export const RELAY_SETTINGS_PATH = '/relay-settings'; export const TABLES_PAGE_PATH = '/nostr-stats'; const MedicalDashboard = withLoading(MedicalDashboardPage); diff --git a/src/constants/relaySettings.ts b/src/constants/relaySettings.ts new file mode 100644 index 0000000..ad1ba58 --- /dev/null +++ b/src/constants/relaySettings.ts @@ -0,0 +1,64 @@ +export type Settings = { + mode: string; + protocol: string[]; + chunked: string[]; + chunksize: string; + maxFileSize: number; + maxFileSizeUnit: string; + kinds: string[]; + dynamicKinds: string[]; + photos: string[]; + videos: string[]; + gitNestr: string[]; + audio: string[]; + appBuckets: string[]; + dynamicAppBuckets: string[]; + isKindsActive: boolean; + isPhotosActive: boolean; + isVideosActive: boolean; + isGitNestrActive: boolean; + isAudioActive: boolean; +}; + +export type Category = 'kinds' | 'photos' | 'videos' | 'gitNestr' | 'audio' | 'dynamicKinds' | 'appBuckets' | 'dynamicAppBuckets'; +export const noteOptions = [ + { kind: 0, kindString: 'kind0', description: 'Metadata', category: 1 }, + { kind: 1, kindString: 'kind1', description: 'Text Note', category: 1 }, + { kind: 2, kindString: 'kind2', description: 'Recommend Relay', category: 1 }, + { kind: 3, kindString: 'kind3', description: 'Follow List', category: 1 }, + { kind: 5, kindString: 'kind5', description: 'Event Deletion', category: 1 }, + { kind: 6, kindString: 'kind6', description: 'Repost', category: 1 }, + { kind: 7, kindString: 'kind7', description: 'Reaction', category: 1 }, + { kind: 8, kindString: 'kind8', description: 'Badge Award', category: 2 }, + { kind: 16, kindString: 'kind16', description: 'Generic Repost', category: 1 }, + { kind: 10000, kindString: 'kind10000', description: 'Mute List', category: 1 }, + { kind: 10001, kindString: 'kind10001', description: 'Pinned Note(s)', category: 1 }, + { kind: 10002, kindString: 'kind10002', description: 'Tiny Relay List', category: 1 }, + { kind: 1984, kindString: 'kind1984', description: 'Reporting', category: 1 }, + { kind: 30000, kindString: 'kind30000', description: 'Custom Follow List', category: 1 }, + { kind: 30008, kindString: 'kind30008', description: 'Profile Badge', category: 2 }, + { kind: 30009, kindString: 'kind30009', description: 'Badge Definition', category: 2 }, + { kind: 30023, kindString: 'kind30023', description: 'Formatted Articles', category: 1 }, + { kind: 30079, kindString: 'kind30079', description: 'Event Paths', category: 1 }, + //{ kind: 9734, kindString: 'kind9734', description: 'Lightning Zap Request', category: 2 }, + { kind: 9735, kindString: 'kind9735', description: 'Zap Receipt', category: 2 }, + { kind: 10011, kindString: 'kind10011', description: 'Issue Notes', category: 3 }, + { kind: 10022, kindString: 'kind10022', description: 'PR Notes', category: 3 }, + { kind: 9803, kindString: 'kind9803', description: 'Commit Notes', category: 3 }, +]; +export const appBuckets = [ + { id: 'nostr', label: 'Nostr' }, + { + id: 'gitnestr', + label: 'GitNestr', + }, + { + id: 'NostrBox', + label: 'NostrBox', + }, +]; +export const categories = [ + { id: 1, name: 'Basic Nostr Features' }, + { id: 2, name: 'Extra Nostr Features' }, + { id: 3, name: 'GitNestr Features' }, +]; diff --git a/src/hooks/useRelaySettings.ts b/src/hooks/useRelaySettings.ts index fb2215b..560246a 100644 --- a/src/hooks/useRelaySettings.ts +++ b/src/hooks/useRelaySettings.ts @@ -14,6 +14,8 @@ interface RelaySettings { videos: string[]; gitNestr: string[]; audio: string[]; + appBuckets: string[]; + dynamicAppBuckets: string[]; isKindsActive: boolean; isPhotosActive: boolean; isVideosActive: boolean; @@ -22,7 +24,7 @@ interface RelaySettings { } const getInitialSettings = (): RelaySettings => { - const savedSettings = localStorage.getItem('settingsCache'); + const savedSettings = localStorage.getItem('relaySettings'); return savedSettings ? JSON.parse(savedSettings) : { @@ -38,6 +40,8 @@ const getInitialSettings = (): RelaySettings => { videos: [], gitNestr: [], audio: [], + appBuckets: [], + dynamicAppBuckets: [], isKindsActive: true, isPhotosActive: true, isVideosActive: true, @@ -64,8 +68,27 @@ const useRelaySettings = () => { if (!response.ok) { throw new Error(`Network response was not ok (status: ${response.status})`); } + const data = await response.json(); - console.log('Fetched settings:', data.relay_settings); + + const storedAppBuckets = JSON.parse(localStorage.getItem('appBuckets') || '[]'); + const storedDynamicKinds = JSON.parse(localStorage.getItem('dynamicKinds') || '[]'); + console.log(data) + const newAppBuckets = + data.relay_settings.dynamicAppBuckets == undefined + ? [] + : data.relay_settings.dynamicAppBuckets.filter((bucket: string) => !storedAppBuckets.includes(bucket)); + const newDynamicKinds = + data.relay_settings.dynamicKinds == undefined + ? [] + : data.relay_settings.dynamicKinds.filter((kind: string) => !storedDynamicKinds.includes(kind)); + + if (newAppBuckets.length > 0) { + localStorage.setItem('appBuckets', JSON.stringify([...storedAppBuckets, ...newAppBuckets])); + } + if (newDynamicKinds.length > 0) { + localStorage.setItem('dynamicKinds', JSON.stringify([...storedDynamicKinds, ...newDynamicKinds])); + } setRelaySettings({ ...data.relay_settings, protocol: Array.isArray(data.relay_settings.protocol) @@ -75,7 +98,6 @@ const useRelaySettings = () => { ? data.relay_settings.chunked : [data.relay_settings.chunked], }); - localStorage.setItem('settingsCache', JSON.stringify(data.relay_settings)); localStorage.setItem('relaySettings', JSON.stringify(data.relay_settings)); } catch (error) { console.error('Error fetching settings:', error); diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index ec2a88d..8cd1ad1 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -224,7 +224,7 @@ "copied": "Copied to clipboard", "copy": "Copy", "country": "Country", - "customizeRelaySettings": "Storage Settings", + "customizeRelaySettings": "Relay Settings", "nft-dashboard": "Relay Dashboard", "medical-dashboard": "Medical Dashboard", "dataDisplay": "Data display", @@ -299,7 +299,7 @@ "radio": "Radio", "rate": "Rate", "reactSimpleMaps": "React Simple Maps", - "relay-settings": "Storage Settings", + "relay-settings": "Relay Settings", "relay-stats": "Relay Stats", "requiredField": "This field is required!", "resetPassword": "Reset password", diff --git a/src/pages/RelaySettingsPage.tsx b/src/pages/RelaySettingsPage.tsx index 3075fc9..1638b94 100644 --- a/src/pages/RelaySettingsPage.tsx +++ b/src/pages/RelaySettingsPage.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { Collapse, Select, Input, Checkbox } from 'antd'; +import { Collapse, Select, Input, Checkbox, Typography } from 'antd'; import styled from 'styled-components'; import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch'; import { BaseCheckbox } from '@app/components/common/BaseCheckbox/BaseCheckbox'; @@ -17,88 +17,36 @@ import { useResponsive } from '@app/hooks/useResponsive'; import useRelaySettings from '@app/hooks/useRelaySettings'; import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles'; import { themeObject } from '@app/styles/themes/themeVariables'; +import { categories, noteOptions, appBuckets, Settings, Category } from '@app/constants/relaySettings'; const { Panel } = Collapse; const StyledPanel = styled(Panel)``; const { Option } = Select; -type Settings = { - mode: string; - protocol: string[]; - chunked: string[]; - chunksize: string; - maxFileSize: number; - maxFileSizeUnit: string; - kinds: string[]; - dynamicKinds: string[]; - photos: string[]; - videos: string[]; - gitNestr: string[]; - audio: string[]; - isKindsActive: boolean; - isPhotosActive: boolean; - isVideosActive: boolean; - isGitNestrActive: boolean; - isAudioActive: boolean; -}; - -type RelaySettings = Settings; // Ensure RelaySettings matches the structure of Settings - const RelaySettingsPage: React.FC = () => { const theme = useAppSelector((state) => state.theme.theme); - const [loadings, setLoadings] = useState([]); - const enterLoading = (index: number) => { - setLoadings((loadings) => { - const newLoadings = [...loadings]; - newLoadings[index] = true; - return newLoadings; - }); - }; - - const exitLoading = (index: number) => { - setLoadings((loadings) => { - const newLoadings = [...loadings]; - newLoadings[index] = false; - return newLoadings; - }); - }; - const { relaySettings, fetchSettings, updateSettings, saveSettings } = useRelaySettings(); + const { isDesktop } = useResponsive(); const { t } = useTranslation(); const dispatch = useAppDispatch(); const relaymode = useAppSelector((state) => state.mode.relayMode); - const { isDesktop } = useResponsive(); - const categories = [ - { id: 1, name: 'Basic Nostr Features' }, - { id: 2, name: 'Extra Nostr Features' }, - { id: 3, name: 'GitNestr Features' }, - ]; + const [storedDynamicKinds, setStoredDynamicKinds] = useState( + JSON.parse(localStorage.getItem('dynamicKinds') || '[]'), + ); + const [storedAppBuckets, setStoredAppBuckets] = useState( + JSON.parse(localStorage.getItem('appBuckets') || '[]'), + ); - const noteOptions = [ - { kind: 0, kindString: 'kind0', description: 'Metadata', category: 1 }, - { kind: 1, kindString: 'kind1', description: 'Text Note', category: 1 }, - { kind: 2, kindString: 'kind2', description: 'Recommend Relay', category: 1 }, - { kind: 3, kindString: 'kind3', description: 'Follow List', category: 1 }, - { kind: 5, kindString: 'kind5', description: 'Event Deletion', category: 1 }, - { kind: 6, kindString: 'kind6', description: 'Repost', category: 1 }, - { kind: 7, kindString: 'kind7', description: 'Reaction', category: 1 }, - { kind: 8, kindString: 'kind8', description: 'Badge Award', category: 2 }, - { kind: 16, kindString: 'kind16', description: 'Generic Repost', category: 1 }, - { kind: 10000, kindString: 'kind10000', description: 'Mute List', category: 1 }, - { kind: 10001, kindString: 'kind10001', description: 'Pinned Note(s)', category: 1 }, - { kind: 10002, kindString: 'kind10002', description: 'Tiny Relay List', category: 1 }, - { kind: 1984, kindString: 'kind1984', description: 'Reporting', category: 1 }, - { kind: 30000, kindString: 'kind30000', description: 'Custom Follow List', category: 1 }, - { kind: 30008, kindString: 'kind30008', description: 'Profile Badge', category: 2 }, - { kind: 30009, kindString: 'kind30009', description: 'Badge Definition', category: 2 }, - { kind: 30023, kindString: 'kind30023', description: 'Formatted Articles', category: 1 }, - { kind: 30079, kindString: 'kind30079', description: 'Event Paths', category: 1 }, - //{ kind: 9734, kindString: 'kind9734', description: 'Lightning Zap Request', category: 2 }, - { kind: 9735, kindString: 'kind9735', description: 'Zap Receipt', category: 2 }, - { kind: 10011, kindString: 'kind10011', description: 'Issue Notes', category: 3 }, - { kind: 10022, kindString: 'kind10022', description: 'PR Notes', category: 3 }, - { kind: 9803, kindString: 'kind9803', description: 'Commit Notes', category: 3 }, - ]; + const [loadings, setLoadings] = useState([]); + const [newKind, setNewKind] = useState(''); + const [newBucket, setNewBucket] = useState(''); + const [blacklist, setBlacklist] = useState({ + kinds: [], + photos: [], + videos: [], + gitNestr: [], + audio: [], + }); const [settings, setSettings] = useState({ mode: JSON.parse(localStorage.getItem('relaySettings') || '{}').mode || relaymode || 'unlimited', @@ -113,20 +61,39 @@ const RelaySettingsPage: React.FC = () => { videos: [], gitNestr: [], audio: [], + appBuckets: [], + dynamicAppBuckets: [], isKindsActive: true, isPhotosActive: true, isVideosActive: true, isGitNestrActive: true, isAudioActive: true, }); - - type Category = 'kinds' | 'photos' | 'videos' | 'gitNestr' | 'audio' | 'dynamicKinds'; - const groupedNoteOptions = categories.map((category) => ({ ...category, notes: noteOptions.filter((note) => note.category === category.id), })); + useEffect(() => { + console.log(settings); + console.log(blacklist) + }, [settings,blacklist]); + const enterLoading = (index: number) => { + setLoadings((loadings) => { + const newLoadings = [...loadings]; + newLoadings[index] = true; + return newLoadings; + }); + }; + + const exitLoading = (index: number) => { + setLoadings((loadings) => { + const newLoadings = [...loadings]; + newLoadings[index] = false; + return newLoadings; + }); + }; + const photoFormatOptions = [ 'jpeg', 'jpg', @@ -179,6 +146,25 @@ const RelaySettingsPage: React.FC = () => { value: format, })); + const appBucketOptions = appBuckets.map((bucket) => ({ + label: ( + + {bucket.label} + + ), + value: bucket.id, + })); + const audioFormatOptions = [ 'mp3', 'wav', @@ -240,19 +226,11 @@ const RelaySettingsPage: React.FC = () => { const chunkSizeOptions = ['2', '4', '6', '8', '10', '12']; const maxFileSizeUnitOptions = ['MB', 'GB', 'TB']; - const [blacklist, setBlacklist] = useState({ - kinds: [], - photos: [], - videos: [], - gitNestr: [], - audio: [], - }); - const handleModeChange = (checked: boolean) => { const newMode = checked ? 'smart' : 'unlimited'; updateSettings('mode', newMode); dispatch(setMode(newMode)); - + console.log("changing mode") if (newMode === 'unlimited') { setBlacklist({ kinds: [], @@ -273,8 +251,11 @@ const RelaySettingsPage: React.FC = () => { }; const handleBlacklistChange = (category: Category, checkedValues: string[]) => { - const isDynamicKind = category === 'dynamicKinds'; + console.log("changing blacklist") + debugger + const isDynamicKind = category === 'dynamicKinds' || category === 'appBuckets'; if (isDynamicKind) { + console.log("changing dynamic kind") setSettings((prevSettings) => { const updatedSettings = { ...prevSettings, [category]: checkedValues }; updateSettings(category, checkedValues); @@ -297,6 +278,7 @@ const RelaySettingsPage: React.FC = () => { }; const handleSettingsChange = (category: Category, checkedValues: string[]) => { + console.log("changing settings", category, checkedValues) if (settings.mode === 'unlimited') { handleBlacklistChange(category, checkedValues); } else { @@ -340,6 +322,39 @@ const RelaySettingsPage: React.FC = () => { updateSettings('maxFileSizeUnit', value); }; + const handleNewBucket = (bucket: string) => { + const currentBuckets = settings.appBuckets.concat(storedAppBuckets); + if (currentBuckets.includes(bucket)) { + return; + } + setStoredAppBuckets((prevBuckets) => [...prevBuckets, bucket]); + handleSettingsChange('dynamicAppBuckets', [...settings.dynamicAppBuckets, bucket]); + }; + + const handleRemovedBucket = (bucket: string) => { + setStoredAppBuckets((prevBuckets) => prevBuckets.filter((b) => b !== bucket)); + handleSettingsChange( + 'appBuckets', + settings.appBuckets.filter((b) => b !== bucket), + ); + }; + + const handleNewDynamicKind = (kind: string) => { + const currentKinds = settings.dynamicKinds.concat(storedDynamicKinds); + if (currentKinds.includes(kind)) { + return; + } + setStoredDynamicKinds((prevKinds) => [...prevKinds, kind]); + handleSettingsChange('dynamicKinds', [...settings.dynamicKinds, kind]); + }; + const removeDynamicKind = (kind: string) => { + setStoredDynamicKinds((prevKinds) => prevKinds.filter((k) => k !== kind)); + handleSettingsChange( + 'dynamicKinds', + settings.dynamicKinds.filter((k) => k !== kind), + ); + }; + const performSaveSettings = async () => { await Promise.all([ updateSettings('kinds', settings.isKindsActive ? settings.kinds : []), @@ -352,7 +367,8 @@ const RelaySettingsPage: React.FC = () => { updateSettings('chunked', settings.chunked), updateSettings('maxFileSize', settings.maxFileSize), updateSettings('maxFileSizeUnit', settings.maxFileSizeUnit), - //TODO: update blacklist + // updateSettings('appBuckets', settings.appBuckets), + //updateSettings('dynamicAppBuckets', settings.dynamicAppBuckets), ]); await saveSettings(); @@ -396,6 +412,8 @@ const RelaySettingsPage: React.FC = () => { }, [relaySettings]); useEffect(() => { + if(settings.mode === 'unlimited') return + console.log("resetting blacklist changing") setBlacklist({ kinds: [], photos: [], @@ -405,6 +423,13 @@ const RelaySettingsPage: React.FC = () => { }); }, [settings.mode]); + useEffect(() => { + localStorage.setItem('appBuckets', JSON.stringify(storedAppBuckets)); + }, [storedAppBuckets]); + useEffect(() => { + localStorage.setItem('dynamicKinds', JSON.stringify(storedDynamicKinds)); + }, [storedDynamicKinds]); + useEffect(() => { const updateDynamicKinds = async () => { await performSaveSettings(); @@ -415,44 +440,16 @@ const RelaySettingsPage: React.FC = () => { } }, [settings.dynamicKinds]); - const [newKind, setNewKind] = useState(''); - - useEffect(() => { - return () => { - localStorage.setItem('relaySettings', localStorage.getItem('settingsCache') || '{}'); - }; - }, []); - const removeDynamicKind = (kind: string) => { - setSettings((prevSettings) => ({ - ...prevSettings, - dynamicKinds: prevSettings.dynamicKinds.filter((k) => k !== kind), - })); - }; - const desktopLayout = ( - - {t('common.serverSetting')} - handleModeChange(e)} - /> - + + {'Options'} + - +
@@ -548,10 +545,110 @@ const RelaySettingsPage: React.FC = () => { + + + +
+ handleSettingsChange('appBuckets', checkedValues as string[])} + options={appBucketOptions} + /> + + + + + { + 'Enabling buckets will organize data stored within the relay to quicken retrieval times for users. Disabling buckets will not turn off data storage.' + } + + + +

{'Add an App Bucket'}

+
+ { + setNewBucket(e.target.value); + }} + placeholder="Enter new app bucket" + /> + { + if (newBucket) { + handleNewBucket(newBucket); + setNewBucket(''); + } + }} + > + Add bucket + +
+ + handleSettingsChange('dynamicAppBuckets', checkedValues as string[]) + } + > + {(storedAppBuckets || []).map((bucket) => ( +
+
+ + + {bucket} + +
+ handleRemovedBucket(bucket)} + > + Remove + +
+ ))} + + +
+ + + + + {t('common.serverSetting')} + handleModeChange(e)} + /> + {
)} handleSettingsChange('kinds', checkedValues as string[])} disabled={settings.mode !== 'smart' ? false : !settings.isKindsActive} @@ -582,7 +678,7 @@ const RelaySettingsPage: React.FC = () => {

{group.name}

{group.notes.map((note) => ( -
+
{ {settings.mode !== 'smart' && (

{'Add to Blacklist'}

{ { if (newKind) { - setSettings((prevSettings) => ({ - ...prevSettings, - dynamicKinds: [...(prevSettings.dynamicKinds || []), newKind], - })); + handleNewDynamicKind(newKind); setNewKind(''); } }} @@ -642,17 +740,17 @@ const RelaySettingsPage: React.FC = () => { handleSettingsChange('dynamicKinds', checkedValues as string[])} > - {(settings.dynamicKinds || []).map((kind) => ( + {(storedDynamicKinds || []).map((kind) => (
-
+
{ isActive={true} style={{ fontSize: '1rem', paddingRight: '.8rem', paddingLeft: '.8rem' }} > - {`kind`+kind} + {`kind` + kind}
removeDynamicKind(kind)} > Remove @@ -771,7 +869,6 @@ const RelaySettingsPage: React.FC = () => { header={settings.mode !== 'smart' ? `Blacklisted Audio Extensions` : 'Audio Extensions'} key="5" > - <>{console.log(settings.mode)} {settings.mode !== 'unlimited' && settings.mode !== '' && (
@@ -824,25 +921,11 @@ const RelaySettingsPage: React.FC = () => { const mobileAndTabletLayout = ( - - {t('common.serverSetting')} - handleModeChange(e)} - /> - + + {'Options'} + - +
@@ -948,7 +1031,101 @@ const RelaySettingsPage: React.FC = () => { - + + + +
+ handleSettingsChange('appBuckets', checkedValues as string[])} + //disabled={settings.mode !== 'smart' ? false : !settings.isKindsActive} + options={appBucketOptions} + /> + + + + { + 'Enabling buckets will organize data stored within the relay to quicken retrieval times for users. Disabling buckets will not turn off data storage.' + } + + + +

{'Add an App Bucket'}

+
+ { + setNewBucket(e.target.value); + }} + placeholder="Enter new app bucket" + /> + { + if (newBucket) { + handleNewBucket(newBucket); + setNewKind(''); + } + }} + > + Add bucket + +
+ handleSettingsChange('dynamicAppBuckets', checkedValues as string[])} + > + {(storedAppBuckets || []).map((bucket) => ( +
+
+ + + {bucket} + +
+ handleRemovedBucket(bucket)} + > + Remove + +
+ ))} + + +
+ + + + + {t('common.serverSetting')} + handleModeChange(e)} + /> + {

{group.name}

{group.notes.map((note) => ( -
+
{
{settings.mode === 'unlimited' && ( -
+

{'Add to Blacklist'}

-
+
setNewKind(e.target.value)} placeholder="Enter new kind" /> { if (newKind) { - setSettings((prevSettings) => ({ - ...prevSettings, - dynamicKinds: [...(prevSettings.dynamicKinds || []), newKind], - })); + handleNewDynamicKind(newKind); setNewKind(''); } }} @@ -1026,19 +1200,25 @@ const RelaySettingsPage: React.FC = () => {
handleSettingsChange('dynamicKinds', checkedValues as string[])} > - {(settings.dynamicKinds || []).map((kind) => ( + {(storedDynamicKinds || []).map((kind) => (
-
+
{ isActive={true} style={{ fontSize: '1.2rem', paddingRight: '.8rem', paddingLeft: '.8rem' }} > - {`kind`+kind} + {`kind` + kind}
removeDynamicKind(kind)}> @@ -1172,6 +1352,7 @@ const RelaySettingsPage: React.FC = () => { + {t('buttons.saveSettings')} diff --git a/src/pages/uiComponentsPages/UIComponentsPage.styles.ts b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts index 7ee6e08..7a36cf0 100644 --- a/src/pages/uiComponentsPages/UIComponentsPage.styles.ts +++ b/src/pages/uiComponentsPages/UIComponentsPage.styles.ts @@ -4,6 +4,7 @@ import { BaseCollapse } from '@app/components/common/BaseCollapse/BaseCollapse'; import { LAYOUT, media } from '@app/styles/themes/constants'; import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch'; +import { InfoCircleOutlined } from '@ant-design/icons'; export const Card = styled(CommonCard)` width: 100%; margin-bottom: 1.25rem; @@ -26,6 +27,46 @@ export const Card = styled(CommonCard)` border: 1px solid var(--border-color); } `; +export const InfoCircleOutlinedIcon = styled(InfoCircleOutlined)` + color: var(--text-light-color); + font-size: .75rem; + align-self: start; + padding-top .2rem; + padding-right: .5rem; + cursor: pointer; +`; +export const NewBucketContainer = styled.div` + padding: 1rem 0rem 0rem 0rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +`; +export const InfoCard = styled(CommonCard)` + width: 100%; + padding: 0.7rem 1.2rem; + .ant-card-head-title { + font-size: 1rem; + } + .ant-card-body { + flex-wrap: nowrap; + + display: flex; + flex-direction: row; + gap: 0rem; + align-items: center; + + padding: 0; + } + .ant-card-body:before { + display: none; + } + .ant-card-body:after { + display: none; + } + &.ant-card-bordered { + border: 1px solid var(--border-color); + } +`; export const InputsWrapper = styled.div` width: 30rem; @@ -133,3 +174,6 @@ export const LabelSpan = styled.span` align-items: center; // Center align to match switch height padding-right: 10px; // Optional padding for visual spacing `; +export const HeadingContainer = styled.div` + margin-bottom: 1.25rem; +`; diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index 9f172cc..2b972d4 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -260,6 +260,7 @@ export default createGlobalStyle` .checkboxHeader{ padding: 0rem 0 .5rem 0; } + .grid-checkbox-group { width: 100%; display: grid; @@ -281,7 +282,10 @@ export default createGlobalStyle` .checkbox-container{ white-space: nowrap; } - + .dynamic-group{ + padding-top: 1rem; + padding-bottom: 0rem; + } .grid-checkbox-group.large-label { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }