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
kibis-is · Dec 3, 2023 · 7d0145b · 7d0145b
1 parent 902bc5e
commit 7d0145b
Show file tree

Hide file tree

Showing 10 changed files with 215 additions and 141 deletions.
diff --git 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: `
-<div class="footer-container">
-    <p class="footer-text">Licensed under <a class="footer-text--link" href="${GITHUB_LINK}/blob/main/LICENSE" target="_blank">GPL-2.0</a>. Icons provided by <a class="footer-text--link" href="https://www.flaticon.com/" target="_blank">flaticon</a>.</p>
+<div class="footer__copyright-container">
+    <p class="footer__text">Licensed under <a class="footer__text--link" href="${GITHUB_LINK}/blob/main/LICENSE" target="_blank">GPL-2.0</a>. Icons provided by <a class="footer__text--link" href="https://www.flaticon.com/" target="_blank">flaticon</a>.</p>
 </div>
         `,
         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: `
+<div class="footer__icon-container">
+  <a class="footer__icon-link" href="${GITHUB_LINK}" target="_blank">
+    <svg
+      viewBox="0 0 98 96"
+      xmlns="http://www.w3.org/2000/svg">
+      <path d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
+    </svg>
+  </a>
+  <a class="footer__icon-link" href="${X_LINK}" target="_blank">
+    <svg
+      viewBox="0 0 1200 1227"
+      xmlns="http://www.w3.org/2000/svg">
+      <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
+    </svg>
+  </a>
+</div>
+                `,
               },
             ],
           },
           {
             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
@@ -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
@@ -19,11 +19,11 @@ const ConceptItem: FC<IProps> = ({
 }: IProps) => {
   return (
     <div className={styles.item}>
-      <div className={styles['image-container']}>
+      <div className={styles.container__image}>
         <SvgComponent className={styles.image} role="img" />
       </div>
 
-      <div className={styles['text-container']}>
+      <div className={styles.container__text}>
         <Heading level="h2">{title}</Heading>
         <Text>{description}</Text>
       </div>

diff --git a/src/components/ConceptsSection/ConceptsSection.tsx b/src/components/ConceptsSection/ConceptsSection.tsx
@@ -25,7 +25,7 @@ const ConceptsSection: FC<IProps> = ({ 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<IProps> = ({ 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<IProps> = ({ variant }: IProps) => {
 
   return (
     <Section id="concepts" title="Concepts" variant={variant}>
-      <div className={styles['items-container']}>
+      <div className={styles.container__items}>
         {items.map((props, index) => (
           <ConceptItem {...props} key={`concept-item-${index}`} />
         ))}

diff --git 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
@@ -9,10 +9,10 @@ import styles from './styles.module.scss';
 
 const Header: FC = () => {
   return (
-    <header className={styles.wrapper}>
-      <div className={styles['content-container']}>
+    <header className={styles.container__outer}>
+      <div className={styles.container__content}>
         {/*title*/}
-        <div className={clsx(styles.container, styles['text-container'])}>
+        <div className={clsx(styles.container, styles.container__text)}>
           <h1 className={clsx(styles.text, styles['text--title'])}>
             The AVM utility wallet
           </h1>
@@ -23,7 +23,7 @@ const Header: FC = () => {
         </div>
 
         {/*image*/}
-        <div className={clsx(styles.container, styles['image-container'])}>
+        <div className={clsx(styles.container, styles.container__image)}>
           <ThemedImage
             alt="Wallet home screen"
             className={styles.image}
@@ -36,7 +36,7 @@ const Header: FC = () => {
       </div>
 
       {/*attribution*/}
-      <div className={styles['attribution-container']}>
+      <div className={styles.container__attribution}>
         <p className={clsx(styles.text, styles['text--attribution'])}>
           Image by{` `}
           <a

diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss
@@ -2,30 +2,53 @@
 @import "../../styles/mixins";
 @import "../../styles/variables";
 
-.attribution-container {
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  padding: 0.5rem;
-  @include mobile-only {
-    display: none;
-  }
-}
-
 .container {
   display: flex;
   flex: 1;
   padding: 2rem 0;
-}
 
-.content-container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 0 2rem;
-  @include tablet-and-up {
-    flex-direction: row;
+  &__attribution {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.5rem;
+    @include mobile-only {
+      display: none;
+    }
+  }
+
+  &__content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 0 2rem;
+    @include tablet-and-up {
+      flex-direction: row;
+    }
+  }
+
+  &__image {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__outer {
+    background-color: #f4f4f4;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - var(--ifm-navbar-height));
+    justify-content: space-between;
+    @include tablet-and-up {
+      background-image: url("/static/images/header_background.jpeg");
+      background-size: cover;
+    }
+  }
+
+  &__text {
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
   }
 }
 
@@ -36,11 +59,6 @@
   }
 }
 
-.image-container {
-  align-items: center;
-  justify-content: center;
-}
-
 .text {
   color: text-color("light");
 
@@ -53,7 +71,7 @@
     margin: 0;
 
     a {
-      color: primary-color("light");
+      color: primary-color("dark");
     }
   }
 
@@ -72,21 +90,3 @@
     }
   }
 }
-
-.text-container {
-  align-items: flex-start;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.wrapper {
-  background-color: #f4f4f4;
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - var(--ifm-navbar-height));
-  justify-content: space-between;
-  @include tablet-and-up {
-    background-image: url("/static/images/header_background.jpeg");
-    background-size: cover;
-  }
-}