update

smartcontractkit · Dec 9, 2024 · d8616e3 · d8616e3
1 parent 83e92ce
commit d8616e3
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 8 deletions.
diff --git a/src/components/CCIP/TutorialProgress/TutorialProgress.module.css b/src/components/CCIP/TutorialProgress/TutorialProgress.module.css
@@ -64,9 +64,65 @@
 .step {
   display: flex;
   align-items: center;
-  gap: var(--space-2x);
-  padding: var(--space-2x) 0;
-  border-bottom: 1px solid var(--color-border);
+  gap: var(--space-3x);
+  width: 100%;
+  padding: var(--space-3x);
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  /* Reset button styles */
+  appearance: none;
+  border: none;
+  font: inherit;
+  text-align: left;
+}
+
+.step:hover {
+  background: var(--color-background-secondary);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+/* Visual feedback on click */
+.step:active {
+  transform: translateY(0);
+}
+
+/* Chevron indicator */
+.chevron {
+  margin-left: auto;
+  width: 12px;
+  height: 12px;
+  border-right: 2px solid var(--color-text-secondary);
+  border-bottom: 2px solid var(--color-text-secondary);
+  transform: rotate(45deg);
+  transition: transform 0.2s ease;
+}
+
+.step.expanded .chevron {
+  transform: rotate(-135deg);
+}
+
+/* Step details animation */
+.step-details {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+
+.step.expanded + .step-details {
+  max-height: 500px; /* Adjust based on content */
+  opacity: 1;
+  padding: var(--space-3x) 0;
+}
+
+/* Focus styles for accessibility */
+.step:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 
 .stepIndicator {

diff --git a/src/components/CCIP/TutorialProgress/TutorialProgress.tsx b/src/components/CCIP/TutorialProgress/TutorialProgress.tsx
@@ -68,13 +68,16 @@ export const TutorialProgress = () => {
               const status = getStepStatus(step.id)
               return (
                 <div key={step.id} className={`${styles["step-container"]} ${styles[status]}`}>
-                  <div className={`${styles.step} ${styles[status]}`}>
+                  <button
+                    className={`${styles.step} ${styles[status]} ${expandedStep === step.id ? styles.expanded : ""}`}
+                    onClick={() => toggleStepDetails(step.id)}
+                    aria-expanded={expandedStep === step.id}
+                    aria-controls={`details-${step.id}`}
+                  >
                     <div className={styles["step-indicator"]}>{status === "completed" ? "✓" : step.stepNumber}</div>
                     <span className={styles["step-title"]}>{step.title}</span>
-                    <button className={styles["expand-button"]} onClick={() => toggleStepDetails(step.id)}>
-                      {expandedStep === step.id ? "−" : "+"}
-                    </button>
-                  </div>
+                    <div className={styles.chevron} aria-hidden="true" />
+                  </button>
                   {expandedStep === step.id && (
                     <div className={styles["step-details"]}>
                       <div className={styles["step-progress"]}>