📴 Mobile follow up 2

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

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
 }

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;
+  }
 `

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 && (
-          <FlexBox justifyContent="space-between">
-            <Button variant="tertiary" onClick={() => setAuthModalOpenName(undefined)}>
+          <FlexBox justifyContent={smMatch ? 'space-between' : undefined}>
+            <Button variant="tertiary" fullWidth={!smMatch} onClick={() => setAuthModalOpenName(undefined)}>
               Close
             </Button>
 
-            <Button variant="secondary" onClick={() => setAuthModalOpenName('externalLogIn')}>
+            <Button variant="secondary" fullWidth={!smMatch} onClick={() => setAuthModalOpenName('externalLogIn')}>
               Use local wallet
             </Button>
           </FlexBox>

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;

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')};
+      }
     }
   }
 `

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;
   }
 

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 */
 `

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)};
   }
 `

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} {

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 = () => {
               )}
             </StyledButtonContainer>
           ) : (
-            <FlexBox width="100%">
+            <FollowButtonWrapper width="100%">
               <ProtectedActionWrapper
                 title="You want to follow this channel?"
                 description={`Sign in to follow ${channel?.title}`}
@@ -391,7 +391,7 @@ export const ChannelView: FC = () => {
                 ]}
                 trigger={<Button icon={<SvgActionMore />} variant="tertiary" size="large" />}
               />
-            </FlexBox>
+            </FollowButtonWrapper>
           )}
 
           {channel?.id && (