diff --git a/packages/icons/brands/DiscordRoundBlack.dark.svg b/packages/icons/brands/DiscordRoundBlack.dark.svg new file mode 100644 index 000000000000..c7fe1db57c16 --- /dev/null +++ b/packages/icons/brands/DiscordRoundBlack.dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/brands/DiscordRoundBlack.light.svg b/packages/icons/brands/DiscordRoundBlack.light.svg new file mode 100644 index 000000000000..b4b6c04f8ce5 --- /dev/null +++ b/packages/icons/brands/DiscordRoundBlack.light.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/general/WebBlack.dark.svg b/packages/icons/general/WebBlack.dark.svg new file mode 100644 index 000000000000..8842eae50b96 --- /dev/null +++ b/packages/icons/general/WebBlack.dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/icons/general/WebBlack.light.svg b/packages/icons/general/WebBlack.light.svg new file mode 100644 index 000000000000..2c3235b7ed41 --- /dev/null +++ b/packages/icons/general/WebBlack.light.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/icons/icon-generated-as-jsx.js b/packages/icons/icon-generated-as-jsx.js index d3943dc7cf55..07a19fffd6ac 100644 --- a/packages/icons/icon-generated-as-jsx.js +++ b/packages/icons/icon-generated-as-jsx.js @@ -98,6 +98,16 @@ export const DiscordRound = /*#__PURE__*/ __createIcon('DiscordRound', [ u: () => new URL('./brands/DiscordRound.svg', import.meta.url), }, ]) +export const DiscordRoundBlack = /*#__PURE__*/ __createIcon('DiscordRoundBlack', [ + { + c: ['dark'], + u: () => new URL('./brands/DiscordRoundBlack.dark.svg', import.meta.url), + }, + { + c: ['light'], + u: () => new URL('./brands/DiscordRoundBlack.light.svg', import.meta.url), + }, +]) export const DiscordRoundGray = /*#__PURE__*/ __createIcon('DiscordRoundGray', [ { u: () => new URL('./brands/DiscordRoundGray.svg', import.meta.url), @@ -3316,6 +3326,16 @@ export const Web = /*#__PURE__*/ __createIcon('Web', [ u: () => new URL('./general/Web.svg', import.meta.url), }, ]) +export const WebBlack = /*#__PURE__*/ __createIcon('WebBlack', [ + { + c: ['dark'], + u: () => new URL('./general/WebBlack.dark.svg', import.meta.url), + }, + { + c: ['light'], + u: () => new URL('./general/WebBlack.light.svg', import.meta.url), + }, +]) export const MenuPersonas = /*#__PURE__*/ __createIcon('MenuPersonas', [ { u: () => new URL('./menus/MenuPersonas.png', import.meta.url), diff --git a/packages/icons/icon-generated-as-url.js b/packages/icons/icon-generated-as-url.js index 9cf5e818a09c..2105a2a36155 100644 --- a/packages/icons/icon-generated-as-url.js +++ b/packages/icons/icon-generated-as-url.js @@ -16,6 +16,8 @@ export function danger_url() { return new URL("./brands/Danger.svg", import.meta export function debank_url() { return new URL("./brands/Debank.svg", import.meta.url) } export function discord_url() { return new URL("./brands/Discord.svg", import.meta.url) } export function discord_round_url() { return new URL("./brands/DiscordRound.svg", import.meta.url) } +export function discord_round_black_dark_url() { return new URL("./brands/DiscordRoundBlack.dark.svg", import.meta.url) } +export function discord_round_black_light_url() { return new URL("./brands/DiscordRoundBlack.light.svg", import.meta.url) } export function discord_round_gray_url() { return new URL("./brands/DiscordRoundGray.svg", import.meta.url) } export function eip_1577_url() { return new URL("./brands/EIP1577.svg", import.meta.url) } export function eth_url() { return new URL("./brands/ETH.svg", import.meta.url) } @@ -313,6 +315,8 @@ export function wallet_setting_url() { return new URL("./general/WalletSetting.s export function warning_url() { return new URL("./general/Warning.svg", import.meta.url) } export function warning_triangle_url() { return new URL("./general/WarningTriangle.svg", import.meta.url) } export function web_url() { return new URL("./general/Web.svg", import.meta.url) } +export function web_black_dark_url() { return new URL("./general/WebBlack.dark.svg", import.meta.url) } +export function web_black_light_url() { return new URL("./general/WebBlack.light.svg", import.meta.url) } export function menu_personas_url() { return new URL("./menus/MenuPersonas.png", import.meta.url) } export function menu_personas_active_url() { return new URL("./menus/MenuPersonasActive.png", import.meta.url) } export function menu_settings_url() { return new URL("./menus/MenuSettings.png", import.meta.url) } diff --git a/packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx b/packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx index 1d521901194f..5746c7d1d2a9 100644 --- a/packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx +++ b/packages/plugins/Calendar/src/SiteAdaptor/CalendarContent.tsx @@ -36,6 +36,9 @@ const useStyles = makeStyles()((theme) => ({ padding: '8px 16px 0 16px', borderRadius: '12px 12px 0 0', }, + tabPanel: { + padding: '0 4px 0 12px', + }, })) export function CalendarContent() { @@ -79,7 +82,7 @@ export function CalendarContent() { setSelectedDate={(date: Date) => setSelectedDate(date)} list={list} /> - + - + - + startOfMonth(selectedDate), [selectedDate]) - const monthEnd = useMemo(() => endOfMonth(selectedDate), [selectedDate]) + const isPrevMonthDisabled = useMemo(() => { + return !isAfter(selectedDate, endOfMonth(new Date())) + }, [selectedDate]) + const isNextMonthDisabled = useMemo(() => { + return isAfter(addMonths(selectedDate, 1), addMonths(endOfMonth(new Date()), 2)) + }, [selectedDate]) const handleDateClick = (date: Date) => { setSelectedDate(date) @@ -150,10 +156,10 @@ export function DatePicker({ list, selectedDate, setSelectedDate, open, setOpen
{format(selectedDate, 'MMMM yyyy')} - changeMonth(-1)}> + changeMonth(-1)} disabled={isPrevMonthDisabled}> - changeMonth(1)}> + changeMonth(1)} disabled={isNextMonthDisabled}> diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx index 4d8fc72d4544..a46c3140da5c 100644 --- a/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx +++ b/packages/plugins/Calendar/src/SiteAdaptor/components/EventList.tsx @@ -11,10 +11,20 @@ const useStyles = makeStyles()((theme) => ({ flexDirection: 'column', height: '506px', width: '100%', - overflow: 'overlay', + overflowY: 'scroll', position: 'relative', gap: '10px', - paddingBottom: '50px', + '&::-webkit-scrollbar': { + width: '4px', + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: theme.palette.maskColor.secondaryLine, + borderRadius: '99px', + }, + marginBottom: '50px', + }, + paddingWrap: { + paddingRight: '12px', }, empty: { position: 'absolute', @@ -30,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({ }, eventCard: { display: 'flex', - padding: '8px 12px', + padding: '8px 0', flexDirection: 'column', gap: '8px', }, @@ -60,7 +70,7 @@ const useStyles = makeStyles()((theme) => ({ fontSize: '14px', fontWeight: 400, lineHeight: '18px', - color: theme.palette.mode === 'dark' ? theme.palette.maskColor.main : theme.palette.maskColor.second, + color: theme.palette.mode === 'dark' ? theme.palette.maskColor.second : theme.palette.maskColor.main, }, poster: { borderRadius: '8px', @@ -73,7 +83,7 @@ const useStyles = makeStyles()((theme) => ({ fontWeight: 700, lineHeight: '18px', color: theme.palette.maskColor.main, - padding: '10px 12px', + padding: '10px 0', }, })) @@ -103,39 +113,48 @@ export function EventList({ list, isLoading, empty, dateString }: EventListProps }, [list, dateString]) return (
- {isLoading && !list?.length ? ( -
- -
- ) : !empty && listAfterDate.length ? ( - listAfterDate.map((key, index) => { - return ( -
- {format(new Date(key), 'MMM dd,yyy')} - {list[key].map((v) => ( -
{ - window.open(v.event_url) - }}> -
-
- logo - {v.project.name} +
+ {isLoading && !list?.length ? ( +
+ +
+ ) : !empty && listAfterDate.length ? ( + listAfterDate.map((key, index) => { + return ( +
+ + {format(new Date(key), 'MMM dd,yyy')} + + {list[key].map((v) => ( +
{ + window.open(v.event_url) + }}> +
+
+ logo + + {' '} + {v.project.name} + +
+ {v.event_title} + + {formatDate(v.event_date)} + + poster
- {v.event_title} - {formatDate(v.event_date)} - poster -
- ))} -
- ) - }) - ) : ( - {t.empty_status()} - )} + ))} +
+ ) + }) + ) : ( + {t.empty_status()} + )} +
) } diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/NFTList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/NFTList.tsx index 46e53ad99ea7..ca4069c187b6 100644 --- a/packages/plugins/Calendar/src/SiteAdaptor/components/NFTList.tsx +++ b/packages/plugins/Calendar/src/SiteAdaptor/components/NFTList.tsx @@ -1,11 +1,12 @@ -import React, { useMemo } from 'react' +import React, { useMemo, type ReactNode } from 'react' import { EmptyStatus, LoadingStatus } from '@masknet/shared' import { useI18N } from '../../locales/i18n_generated.js' import { CountdownTimer } from './CountDownTimer.js' import { makeStyles } from '@masknet/theme' -import { Typography } from '@mui/material' +import { IconButton, Typography } from '@mui/material' import { formatDate } from './EventList.js' import format from 'date-fns/format' +import { Icons } from '@masknet/icons' const useStyles = makeStyles()((theme) => ({ container: { @@ -13,10 +14,20 @@ const useStyles = makeStyles()((theme) => ({ flexDirection: 'column', height: '506px', width: '100%', - overflow: 'overlay', + overflowY: 'scroll', position: 'relative', gap: '10px', - paddingBottom: '50px', + '&::-webkit-scrollbar': { + width: '4px', + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: theme.palette.maskColor.secondaryLine, + borderRadius: '99px', + }, + marginBottom: '50px', + }, + paddingWrap: { + paddingRight: '12px', }, empty: { position: 'absolute', @@ -32,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({ }, eventCard: { display: 'flex', - padding: '8px 12px', + padding: '8px 0', flexDirection: 'column', gap: '8px', fontWeight: 700, @@ -67,6 +78,9 @@ const useStyles = makeStyles()((theme) => ({ fontWeight: 400, lineHeight: '18px', color: theme.palette.maskColor.main, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', }, second: { fontSize: '14px', @@ -85,7 +99,12 @@ const useStyles = makeStyles()((theme) => ({ fontWeight: 700, lineHeight: '18px', color: theme.palette.maskColor.main, - padding: '10px 12px', + padding: '10px 0', + }, + socialLinks: { + display: 'flex', + gap: '8px', + alignItems: 'center', }, })) @@ -96,6 +115,17 @@ interface NFTListProps { dateString: string } +const socialIcons: Record = { + twitter: , + discord: , + website: , +} + +const sortPlat = (_: any, b: { type: string }) => { + if (b.type === 'website') return -1 + else return 0 +} + export function NFTList({ list, isLoading, empty, dateString }: NFTListProps) { const { classes, cx } = useStyles() const t = useI18N() @@ -110,59 +140,81 @@ export function NFTList({ list, isLoading, empty, dateString }: NFTListProps) { }, [list, dateString]) return (
- {isLoading && !list?.length ? ( -
- -
- ) : !empty && listAfterDate.length ? ( - listAfterDate.map((key) => { - return ( -
- {format(new Date(key), 'MMM dd,yyy')} - {list[key].map((v) => ( -
{ - window.open(v.event_url) - }}> -
-
- logo - {v.project.name} +
+ {isLoading && !list?.length ? ( +
+ +
+ ) : !empty && listAfterDate.length ? ( + listAfterDate.map((key) => { + return ( +
+ + {format(new Date(key), 'MMM dd,yyy')} + + {list[key].map((v) => ( +
{ + window.open(v.event_url) + }}> +
+
+ logo + + {v.project.name} + +
+ {v.project.description} +
+ +
+ {v.project.links + .sort(sortPlat) + .map((platform: { type: string; url: string }) => { + return ( + { + window.open(platform.url) + }}> + {socialIcons[platform.type]} + + ) + })} +
+
+
+ {t.total()} + + {Number(v.ext_info.nft_info.total).toLocaleString('en-US')} + +
+
+ {t.price()} + + {v.ext_info.nft_info.token} + +
+
+ {t.date()} + + {formatDate(v.event_date)} + +
+ poster
- {v.event_title} -
- -
-
- {t.total()} - - {v.ext_info.nft_info.total} - -
-
- {t.price()} - - {v.ext_info.nft_info.token} - -
-
- {t.date()} - - {formatDate(v.event_date)} - -
- poster -
- ))} -
- ) - }) - ) : ( - {t.empty_status()} - )} + ))} +
+ ) + }) + ) : ( + {t.empty_status()} + )} +
) } diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx index 12a2351a99cd..cb904442e099 100644 --- a/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx +++ b/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx @@ -11,10 +11,20 @@ const useStyles = makeStyles()((theme) => ({ flexDirection: 'column', height: '506px', width: '100%', - overflow: 'overlay', + overflowY: 'scroll', position: 'relative', gap: '10px', - paddingBottom: '50px', + '&::-webkit-scrollbar': { + width: '4px', + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: theme.palette.maskColor.secondaryLine, + borderRadius: '99px', + }, + marginBottom: '50px', + }, + paddingWrap: { + paddingRight: '12px', }, empty: { position: 'absolute', @@ -30,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({ }, eventCard: { display: 'flex', - padding: '8px 12px', + padding: '8px 0', flexDirection: 'column', gap: '8px', borderBottom: `1px solid ${theme.palette.maskColor.line}`, @@ -89,7 +99,7 @@ const useStyles = makeStyles()((theme) => ({ fontWeight: 700, lineHeight: '18px', color: theme.palette.maskColor.main, - padding: '10px 12px', + padding: '10px 0', }, })) @@ -114,39 +124,45 @@ export function NewsList({ list, isLoading, empty, dateString }: NewsListProps) }, [list, dateString]) return (
- {isLoading && !list?.length ? ( -
- -
- ) : !empty && listAfterDate.length ? ( - listAfterDate.map((key) => { - return ( -
- {format(new Date(key), 'MMM dd,yyy')} - {list[key].map((v) => ( -
{ - window.open(v.event_url) - }}> -
-
- logo - {v.project.name} +
+ {isLoading && !list?.length ? ( +
+ +
+ ) : !empty && listAfterDate.length ? ( + listAfterDate.map((key) => { + return ( +
+ + {format(new Date(key), 'MMM dd,yyy')} + + {list[key].map((v) => ( +
{ + window.open(v.event_url) + }}> +
+
+ logo + + {v.project.name} + +
+ {v.event_type}
- {v.event_type} + {v.event_title} + {v.event_description}
- {v.event_title} - {v.event_description} -
- ))} -
- ) - }) - ) : ( - {t.empty_status()} - )} + ))} +
+ ) + }) + ) : ( + {t.empty_status()} + )} +
) }