diff --git a/src/components/Announcement/Popups/CenterPopup.tsx b/src/components/Announcement/Popups/CenterPopup.tsx index 23e6422dbf..d69b843ca4 100644 --- a/src/components/Announcement/Popups/CenterPopup.tsx +++ b/src/components/Announcement/Popups/CenterPopup.tsx @@ -1,7 +1,7 @@ import { t } from '@lingui/macro' import { X } from 'react-feather' import { useMedia } from 'react-use' -import styled from 'styled-components' +import styled, { css } from 'styled-components' import CtaButton from 'components/Announcement/Popups/CtaButton' import { @@ -10,13 +10,14 @@ import { PopupItemType, PopupType, } from 'components/Announcement/type' +import Column from 'components/Column' import Modal from 'components/Modal' import Row, { RowBetween } from 'components/Row' import { Z_INDEXS } from 'constants/styles' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' import { MEDIA_WIDTHS } from 'theme' -import { useNavigateToUrl } from 'utils/redirect' +import { useNavigateToUrl, validateRedirectURL } from 'utils/redirect' import { escapeScriptHtml } from 'utils/string' const Wrapper = styled.div` @@ -31,13 +32,23 @@ const Wrapper = styled.div` padding: 20px; `} ` -const ContentWrapper = styled.div` +const ContentWrapper = styled.div<{ isVertical: boolean }>` display: flex; - flex-direction: column; - overflow-y: auto; overflow-x: hidden; gap: 24px; flex: 1; + max-width: 100%; + ${({ isVertical }) => + isVertical + ? css` + flex-direction: column; + overflow-y: auto; + ` + : css` + flex-direction: row; + gap: 24px; + overflow-y: hidden; + `} ${({ theme }) => theme.mediaWidth.upToMedium` gap: 20px; `} @@ -73,9 +84,9 @@ const Image = styled.img` const StyledCtaButton = styled(CtaButton)` width: fit-content; - min-width: 220px; - height: 36px; + min-width: min(220px, 100%); max-width: 100%; + height: 36px; ${({ theme }) => theme.mediaWidth.upToSmall` width: fit-content; min-width: 100px; @@ -87,8 +98,48 @@ const Desc = styled.div` word-break: break-word; font-size: 14px; line-height: 20px; + &::-webkit-scrollbar { + display: block; + width: 4px; + } + &::-webkit-scrollbar-thumb { + background: ${({ theme }) => theme.border}; + } +` + +const VIDEO_SIZE = `360px` +const VideoWrapper = styled.div` + width: 640px; + height: ${VIDEO_SIZE}; + ${({ theme }) => theme.mediaWidth.upToSmall` + max-width: 100%; + `} ` +const whitelistDomains = ['drive.google.com', 'www.youtube.com'] +const Video = ({ url, title }: { url: string; title: string }) => { + try { + const { host } = new URL(url) + if (!whitelistDomains.includes(host) || !validateRedirectURL(url, { _dangerousSkipCheckWhitelist: true })) + return null + } catch (error) { + return null + } + return ( + +