fix(dcellar-web-ui): some style issues

node-real · Oct 11, 2023 · d30c943 · d30c943
1 parent 1842e58
commit d30c943
Show file tree

Hide file tree

Showing 12 changed files with 32 additions and 19 deletions.
diff --git a/apps/dcellar-web-ui/public/images/welcome/host_sm.png b/apps/dcellar-web-ui/public/images/welcome/host_sm.png
diff --git a/apps/dcellar-web-ui/public/images/welcome/nft_sm.png b/apps/dcellar-web-ui/public/images/welcome/nft_sm.png
diff --git a/apps/dcellar-web-ui/public/images/welcome/security_sm.png b/apps/dcellar-web-ui/public/images/welcome/security_sm.png
diff --git a/apps/dcellar-web-ui/src/base/theme/light.ts b/apps/dcellar-web-ui/src/base/theme/light.ts
@@ -12,6 +12,7 @@ export const light = {
     opacity8: 'rgba(17, 132, 238, 0.15)',
     opacity9: 'rgba(0, 0, 0, 0.15)',
     opacity10: 'rgba(255, 255, 255, 0.10)',
+    opacity11: 'rgba(255, 255, 255, 0.80)',
     brand: {
       'normal-hight': '#009e2c',
       normal: '#00ba34',

diff --git a/apps/dcellar-web-ui/src/components/layout/LandingHeader/BaseHeader.tsx b/apps/dcellar-web-ui/src/components/layout/LandingHeader/BaseHeader.tsx
@@ -44,11 +44,11 @@ export const BaseHeader = () => {
       paddingX="40px"
       alignItems="center"
       justifyContent={'space-between'}
-      bg={'transparent'}
       position={'fixed'}
       zIndex={1100}
       backdropFilter={'blur(10px)'}
       boxShadow={isScroll ? '0px 4px 24px 0px rgba(0, 0, 0, 0.08)' : 'none'}
+      background={isScroll ? 'opacity11' : 'transparent'}
     >
       <GAClick name="dc_lp.main.header.logo.click">
         <Logo href="/" />

diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/FAQ.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/FAQ.tsx
@@ -174,12 +174,12 @@ export const FAQ = () => {
       <H2 id='#faq' marginBottom={'16px'}>FAQ</H2>
       <QAccordion>
         {data.map((item, index) => (
-          <QAccordionItem key={index}>
-            <QAccordionButton h={56} fontSize={16} fontWeight={600}>
+          <QAccordionItem key={index} px={0} >
+            <QAccordionButton h={56} fontSize={16} fontWeight={600} px={0}>
               {item.question}
               <QAccordionIcon />
             </QAccordionButton>
-            <QAccordionPanel color={'readable.tertiary'} fontSize={14}>
+            <QAccordionPanel px={0} color={'readable.tertiary'} fontSize={14}>
               {item.answer}
             </QAccordionPanel>
           </QAccordionItem>

diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/NetworkSwitch.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/NetworkSwitch.tsx
@@ -16,6 +16,7 @@ const LINKS = {
 export const NetworkSwitch = () => {
   const network = ['testnet', 'mainnet'].includes(runtimeEnv) ? runtimeEnv : 'testnet';
   const onSwitchClick = (net: 'mainnet' | 'testnet') => {
+    console.log('on switch click', net, network, LINKS)
     if (net === network) return;
     window.location.href = LINKS[net].fullUrl;
   };
@@ -50,7 +51,10 @@ export const NetworkSwitch = () => {
           border="none"
           h={35}
           borderRadius={3}
-          onClick={() => onSwitchClick('testnet')}
+          onClick={(e) => {
+            e.preventDefault();
+            onSwitchClick('testnet');
+          }}
           sx={
             network === 'testnet'
               ? {}

diff --git a/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SizeMenu.tsx b/apps/dcellar-web-ui/src/modules/pricing-calculator/components/SizeMenu.tsx
@@ -31,6 +31,7 @@ export const SizeMenu = ({
             bgColor={'bg.bottom'}
             _hover={{
               bg: 'bg.secondary',
+              border: '1px solid brand.brand5',
             }}
             _expanded={{
               border: '1px solid brand.brand5'

diff --git a/apps/dcellar-web-ui/src/modules/welcome/components/FeatureItem.tsx b/apps/dcellar-web-ui/src/modules/welcome/components/FeatureItem.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text, Image, useMediaQuery } from '@totejs/uikit';
+import { Flex, Text, Image, useMediaQuery, Square } from '@totejs/uikit';
 import { TFeatureItem } from './KeyFeatures';
 import { smMedia } from '@/modules/responsive';
 import { INTER_FONT } from '@/modules/wallet/constants';
@@ -69,6 +69,8 @@ export const FeatureItem = ({ title, desc, tag, introImg, introImgSm }: TFeature
         alt={`${title} image`}
         w={'50%'}
         src={isMobile ? introImgSm : introImg}
+        fallbackStrategy="beforeLoadOrError"
+        fallback={<Square size={300} color="white"></Square>}
         sx={{
           [smMedia]: {
             w: '100%',

diff --git a/apps/dcellar-web-ui/src/modules/welcome/components/HelpDevelopers.tsx b/apps/dcellar-web-ui/src/modules/welcome/components/HelpDevelopers.tsx
@@ -1,6 +1,6 @@
 import { assetPrefix } from '@/base/env';
 import { LandingH2, LandingResponsiveContainer } from '..';
-import { Box, Flex, Text, Image, useMediaQuery } from '@totejs/uikit';
+import { Box, Flex, Text, Image, useMediaQuery, Square } from '@totejs/uikit';
 import { smMedia } from '@/modules/responsive';
 import { GAClick } from '@/components/common/GATracker';
 import { INTER_FONT } from '@/modules/wallet/constants';
@@ -10,22 +10,26 @@ const datas = [
     intro: 'NFT Storage and Minting',
     link: 'https://docs.nodereal.io/docs/dcellar-as-developer-tool#nft-metadata-and-medium-storage',
     img: `${assetPrefix}/images/welcome/nft.png`,
+    imgSm: `${assetPrefix}/images/welcome/nft_sm.png`,
     gaClickName: 'dc_lp.homepage.use_case.nft.click',
   },
   {
     intro: 'SP Functional Verification',
     link: 'https://docs.nodereal.io/docs/dcellar-as-developer-tool#verify-your-storage-provider-sp-with-dcellar',
     img: `${assetPrefix}/images/welcome/security.png`,
+    imgSm: `${assetPrefix}/images/welcome/security_sm.png`,
     gaClickName: 'dc_lp.homepage.use_case.sp.click',
   },
   {
     intro: 'Web Hosting',
     link: 'https://docs.nodereal.io/docs/dcellar-as-developer-tool#web-hosting',
     img: `${assetPrefix}/images/welcome/host.png`,
+    imgSm: `${assetPrefix}/images/welcome/host_sm.png`,
     gaClickName: 'dc_lp.homepage.use_case.hosting.click',
   },
 ];
 export const HelpDevelopers = () => {
+  const [isMobile] = useMediaQuery('(max-width: 767px)');
   return (
     <LandingResponsiveContainer>
       <Flex
@@ -64,13 +68,18 @@ export const HelpDevelopers = () => {
             datas.map((item, index) => (
               <GAClick name={item.gaClickName} key={index}>
                 <Box as="a" href={item.link} key={index} target="_blank">
-                  <Image alt={`${item.intro} icon`} src={item.img}></Image>
+                  <Image
+                    alt={`${item.intro} icon`}
+                    src={isMobile ? item.imgSm : item.img}
+                    fallbackStrategy="beforeLoadOrError"
+                    fallback={<Square size={191} color="white"></Square>}
+                  ></Image>
                   <Text
                     as="h3"
-                    py={24}
+                    py={18}
                     fontFamily={INTER_FONT}
                     textAlign={'center'}
-                    fontSize={24}
+                    fontSize={18}
                     fontWeight={600}
                     sx={{
                       [smMedia]: {

diff --git a/apps/dcellar-web-ui/src/modules/welcome/components/KeyFeaturesPC.tsx b/apps/dcellar-web-ui/src/modules/welcome/components/KeyFeaturesPC.tsx
@@ -32,17 +32,12 @@ export const KeyFeaturesPC = memo(() => {
     <LandingResponsiveContainer>
       <Flex flexDirection={'column'} alignItems={'center'} my={80}>
         <LandingH2 marginBottom={40}>Key Features</LandingH2>
-        <Tabs
-          variant="squared"
-          alignItems={'center'}
-          justifyContent={'center'}
-          isLazy={false}
-        >
-          <TabList flexWrap={'wrap'} justifyContent={'center'}>
+        <Tabs variant="squared" alignItems={'center'} justifyContent={'center'} isLazy={false}>
+          <TabList flexWrap={'wrap'} justifyContent={'center'} marginBottom={33}>
             {keyFeatureList &&
               keyFeatureList.map((item, index) => (
                 <GAClick key={index} name={item.gaClickName}>
-                  <Tab key={index} {...styles} position={'relative'} marginBottom={33}>
+                  <Tab key={index} {...styles} position={'relative'}>
                     <Text fontFamily={INTER_FONT}>{item.label}</Text>
                     {item.tag && (
                       <Text

diff --git a/apps/dcellar-web-ui/typings.d.ts b/apps/dcellar-web-ui/typings.d.ts
@@ -43,7 +43,8 @@ declare module '@totejs/uikit' {
       | 'opacity7'
       | 'opacity8'
       | 'opacity9'
-      | 'opacity10';
+      | 'opacity10'
+      | 'opacity11';
     shadows: BaseThemeTypings['shadows'];
   }
 }