feat: finish creator dashboard sidebar

src/components/creators/CreatorDashboardSidebar.module.sass

@@ -0,0 +1,101 @@
+@import 'src/styles/subsocial-vars.scss'
+
+.CreatorStakingCard
+  display: flex
+  flex-direction: column
+  padding: 0
+
+  .TopSection
+    padding: $space_normal
+    border-bottom: 1px solid #E2E8F0
+    position: relative
+    overflow: hidden
+
+    .Title
+      font-size: $font_large
+      font-weight: $font_weight_semibold
+
+    .Link
+      font-size: $font_small
+
+    .Image
+      position: absolute
+      top: -$space_mini
+      right: -$space_mini
+      height: 100%
+
+      *
+        height: 100%
+        object-fit: contain
+
+  .BottomSection
+    padding: $space_normal
+
+    .MyStake
+      display: flex
+      justify-content: space-between
+
+      .HelpIcon
+        position: relative
+        top: 1px
+
+    .Button
+      font-weight: $font_weight_medium
+      border-color: $color_primary
+      color: $color_primary
+
+      &:hover, &:focus-visible
+        background-color: rgba(236, 108, 179, 0.1)
+
+.GetMoreSub
+  background: #A81580
+  border-radius: $border_radius_big
+  color: white
+  overflow: clip
+  position: relative
+
+  .Content
+    z-index: 1
+    position: relative
+
+    .Title
+      font-size: $font_big
+      font-weight: $font_weight_semibold
+      line-height: 1.25
+
+    .Image
+      overflow: visible !important
+      *
+        width: 100%
+        position: relative
+        top: -$space_large
+        margin-bottom: -$space_huge
+
+    .OutlineButton
+      color: white
+      border-color: white
+
+      &:hover, &:focus-within
+        color: #e3cadd
+        border-color: #e3cadd
+
+  .Gradient
+    width: 500px
+    height: 500px
+    position: absolute
+    background: #EF35C6
+    top: 0
+    left: 50%
+    filter: blur(310px)
+    border-radius: 100%
+
+  .Gradient2
+    width: 500px
+    height: 500px
+    position: absolute
+    background: rgba(249, 121, 221, 0.69)
+    top: 50%
+    left: 0%
+    filter: blur(100px)
+    border-radius: 100%
+

src/components/creators/CreatorDashboardSidebar.tsx

@@ -0,0 +1,77 @@
+import { Button } from 'antd'
+import clsx from 'clsx'
+import Link from 'next/link'
+import { ComponentProps } from 'react'
+import { BsBoxArrowUpRight } from 'react-icons/bs'
+import { SlQuestion } from 'react-icons/sl'
+import { DfImage } from '../utils/DfImage'
+import Segment from '../utils/Segment'
+import styles from './CreatorDashboardSidebar.module.sass'
+
+export type CreatorDashboardSidebarProps = ComponentProps<'div'>
+
+export default function CreatorDashboardSidebar({ ...props }: CreatorDashboardSidebarProps) {
+  return (
+    <div className='d-flex flex-column GapNormal'>
+      <Segment {...props} className={clsx(props.className, styles.CreatorStakingCard)}>
+        <div className={styles.TopSection}>
+          <p className={clsx(styles.Title, 'mb-0')}>Creator Staking</p>
+          <Link href='https://docs.subsocial.network/docs/basics/creator-staking' passHref>
+            <a className={styles.Link}>How does it work?</a>
+          </Link>
+          <DfImage src='/images/databases.svg' className={styles.Image} />
+        </div>
+        <div className={styles.BottomSection}>
+          <div className={styles.MyStake}>
+            <div className='FontSmall ColorMuted d-flex align-items-center GapMini'>
+              <span>My Stake</span>
+              <SlQuestion className={clsx('FontTiny', styles.HelpIcon)} />
+            </div>
+            <span>800K SUB</span>
+          </div>
+          <Button
+            className={clsx(
+              'd-flex align-items-center GapTiny justify-content-center mt-3',
+              styles.Button,
+            )}
+            block
+          >
+            Manage my stake
+            <BsBoxArrowUpRight />
+          </Button>
+        </div>
+      </Segment>
+      <Segment className={styles.GetMoreSub}>
+        <div className={styles.Content}>
+          <p className={clsx(styles.Title, 'mb-2')}>Get more SUB with Active Staking</p>
+          <p className='FontSmall'>Get rewarded based on your social activity</p>
+          <DfImage src='/images/hearts.png' className={clsx('w-100', styles.Image)} />
+          <div className='d-flex flex-column GapSmall'>
+            <Button
+              className={clsx(
+                'd-flex align-items-center GapTiny justify-content-center FontWeightMedium',
+                styles.Button,
+              )}
+              block
+            >
+              How does it work?
+            </Button>
+            <Button
+              type='ghost'
+              className={clsx(
+                'd-flex align-items-center GapTiny justify-content-center FontWeightMedium',
+                styles.Button,
+                styles.OutlineButton,
+              )}
+              block
+            >
+              Discuss this feature
+            </Button>
+          </div>
+        </div>
+        <div className={styles.Gradient1} />
+        <div className={styles.Gradient2} />
+      </Segment>
+    </div>
+  )
+}

