refactor: update styling for various compnents

kibis-is · Dec 3, 2023 · 22342d4 · 22342d4
1 parent e9dd2e5
commit 22342d4
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 84 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',
@@ -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',
               },
             ],
           },

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");
 
@@ -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;
-  }
-}