diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index 8a0700a..d8b5ee1 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -117,14 +117,14 @@ "title": "Identity wallet setup" }, "government": { - "title": "National Id Agency", + "title": "National ID Agency", "processes": { "signIn": "Log In", "issueCredential": "Claim national ID" } }, "company": { - "title": "Company registration agency", + "title": "Company Registration Agency", "processes": { "signIn": "Log In", "presentCredential": "Present National ID", @@ -194,7 +194,7 @@ "thankYou": { "thanksForTryingSelv": "Thanks for Trying Selv!", "improvedExperience": "Improved Experience", - "savedTime": "With Selv, powered by IOTA, you managed to set up an entire company, corporate bank account and insurance with just a few clicks. Your credentials are reusable, making them a real time-saver.", + "savedTime": "With Selv, powered by IOTA, you managed to set up an entire company with just a few clicks. Your credentials are reusable, making them a real time-saver.", "selfSovereignty": "Self-Sovereignty", "sovereigntyText": "You have taken full control of your data. You decided who you shared your credentials with and when. You can even share them with others manually via QR-Code.", "moreTrust": "More Trust", @@ -217,7 +217,7 @@ "signInSuccess": "You have successfully logged in to the National ID agency portal without ever creating an account, and using only the identity on your wallet. No more need for endless account and password creation." }, "receiveCredentials": { - "title": "Claim your government emitted National Id", + "title": "Claim your government emitted National ID", "subTitle": "Scan the QR code with your wallet app to receive the credential that represents your National ID" }, "confirmation": { diff --git a/web/src/assets/companyHouse.svg b/web/src/assets/companyHouse.svg deleted file mode 100644 index dbcf05c..0000000 --- a/web/src/assets/companyHouse.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/web/src/assets/companyHouseCrone.svg b/web/src/assets/companyHouseCrone.svg deleted file mode 100644 index ea60c22..0000000 --- a/web/src/assets/companyHouseCrone.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/web/src/assets/snsBank.svg b/web/src/assets/snsBank.svg deleted file mode 100644 index 10e401c..0000000 --- a/web/src/assets/snsBank.svg +++ /dev/null @@ -1,169 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx index d164f94..37a59f2 100644 --- a/web/src/components/Footer.tsx +++ b/web/src/components/Footer.tsx @@ -1,6 +1,5 @@ +import { IdcardOutlined, SolutionOutlined } from '@ant-design/icons'; import React from 'react'; -import companyHouse from '../assets/companyHouseCrone.svg' -import snsBank from '../assets/snsBank.svg' const Footer = ({ children, theme }: { children?: JSX.Element | null | undefined; @@ -10,9 +9,12 @@ const Footer = ({ children, theme }: { ); diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx index 4db0d41..4a5540f 100644 --- a/web/src/components/Header.tsx +++ b/web/src/components/Header.tsx @@ -1,17 +1,30 @@ import React from 'react'; -import companyHouse from '../assets/companyHouse.svg' -import snsBank from '../assets/snsBank.svg' +import { IdcardOutlined, SolutionOutlined } from '@ant-design/icons'; +import { Flex } from 'antd'; +import { useTranslation } from 'react-i18next'; const Header = ({ children, theme }: { children?: JSX.Element | null | undefined; theme: string | undefined; }) => { + + const { t } = useTranslation(); + return (
- { theme === 'company' && Company House Logo } - { theme === 'bank' && SNS Bank Logo } - { theme === 'insurance' && SNS Bank Logo } + { theme === 'government' && + + + {t("steps.government.title")} + + } + { theme === 'company' && + + + {t("steps.company.title")} + + }
{ children }
diff --git a/web/src/styles/components/footer.scss b/web/src/styles/components/footer.scss index b5b5ffc..36cb6b3 100644 --- a/web/src/styles/components/footer.scss +++ b/web/src/styles/components/footer.scss @@ -11,13 +11,19 @@ } .logo { + @include themify($themes) { text-align: themed('footerLogoAlign'); } + + @include themify($themes) { + color: themed('footerFontColor'); + } + - img { + svg { @include themify($themes) { - height: themed('footerLogoHeight'); + font-size: themed('footerLogoHeight'); } } } diff --git a/web/src/styles/components/header.scss b/web/src/styles/components/header.scss index ce8105e..a01b92b 100644 --- a/web/src/styles/components/header.scss +++ b/web/src/styles/components/header.scss @@ -19,13 +19,16 @@ } .logo { + + font-weight: bold; @include themify($themes) { - text-align: themed('headerLogoAlign'); + color: themed('headerFontColor'); } + - img { + svg { @include themify($themes) { - height: themed('headerLogoHeight'); + font-size: themed('headerLogoHeight'); } } } diff --git a/web/src/styles/themes.scss b/web/src/styles/themes.scss index a959646..5db046d 100644 --- a/web/src/styles/themes.scss +++ b/web/src/styles/themes.scss @@ -1,5 +1,5 @@ $font-family-companyHouse: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -$font-family-snsBank: 'Maven Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; +$font-family-government: 'Maven Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; $font-family-insurance: 'Maven Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; $font-family-demo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; $font-family-demo-headings: 'Metropolis', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; @@ -11,12 +11,12 @@ $primary-font-color-companyHouse: #142037; $secondary-font-color-companyHouse: #6F6F6F; $page-background-companyHouse: #EEF2FA; -$primary-color-snsBank: #64CDF5; -$secondary-color-snsBank: #562A71; -$trinary-color-snsBank: #64CDF5; -$primary-font-color-snsBank: #142037; -$secondary-font-color-snsBank: #BBBBBB; -$page-background-snsBank: #EEF2FA; +$primary-color-government: #64CDF5; +$secondary-color-government: #562A71; +$trinary-color-government: #64CDF5; +$primary-font-color-government: #142037; +$secondary-font-color-government: #BBBBBB; +$page-background-government: #EEF2FA; $primary-color-insurance: #F39B26; $secondary-color-insurance: #562A71; @@ -68,21 +68,21 @@ $themes: ( ), government: ( - fontFamily: $font-family-companyHouse, - fontFamilyHeadings: $font-family-companyHouse, + fontFamily: $font-family-government, + fontFamilyHeadings: $font-family-government, defaultTextSize: 16px, defaultLineHeight: 24px, - primaryColor: $primary-color-companyHouse, - secondaryColor: $secondary-color-companyHouse, - trinaryColor: $trinary-color-companyHouse, - primaryFontColor: $primary-font-color-companyHouse, - secondaryFontColor: $secondary-font-color-companyHouse, + primaryColor: $primary-color-government, + secondaryColor: $secondary-color-government, + trinaryColor: $trinary-color-government, + primaryFontColor: $primary-font-color-government, + secondaryFontColor: $secondary-font-color-government, linkColor: $link-color, noticeColor: $notice-color, formSelectorColor: $form-selector-color, - pageBackground: $page-background-companyHouse, + pageBackground: $page-background-government, h1TextSize: 36px, h1LineHeight: 42px, @@ -95,16 +95,17 @@ $themes: ( h5TextSize: 14px, h5LineHeight: 15px, - buttonBackgroundColor: $primary-color-companyHouse, + buttonBackgroundColor: $primary-color-government, buttonHeight: 43px, buttonBorderRadius: 4px, - headerBackgroundColor: #032F5D, + headerBackgroundColor: $primary-color-government, + headerFontColor: #fff, headerHeight: 60px, - headerLogoAlign: left, - headerLogoHeight: 24px, - - footerBackgroundColor: #FFFFFF, + headerLogoHeight: 26px, + + footerBackgroundColor: $primary-color-government, + footerFontColor: #fff, footerHeight: 76px, footerLogoAlign: center, footerLogoHeight: 24px, @@ -141,98 +142,97 @@ $themes: ( buttonHeight: 43px, buttonBorderRadius: 4px, - headerBackgroundColor: #032F5D, + headerBackgroundColor: $primary-color-companyHouse, + headerFontColor: #fff, headerHeight: 60px, - headerLogoAlign: left, headerLogoHeight: 24px, - - footerBackgroundColor: #FFFFFF, + + footerBackgroundColor: $primary-color-companyHouse, + footerFontColor: #fff, footerHeight: 76px, footerLogoAlign: center, footerLogoHeight: 24px, ), - bank: ( - fontFamily: $font-family-snsBank, - fontFamilyHeadings: $font-family-snsBank, - - defaultTextSize: 16px, - defaultLineHeight: 24px, - - primaryColor: $primary-color-snsBank, - secondaryColor: $secondary-color-snsBank, - trinaryColor: $trinary-color-snsBank, - primaryFontColor: $primary-font-color-snsBank, - secondaryFontColor: $secondary-font-color-snsBank, - linkColor: $link-color, - noticeColor: $notice-color, - formSelectorColor: $form-selector-color, - pageBackground: $page-background-snsBank, - - h1TextSize: 36px, - h1LineHeight: 42px, - h2TextSize: 24px, - h2LineHeight: 28px, - h3TextSize: 24px, - h3LineHeight: 28px, - h4TextSize: 18px, - h4LineHeight: 20px, - h5TextSize: 15px, - h5LineHeight: 17px, - - buttonBackgroundColor: $primary-color-snsBank, - buttonHeight: 51px, - buttonBorderRadius: 4px, - - headerBackgroundColor: #562A71, - headerHeight: 100px, - headerLogoAlign: left, - headerLogoHeight: 39px, - - footerBackgroundColor: #562A71, - footerHeight: 80px, - footerLogoAlign: right, - footerLogoHeight: 24px, - ), - insurance: ( - fontFamily: $font-family-insurance, - fontFamilyHeadings: $font-family-insurance, - - defaultTextSize: 16px, - defaultLineHeight: 24px, - - primaryColor: $primary-color-insurance, - secondaryColor: $secondary-color-insurance, - trinaryColor: $trinary-color-insurance, - primaryFontColor: $primary-font-color-insurance, - secondaryFontColor: $secondary-font-color-insurance, - linkColor: $link-color, - noticeColor: $notice-color, - formSelectorColor: $form-selector-color, - pageBackground: $page-background-insurance, - - h1TextSize: 36px, - h1LineHeight: 42px, - h2TextSize: 24px, - h2LineHeight: 28px, - h3TextSize: 24px, - h3LineHeight: 28px, - h4TextSize: 18px, - h4LineHeight: 20px, - h5TextSize: 15px, - h5LineHeight: 17px, - - buttonBackgroundColor: $primary-color-insurance, - buttonHeight: 51px, - buttonBorderRadius: 4px, - - headerBackgroundColor: #562A71, - headerHeight: 100px, - headerLogoAlign: left, - headerLogoHeight: 39px, - - footerBackgroundColor: #562A71, - footerHeight: 80px, - footerLogoAlign: right, - footerLogoHeight: 24px, - ), + // bank: ( + // fontFamily: $font-family-demo, + // fontFamilyHeadings: $font-family-demo, + + // defaultTextSize: 16px, + // defaultLineHeight: 24px, + + // primaryColor: $primary-color-demo, + // secondaryColor: $secondary-color-demo, + // trinaryColor: $trinary-color-demo, + // primaryFontColor: $primary-font-color-demo, + // secondaryFontColor: $secondary-font-color-demo, + // linkColor: $link-color, + // noticeColor: $notice-color, + // formSelectorColor: $form-selector-color, + // pageBackground: $page-background-demo, + + // h1TextSize: 36px, + // h1LineHeight: 42px, + // h2TextSize: 24px, + // h2LineHeight: 28px, + // h3TextSize: 24px, + // h3LineHeight: 28px, + // h4TextSize: 18px, + // h4LineHeight: 20px, + // h5TextSize: 15px, + // h5LineHeight: 17px, + + // buttonBackgroundColor: $primary-color-demo, + // buttonHeight: 51px, + // buttonBorderRadius: 4px, + + // headerBackgroundColor: #562A71, + // headerHeight: 100px, + // headerLogoHeight: 39px, + + // footerBackgroundColor: #562A71, + // footerHeight: 80px, + // footerLogoAlign: right, + // footerLogoHeight: 24px, + // ), + // insurance: ( + // fontFamily: $font-family-insurance, + // fontFamilyHeadings: $font-family-insurance, + + // defaultTextSize: 16px, + // defaultLineHeight: 24px, + + // primaryColor: $primary-color-insurance, + // secondaryColor: $secondary-color-insurance, + // trinaryColor: $trinary-color-insurance, + // primaryFontColor: $primary-font-color-insurance, + // secondaryFontColor: $secondary-font-color-insurance, + // linkColor: $link-color, + // noticeColor: $notice-color, + // formSelectorColor: $form-selector-color, + // pageBackground: $page-background-insurance, + + // h1TextSize: 36px, + // h1LineHeight: 42px, + // h2TextSize: 24px, + // h2LineHeight: 28px, + // h3TextSize: 24px, + // h3LineHeight: 28px, + // h4TextSize: 18px, + // h4LineHeight: 20px, + // h5TextSize: 15px, + // h5LineHeight: 17px, + + // buttonBackgroundColor: $primary-color-insurance, + // buttonHeight: 51px, + // buttonBorderRadius: 4px, + + // headerBackgroundColor: #562A71, + // headerHeight: 100px, + // headerLogoHeight: 39px, + + // footerBackgroundColor: #562A71, + // footerHeight: 80px, + // footerLogoAlign: right, + // footerLogoHeight: 24px, + // ), ); \ No newline at end of file