Merge pull request #1032 from eleven-labs/fix/feedback-tutorial-stepper

fix: feedbacks css tutorial stepper
eleven-labs · Nov 6, 2023 · a19e5c3 · a19e5c3
2 parents 822aa69 + df61bfe
commit a19e5c3
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 10 deletions.
diff --git a/src/components/ArticleMetadata/ArticleMetadata.tsx b/src/components/ArticleMetadata/ArticleMetadata.tsx
@@ -42,10 +42,16 @@ export const ArticleMetadata: React.FC<ArticleMetadataProps> = ({
           <Skeleton key={displayedField} isLoading={isLoading} display="inline-block" style={{ width: 100 }}>
             {authors &&
               authors.map((author, authorIndex) => (
-                <Text key={author.username} as="span">
-                  {author.name}
-                  {authorIndex !== authors.length - 1 ? ' & ' : ''}
-                </Text>
+                <>
+                  <Text key={author.username} as="span">
+                    {author.name}
+                  </Text>
+                  {authorIndex !== authors.length - 1 && (
+                    <Text key={author.username} as="span">
+                      &nbsp;&&nbsp;
+                    </Text>
+                  )}
+                </>
               ))}
           </Skeleton>
         );

diff --git a/src/components/PostPreview/PostPreviewContent.tsx b/src/components/PostPreview/PostPreviewContent.tsx
@@ -34,7 +34,7 @@ export const PostPreviewContent: React.FC<PostPreviewContentProps> = ({
       <Skeleton isLoading={isLoading}>
         <Heading as="h2" color="amaranth" size="s">
           {contentType === ContentTypeEnum.TUTORIAL ? (
-            <Flex gap="xxs">
+            <Flex gap="xxs" alignItems="center">
               <TutoTag />
               {titleBlock}
             </Flex>

diff --git a/src/components/TutoTag/TutoTag.scss b/src/components/TutoTag/TutoTag.scss
@@ -2,7 +2,7 @@
   padding: var(--spacing-xxs-3) var(--spacing-xs) var(--spacing-xxs-3) var(--spacing-xxs);
   border-radius: 24px;
 
-  &__text {;
-    font-size: 10px;
+  &__text {
+    font-size: 12px;
   }
 }
diff --git a/src/components/TutorialSteps/TutorialSteps.scss b/src/components/TutorialSteps/TutorialSteps.scss
@@ -31,7 +31,7 @@
     }
 
     &:not(:last-child) {
-      padding-bottom: var(--spacing-m);
+      padding-bottom: var(--spacing-l);
     }
 
     &:last-child {
@@ -50,6 +50,7 @@
       }
     }
     &--active ~ #{$this}__step {
+      --tutorial-steps-color: var(--color-dark-grey);
       #{$this}__number {
         --tutorial-steps-number-background: var(--color-white);
         --tutorial-steps-color-number-color: var(--color-azure);

diff --git a/src/components/TutorialSteps/TutorialSteps.tsx b/src/components/TutorialSteps/TutorialSteps.tsx
@@ -33,11 +33,11 @@ export const TutorialSteps: React.FC<TutorialStepsProps> = ({ stepActive, steps,
           alignItems="center"
           gap={{ xs: 'xxs-2', md: '0' }}
         >
-          <Box>
+          <Text as="div" size="xs">
             <Flex alignItems="center" justifyContent="center" className="tutorial-steps__number">
               {index + 1}
             </Flex>
-          </Box>
+          </Text>
           <Text key={name} size="xs" ml="xs" className="tutorial-steps__text">
             {label}
           </Text>