Replace emojis with Remix icons

kubeshop · Sep 27, 2024 · 2f9375e · 2f9375e
1 parent 58a6b31
commit 2f9375e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -24,10 +24,17 @@
 }
 
 .list {
-  padding-left: 2rem;
+  padding-left: 1rem;
 }
 
 .image {
   border-radius: 6px;
   border: 1px solid var(--ifm-color-secondary);
 }
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  position: relative;
+  top: 4px;
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -5,6 +5,8 @@ import Layout from "@theme/Layout";
 import Heading from "@theme/Heading";
 import { CardTutorial } from "@site/src/components/Card/Tutorial";
 import styles from "./index.module.css";
+import ChatIcon from "@site/static/images/chat-icon.svg";
+import TerminalIcon from "@site/static/images/terminal-icon.svg";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -34,7 +36,12 @@ export default function Home(): JSX.Element {
               body={
                 <div className="row">
                   <div className="col col--6">
-                    <Heading as="h2">🖥️ Fuse CLI</Heading>
+                    <Heading as="h2">
+                      <span className={styles.icon}>
+                        <TerminalIcon />
+                      </span>{" "}
+                      Fuse CLI
+                    </Heading>
                     <ul className={styles.list}>
                       <li>
                         <b>Quick Setup:</b> Get up and running in seconds with minimal configuration
@@ -68,7 +75,12 @@ export default function Home(): JSX.Element {
               body={
                 <div className="row">
                   <div className="col col--6">
-                    <Heading as="h2">💬 Chat Platform</Heading>
+                    <Heading as="h2">
+                      <span className={styles.icon}>
+                        <ChatIcon />
+                      </span>{" "}
+                      Chat Platform
+                    </Heading>
                     <ul className={styles.list}>
                       <li>
                         <b>Real-Time Collaboration:</b> Receive alerts and troubleshoot with your team in Slack or

diff --git a/static/images/chat-icon.svg b/static/images/chat-icon.svg
diff --git a/static/images/terminal-icon.svg b/static/images/terminal-icon.svg