feat: demo small UI adjustments (#3653)

https://linear.app/unleash/issue/2-975/small-ui-adjustments

Adds some small UI adjustments we identified in the meantime:
 - "Get Unleash" -> "Get started" in the top banner;
 - Topics list header is now the same color as the top banner;
- Added `focus` capabilities to steps, added it to the appropriate
steps;
 - No longer closes tooltip when clicked when using `anyClick`;
 - Reversed the topics list header arrow rotation;

Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#3537


![image](https://user-images.githubusercontent.com/14320932/235139390-a40db29d-befe-44f9-9f61-a0ad120b7251.png)

frontend/src/component/demo/DemoBanner/DemoBanner.tsx

@@ -56,7 +56,7 @@ export const DemoBanner = ({ onPlans }: IDemoBannerProps) => {
                 Ask questions
             </StyledQuestionsButton>
             <StyledButton variant="contained" color="primary" onClick={onPlans}>
-                Get Unleash
+                Get started
             </StyledButton>
         </StyledBanner>
     );

frontend/src/component/demo/DemoSteps/DemoSteps.tsx

@@ -104,11 +104,25 @@ export const DemoSteps = ({
         }
 
         if (action === ACTIONS.UPDATE) {
-            const el = document.querySelector(step.target as string);
+            const el = document.querySelector(
+                step.target as string
+            ) as HTMLElement | null;
             if (el) {
                 el.scrollIntoView({
                     block: 'center',
                 });
+
+                if (step.focus) {
+                    if (step.focus === true) {
+                        el.focus();
+                    } else {
+                        const focusEl = el.querySelector(
+                            step.focus
+                        ) as HTMLElement | null;
+                        focusEl?.focus();
+                    }
+                }
+
                 if (!step.nextButton) {
                     const clickHandler = (e: Event) => {
                         abortController.abort();
@@ -119,9 +133,17 @@ export const DemoSteps = ({
                     };
 
                     if (step.anyClick) {
-                        window.addEventListener('click', clickHandler, {
+                        window.addEventListener(
+                            'click',
+                            e => {
+                                const targetEl = e.target as HTMLElement;
+                                if (!targetEl.closest('.__floater'))
+                                    clickHandler(e);
+                            },
+                            {
                                 signal: abortController.signal,
-                        });
+                            }
+                        );
                     } else {
                         el.addEventListener('click', clickHandler, {
                             signal: abortController.signal,

frontend/src/component/demo/DemoTopics/DemoTopics.tsx

@@ -5,6 +5,7 @@ import {
     Button,
     LinearProgress,
     Typography,
+    alpha,
     linearProgressClasses,
     styled,
 } from '@mui/material';
@@ -33,9 +34,10 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
         right: theme.spacing(2),
         fontSize: theme.fontSizes.mainHeader,
         transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        transform: 'rotate(180deg)',
     },
     '&.Mui-expanded .expand-icon': {
-        transform: 'rotate(180deg)',
+        transform: 'rotate(0)',
     },
 }));
 
@@ -44,8 +46,8 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
         flexDirection: 'column',
         alignItems: 'center',
     },
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.web.main,
-    color: theme.palette.primary.contrastText,
+    color: theme.palette.web.contrastText,
     borderTopLeftRadius: theme.shape.borderRadiusLarge,
     borderTopRightRadius: theme.shape.borderRadiusLarge,
     height: 91,
@@ -84,11 +86,11 @@ const StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({
     height: theme.spacing(1),
     borderRadius: theme.shape.borderRadius,
     [`&.${linearProgressClasses.colorPrimary}`]: {
-        backgroundColor: theme.palette.primary.dark,
+        backgroundColor: alpha(theme.palette.web.contrastText!, 0.1),
     },
     [`& .${linearProgressClasses.bar}`]: {
         borderRadius: theme.shape.borderRadius,
-        backgroundColor: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.web.contrastText,
     },
 }));
 

frontend/src/component/demo/demo-topics.tsx

@@ -13,6 +13,7 @@ export interface ITutorialTopicStep extends Step {
     preventDefault?: boolean;
     anyClick?: boolean;
     optional?: boolean;
+    focus?: boolean | string;
 }
 
 export interface ITutorialTopic {
@@ -212,6 +213,7 @@ export const TOPICS: ITutorialTopic[] = [
                     </>
                 ),
                 nextButton: true,
+                focus: 'input',
             },
             {
                 target: 'button[data-testid="CONSTRAINT_VALUES_ADD_BUTTON"]',
@@ -440,6 +442,7 @@ export const TOPICS: ITutorialTopic[] = [
                 ),
                 backCloseModal: true,
                 nextButton: true,
+                focus: 'input',
             },
             {
                 target: 'div[data-testid="VARIANT"]:last-of-type #variant-payload-value',
@@ -456,6 +459,7 @@ export const TOPICS: ITutorialTopic[] = [
                     </Description>
                 ),
                 nextButton: true,
+                focus: true,
             },
             {
                 target: 'div[data-testid="VARIANT"]:last-of-type button[data-testid="VARIANT_ADD_OVERRIDE_BUTTON"]',
@@ -499,6 +503,7 @@ export const TOPICS: ITutorialTopic[] = [
                 ),
                 nextButton: true,
                 backCloseModal: true,
+                focus: 'input',
             },
             {
                 target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',