Merge pull request #399 from dappforce/domain-banner

Add transfer domain banner
dappforce · Apr 5, 2024 · c2c9d87 · c2c9d87
2 parents 0efcf22 + fe36d68
commit c2c9d87
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/src/components/creators/cards/SupportCreatorsCard.tsx b/src/components/creators/cards/SupportCreatorsCard.tsx
@@ -18,7 +18,7 @@ type BannerCardProps = {
   titleColor: string
 }
 
-const BannerCard = ({
+export const BannerCard = ({
   title,
   subtitle,
   imagePath,
@@ -215,3 +215,11 @@ const NotStakedCard = () => {
     </div>
   )
 }
+
+export const BannerCardWithWrapper = ({ color, ...props }: BannerCardProps & { color: string }) => (
+  <div className={styles.CarouselWrapper}>
+    <div className={styles.ItemContent} style={{ backgroundColor: color }}>
+      <BannerCard {...props} />
+    </div>
+  </div>
+)
diff --git a/src/components/domains/index.module.sass b/src/components/domains/index.module.sass
@@ -77,7 +77,6 @@ $font_size: 1.1rem
       border-radius: 0px 5px 5px 0px !important
     &:first-child
       border-radius: 5px 0px 0px 5px !important
-
 
 .DomainName
   font-size: 4rem
@@ -90,7 +89,7 @@ $font_size: 1.1rem
 .DomainManageForm
   margin-top: $space_normal
   \:global .ant-form-item-label
-   padding: 0
+    padding: 0
 
 .FaqBtn
   background-color: $color_pink_bg
@@ -106,19 +105,18 @@ $font_size: 1.1rem
   \:global .anticon
     color: $color_muted
 
-  font-weight: 600
-  padding: $space_mini
-  padding-left: 0
-  cursor: pointer
-
+    font-weight: 600
+    padding: $space_mini
+    padding-left: 0
+    cursor: pointer
 
 .Modal
   \:global .ant-modal-body
     padding: 2*$space_normal
 
   \:global .ant-btn
     border-radius: 8px !important
-  
+
 .ModalTitle
   font-size: $font_big
   font-weight: bold
@@ -166,7 +164,7 @@ $font_size: 1.1rem
   \:global .ant-collapse-arrow
     left: 0 !important
     top: $space_big !important
-    
+
     svg
       path
         color: $color_muted
@@ -185,3 +183,9 @@ $font_size: 1.1rem
 
   \:global .ant-alert-warning
     border-radius: 10px !important
+
+.Subtitle
+  opacity: 0.8
+  font-size: $font_small
+  line-height: 22px
+  max-width: 80%
diff --git a/src/components/domains/index.tsx b/src/components/domains/index.tsx
@@ -8,6 +8,7 @@ import { useFetchDomainPendingOrdersByAccount } from 'src/rtk/features/domainPen
 import { useMyDomains } from 'src/rtk/features/domains/domainHooks'
 import { useFetchSellerConfig } from 'src/rtk/features/sellerConfig/sellerConfigHooks'
 import { useMyAddress } from '../auth/MyAccountsContext'
+import { BannerCardWithWrapper } from '../creators/cards/SupportCreatorsCard'
 import { PageContent } from '../main/PageWrapper'
 import { useIsMobileWidthOrDevice } from '../responsive'
 import useSubstrate from '../substrate/useSubstrate'
@@ -172,7 +173,26 @@ export const DomainRegisterPage = ({ promoCode }: DomainServerProps) => {
           image: '/images/dotsama-domains-preview.jpg',
         }}
         rightPanel={
-          <div style={{ width: '380px' }} className='d-flex flex-column align-items-stretch'>
+          <div
+            style={{ width: '275px', gap: '16px' }}
+            className='d-flex flex-column align-items-stretch'
+          >
+            {isMobile ? null : (
+              <BannerCardWithWrapper
+                title='Transfer Usernames'
+                subtitle={
+                  <p className={clsx(styles.Subtitle, 'mb-3')}>
+                    Send your usernames to your other accounts, or to other people on Grill!
+                  </p>
+                }
+                imagePath='/images/creators/establish-your-brand.png'
+                learnMoreHref='https://docs.subsocial.network/docs/tutorials/usernames#how-do-i-transfer-a-username-to-another-account'
+                buttonLabel='View Tutorial'
+                backgroundColor='#ECF1FF'
+                titleColor='#0F172A'
+                color='#ECF1FF'
+              />
+            )}
             {rightPanelContent}
           </div>
         }