improve navigation out of studio

src/components/PrivateRoute.tsx

@@ -10,7 +10,7 @@ type PrivateRouteProps = {
 
 export const PrivateRoute: React.FC<PrivateRouteProps> = ({ element: Element, redirectTo, isAuth, path, ...props }) => {
   if (!isAuth && redirectTo) {
-    return <Navigate to={redirectTo} />
+    return <Navigate to={redirectTo} replace />
   }
   return <Route path={path} element={Element} {...props} />
 }

src/components/StudioEntrypoint.tsx

@@ -34,26 +34,26 @@ export const StudioEntrypoint: React.FC<StudioEntrypointProps> = ({ enterLocatio
   // not signed user with not created memberships and/or no extension
   if (!hasMemberships) {
     // go to /signin/join
-    return <Navigate to={absoluteRoutes.studio.signInJoin()} />
+    return <Navigate to={absoluteRoutes.studio.signInJoin()} replace />
   }
 
   // not signed user with extension and with created memberships
   if (hasMemberships && !memberSet) {
     // go to /signin
-    return <Navigate to={absoluteRoutes.studio.signIn()} />
+    return <Navigate to={absoluteRoutes.studio.signIn()} replace />
   }
 
   // signed users
   if (!activeMembershipLoading && memberSet && !channelSet && hasMemberships) {
     if (!activeMembership?.channels.length) {
-      return <Navigate to={absoluteRoutes.studio.newChannel()} />
+      return <Navigate to={absoluteRoutes.studio.newChannel()} replace />
     }
     setActiveUser({ channelId: activeMembership.channels[0].id })
-    return <Navigate to={enterLocation} />
+    return <Navigate to={enterLocation} replace />
   }
 
   if (channelSet) {
-    return <Navigate to={DEFAULT_ROUTE} />
+    return <Navigate to={DEFAULT_ROUTE} replace />
   }
 
   return <StudioLoading />

src/views/studio/SignInJoinView/SignInMainView/SignInMainView.style.ts

@@ -3,6 +3,7 @@ import { StudioContainer } from '@/components'
 import { Button, Text } from '@/shared/components'
 import { media, colors, sizes } from '@/shared/theme'
 import styled from '@emotion/styled'
+import { Link } from 'react-router-dom'
 
 export const StyledContainer = styled(StudioContainer)`
   margin-top: 64px;
@@ -51,7 +52,7 @@ export const StyledSignInIllustrationSVG = styled(SignInIllustrationSVG)`
   ${media.medium} {
     position: relative;
     left: -50px;
-    margin-top: 0px;
+    margin-top: 0;
   }
   ${media.large} {
     max-width: 1000px;
@@ -81,3 +82,16 @@ export const SubTitle = styled(Text)`
   margin-top: ${sizes(4)};
   color: ${colors.gray[200]};
 `
+
+export const BackLink = styled(Link)`
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row;
+  text-decoration: none;
+
+  margin-top: ${sizes(5)};
+
+  path {
+    stroke: ${colors.gray[300]};
+  }
+`

src/views/studio/SignInJoinView/SignInMainView/SignInMainView.tsx

@@ -1,6 +1,7 @@
-import { Button } from '@/shared/components'
+import { Button, Text } from '@/shared/components'
 import React from 'react'
 import {
+  BackLink,
   ButtonGroup,
   Header,
   LogoContainer,
@@ -12,7 +13,7 @@ import {
 } from './SignInMainView.style'
 import { ReactComponent as FullLogoSVG } from '@/assets/full-logo.svg'
 import { absoluteRoutes } from '@/config/routes'
-import { SvgGlyphChannel, SvgGlyphInfo } from '@/shared/icons'
+import { SvgGlyphChannel, SvgGlyphChevronLeft, SvgGlyphInfo } from '@/shared/icons'
 
 export type Membership = {
   id: string
@@ -40,6 +41,10 @@ const SignInMainView: React.FC = () => {
             How it works?
           </Button>
         </ButtonGroup>
+        <BackLink to={absoluteRoutes.viewer.index()}>
+          <SvgGlyphChevronLeft />
+          <Text secondary>Go back</Text>
+        </BackLink>
       </Header>
       <StyledSignInIllustrationSVG />
     </StyledContainer>