fix: update about preview on hover (#5607)

src/pages/About/Step.tsx

@@ -1,55 +1,37 @@
 import styled from 'styled-components/macro'
 
-const StyledStep = styled.div`
+const StyledStep = styled.div<{ selected: boolean }>`
   cursor: pointer;
   display: flex;
-  gap: 36px;
   padding: 24px 0;
+  color: ${({ theme, selected }) => (selected ? theme.textPrimary : theme.textSecondary)};
+  font-size: 36px;
+  line-height: 44px;
 
   &:not(:last-of-type) {
     border-bottom: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
   }
 `
 
-const StepTitle = styled.div`
+const StepIndex = styled.span`
-  color: ${({ theme }) => theme.textPrimary};
+  margin-right: 36px;
-  font-size: 36px;
-  line-height: 44px;
-  font-weight: 600;
-`
-
-const StepDescription = styled.div`
-  color: ${({ theme }) => theme.textSecondary};
-  font-size: 24px;
-  line-height: 36px;
-`
-
-const StepIndex = styled.div`
-  color: ${({ theme }) => theme.textPrimary};
-  font-size: 36px;
-  line-height: 44px;
 `
 
 const Step = ({
   index,
   title,
-  description,
+  onSelect,
-  expanded,
+  selected,
-  onClick,
 }: {
   index: number
   title: string
-  description: string
+  onSelect: () => void
-  onClick: () => void
+  selected: boolean
-  expanded?: boolean
 }) => {
   return (
-    <StyledStep onClick={onClick}>
+    <StyledStep onClick={onSelect} onMouseEnter={onSelect} selected={selected}>
       <StepIndex>{index + 1}</StepIndex>
-      <div>
+      {title}
-        <StepTitle>{title}</StepTitle>
-        {expanded && <StepDescription>{description}</StepDescription>}
-      </div>
     </StyledStep>
   )
 }

src/pages/About/index.tsx

@@ -175,12 +175,11 @@ export default function About() {
               <StepList>
                 {STEPS.map((step, index) => (
                   <Step
-                    expanded={selectedStepIndex === index}
+                    selected={selectedStepIndex === index}
-                    onClick={() => setSelectedStepIndex(index)}
+                    onSelect={() => setSelectedStepIndex(index)}
                     index={index}
                     key={step.title}
                     title={step.title}
-                    description={step.description}
                   />
                 ))}
               </StepList>