diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml index 240bd24255..8f44166ac2 100644 --- a/packages/atlas/atlas.config.yml +++ b/packages/atlas/atlas.config.yml @@ -10,7 +10,7 @@ general: pioneerMemberUrlPrefix: 'https://dao.joystream.org/#/members' # URL prefix for Pioneer member profile page - used to link to member details joystreamLandingPageUrl: 'https://www.joystream.org' # URL for Joystream landing page - used in the footer and in "Learn more" links joystreamDiscordUrl: 'https://discord.gg/DE9UN3YpRP' # URL for Joystream Discord - used for support when errors occur - appContentFocus: 'web3 & crypto' # Content focus of given app. Provide a string, for example `web & crypto` or `sport` + appContentFocus: '' # Content focus of given app. Provide a string, for example `web & crypto` or `sport` crtMaintenanceMode: false storage: assetResponseTimeout: 2_000 # Timeout for asset response in ms - after this timeout, different distributor will be tried diff --git a/packages/atlas/src/MainLayout.tsx b/packages/atlas/src/MainLayout.tsx index c01db037dc..719ba0c96d 100644 --- a/packages/atlas/src/MainLayout.tsx +++ b/packages/atlas/src/MainLayout.tsx @@ -14,6 +14,7 @@ import { SentryLogger } from '@/utils/logs' import { AppLogo } from './components/AppLogo' import { TopbarBase } from './components/_navigation/TopbarBase' +import { useMountEffect } from './hooks/useMountEffect' import { useConfirmationModal } from './providers/confirmationModal' import { useOverlayManager } from './providers/overlayManager' import { LegalLayout } from './views/legal/LegalLayout' @@ -126,5 +127,11 @@ const MiscUtils = () => { }, parseInt(transitions.timings.routing) + ROUTING_ANIMATION_OFFSET) }, [location, cachedLocation, locationState, navigationType, clearOverlays]) + useMountEffect(() => { + if ('ReactNativeWebView' in window) { + ;(window.ReactNativeWebView as { postMessage: (message: string) => void }).postMessage('initialized') + } + }) + return null } diff --git a/packages/atlas/src/components/ChannelTitle/ChannelTitle.tsx b/packages/atlas/src/components/ChannelTitle/ChannelTitle.tsx index a41cbfc982..3f64ad7c4a 100644 --- a/packages/atlas/src/components/ChannelTitle/ChannelTitle.tsx +++ b/packages/atlas/src/components/ChannelTitle/ChannelTitle.tsx @@ -4,7 +4,7 @@ import { ReactNode } from 'react' import { SvgActionCreatorToken, SvgActionVerified } from '@/assets/icons' import { Text, TextVariant } from '@/components/Text' import { TextBaseProps } from '@/components/Text/Text.styles' -import { cVar } from '@/styles' +import { cVar, media } from '@/styles' import { FlexBox } from '../FlexBox' @@ -35,7 +35,13 @@ export const ChannelTitleText = styled(Text)` ` const StyledFlexBox = styled(FlexBox)` + justify-content: center; + path { fill: ${cVar('colorText')}; } + + ${media.sm} { + justify-content: start; + } ` diff --git a/packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx b/packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx index eb85ccb399..d5d2548024 100644 --- a/packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx +++ b/packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx @@ -11,6 +11,7 @@ import { Input } from '@/components/_inputs/Input' import { DialogModal } from '@/components/_overlays/DialogModal' import { atlasConfig } from '@/config' import { useHidePasswordInInput } from '@/hooks/useHidePasswordInInput' +import { useMediaMatch } from '@/hooks/useMediaMatch' import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics' import { useAuth } from '@/providers/auth/auth.hooks' import { useAuthStore } from '@/providers/auth/auth.store' @@ -28,6 +29,7 @@ export const LogInModal = () => { const { displaySnackbar } = useSnackbar() const [hidePasswordProps] = useHidePasswordInInput(false) const { trackPageView } = useSegmentAnalytics() + const smMatch = useMediaMatch('sm') const setYppModalOpenName = useYppStore((state) => state.actions.setYppModalOpenName) @@ -102,12 +104,12 @@ export const LogInModal = () => { }} additionalActionsNode={ !isLoading && ( - - - diff --git a/packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.styles.ts b/packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.styles.ts index 6019937a06..7ed77f88cc 100644 --- a/packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.styles.ts +++ b/packages/atlas/src/components/_auth/ProtectedActionWrapper/ProtectedActionWrapper.styles.ts @@ -5,6 +5,7 @@ import { cVar, sizes } from '@/styles' export const UnclickableWrapper = styled.div` cursor: pointer; + width: auto; > * { pointer-events: none; diff --git a/packages/atlas/src/components/_inputs/Checkbox/Checkbox.styles.ts b/packages/atlas/src/components/_inputs/Checkbox/Checkbox.styles.ts index 36a8dd0b64..95ca641cde 100644 --- a/packages/atlas/src/components/_inputs/Checkbox/Checkbox.styles.ts +++ b/packages/atlas/src/components/_inputs/Checkbox/Checkbox.styles.ts @@ -2,7 +2,7 @@ import { css } from '@emotion/react' import styled from '@emotion/styled' import { SvgActionCheck } from '@/assets/icons' -import { cVar, sizes, square, zIndex } from '@/styles' +import { cVar, media, sizes, square, zIndex } from '@/styles' export const Container = styled.div` position: relative; @@ -43,18 +43,22 @@ type CheckboxInputProps = { error: boolean } const hoverCheckedStyles = ({ error }: CheckboxInputProps) => css` - + ${Checkmark} { - background-color: ${cVar(error ? 'colorBackgroundErrorStrong' : 'colorBackgroundPrimaryStrong')}; + ${media.sm} { + + ${Checkmark} { + background-color: ${cVar(error ? 'colorBackgroundErrorStrong' : 'colorBackgroundPrimaryStrong')}; - ::before { - background-color: ${cVar('colorBackgroundStrongAlpha')}; + ::before { + background-color: ${cVar('colorBackgroundStrongAlpha')}; + } } } ` const hoverUncheckedStyles = css` - + ${Checkmark} { - ::before { - background-color: ${cVar('colorBackgroundStrongAlpha')}; + ${media.sm} { + + ${Checkmark} { + ::before { + background-color: ${cVar('colorBackgroundStrongAlpha')}; + } } } ` diff --git a/packages/atlas/src/components/_overlays/CookiePopover/CookiePopover.styles.ts b/packages/atlas/src/components/_overlays/CookiePopover/CookiePopover.styles.ts index 6423c1c787..806160f689 100644 --- a/packages/atlas/src/components/_overlays/CookiePopover/CookiePopover.styles.ts +++ b/packages/atlas/src/components/_overlays/CookiePopover/CookiePopover.styles.ts @@ -14,6 +14,11 @@ export const StyledDialog = styled(Dialog)<{ bottomNavOpen: boolean }>` ${({ bottomNavOpen }) => (bottomNavOpen ? transitions.timings.routing : '0ms')}; ${media.xs} { + margin-left: 15px; + max-width: calc(100% - 60px); + } + + ${media.sm} { max-width: 320px; } diff --git a/packages/atlas/src/components/_video/VideoThumbnail/VideoThumbnail.styles.ts b/packages/atlas/src/components/_video/VideoThumbnail/VideoThumbnail.styles.ts index a1f2ecfae9..03e7dd322e 100644 --- a/packages/atlas/src/components/_video/VideoThumbnail/VideoThumbnail.styles.ts +++ b/packages/atlas/src/components/_video/VideoThumbnail/VideoThumbnail.styles.ts @@ -3,7 +3,7 @@ import styled from '@emotion/styled' import { Link } from 'react-router-dom' import { AssetImage } from '@/components/AssetImage' -import { cVar, square } from '@/styles' +import { cVar, media, square } from '@/styles' const sharedOverlayStyles = css` position: absolute; @@ -173,77 +173,79 @@ export const VideoThumbnailContainer = styled(Link, { shouldForwardProp: isPropV background-color: ${cVar('colorBackgroundOverlay')}; } - :hover, - :focus-visible { - ${({ clickable }) => - clickable && - css` - cursor: pointer; - - ${HoverOverlay}, ${SlotContainer} { - opacity: 1; - } - `} - ${({ clickable, isPlaylist }) => - !isPlaylist && - clickable && - css` - background-color: ${cVar('colorBackgroundPrimary')}; - - ${ContentOverlay}, ${HoverOverlay}, ${SlotsOverlay} { - transform: translate(-8px, -8px); - } - `} - ${({ clickable, isPlaylist }) => - isPlaylist && - clickable && - css` - &::before { + ${media.sm} { + :hover, + :focus-visible { + ${({ clickable }) => + clickable && + css` + cursor: pointer; + + ${HoverOverlay}, ${SlotContainer} { + opacity: 1; + } + `} + ${({ clickable, isPlaylist }) => + !isPlaylist && + clickable && + css` background-color: ${cVar('colorBackgroundPrimary')}; - transform: translate(0, 4px); - } - - &::after { - background-color: ${cVar('colorBackgroundPrimaryMuted')}; - transform: translate(0, 12px); - } - - ${ContentOverlay}, ${HoverOverlay}, ${PlaylistOverlay}, ${SlotsOverlay} { - transform: translate(0, -4px); - } - ${PlaylistOverlay} { - opacity: 0; - } - `} - } - :active { - ${({ clickable, isPlaylist, activeDisabled }) => - clickable && - !activeDisabled && - isPlaylist && - css` - &::before { - transform: translate(0, 4px); - } - - &::after { - transform: translate(0, 4px); - } - - ${ContentOverlay}, ${HoverOverlay}, ${SlotsOverlay} { - transform: translate(0, 4px); - } - `} - ${({ clickable, activeDisabled, isPlaylist }) => - clickable && - !activeDisabled && - !isPlaylist && - css` - ${ContentOverlay}, ${HoverOverlay}, ${SlotsOverlay} { - transform: translate(0, 0); - } - `} + ${ContentOverlay}, ${HoverOverlay}, ${SlotsOverlay} { + transform: translate(-8px, -8px); + } + `} + ${({ clickable, isPlaylist }) => + isPlaylist && + clickable && + css` + &::before { + background-color: ${cVar('colorBackgroundPrimary')}; + transform: translate(0, 4px); + } + + &::after { + background-color: ${cVar('colorBackgroundPrimaryMuted')}; + transform: translate(0, 12px); + } + + ${ContentOverlay}, ${HoverOverlay}, ${PlaylistOverlay}, ${SlotsOverlay} { + transform: translate(0, -4px); + } + ${PlaylistOverlay} { + opacity: 0; + } + `} + } + + :active { + ${({ clickable, isPlaylist, activeDisabled }) => + clickable && + !activeDisabled && + isPlaylist && + css` + &::before { + transform: translate(0, 4px); + } + + &::after { + transform: translate(0, 4px); + } + + ${ContentOverlay}, ${HoverOverlay}, ${SlotsOverlay} { + transform: translate(0, 4px); + } + `} + ${({ clickable, activeDisabled, isPlaylist }) => + clickable && + !activeDisabled && + !isPlaylist && + css` + ${ContentOverlay}, ${HoverOverlay}, ${SlotsOverlay} { + transform: translate(0, 0); + } + `} + } } /* stylelint-enable no-duplicate-selectors */ ` diff --git a/packages/atlas/src/providers/snackbars/snackbar.tsx b/packages/atlas/src/providers/snackbars/snackbar.tsx index c7d17ca3eb..6539705f4f 100644 --- a/packages/atlas/src/providers/snackbars/snackbar.tsx +++ b/packages/atlas/src/providers/snackbars/snackbar.tsx @@ -95,7 +95,7 @@ export const SnackbarsContainer = styled.div<{ bottomNavType?: 'action' | 'nav' margin-left: ${sizes(4)}; display: grid; z-index: ${zIndex.snackbars}; - width: calc(100% - ${sizes(8)}); + min-width: calc(100% - ${sizes(8)}); transition: bottom ${cVar('animationTransitionMedium')} ${({ bottomNavType }) => (bottomNavType ? transitions.timings.routing : '0ms')}; @@ -105,6 +105,7 @@ export const SnackbarsContainer = styled.div<{ bottomNavType?: 'action' | 'nav' } ${media.sm} { + min-width: 0; bottom: ${({ bottomNavType }) => sizes(bottomNavType ? 20 : 4)}; } ` diff --git a/packages/atlas/src/views/viewer/ChannelView/ChannelView.styles.ts b/packages/atlas/src/views/viewer/ChannelView/ChannelView.styles.ts index 881634190a..3c16cd1332 100644 --- a/packages/atlas/src/views/viewer/ChannelView/ChannelView.styles.ts +++ b/packages/atlas/src/views/viewer/ChannelView/ChannelView.styles.ts @@ -2,6 +2,7 @@ import { css } from '@emotion/react' import styled from '@emotion/styled' import { SvgJoyTokenMonochrome16 } from '@/assets/icons' +import { FlexBox } from '@/components/FlexBox' import { Tabs } from '@/components/Tabs' import { Text } from '@/components/Text' import { Button } from '@/components/_buttons/Button' @@ -32,6 +33,12 @@ export const TitleSection = styled.div` } ` +export const FollowButtonWrapper = styled(FlexBox)` + > *:nth-child(1) { + width: 100%; + } +` + export const TitleContainer = styled.div` display: flex; flex-direction: column; @@ -110,6 +117,7 @@ export const StyledChannelLink = styled(ChannelLink)` position: relative; width: fit-content; justify-self: start; + margin: 0 auto; border: solid 8px ${cVar('colorCoreBaseBlack')}; border-radius: 100%; ${media.sm} { diff --git a/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx b/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx index 655f2a783a..f81ce7948d 100644 --- a/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx +++ b/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx @@ -10,7 +10,6 @@ import { SvgActionCheck, SvgActionFilters, SvgActionFlag, SvgActionMore, SvgActi import { ChannelTitle } from '@/components/ChannelTitle' import { EmptyFallback } from '@/components/EmptyFallback' import { FiltersBar, useFiltersBar } from '@/components/FiltersBar' -import { FlexBox } from '@/components/FlexBox' import { LimitedWidthContainer } from '@/components/LimitedWidthContainer' import { NumberFormat } from '@/components/NumberFormat' import { ViewErrorFallback } from '@/components/ViewErrorFallback' @@ -43,6 +42,7 @@ import { ChannelInfoContainer, CollectorsBoxContainer, FilterButton, + FollowButtonWrapper, NotFoundChannelContainer, StyledButton, StyledButtonContainer, @@ -366,7 +366,7 @@ export const ChannelView: FC = () => { )} ) : ( - + { ]} trigger={