Quick start tour design updates. part 2 (#33788)

* Logos and text should be center-aligned on horizontal variant
* Remove left padding/margin on the list on the horizontal variant. Should not change current vertical behavior
* Change ”Learn how to find and fix vulnerabilities faster” to ”Find problematic code in diffs”
* Hide vertical/horizontal scroll bars
* Update completed items section for horizontal variant

client/web/src/tour/components/ItemPicker.tsx

@@ -8,22 +8,26 @@ import { Button } from '@sourcegraph/wildcard'
 import styles from './ItemPicker.module.scss'
 
 interface ItemPickerProps<TItem> {
+    title: string
     items: TItem[]
     onClose: () => void
     onSelect: (language: TItem) => void
+    className?: string
 }
 
 /**
  * ItemPicker component. Displays a closable block with list of items passed.
  */
 export const ItemPicker = <TItem extends string>({
+    title,
     items,
     onClose,
     onSelect,
+    className,
 }: ItemPickerProps<TItem>): React.ReactElement => (
-    <div>
+    <div className={className}>
         <div className="d-flex justify-content-between">
-            <p className="mt-2">Please select a language:</p>
+            <p className="mt-0 mb-1">{title}</p>
             <CloseIcon onClick={onClose} size="1rem" />
         </div>
         <div className="d-flex flex-wrap">

client/web/src/tour/components/Tour/Tour.module.scss

@@ -1,3 +1,4 @@
+@import 'wildcard/src/global-styles/breakpoints';
 :global(.theme-light) {
     --getting-started-tour-oc-blue-bg: var(--oc-blue-1);
     --getting-started-tour-oc-blue-border: var(--oc-blue-2);
@@ -24,15 +25,7 @@
 
 .task-list {
     &::-webkit-scrollbar {
-        /* stylelint-disable-next-line declaration-property-unit-allowed-list */
-        width: 4px;
-        /* stylelint-disable-next-line declaration-property-unit-allowed-list */
-        height: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        border-radius: 3px;
-        box-shadow: inset 0 0 6px var(--text-muted);
+        display: none;
     }
 
     &.is-horizontal {
@@ -42,14 +35,6 @@
         scroll-behavior: smooth;
         padding-bottom: 0.5rem;
 
-        &::-webkit-scrollbar-thumb {
-            visibility: hidden;
-        }
-
-        &:hover::-webkit-scrollbar-thumb {
-            visibility: visible;
-        }
-
         > * {
             flex: 1 0 19rem;
             scroll-snap-align: start;
@@ -65,7 +50,6 @@
     &:not(.is-horizontal) {
         overflow-y: auto;
         flex-grow: 1;
-        padding-right: 0.25rem;
 
         > :not(:last-child)::after {
             content: ' ';
@@ -77,15 +61,7 @@
 
     // Firefox custom scrollbar
     @-moz-document url-prefix('') {
-        scrollbar-width: thin;
-        scrollbar-color: var(--text-muted);
-        &.is-horizontal {
-            padding-bottom: 1rem;
-        }
-
-        &:not(.is-horizontal) {
-            padding-right: 0.5rem;
-        }
+        scrollbar-width: none;
     }
 }
 
@@ -113,6 +89,18 @@
     }
 }
 
+.completed-items {
+    flex-grow: 2 !important;
+
+    &-inner {
+        display: flex;
+        gap: 7.5rem;
+
+        @media (--md-breakpoint-down) {
+            gap: 2rem;
+        }
+    }
+}
 .completed-check-icon {
     margin-top: 0.125rem;
 }
@@ -126,7 +114,11 @@
         color: var(--link-color);
         font-weight: bold;
         display: inline-block;
-        padding: 0 0.25rem 0 0.5rem;
+        padding: 0 0.25rem 0 0;
+
+        .is-small & {
+            padding-left: 0.5rem;
+        }
     }
 
     .step-list-item {

client/web/src/tour/components/Tour/TourContent.tsx

@@ -45,10 +45,10 @@ const Footer: React.FunctionComponent<{ completedCount: number; totalCount: numb
 )
 
 const CompletedItem: React.FunctionComponent = ({ children }) => (
-    <div className="d-flex align-items-start">
+    <li className="d-flex align-items-start">
         <Icon as={CheckCircleIcon} size="sm" className={classNames('text-success mr-1', styles.completedCheckIcon)} />
         <span className="flex-1">{children}</span>
-    </div>
+    </li>
 )
 
 export const TourContent: React.FunctionComponent<TourContentProps> = ({
@@ -58,7 +58,7 @@ export const TourContent: React.FunctionComponent<TourContentProps> = ({
     className,
     height = 18,
 }) => {
-    const { completedCount, totalCount, completedTaskChunks, completedTasks, ongoingTasks } = useMemo(() => {
+    const { completedCount, totalCount, completedTasks, completedTaskChunks, ongoingTasks } = useMemo(() => {
         const completedTasks = tasks.filter(task => task.completed === 100)
         return {
             completedTasks,
@@ -68,15 +68,16 @@ export const TourContent: React.FunctionComponent<TourContentProps> = ({
             completedCount: completedTasks.length,
         }
     }, [tasks])
+    const isHorizontal = variant === 'horizontal'
 
     return (
         <div className={className} data-testid="tour-content">
-            {variant === 'horizontal' && <Header onClose={onClose}>Don't show again</Header>}
+            {isHorizontal && <Header onClose={onClose}>Don't show again</Header>}
             <MarketingBlock
-                wrapperClassName={classNames('w-100 d-flex', variant !== 'horizontal' && styles.marketingBlockWrapper)}
+                wrapperClassName={classNames('w-100 d-flex', !isHorizontal && styles.marketingBlockWrapper)}
                 contentClassName={classNames(styles.marketingBlockContent, 'w-100 d-flex flex-column pt-3 pb-1')}
             >
-                {variant !== 'horizontal' && <Header onClose={onClose} />}
+                {!isHorizontal && <Header onClose={onClose} />}
                 <div
                     className={classNames(
                         styles.taskList,
@@ -85,20 +86,26 @@ export const TourContent: React.FunctionComponent<TourContentProps> = ({
                     // eslint-disable-next-line react/forbid-dom-props
                     style={{ maxHeight: `${height}rem` }}
                 >
-                    {variant === 'horizontal' &&
-                        completedTaskChunks.length > 0 &&
-                        completedTaskChunks.map((completedTaskChunk, index) => (
-                            <div key={index}>
-                                {variant === 'horizontal' && index === 0 && <p className={styles.title}>Completed</p>}
-                                {completedTaskChunk.map(completedTask => (
-                                    <CompletedItem key={completedTask.title}>{completedTask.title}</CompletedItem>
+                    {isHorizontal && completedTaskChunks.length > 0 && (
+                        <div className={classNames('pl-2 flex-grow-1', styles.completedItems)}>
+                            <p className={styles.title}>Completed</p>
+                            <div className={styles.completedItemsInner}>
+                                {completedTaskChunks.map((completedTaskChunk, index) => (
+                                    <ul key={index} className="p-0 m-0 list-unstyled text-nowrap">
+                                        {completedTaskChunk.map(completedTask => (
+                                            <CompletedItem key={completedTask.title}>
+                                                {completedTask.title}
+                                            </CompletedItem>
+                                        ))}
+                                    </ul>
                                 ))}
                             </div>
-                        ))}
+                        </div>
+                    )}
                     {ongoingTasks.map(task => (
-                        <TourTask key={task.title} {...task} variant={variant !== 'horizontal' ? 'small' : undefined} />
+                        <TourTask key={task.title} {...task} variant={!isHorizontal ? 'small' : undefined} />
                     ))}
-                    {variant !== 'horizontal' && completedTasks.length > 0 && (
+                    {!isHorizontal && completedTasks.length > 0 && (
                         <div>
                             {completedTasks.map(completedTask => (
                                 <CompletedItem key={completedTask.title}>{completedTask.title}</CompletedItem>
@@ -106,9 +113,9 @@ export const TourContent: React.FunctionComponent<TourContentProps> = ({
                         </div>
                     )}
                 </div>
-                {variant !== 'horizontal' && <Footer completedCount={completedCount} totalCount={totalCount} />}
+                {!isHorizontal && <Footer completedCount={completedCount} totalCount={totalCount} />}
             </MarketingBlock>
-            {variant === 'horizontal' && <Footer completedCount={completedCount} totalCount={totalCount} />}
+            {isHorizontal && <Footer completedCount={completedCount} totalCount={totalCount} />}
         </div>
     )
 }

client/web/src/tour/components/Tour/TourTask.tsx

@@ -73,7 +73,13 @@ export const TourTask: React.FunctionComponent<TourTaskProps> = ({ title, steps,
 
     if (showLanguagePicker) {
         return (
-            <ItemPicker items={Object.values(TourLanguage)} onClose={onLanguageClose} onSelect={handleLanguageSelect} />
+            <ItemPicker
+                title="Please select a language:"
+                className={classNames(variant !== 'small' && 'pl-2')}
+                items={Object.values(TourLanguage)}
+                onClose={onLanguageClose}
+                onSelect={handleLanguageSelect}
+            />
         )
     }
 
@@ -94,7 +100,7 @@ export const TourTask: React.FunctionComponent<TourTaskProps> = ({ title, steps,
                     className={classNames(
                         styles.stepList,
                         'm-0',
-                        variant !== 'small' && 'flex-grow-1 d-flex flex-column justify-content-center',
+                        variant !== 'small' && 'flex-grow-1 d-flex flex-column',
                         isMultiStep && styles.isMultiStep
                     )}
                 >

client/web/src/tour/data/index.tsx

@@ -260,7 +260,7 @@ export const authenticatedTasks: TourTaskType[] = [
             },
             {
                 id: 'DiffSearch',
-                label: 'Learn how to find and fix vulnerabilities faster',
+                label: 'Find problematic code in diffs',
                 action: {
                     type: 'link',
                     value: {