Merge branch 'staging' into feat/dark-mode

* staging:
  fix: paragraphs padding in markdown + logo on landing color + ssr false (#915)
  feat: update draft modal copy (#913)
  fix: add spacing between project links (#912)
  feat: update project icon (#914)
  fix: geyser logo should be the same color as the let the sats (#909)
  feat: remove card canvas on mobile (#908)
  fix: update launch copy (#907)
  fix: creation flow story + wallet updates (#906)
  fix: topnavbar on story edit (#904)
  fix: add theme for remirror and update some copies (#905)
  Project landing page refactor (#903)
  feat: activate project on launch (#910)

src/components/icons/svg/GeyserLogoIcon.tsx

@@ -0,0 +1,15 @@
+import { Icon, IconProps } from '@chakra-ui/react'
+
+export const GeyserLogoIcon = (props: IconProps) => (
+  <Icon
+    viewBox="0 0 1148 365"
+    fill={props.color || 'black'}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M346.396 125.679C346.193 124.459 345.986 123.24 345.755 122.028C345.017 118.123 345.017 118.123 345.017 118.123C343.98 113.895 339.304 110.436 334.628 110.435L221.265 110.425C216.587 110.424 211.581 114.065 210.14 118.514L186.054 192.873C185.343 195.069 184.408 197.774 185.441 199.236C186.502 200.735 189.57 200.963 191.939 200.963H238.093C238.093 200.963 240.249 200.945 240.536 202.442C240.843 204.031 239.19 205.743 239.19 205.743L157.833 291.25C154.987 294.242 150.017 299.46 146.792 302.845L125.923 324.742C125.923 324.742 125.497 325.221 124.999 325.68C124.712 325.946 124.436 326.178 124.173 326.383C121.278 328.632 119.909 327.374 121.11 323.26L131.729 286.87C133.04 282.381 135.182 275.033 136.493 270.544L142.575 249.702C143.595 246.206 144.753 242.242 145.481 239.743C145.688 239.033 146.17 236.844 145.442 235.737C144.751 234.686 143.587 234.487 142.28 234.487C140.864 234.487 139.196 234.487 137.442 234.487H93.4839C88.8059 234.487 87.2359 232.119 89.9939 229.225C92.7519 226.331 97.6479 221.193 100.875 217.807L135.051 181.949C138.278 178.563 143.246 173.345 146.094 170.352C148.942 167.359 153.91 162.139 157.133 158.75L162.904 152.684C166.129 149.295 171.404 143.75 174.627 140.362L186.471 127.916C189.694 124.527 194.758 119.205 197.721 116.089C200.686 112.974 203.889 109.608 204.838 108.609C205.787 107.611 209.201 104.022 212.426 100.633L278.317 31.3812C281.542 27.9922 280.911 23.2282 276.919 20.7932C276.919 20.7932 267.599 15.1122 258.755 11.4192C235.769 1.81919 210.816 -1.59681 185.61 0.678194C178.503 1.32019 171.393 2.41119 164.321 3.94219C145.237 8.07619 126.546 15.3542 108.954 25.4422C97.9699 31.7382 87.4599 39.1132 77.5829 47.4572C54.3189 67.1072 34.7959 91.9432 20.9249 120.702C14.0339 134.988 8.95193 149.42 5.51493 163.704C-1.69007 193.646 -1.63107 223.046 4.49993 249.499C8.57593 267.102 15.3589 283.516 24.5589 298.092C25.1199 298.982 25.6939 299.867 26.2739 300.743C31.2249 308.225 36.8479 315.217 43.0999 321.638C52.6369 331.432 63.6919 339.937 76.2069 346.811C82.4469 350.24 88.8519 353.149 95.3729 355.575C99.0779 356.951 102.824 358.176 106.605 359.24C113.087 361.068 119.679 362.438 126.337 363.378C184.333 371.547 251.78 346.032 298.382 290.078C307.3 279.37 315.068 268.043 321.671 256.283C330.341 240.845 336.993 224.657 341.544 208.154C345.339 194.392 347.665 180.431 348.483 166.541C349.298 152.728 348.617 139.014 346.396 125.679Z"
+      fill="currentColor"
+    />
+  </Icon>
+)

src/components/icons/svg/ProjectIcon.tsx

@@ -3,15 +3,15 @@ import { Icon, IconProps } from '@chakra-ui/react'
 export const ProjectIcon = (props: IconProps) => {
   return (
     <Icon
-      width="28px"
-      height="29px"
-      viewBox="0 0 28 29"
+      width="26"
+      height="27"
+      viewBox="0 0 26 27"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        d="M27 25.3331V14.8969C27 13.4299 26.411 12.0277 25.3715 11.0202L15.7858 1.72856C14.7836 0.757146 13.2164 0.757146 12.2142 1.72856L2.62844 11.0202C1.589 12.0277 1 13.4299 1 14.8969V25.3331C1 26.806 2.16406 28 3.6 28H24.4C25.836 28 27 26.806 27 25.3331Z"
+        d="M24.55 23.1541V13.9741C24.55 12.6837 24.0335 11.4503 23.1219 10.5641L14.716 2.39087C13.8372 1.53638 12.4628 1.53638 11.584 2.39087L3.17802 10.5641C2.26651 11.4503 1.75 12.6837 1.75 13.9741V23.1541C1.75 24.4497 2.77079 25.5 4.03 25.5H22.27C23.5292 25.5 24.55 24.4497 24.55 23.1541Z"
         stroke="currentColor"
         strokeWidth="2"
         strokeLinecap="round"

src/components/nav/NavBarLogo.tsx

@@ -1,52 +1,44 @@
-import { Image } from '@chakra-ui/image'
 import { Box, BoxProps } from '@chakra-ui/layout'
 import { useBreakpoint } from '@chakra-ui/media-query'
-import { useColorMode } from '@chakra-ui/system'
 import { Link } from 'react-router-dom'
 
-import LogoSmall from '../../assets/logo-brand.svg'
-import LogoDark from '../../assets/logo-dark.svg'
-import { LogoNameBrand } from '../../constants'
+import { GeyserLogoNameIcon } from '../icons/svg'
+import { GeyserLogoIcon } from '../icons/svg/GeyserLogoIcon'
 
 type Props = BoxProps & {
   className?: string
-  imageClassName?: string
+  color?: string
   full?: boolean
   small?: boolean
 }
 
 export const NavBarLogo = ({
   className,
-  imageClassName,
   full,
   small,
+  color,
   ...rest
 }: Props) => {
-  const { colorMode } = useColorMode()
-
   const isLg = useBreakpoint('lg')
 
   const useFullOne = (isLg || full) && !small
 
-  const imageToUse =
-    colorMode === 'light'
-      ? useFullOne
-        ? LogoNameBrand
-        : LogoSmall
-      : useFullOne
-      ? LogoNameBrand
-      : LogoDark
-
   return (
     <Box {...rest} className={className} _hover={{ cursor: 'pointer' }}>
       <Link to="/">
-        <Image
-          className={imageClassName}
-          height="32px"
-          src={imageToUse}
-          alt="geyser logo image"
-          objectFit="contain"
-        />
+        {useFullOne ? (
+          <GeyserLogoNameIcon
+            height="32px"
+            width="100%"
+            color={color || 'primary.400'}
+          />
+        ) : (
+          <GeyserLogoIcon
+            height="32px"
+            width="100%"
+            color={color || 'primary.400'}
+          />
+        )}
       </Link>
     </Box>
   )

src/components/nav/top-nav-bar/TopNavBar.tsx

@@ -55,6 +55,7 @@ const dashboardRoutes = [
   getPath('dashboardFunding', PathName.projectId),
   getPath('dashboardSettings', PathName.projectId),
   getPath('dashboardStats', PathName.projectId),
+  getPath('dashboardStory', PathName.projectId),
 ]
 
 const routesForHidingTopNav = [
@@ -211,6 +212,7 @@ export const TopNavBar = () => {
       queryCurrentUser()
       navigate(location.pathname, { state: {} })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state])
 
   const handleProjectLaunchButtonPress = () => {
@@ -493,7 +495,7 @@ export const TopNavBar = () => {
         return Boolean(routeMatch)
       })
     )
-  }, [routeMatchesForTransaparentBackground])
+  }, [routeMatchesForTransaparentBackground, scrollTop])
 
   if (shouldTopNavBeHidden) {
     return null
@@ -521,7 +523,10 @@ export const TopNavBar = () => {
           justifyContent={'space-between'}
           overflow="hidden"
         >
-          <NavBarLogo marginRight={isMobile ? 0 : 5} />
+          <NavBarLogo
+            marginRight={isMobile ? 0 : 5}
+            color={showHaveTransparentBackground ? 'primary.900' : undefined}
+          />
 
           {shouldShowCustomTitle ? (
             <Link to={navData.projectPath}>

src/config/theme/theme.ts

@@ -1,9 +1,27 @@
 import { StyleFunctionProps } from '@chakra-ui/react'
+import { RemirrorThemeType } from 'remirror'
 
 import { fonts, lightModeColors } from '../../styles'
 import { menuTheme } from './menuTheme'
 import { modalTheme } from './modalTheme'
 
+export const remirrorTheme: RemirrorThemeType = {
+  color: {
+    text: lightModeColors.neutral[900],
+    background: lightModeColors.neutral[0],
+    primary: lightModeColors.primary[400],
+    primaryText: lightModeColors.neutral[900],
+    hover: {
+      background: lightModeColors.neutral[100],
+      primary: lightModeColors.primary[400],
+    },
+    secondary: lightModeColors.primary[400],
+    secondaryText: lightModeColors.neutral[900],
+    border: lightModeColors.neutral[200],
+    outline: lightModeColors.primary[400],
+  },
+}
+
 export const theme = {
   initialColorMode: 'system',
   useSystemColorMode: true,
@@ -94,6 +112,7 @@ export const theme = {
           },
         }),
         transparent: ({ theme }: StyleFunctionProps) => ({
+          color: theme.colors.neutral900,
           backgroundColor: 'transparent',
           _hover: {
             borderColor: theme.colors.primary[400],

src/context/project.tsx

@@ -3,7 +3,16 @@ import { useNavigate } from 'react-router-dom'
 
 import { getPath } from '../constants'
 import { useProjectState } from '../hooks/graphqlState'
-import { ProjectFragment } from '../types'
+import { useModal } from '../hooks/useModal'
+import {
+  MilestoneAdditionModal,
+  RewardAdditionModal,
+} from '../pages/projectView/projectMainBody/components'
+import {
+  ProjectFragment,
+  ProjectMilestone,
+  ProjectRewardForCreateUpdateFragment,
+} from '../types'
 import { useAuthContext } from './auth'
 import { useNavContext } from './nav'
 
@@ -29,24 +38,22 @@ type ProjectContextProps = {
   saving?: boolean
   isDirty?: boolean
   error: any
+  onRewardsModalOpen(props?: {
+    reward?: ProjectRewardForCreateUpdateFragment
+  }): void
+  onMilestonesModalOpen(): void
 }
 
-const defaultProjectContext = {
-  mobileView: MobileViews.description,
-  setMobileView(_view: MobileViews) {},
-  project: null,
-  updateProject() {},
-  async saveProject() {},
-  isProjectOwner: false,
-  loading: false,
-  error: null,
-}
+export const ProjectContext = createContext<ProjectContextProps | null>(null)
 
-export const ProjectContext = createContext<ProjectContextProps>(
-  defaultProjectContext,
-)
+export const useProjectContext = () => {
+  const context = useContext(ProjectContext)
+  if (!context) {
+    throw new Error('useProjectContext must be usd inside ProjectProvider')
+  }
 
-export const useProjectContext = () => useContext(ProjectContext)
+  return context
+}
 
 export const ProjectProvider = ({
   projectId,
@@ -60,6 +67,11 @@ export const ProjectProvider = ({
   const [isProjectOwner, setIsProjectOwner] = useState(false)
   const { user } = useAuthContext()
 
+  const milestonesModal = useModal()
+  const rewardsModal = useModal<{
+    reward?: ProjectRewardForCreateUpdateFragment
+  }>()
+
   const {
     error,
     loading,
@@ -105,6 +117,38 @@ export const ProjectProvider = ({
     }
   }, [project, user])
 
+  const onRewardSubmit = (
+    reward: ProjectRewardForCreateUpdateFragment,
+    isEdit: boolean,
+  ) => {
+    if (!project) {
+      return
+    }
+
+    if (isEdit) {
+      const newRewards = project.rewards?.map((pr) => {
+        if (pr.id === reward.id) {
+          return reward
+        }
+
+        return pr
+      })
+
+      updateProject({ rewards: newRewards })
+
+      return
+    }
+
+    const newRewards = project.rewards || []
+
+    updateProject({ rewards: [...newRewards, reward] })
+  }
+
+  const onMilestonesSubmit = (newMilestones: ProjectMilestone[]) => {
+    updateProject({ milestones: newMilestones })
+    milestonesModal.onClose()
+  }
+
   return (
     <ProjectContext.Provider
       value={{
@@ -118,9 +162,26 @@ export const ProjectProvider = ({
         saving,
         error,
         loading,
+        onRewardsModalOpen: rewardsModal.onOpen,
+        onMilestonesModalOpen: milestonesModal.onOpen,
       }}
     >
       {children}
+      {project && isProjectOwner && (
+        <>
+          <MilestoneAdditionModal
+            {...milestonesModal}
+            onSubmit={onMilestonesSubmit}
+            project={project}
+          />
+          <RewardAdditionModal
+            {...rewardsModal}
+            isSatoshi={false}
+            onSubmit={onRewardSubmit}
+            project={project}
+          />
+        </>
+      )}
     </ProjectContext.Provider>
   )
 }