From 6f4737d75cc15b0d72608775153c119d10265f0f Mon Sep 17 00:00:00 2001 From: enes Date: Wed, 31 Jul 2024 14:37:10 +0200 Subject: [PATCH] fix: icons, use FontAwesome package --- package-lock.json | 62 ++++++++++++ package.json | 4 + src/components/FontAwesomeIconStack/index.tsx | 10 ++ .../FontAwesomeIconStack/styles.module.scss | 7 ++ src/layouts/modal/index.tsx | 13 +-- src/pages/landing/index.tsx | 96 ++++--------------- 6 files changed, 106 insertions(+), 86 deletions(-) create mode 100644 src/components/FontAwesomeIconStack/index.tsx create mode 100644 src/components/FontAwesomeIconStack/styles.module.scss diff --git a/package-lock.json b/package-lock.json index 11f2740..965e01e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,10 @@ "dependencies": { "@emotion/react": "11.11.4", "@emotion/styled": "11.11.0", + "@fortawesome/fontawesome-svg-core": "^6.6.0", + "@fortawesome/free-brands-svg-icons": "^6.6.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/react-fontawesome": "^0.2.2", "@mui/icons-material": "5.15.11", "@mui/lab": "5.0.0-alpha.166", "@mui/material": "5.15.11", @@ -1093,6 +1097,64 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz", + "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz", + "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz", + "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", + "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/package.json b/package.json index 7b1e1c2..f38c7c3 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,10 @@ "dependencies": { "@emotion/react": "11.11.4", "@emotion/styled": "11.11.0", + "@fortawesome/fontawesome-svg-core": "^6.6.0", + "@fortawesome/free-brands-svg-icons": "^6.6.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/react-fontawesome": "^0.2.2", "@mui/icons-material": "5.15.11", "@mui/lab": "5.0.0-alpha.166", "@mui/material": "5.15.11", diff --git a/src/components/FontAwesomeIconStack/index.tsx b/src/components/FontAwesomeIconStack/index.tsx new file mode 100644 index 0000000..bf12416 --- /dev/null +++ b/src/components/FontAwesomeIconStack/index.tsx @@ -0,0 +1,10 @@ +import { PropsWithChildren } from 'react' + +import styles from './styles.module.scss' + +/** + * This Component overlays FontAwesomeIcon icons on top of each other + */ +export const FontAwesomeIconStack = ({ children }: PropsWithChildren) => { + return
{children}
+} diff --git a/src/components/FontAwesomeIconStack/styles.module.scss b/src/components/FontAwesomeIconStack/styles.module.scss new file mode 100644 index 0000000..ea68afd --- /dev/null +++ b/src/components/FontAwesomeIconStack/styles.module.scss @@ -0,0 +1,7 @@ +.iconStackContainer { + position: relative; + + > * { + position: absolute; + } +} diff --git a/src/layouts/modal/index.tsx b/src/layouts/modal/index.tsx index 5ca46d1..baa088c 100644 --- a/src/layouts/modal/index.tsx +++ b/src/layouts/modal/index.tsx @@ -8,6 +8,8 @@ import { } from 'react-router-dom' import styles from './style.module.scss' import { appPublicRoutes } from '../../routes' +import { faClose } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' function useRouteMatch(patterns: readonly string[]) { const { pathname } = useLocation() @@ -68,16 +70,7 @@ export const Modal = () => { } }} > - - {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */} - - + diff --git a/src/pages/landing/index.tsx b/src/pages/landing/index.tsx index bc7a882..e7acd58 100644 --- a/src/pages/landing/index.tsx +++ b/src/pages/landing/index.tsx @@ -8,6 +8,17 @@ import { Container } from '../../components/Container' import styles from './style.module.scss' import bg_l from '../../assets/images/bg_l.svg' import bg_r from '../../assets/images/bg_r.svg' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faOsi } from '@fortawesome/free-brands-svg-icons' +import { + faCheck, + faMobileScreenButton, + faShieldHeart, + faSlash, + faUsers, + faWifi +} from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIconStack } from '../../components/FontAwesomeIconStack' export const LandingPage = () => { const navigate = useNavigate() @@ -19,18 +30,7 @@ export const LandingPage = () => { const cards = [ { - icon: ( - - {/* */} - - - ), + icon: , title: <>Open Source, description: ( <> @@ -44,16 +44,7 @@ export const LandingPage = () => { }, { icon: ( - - {/* */} - - + ), title: <>Multi-Device, description: ( @@ -64,18 +55,7 @@ export const LandingPage = () => { ) }, { - icon: ( - - {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */} - - - ), + icon: , title: <>Secure & Private, description: ( <> @@ -85,18 +65,7 @@ export const LandingPage = () => { ) }, { - icon: ( - - {/* */} - - - ), + icon: , title: <>Verifiable, description: ( <> @@ -107,24 +76,10 @@ export const LandingPage = () => { }, { icon: ( - - - - - - - - + + + + ), title: <>Works Offline, description: ( @@ -135,18 +90,7 @@ export const LandingPage = () => { ) }, { - icon: ( - - {/* */} - - - ), + icon: , title: <>Multi-Party Signing, description: ( <>