Merge dev into production

_data/pages/what-is-starknet.yml

@@ -5,8 +5,9 @@ page_last_updated: true
 blocks:
   - type: page_header
     title: "What is Starknet? "
+    description: ""
   - type: markdown
-    body: >
+    body: >-
       Starknet is a Validity-Rollup (aka ZK-Rollup) Layer 2 network that
       operates on top of Ethereum, enabling dApps to massively scale without
       compromising on security.
@@ -61,6 +62,8 @@ blocks:
         The Core contract verifies the proof's authenticity and confirms receiving the State Diff, subsequently updating the Starknet state on the Ethereum blockchain. This updated state is then added to an Ethereum block, distributed across the node network for validation and voting. When the block accumulates sufficient votes, it achieves "finalized" status, cementing its place as an immutable part of Ethereum.
       title: Secure Settlement on Ethereum
       description: Chapter 4 explains how to secure settlement on Ethereum
+    chapterDescriptionFullWidth: true
+    playlistOnBottom: false
   - type: link_list
     heading: Further reading
     listSize: lg

workspaces/cms-config/src/blocks.ts

@@ -692,6 +692,20 @@ export const blocks = [
     label: "Education video section",
     widget: "object",
     fields: [
+      {
+        label: "Chapter description full width",
+        name: "chapterDescriptionFullWidth",
+        widget: "boolean",
+        default: false,
+        required: false,
+      },
+      {
+        label: "Chapters playlist on bottom of video desktop",
+        name: "playlistOnBottom",
+        widget: "boolean",
+        default: true,
+        required: false,
+      },
       {
         crowdin: true,
         label: 'Chapter 1',

workspaces/cms-data/src/pages.ts

@@ -158,6 +158,8 @@ export interface VideoSectionBlock {
   readonly sequencer: ChapterInfo;
   readonly prover: ChapterInfo;
   readonly 'eth-settlement': ChapterInfo;
+  readonly chapterDescriptionFullWidth: boolean;
+  readonly playlistOnBottom: boolean;
 }
 
 export interface NewsletterBlock {

workspaces/website/src/blocks/VideoSectionBlock.tsx

@@ -2,7 +2,7 @@
  * Module dependencies
  */
 
-import { Box } from "@chakra-ui/react";
+import { Box, Show } from "@chakra-ui/react";
 import {
   VideoSectionBlock as VideoSectionProps,
   ChapterInfo
@@ -26,6 +26,8 @@ type ChapterType = Chapter & ChapterInfo;
  */
 
 export default function VideoSectionBlock(props: VideoSectionProps) {
+  const { playlistOnBottom, chapterDescriptionFullWidth } = props;
+
   const normalizedPlaylist = useMemo(() => {
     return playlist.map((chapter) => {
       const chapterInfo = props[chapter.id as keyof VideoSectionProps] as ChapterInfo;
@@ -55,23 +57,26 @@ export default function VideoSectionBlock(props: VideoSectionProps) {
         onChapterChange={(id) => 
           setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
         }
-        playlistOnBottom
+        playlistOnBottom={playlistOnBottom}
       />
 
-      <Box mt="md">
-        <CategoryTabs
-          activeItemId={currentChapter.id}
-          onTabClick={(id) => 
-            setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
-          }
-          items={normalizedPlaylist.map((p) => ({
-            id: p.id,
-            label: p.subtitle,
-          }))}
-        />
+      <Box marginTop={{ base: "32px", lg: !playlistOnBottom ? "64px" : "32px"  }}>
+        <Show above="lg">   
+          <CategoryTabs
+            activeItemId={currentChapter.id}
+            onTabClick={(id) => 
+              setCurrentChapter(normalizedPlaylist.find((p) => p.id === id) ?? normalizedPlaylist[0])
+            }
+            items={normalizedPlaylist.map((p) => ({
+              id: p.id,
+              label: p.subtitle,
+            }))}
+            playlistOnBottom={playlistOnBottom}
+          />
+        </Show>
 
         <Box
-          maxW="656px"
+          maxW={chapterDescriptionFullWidth ? "100%" : "656px"}
           marginInline="auto"
           marginTop={'32px'}
         >

workspaces/website/src/components/ArticleCard/ArticleCard.tsx

@@ -60,8 +60,8 @@ const Image = ({ url, imageAlt, type = "grid" }: ImageProps) => {
         src={isProd ? cloudflareImage : url}
         alt={imageAlt}
         width="full"
-        height={type === "featured" ? "100%" : { base: "16rem", md: "12rem", lg: "10rem" }}
-        objectFit="cover"
+        height={type === "featured" ? "100%" : { base: "16rem", lg: "10rem" }}
+        objectFit={type === "featured" ? "contain" : { base: "contain", lg: "cover" }}
         {...type === "grid" && { borderTopRadius: 8}}
       />
     </Box>

workspaces/website/src/components/CategoryTabs/CategoryTabs.tsx

@@ -49,9 +49,9 @@ export const CategoryTabs = ({
         width="100%"
         padding={'0 24px'}
       >
-        {items.map((item) => {
+        {items.map((item, index) => {
           return (
-            <Box>
+            <Box key={item.label + index}>
               <Button
                 as={item.link ? "a" : "button"}
                 href={item.link}

workspaces/website/src/components/VideoPlayer/player-core/VideoPlayerCore.tsx

@@ -26,6 +26,7 @@ import { isFinalChapter } from "./utils";
 import "./player-overrides.css";
 import { FinalChapterLeftCTA } from "./chapter-cta/FinalChapterLeftCTA";
 import { FinalChapterRightCTA } from "./chapter-cta/FinalChapterRightCTA";
+import { Box } from "@chakra-ui/react";
 
 export type PlayerRef = React.MutableRefObject<Player | null>;
 
@@ -231,7 +232,15 @@ export function VideoPlayerCore({
     totalDuration - currentTime < 5;
 
   return (
-    <div style={videoWrapperStyle} ref={videoWrapperRef}>
+    <Box
+      sx={{
+        ".video-js, .video-js .vjs-tech, .vjs-poster img": {
+          borderRadius: "8px",
+        },
+      }} 
+      style={videoWrapperStyle} 
+      ref={videoWrapperRef}
+    >
       <div style={videoPositionStyle} onClick={onPlayToggle}>
         <VideoJS
           options={videojsOptions}
@@ -308,6 +317,6 @@ export function VideoPlayerCore({
           onShare={onShareModalOpen}
         />
       )}
-    </div>
+    </Box>
   );
 }

workspaces/website/src/components/VideoPlayer/player-core/control-bar/CustomControl.tsx

@@ -109,6 +109,8 @@ export default function CustomControl(props: CustomControlProps) {
           bg: "rgba(0, 0, 0, .75)",
           backdropBlur: "sm",
           alignItems: "center",
+          borderBottomLeftRadius: "8px",
+          borderBottomRightRadius: "8px",
         }}
       >
         <PlayButton playingStatus={playingStatus} handlePlay={onPlayToggle} />

workspaces/website/src/components/VideoPlayer/player-website/BottomPlaylist.tsx

@@ -5,7 +5,6 @@
 
 import { Box, Image } from "@chakra-ui/react";
 import { Chapter } from "../constants";
-import { useOverflow } from "../hooks/useOverflow";
 import { useRef } from "react";
 
 /**
@@ -30,12 +29,10 @@ export default function BottomPlaylist({
   onChapterSelect
 }: BottomPlaylistProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const { hasOverflowX } = useOverflow(ref);
 
   return (
     <Box
       borderColor="border.divider"
-      borderRightWidth={hasOverflowX ? "1px" : "0px"}
       borderStyle="solid"
       display="flex"
       flexDirection={{ base: "row", lg: 'row' }}
@@ -46,8 +43,7 @@ export default function BottomPlaylist({
       }}
       marginTop={'24px'}
       maxH={{ base: "auto", lg: 'auto' }}
-      overflow={'auto'}
-      paddingRight={hasOverflowX ? "sm" : undefined}
+      overflowX="auto"
       ref={ref}
       sx={{
         overflow: "auto",

workspaces/website/src/components/VideoPlayer/player-website/ChaptersPlaylist.tsx

@@ -1,6 +1,13 @@
 import { Box, Image, useBreakpointValue } from "@chakra-ui/react";
 import { Chapter } from "../constants";
 import { useUpdateEffect } from "react-use";
+import styled from "@emotion/styled";
+
+const ChaptersPlaylistWrapper = styled(Box)`
+  ::-webkit-scrollbar {
+    width: thin;
+  }
+`;
 
 type ChaptersPlaylistProps = {
   height: number;
@@ -29,19 +36,25 @@ export default function ChaptersPlaylist({
   }, [currentChapter, isMobile]);
 
   return (
-    <Box
+    <ChaptersPlaylistWrapper
       sx={{
-        overflow: "scroll",
         maxHeight: height,
-        gap: "16px",
         cursor: "pointer",
       }}
       display={{ base: "flex", lg: "grid" }}
       maxH={{ base: "auto", lg: height }}
+      gap={{ base: "40px", lg: "16px" }}
+      paddingBottom={{ base: "12px", lg: "0px" }}
+      overflowY="auto"
+      overflowX="auto"
       flexWrap="nowrap"
     >
       {chapters.map((chapter) => {
         const isActive = chapter.id === currentChapter;
+        const textColor = isActive
+          ? "heading-navy-fg"
+          : "content.accent.disabled";
+
         return (
           <Box
             key={chapter.id}
@@ -52,62 +65,59 @@ export default function ChaptersPlaylist({
               gap: "16px",
               pointer: "cursor",
             }}
-            minW={{ base: "151px", lg: "auto" }}
+            maxW={{ base: "151px", md: "175px", lg: "100%" }}
             flexDir={{ base: "column", lg: "row" }}
             flexWrap="nowrap"
-            padding={{ base: "0px 0px 2rem", lg: "0px 1rem 0px" }}
+            padding={{ lg: "0px 4px 0px 0px" }}
             height="max-content"
           >
-            <Box
-              maxW={{ base: "151px", lg: "99px", xl: "151px" }}
-              height="min-content"
-            >
+            <Box minW={{ base: "151px", md: "175px" }}>
               <Image
                 src={chapter.thumbnail}
                 width={{
                   base: "151px",
-                  lg: "99px",
-                  xl: "151px",
+                  md: "175px"
                 }}
                 height="auto"
                 alt={chapter.title}
                 style={{
-                  // borderBottom: isActive ? "1px solid#EC796B" : "",
-                  borderRadius: "10px",
+                  borderRadius: "8px",
                 }}
                 aspectRatio="16/9"
+                objectFit="cover"
               />
             </Box>
-            <Box display="flex" flexDir="column" gap="4px">
+
+            <Box display="flex" width="100%" flexDir="column" gap="4px" color={textColor}>            
               <Box
-                as="h5"
-                fontSize="sm"
-                fontWeight="bold"
-                color={isActive ? "heading-navy-fg" : "fg-muted"}
+                fontSize="12px"
+                fontWeight={500}
                 lineHeight="normal"
+                display="flex"
+                justifyContent="space-between"
               >
+                {chapter.subtitle}
+                <Box
+                  display={{
+                    base: "block"
+                  }}
+                >
+                  {chapter.durationTime}
+                </Box>
+              </Box>
+
+              <Box as="h5" fontSize="15px" fontWeight="600" lineHeight="21px">
                 {chapter.title}
               </Box>
+
               <Box
                 as="p"
                 fontSize="12px"
-                lineHeight="15px"
-                sx={{
-                  maxW: "200px",
-                  color: isActive ? "heading-navy-fg" : "fg-muted",
-                }}
-              >
-                {chapter.description}
-              </Box>
-              <Box
-                as="p"
-                fontSize="xs"
-                lineHeight={1}
-                sx={{
-                  color: isActive ? "heading-navy-fg" : "fg-muted",
-                }}
+                lineHeight="normal"
                 flex={1}
-                display="flex"
+                display={{
+                  base: "none"
+                }}
                 alignItems="flex-end"
               >
                 {chapter.durationTime}
@@ -116,6 +126,6 @@ export default function ChaptersPlaylist({
           </Box>
         );
       })}
-    </Box>
+    </ChaptersPlaylistWrapper>
   );
 }

workspaces/website/src/components/VideoPlayer/player-website/VideoPlayerWebsite.tsx

@@ -86,7 +86,7 @@ export function VideoPlayerWebsite({
         display: "grid",
         position: "relative",
       }}
-      gap="2xl"
+      gap="32px"
       gridTemplateColumns={{
         base: "1fr",
         lg: playlistOnBottom ? "1fr" : "2fr 1fr",

workspaces/website/src/pages/(components)/roadmap/RoadmapLayout.tsx

@@ -1,4 +1,4 @@
-import { Box, Container } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import { HeroImage } from "@ui/HeroImage/HeroImage";
 import { PageLayout } from "@ui/Layout/PageLayout";
 import { ReactNode } from "react";
@@ -27,7 +27,7 @@ export default function RoadmapLayout({
     <>
       <PageLayout
         main={
-          <Container>
+          <Box>
             {roadmapSettings?.show_hero_banner && <HeroImage
               title={roadmapSettings?.hero_title}
               description={roadmapSettings?.hero_description}
@@ -68,7 +68,7 @@ export default function RoadmapLayout({
               </Box>
             </Flex> */}
             {children}
-          </Container>
+          </Box>
         }
       />
     </>

workspaces/website/src/pages/roadmap/(components)/RoadmapPostVersion.tsx

@@ -12,7 +12,7 @@ export default function RoadmapPostVersion({
       <Badge variant={roadmapVersion?.color}>
         {roadmapVersion?.version}
       </Badge>
-      <Badge variant={roadmapVersion?.color} sx={{textWrap: "wrap"}}>
+      <Badge variant={roadmapVersion?.color} sx={{ whiteSpace: "unset", textWrap: "wrap" }}>
         {roadmapVersion?.impact}
       </Badge>
     </Flex>