src/components/main/PageWrapper.tsx

@@ -7,8 +7,8 @@ import React, { FC } from 'react'
 import config from 'src/config'
 import { resolveIpfsUrl } from 'src/ipfs'
 import { useMyAddress } from '../auth/MyAccountsContext'
+import CreatorDashboardSidebar from '../creators/CreatorDashboardSidebar'
 import { useShowOnBoardingSidebarContext } from '../onboarding/contexts/ShowOnBoardingSidebarContext'
-import OnBoardingSidebar from '../onboarding/OnBoardingSidebar'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import { fullUrl } from '../urls/helpers'
 import Section from '../utils/Section'
@@ -110,7 +110,10 @@ export const PageContent: FC<Props> = ({
   withOnBoarding,
   children,
 }) => {
-  const { showOnBoardingSidebar, setShowOnBoardingSidebar } = useShowOnBoardingSidebarContext()
+  const {
+    showOnBoardingSidebar,
+    // setShowOnBoardingSidebar
+  } = useShowOnBoardingSidebarContext()
   const myAddress = useMyAddress()
 
   const isMobile = useIsMobileWidthOrDevice()
@@ -152,8 +155,9 @@ export const PageContent: FC<Props> = ({
           </section>
           {rightPanel}
           {rightPanel === undefined && withOnBoarding && showOnBoardingSidebar && myAddress && (
-            <div style={{ width: ONBOARDING_SIDEBAR_WIDTH }}>
-              <OnBoardingSidebar hideOnBoardingSidebar={() => setShowOnBoardingSidebar(false)} />
+            <div style={{ width: ONBOARDING_SIDEBAR_WIDTH, flexShrink: 0.2 }}>
+              <CreatorDashboardSidebar />
+              {/* <OnBoardingSidebar hideOnBoardingSidebar={() => setShowOnBoardingSidebar(false)} /> */}
             </div>
           )}
         </div>

src/components/spaces/ViewSpace.tsx

@@ -11,6 +11,7 @@ import config from '../../config'
 import { useSelectProfileSpace } from '../../rtk/features/profiles/profilesHooks'
 import { useSelectSpace } from '../../rtk/features/spaces/spacesHooks'
 import { useMyAddress } from '../auth/MyAccountsContext'
+import StakeSubBanner from '../creators/StakeSubBanner'
 import MakeAsProfileModal from '../profiles/address-views/utils/MakeAsProfileModal'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import { editSpaceUrl } from '../urls'
@@ -22,7 +23,6 @@ import MyEntityLabel from '../utils/MyEntityLabel'
 import Section from '../utils/Section'
 import { BareProps } from '../utils/types'
 import ViewTags from '../utils/ViewTags'
-import StakeSubBanner from './creators/StakeSubBanner'
 import {
   HiddenSpaceAlert,
   OfficialSpaceStatus,

src/styles/subsocial.scss

@@ -128,6 +128,16 @@ a {
   font-size: $font_big;
 }
 
+.ColorPrimary {
+  color: $color_primary;
+}
+.ColorMuted {
+  color: $color_muted;
+}
+.ColorWhite {
+  color: white;
+}
+
 .GapMini {
   gap: $space_mini;
 }
@@ -199,6 +209,16 @@ a {
   border-radius: $border_radius_huge;
 }
 
+.FontWeightMedium {
+  font-weight: $font_weight_medium;
+}
+.FontWeightSemibold {
+  font-weight: $font_weight_semibold;
+}
+.FontWeightBold {
+  font-weight: $font_weight_bold;
+}
+
 .DfImagePreview {
   width: 100%;
 }