From d758651cf22c142325bd6e009199f7e607e77e3f Mon Sep 17 00:00:00 2001
From: igalklebanov <igalklebanov@gmail.com>
Date: Sat, 12 Oct 2024 21:31:15 +0300
Subject: [PATCH] extract to css?

---
 site/src/components/SectionFeatures/index.tsx | 34 +++---------------
 .../SectionFeatures/styles.module.css         | 36 +++++++++++++++++++
 2 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/site/src/components/SectionFeatures/index.tsx b/site/src/components/SectionFeatures/index.tsx
index 4564ea530..31c95e06a 100644
--- a/site/src/components/SectionFeatures/index.tsx
+++ b/site/src/components/SectionFeatures/index.tsx
@@ -1,5 +1,3 @@
-import { useColorMode } from '@docusaurus/theme-common'
-import { gray } from '@radix-ui/colors'
 import type { SVGProps } from 'react'
 import clsx from 'clsx'
 import styles from './styles.module.css'
@@ -92,40 +90,16 @@ function TickIcon(props: SVGProps<SVGSVGElement>) {
 }
 
 function Feature({ title, description }: FeatureItem) {
-  const { colorMode, isDarkTheme } = useColorMode()
-  console.log({ colorMode, isDarkTheme })
-
   return (
     <div className={clsx('col col--6')} style={{ padding: 10 }}>
       <div className="padding-horiz--md">
-        <h3
-          style={{
-            color: isDarkTheme ? gray.gray4 : gray.gray12,
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 8,
-          }}
-        >
-          <span
-            style={{
-              display: 'grid',
-              placeItems: 'center',
-              color: 'red',
-              width: 20,
-              height: 20,
-              fontSize: 12,
-              background: 'var(--sky7)',
-              borderRadius: 100,
-              border: `1px solid var(--sky10)`,
-            }}
-          >
-            <TickIcon style={{ width: 12, height: 12, fill: 'var(--sky12)' }} />
+        <h3 className={styles['feature-title']}>
+          <span className={styles['tick-container']}>
+            <TickIcon className={styles['tick-icon']} />
           </span>
           {title}
         </h3>
-        <p style={{ color: isDarkTheme ? gray.gray8 : gray.gray11 }}>
-          {description}
-        </p>
+        <p className={styles['feature-description']}>{description}</p>
       </div>
     </div>
   )
diff --git a/site/src/components/SectionFeatures/styles.module.css b/site/src/components/SectionFeatures/styles.module.css
index 469a4e13d..7e9778e27 100644
--- a/site/src/components/SectionFeatures/styles.module.css
+++ b/site/src/components/SectionFeatures/styles.module.css
@@ -7,3 +7,39 @@
   min-height: 80vh;
   padding: 64px 0;
 }
+
+.feature-title {
+  align-items: center;
+  color: var(--gray12);
+  display: inline-flex;
+  gap: 8px;
+}
+
+[data-theme='dark'] .feature-title {
+  color: var(--gray4);
+}
+
+.tick-container {
+  background-color: var(--sky7);
+  border: 1px solid var(--sky10);
+  border-radius: 100%;
+  display: grid;
+  font-size: 12px;
+  height: 20px;
+  place-items: center;
+  width: 20px;
+}
+
+.tick-icon {
+  height: 12px;
+  fill: var(--sky12);
+  width: 12px;
+}
+
+.feature-description {
+  color: var(--gray11);
+}
+
+[data-theme='dark'] .feature-description {
+  color: var(--gray8);
+}