From b7a092beb2ae3791d4d5734f446bf90434523f18 Mon Sep 17 00:00:00 2001
From: amirhouieh <amir@status.im>
Date: Sat, 8 Oct 2022 20:53:52 +0200
Subject: [PATCH] closes #23

---
 src/components/mdx/FeatureCard/FeatureCard.tsx   |  2 +-
 src/components/mdx/FeatureCard/style.module.scss |  1 +
 src/components/mdx/TeamList/TeamList.tsx         | 12 +++++++++++-
 src/components/mdx/TeamList/style.module.scss    |  8 +++++++-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/mdx/FeatureCard/FeatureCard.tsx b/src/components/mdx/FeatureCard/FeatureCard.tsx
index e39a46d..ac8b363 100644
--- a/src/components/mdx/FeatureCard/FeatureCard.tsx
+++ b/src/components/mdx/FeatureCard/FeatureCard.tsx
@@ -23,7 +23,7 @@ export const FeatureCard = (props: TProps): JSX.Element => {
             <span>{ln[index]}</span>
           </div>
         )}
-        <h3 className={styles.cardTitle}>{title}</h3>
+        <h4 className={styles.cardTitle}>{title}</h4>
       </div>
       <p className={clsx('sans', styles.cardDescription)}>{text}</p>
     </div>
diff --git a/src/components/mdx/FeatureCard/style.module.scss b/src/components/mdx/FeatureCard/style.module.scss
index 2a3bf17..fcb42e1 100644
--- a/src/components/mdx/FeatureCard/style.module.scss
+++ b/src/components/mdx/FeatureCard/style.module.scss
@@ -20,6 +20,7 @@
     padding: 0;
     display: flex;
     column-gap: var(--ifm-spacing-horizontal);
+    align-items: center;
   }
 
   .latinNumber {
diff --git a/src/components/mdx/TeamList/TeamList.tsx b/src/components/mdx/TeamList/TeamList.tsx
index 14c2b80..7640652 100644
--- a/src/components/mdx/TeamList/TeamList.tsx
+++ b/src/components/mdx/TeamList/TeamList.tsx
@@ -5,6 +5,10 @@ import { useTeam } from '@site/src/lib/team.utils'
 import { ELogosTeamNames } from '@site/src/types/team'
 import { SocialMediaItem } from '../../Icon/SocialmediaLink'
 import { ECommunityProviders } from '@site/src/types/ui.types'
+import {
+  globalStore,
+  selectHiddenSidebar,
+} from '@site/src/containers/GlobalStore'
 
 type TProps = {
   children: React.ReactNode
@@ -12,10 +16,16 @@ type TProps = {
 
 export const TeamList = (props: TProps): JSX.Element => {
   const team = useTeam('codex' as ELogosTeamNames)
+  const hiddenSidebar = globalStore.useSelector(selectHiddenSidebar)
 
   return (
     <section className={styles.TeamList}>
-      <div className={styles.TeamListContainer}>
+      <div
+        className={clsx(
+          styles.TeamListContainer,
+          hiddenSidebar ? styles.withSidebarHide : false,
+        )}
+      >
         {team.map((member, index) => (
           <div className={clsx('', styles.memberCard)} key={`mc-${index}`}>
             <div className={clsx('', styles.memberCardImage)}>
diff --git a/src/components/mdx/TeamList/style.module.scss b/src/components/mdx/TeamList/style.module.scss
index a9a1047..fdfc09f 100644
--- a/src/components/mdx/TeamList/style.module.scss
+++ b/src/components/mdx/TeamList/style.module.scss
@@ -3,10 +3,16 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 10px;
-    //grid-auto-rows: 600px;
     grid-column-gap: calc(0.7 * var(--ifm-global-spacing));
     grid-row-gap: calc(0.6 * var(--ifm-global-spacing));
 
+    &.withSidebarHide {
+      grid-template-columns: repeat(3, 1fr);
+      .memberCard {
+        grid-template-rows: 320px 60px;
+      }
+    }
+
     .memberCard {
       box-shadow: none;
       display: grid;