diff --git a/public/img/footer/fingerprint-hover.svg b/public/img/footer/fingerprint-hover.svg new file mode 100644 index 0000000..942ba48 --- /dev/null +++ b/public/img/footer/fingerprint-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/footer/fingerprint.svg b/public/img/footer/fingerprint.svg new file mode 100644 index 0000000..254b09f --- /dev/null +++ b/public/img/footer/fingerprint.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/footer/icon_discord.svg b/public/img/footer/icon_discord.svg new file mode 100644 index 0000000..452c2ce --- /dev/null +++ b/public/img/footer/icon_discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/footer/icon_github.svg b/public/img/footer/icon_github.svg new file mode 100644 index 0000000..5cd69a9 --- /dev/null +++ b/public/img/footer/icon_github.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/footer/icon_medium.svg b/public/img/footer/icon_medium.svg new file mode 100644 index 0000000..39e7c98 --- /dev/null +++ b/public/img/footer/icon_medium.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/img/footer/icon_telegram.svg b/public/img/footer/icon_telegram.svg new file mode 100644 index 0000000..345263c --- /dev/null +++ b/public/img/footer/icon_telegram.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/img/footer/icon_twitter.svg b/public/img/footer/icon_twitter.svg new file mode 100644 index 0000000..f6a9cbc --- /dev/null +++ b/public/img/footer/icon_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img/footer/icon_youtube.svg b/public/img/footer/icon_youtube.svg new file mode 100644 index 0000000..ea01a3b --- /dev/null +++ b/public/img/footer/icon_youtube.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/app/globals.css b/src/app/globals.css index b7904e2..e9266c8 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -6,6 +6,24 @@ --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; + + --sds-color-background-default-secondary: #F4F4F4; + --sds-color-background-default-default: #FFFFFF; + --sds-color-background-warning-tertiary: #FEFCE8; + --sds-color-background-brand-default: #0996EE; + + --sds-color-icon-neutral-default: #303030; + --sds-color-icon-neutral-tertiary: #767676; + --sds-color-icon-warning-on-warning-tertiary: #9C820E; + + --sds-color-text-default-default: #1F1F21; + --sds-color-text-default-secondary: #626264; + --sds-color-text-brand-on-brand: #DFF0FF; + --sds-color-text-warning-on-warning-tertiary: #9C820E; + + --sds-color-border-default-default: #D2D2D3; + --sds-color-border-warning-tertiary: #FEDF56; + } @media (prefers-color-scheme: dark) { @@ -52,3 +70,23 @@ body { } } } + + +[data-theme="dark"] { + --sds-color-background-default-secondary: #1F1F21; + --sds-color-background-default-default: #151318; + --sds-color-background-warning-tertiary: #231F0D; + --sds-color-background-brand-default: #B8E1FF; + + --sds-color-icon-neutral-default: #E3E3E3; + --sds-color-icon-neutral-tertiary: #B2B2B2; + --sds-color-icon-warning-on-warning-tertiary: #FDD10E; + + --sds-color-text-default-default: #FFFFFF; + --sds-color-text-default-secondary: #FFFFFFB2; + --sds-color-text-brand-on-brand: #0A4370; + --sds-color-text-warning-on-warning-tertiary: #FDD10E; + + --sds-color-border-default-default: #414142; + --sds-color-border-warning-tertiary: #6C5A0D; +} \ No newline at end of file diff --git a/src/app/social-start/page.tsx b/src/app/social-start/page.tsx index 93d648f..1984f3a 100644 --- a/src/app/social-start/page.tsx +++ b/src/app/social-start/page.tsx @@ -24,7 +24,7 @@ export default function SocialStart() { const onApprove = useCallback(() => { setShowAggree(false); }, []); - + if (params?.actionType !== OPENLOGIN_ACTIONS.LOGIN) return <>`actionType` No Support; return (
diff --git a/src/components/Footer/contants.ts b/src/components/Footer/contants.ts new file mode 100644 index 0000000..8864b20 --- /dev/null +++ b/src/components/Footer/contants.ts @@ -0,0 +1,25 @@ +const mediumArr = [ + { + title: 'medium', + icon: '/img/footer/icon_medium.svg', + href: 'https://medium.com/@PortkeyDID' + },{ + title: 'youtube', + icon: '/img/footer/icon_youtube.svg', + href: 'https://www.youtube.com/@PortkeyDID' + },{ + title: 'telegram', + icon: '/img/footer/icon_telegram.svg', + href: 'https://t.me/Portkey_Official_Group' + },{ + title: 'twitter', + icon: '/img/footer/icon_twitter.svg', + href: 'https://twitter.com/Portkey_DID' + },{ + title: 'github', + icon: '/img/footer/icon_github.svg', + href: 'https://github.com/Portkey-Wallet/portkey-web' + } +]; + +export { mediumArr } \ No newline at end of file diff --git a/src/components/Footer/index.css b/src/components/Footer/index.css new file mode 100755 index 0000000..7602fd9 --- /dev/null +++ b/src/components/Footer/index.css @@ -0,0 +1,14 @@ +.medium { + display: flex; + gap: 24px; + padding-top: 25px; + border-top: 1px solid var(--sds-color-border-default-default); + width: 100%; + justify-content: center; +} + +.medium img { + width: 24px; + height: 24px; + cursor: pointer; +} diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx new file mode 100644 index 0000000..1291361 --- /dev/null +++ b/src/components/Footer/index.tsx @@ -0,0 +1,13 @@ +import React from "react"; +import { mediumArr } from './contants'; +import './index.css'; + +const Footer = ({className}: {className?: string}) => { + + return
+ {/* eslint-disable-next-line @next/next/no-img-element */} + {mediumArr.map(item => {item.title})} +
+} + +export default Footer \ No newline at end of file diff --git a/src/pages-components/entry/index.tsx b/src/pages-components/entry/index.tsx index 1093e41..3a95be6 100644 --- a/src/pages-components/entry/index.tsx +++ b/src/pages-components/entry/index.tsx @@ -8,9 +8,11 @@ import CommonImage from 'src/components/CommonImage'; import { entryPageData } from 'src/constants/entry'; import { useStyleProvider } from 'src/utils/mobile'; import { OpenLoginParamConfig } from 'src/types/auth'; +import { CustomSvg } from '@portkey/did-ui-react'; +import Footer from 'src/components/Footer'; export default function JumpEntry({ onApprove, authInfo }: { onApprove?: () => void; authInfo: OpenLoginParamConfig }) { - const { logo, errorIcon } = entryPageData; + const { errorIcon } = entryPageData; const styles = useStyleProvider>({ pcStyle, mobileStyle, @@ -25,7 +27,14 @@ export default function JumpEntry({ onApprove, authInfo }: { onApprove?: () => v // eslint-disable-next-line no-empty } catch (ignored) {} }, []); - + useEffect(() => { + const theme = authInfo.theme; + if (theme === 'dark') { + document.documentElement.setAttribute("data-theme", "dark"); + } else { + document.documentElement.setAttribute("data-theme", "light"); + } + }) useEffect(() => { try { if (!authInfo) throw new Error('invalid data'); @@ -42,7 +51,11 @@ export default function JumpEntry({ onApprove, authInfo }: { onApprove?: () => v symbol && (raw['Token'] = symbol); (amount || typeof amount === 'number') && (raw['Amount'] = amount); const realChainId = targetChainId || originChainId; - raw['Chain'] = realChainId === `AELF` ? `MainChain ${realChainId}` : `SideChain ${realChainId}`; + if(realChainId){ + raw['Chain'] = realChainId === `AELF` ? `MainChain ${realChainId}` : `SideChain ${realChainId}`; + } else { + raw['Chain'] = 'Unknown'; + } raw['Guardian Type'] = guardianType; const guardianAccount = thirdPartyEmail || identifier; raw['Guardian Account'] = guardianAccount; @@ -60,37 +73,41 @@ export default function JumpEntry({ onApprove, authInfo }: { onApprove?: () => v
- -
- {'Verification details are as follows. Proceed only if all data matches:'} -
-
- {consumedData ? ( - Object.entries(consumedData).map(([key, value]) => { - return ( -
-
{key}
-
{value}
-
- ); - }) - ) : ( -
- -
Invalid parameter.
-
- )} + {/* */} + +
+
+ {'Verification details are as follows. Proceed only if all data matches:'} +
+
+ {consumedData ? ( + Object.entries(consumedData).map(([key, value]) => { + return ( +
+
{key}
+
{value}
+
+ ); + }) + ) : ( +
+ +
Invalid parameter.
+
+ )} +
{!!consumedData && ( )} +
diff --git a/src/pages-components/entry/mobile-styles.module.css b/src/pages-components/entry/mobile-styles.module.css index 9eb7a22..5e4cb93 100644 --- a/src/pages-components/entry/mobile-styles.module.css +++ b/src/pages-components/entry/mobile-styles.module.css @@ -8,41 +8,55 @@ justify-content: center; align-items: center; width: 100%; - height: 200%; + height: 100vh; + background: var(--sds-color-background-default-secondary); +} +.logo { + width: 137.846px; + height: 32px; + svg { + width: 137.846px; + height: 32px; + path { + fill: var(--sds-color-icon-neutral-default); + } + } } - .wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; - margin-top: 44px; - padding-left: 24px; - padding-right: 24px; + margin-top: 40px; + padding: 32px; + width: 'auto'; + background: var(--sds-color-background-default-default); + gap: 32px; + border-radius: 12px; + box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06); } .introductionText { - max-width: 320px; - color: var(--Light-Mode-Neutral-01-Primary-Text, #101114); - font-family: Roboto-Regular; - font-size: 14px; + color: var(--sds-color-text-default-default); + /* Body Strong */ + font-family: 'Schibsted Grotesk'; + font-size: 16px; font-style: normal; - font-weight: 400; - line-height: 24px; - margin-top: 40px; + font-weight: 600; + line-height: 140%; /* 22.4px */ } .dashboard { display: flex; - padding: 20px; + padding: 4px 0px; flex-direction: column; align-items: flex-start; - gap: 10px; + /* gap: 10px; */ align-self: stretch; - width: 320px; - margin-top: 16px; + /* width: 480px; */ + /* margin-top: 16px; */ border-radius: 6px; - background: var(--Light-Mode-Neutral-07-Container-BG, #f5f6f7); + background: var(--sds-color-background-default-secondary); } .infoLine { @@ -50,36 +64,33 @@ flex-direction: row; justify-content: center; align-items: center; + padding: 8px 16px; + width: 100%; } .infoTitle { - color: var(--Light-Mode-Neutral-03-Tertiary-Text, #979aa1); - font-family: Roboto-Regular; - font-size: 12px; + color: var(--sds-color-text-default-secondary); + font-family: "SF Pro Text"; + font-size: 14px; font-style: normal; font-weight: 400; - line-height: 16px; /* 133.333% */ - width: 102px; - word-break: break-all; + line-height: 21px; /* 150% */ } .infoContent { - width: 146px; - color: var(--Light-Mode-Neutral-01-Primary-Text, #101114); - font-family: Roboto-Regular; - font-size: 12px; + color: var(--sds-color-text-default-default); + text-align: right; + font-family: "SF Pro Text"; + font-size: 14px; font-style: normal; - font-weight: 400; - line-height: 16px; /* 133.333% */ - margin-left: 32px; - word-break: break-all; + font-weight: 500; + line-height: 21px; /* 150% */ } .jumpBtn { - margin-top: 48px; width: 320px; height: 48px; - background-color: #5b8ef4; + background: var(--sds-color-background-brand-default); border-radius: 24px; display: flex; flex-direction: row; @@ -88,23 +99,24 @@ } .jumpBtnText { - color: #fff; + color: var(--sds-color-text-brand-on-brand); text-align: center; - font-family: Roboto-Regular; + /* Single Line/Body Strong */ + font-family: 'Schibsted Grotesk'; font-size: 16px; font-style: normal; - font-weight: 400; - line-height: 22px; /* 137.5% */ + font-weight: 600; + line-height: 100%; /* 16px */ } .errorText { - color: var(--Light-Mode-Neutral-01-Primary-Text, #101114); - font-family: Roboto-Regular; - font-size: 12px; + color: var(--sds-color-text-default-default); + text-align: right; + font-family: "SF Pro Text"; + font-size: 14px; font-style: normal; - font-weight: 400; - line-height: 16px; /* 133.333% */ - margin-left: 8px; + font-weight: 500; + line-height: 21px; /* 150% */ } .footer { @@ -125,3 +137,18 @@ padding-top: 16px; padding-bottom: 26px; } +.medium { + display: flex; + gap: 24px; + padding-top: 25px; + border-top: 1px solid var(--sds-color-border-default-default); + width: 100%; + justify-content: center; + display: none; +} + +.medium img { + width: 24px; + height: 24px; + cursor: pointer; +} \ No newline at end of file diff --git a/src/pages-components/entry/pc-styles.module.css b/src/pages-components/entry/pc-styles.module.css index 78c4a9a..756954a 100644 --- a/src/pages-components/entry/pc-styles.module.css +++ b/src/pages-components/entry/pc-styles.module.css @@ -7,80 +7,124 @@ flex-direction: column; justify-content: flex-start; align-items: center; + height: 100vh; + background: var(--sds-color-background-default-secondary); +} +.logo { + width: 137.846px; + height: 32px; + svg { + width: 137.846px; + height: 32px; + path { + fill: var(--sds-color-icon-neutral-default); + } + } } - .wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; - margin-top: 99px; + margin-top: 40px; + padding: 32px; + width: 'auto'; + background: var(--sds-color-background-default-default); + gap: 32px; + border-radius: 12px; + box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06); +} +.contentWrapper { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; } - .headerIcon { width: 480px; height: 208px; } .introductionText { - max-width: 480px; - color: var(--Light-Mode-Neutral-01-Primary-Text, #101114); - font-family: Roboto-Regular; - font-size: 14px; + /* max-width: 480px; */ + /* font-family: Roboto-Regular; */ + /* font-size: 14px; font-style: normal; font-weight: 400; - line-height: 24px; - margin-top: 40px; + line-height: 24px; */ + /* margin-top: 40px; */ + color: var(--sds-color-text-default-default); + /* Body Strong */ + font-family: 'Schibsted Grotesk'; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 140%; /* 22.4px */ } .dashboard { display: flex; - padding: 20px; + padding: 4px 0px; flex-direction: column; align-items: flex-start; - gap: 10px; + /* gap: 10px; */ align-self: stretch; - width: 480px; - margin-top: 16px; + /* width: 480px; */ + /* margin-top: 16px; */ border-radius: 6px; - background: var(--Light-Mode-Neutral-07-Container-BG, #f5f6f7); + background: var(--sds-color-background-default-secondary); } .infoLine { display: flex; flex-direction: row; - justify-content: center; + justify-content: space-between; align-items: center; + padding: 8px 16px; + width: 100%; } .infoTitle { - color: var(--Light-Mode-Neutral-03-Tertiary-Text, #979aa1); - font-family: Roboto-Regular; - font-size: 12px; + /* color: var(--Light-Mode-Neutral-03-Tertiary-Text, #979aa1); */ + /* font-family: Roboto-Regular; */ + /* font-size: 12px; */ + /* font-style: normal; */ + /* font-weight: 400; */ + /* line-height: 16px; */ + /* width: 102px; */ + /* word-break: break-all; */ + color: var(--sds-color-text-default-secondary); + font-family: "SF Pro Text"; + font-size: 14px; font-style: normal; font-weight: 400; - line-height: 16px; /* 133.333% */ - width: 102px; - word-break: break-all; + line-height: 21px; /* 150% */ } .infoContent { - width: 306px; - color: var(--Light-Mode-Neutral-01-Primary-Text, #101114); + /* width: 306px; */ + /* color: var(--Light-Mode-Neutral-01-Primary-Text, #101114); font-family: Roboto-Regular; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; /* 133.333% */ - margin-left: 32px; - word-break: break-all; + /* margin-left: 32px; */ + /* word-break: break-all; */ + color: var(--sds-color-text-default-default); + text-align: right; + font-family: "SF Pro Text"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 21px; /* 150% */ } .jumpBtn { - margin-top: 48px; + /* margin-top: 48px; */ width: 480px; height: 48px; - background-color: #5b8ef4; + background: var(--sds-color-background-brand-default); border-radius: 24px; display: flex; flex-direction: row; @@ -89,23 +133,32 @@ } .jumpBtnText { - color: #fff; + /* color: #fff; text-align: center; font-family: Roboto-Regular; font-size: 16px; font-style: normal; font-weight: 400; - line-height: 22px; /* 137.5% */ + line-height: 22px; */ + + color: var(--sds-color-text-brand-on-brand); + text-align: center; + /* Single Line/Body Strong */ + font-family: 'Schibsted Grotesk'; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 100%; /* 16px */ } .errorText { - color: var(--Light-Mode-Neutral-01-Primary-Text, #101114); - font-family: Roboto-Regular; - font-size: 12px; + color: var(--sds-color-text-default-default); + text-align: right; + font-family: "SF Pro Text"; + font-size: 14px; font-style: normal; - font-weight: 400; - line-height: 16px; /* 133.333% */ - margin-left: 8px; + font-weight: 500; + line-height: 21px; /* 150% */ } .footer { @@ -127,3 +180,17 @@ padding-top: 16px; padding-bottom: 26px; } +.medium { + display: flex; + gap: 24px; + padding-top: 25px; + border-top: 1px solid var(--sds-color-border-default-default); + width: 100%; + justify-content: center; +} + +.medium img { + width: 24px; + height: 24px; + cursor: pointer; +} \ No newline at end of file