Leadspace actions

src/components/Leadspace/Leadspace.module.scss

@@ -29,49 +29,21 @@
     }
 
     .action {
-      color: $white-0;
-      font-size: 16px;
-      line-height: 24px;
-      width: calc(50% + $grid-gutter / 2);
+      margin-top: 32px;
+      padding-left: 16px;
+      width: 100%;
       min-width: 20rem;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      cursor: pointer;
+      margin-top: 16px;
+
+      label {
+        flex: 1;
+      }
 
       .icon {
-        margin-right: 8px;
         width: 20px;
         height: 20px;
-        fill: black;
-      }
-
-      label {
-        cursor: pointer;
-        margin-right: .2rem;
-
-        & + svg {
-          transition: all 0.3s ease;
-          opacity: 0;
-        }
-      }
-
-      &:hover {
-        label + svg {
-          transform: translateX(1rem);
-          opacity: 1;
-        }
-      }
-
-      &:not(:first-of-type) {
-        margin-top: 16px;
-      }
-
-      &:first-of-type {
-        margin-top: 32px;
-        @include breakpoint(lg) {
-          margin-top: 48px;
-        }
+        margin-left: 0;
+        margin-right: 12px;
       }
     }
   }

src/components/Leadspace/Leadspace.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Column, Button, Grid, Link } from '@carbon/react';
+import { Column, Button, Grid } from '@carbon/react';
 import { ArrowRight } from '@carbon/icons-react';
 import Cube from './graphics/Cube';
 import GitHub from '../Icons/github.svg';
@@ -29,15 +29,15 @@ const Leadspace: FC<LeadspaceProps> = ({
         <p className={styles.content__subhead}>
           An new community-based approach to build truly open-source LLMs
         </p>
-        <Link className={styles.action} onClick={onJoinCommunity}>
+        <Button className={styles.action} onClick={onJoinCommunity}>
           <GitHub className={styles.icon} />
           <label>Join the community</label> <ArrowRight />
-        </Link>
-        <Link className={styles.action} onClick={onCheckLatestModel}>
+        </Button>
+        <Button className={styles.action} onClick={onCheckLatestModel}>
           <HuggingFace className={styles.icon} />
           <label>Check out the latest model</label>
           <ArrowRight />
-        </Link>
+        </Button>
       </Column>
       <Column
         className={styles.graphicsWrapper}

src/components/StartExperimenting/StartExperimenting.module.scss

@@ -78,10 +78,6 @@
           height: 20px;
           margin-left: 0;
           margin-right: 12px;
-
-          path {
-            fill: black;
-          }
         }
       }
     }