From 7d0145bedebcc0d5b605c45c41857b2b0b8b503f Mon Sep 17 00:00:00 2001 From: Kieran O'Neill Date: Mon, 4 Dec 2023 00:17:35 +0200 Subject: [PATCH] feat: use social icons (#11) * feat: add more custom styles to the global styles * feat: add social icons to the footer and tidy up * refactor: update styling for various compnents --- docusaurus.config.js | 43 +++++---- src/components/Carousel/styles.module.scss | 2 - .../ConceptsSection/ConceptItem.tsx | 4 +- .../ConceptsSection/ConceptsSection.tsx | 6 +- .../ConceptsSection/styles.module.scss | 47 +++++----- src/components/Header/Header.tsx | 10 +-- src/components/Header/styles.module.scss | 86 +++++++++--------- src/styles/footer.scss | 63 +++++++++++--- src/styles/functions.scss | 8 +- src/styles/global.scss | 87 ++++++++++++------- 10 files changed, 215 insertions(+), 141 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 19900be..3ca3a28 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -24,6 +24,7 @@ const SUGGEST_A_FEATURE_LINK = const X_LINK = 'https://x.com/kibisis_wallet'; // application +const TAGLINE = 'Not just for DeFi'; const TITLE = 'Kibisis'; /** @type {import('@docusaurus/types').Config} */ @@ -83,7 +84,7 @@ const config = { ], projectName: 'kibisis-website', staticDirectories: [STATIC_DIR], - tagline: 'Not just for DeFi', + tagline: TAGLINE, themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ @@ -107,15 +108,15 @@ const config = { items: [ { label: 'Features', - to: '/#features', + href: '/#features', }, { label: 'Concepts', - to: '/#concepts', + href: '/#concepts', }, { label: 'Download', - to: '/#download', + href: '/#download', }, ], label: 'Overview', @@ -137,8 +138,8 @@ const config = { }, footer: { copyright: ` -
-

Licensed under GPL-2.0. Icons provided by flaticon.

+
+

Licensed under GPL-2.0. Icons provided by flaticon.

`, logo: { @@ -154,15 +155,15 @@ const config = { items: [ { label: 'Concepts', - to: '/#concepts', + href: '/#concepts', }, { label: 'Features', - to: '/#features', + href: '/#features', }, { label: 'Download', - to: '/#download', + href: '/#download', }, ], }, @@ -183,18 +184,30 @@ const config = { title: 'Social', items: [ { - label: 'X, formerly Twitter', - href: X_LINK, + html: ` +
+ + + + + + + + + + +
+ `, }, ], }, { title: 'Get Involved', items: [ - { - label: 'GitHub', - href: GITHUB_LINK, - }, { label: 'Report a bug', href: REPORT_A_BUG_LINK, diff --git a/src/components/Carousel/styles.module.scss b/src/components/Carousel/styles.module.scss index b48df5a..a4c50bf 100644 --- a/src/components/Carousel/styles.module.scss +++ b/src/components/Carousel/styles.module.scss @@ -47,7 +47,6 @@ .indicator { background: var(--ifm-color-primary); display: inline-block; - filter: alpha(opacity=30); opacity: 0.3; border-radius: 50%; width: 8px; @@ -58,7 +57,6 @@ &--selected, &:hover { - filter: alpha(opacity=100); opacity: 1; } } diff --git a/src/components/ConceptsSection/ConceptItem.tsx b/src/components/ConceptsSection/ConceptItem.tsx index 1f1b683..839137f 100644 --- a/src/components/ConceptsSection/ConceptItem.tsx +++ b/src/components/ConceptsSection/ConceptItem.tsx @@ -19,11 +19,11 @@ const ConceptItem: FC = ({ }: IProps) => { return (
-
+
-
+
{title} {description}
diff --git a/src/components/ConceptsSection/ConceptsSection.tsx b/src/components/ConceptsSection/ConceptsSection.tsx index 21bf8f8..1198cc4 100644 --- a/src/components/ConceptsSection/ConceptsSection.tsx +++ b/src/components/ConceptsSection/ConceptsSection.tsx @@ -25,7 +25,7 @@ const ConceptsSection: FC = ({ variant }: IProps) => { SvgComponent: concept001Svg, description: ( <> - Kibisis differs from most wallets by focusing on tokens as a utility, + Kibisis differs from most wallets by focusing on assets as a utility, not just for DeFi. ), @@ -36,7 +36,7 @@ const ConceptsSection: FC = ({ variant }: IProps) => { description: ( <> Kibisis not only works with Algorand, but endeavours to encompass all - AVM chains. With Algorand AND Voi compatibility. + AVM chains. ), }, @@ -54,7 +54,7 @@ const ConceptsSection: FC = ({ variant }: IProps) => { return (
-
+
{items.map((props, index) => ( ))} diff --git a/src/components/ConceptsSection/styles.module.scss b/src/components/ConceptsSection/styles.module.scss index 6523755..72eb8ec 100644 --- a/src/components/ConceptsSection/styles.module.scss +++ b/src/components/ConceptsSection/styles.module.scss @@ -2,25 +2,33 @@ $max-width: 300px; -.items-container { - align-items: center; - display: flex; - flex-direction: column; - padding: 3rem 0; - width: 100%; - - @include tablet-and-up { - align-items: flex-start; - flex-direction: row; +.container { + &__image { + display: flex; justify-content: center; + max-width: $max-width; + width: 100%; + } + + &__items { + align-items: center; + display: flex; + flex-direction: column; + padding: 3rem 0; + width: 100%; + @include tablet-and-up { + align-items: flex-start; + flex-direction: row; + justify-content: center; + } } -} -.image-container { - display: flex; - justify-content: center; - max-width: $max-width; - width: 100%; + &__text { + padding-top: 1rem; + text-align: center; + max-width: $max-width; + width: 100%; + } } .image { @@ -35,10 +43,3 @@ $max-width: 300px; padding: 0 2rem; } } - -.text-container { - padding-top: 1rem; - text-align: center; - max-width: $max-width; - width: 100%; -} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 3f3d437..c310ed2 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -9,10 +9,10 @@ import styles from './styles.module.scss'; const Header: FC = () => { return ( -
-
+
+
{/*title*/} -
+

The AVM utility wallet

@@ -23,7 +23,7 @@ const Header: FC = () => {
{/*image*/} -
+
{
{/*attribution*/} -
+

Image by{` `}