LessonHeader: add default Peeranha URL if

discussionUrl not provided.

Move styling out of theme and move it inline for easier editing.

Shrink down QuestionIcon size.

Author: briangershon

components/mdx/LessonHeader.tsx

@@ -1,45 +1,57 @@
-import { Box, useStyleConfig, Text, Link, HStack } from '@chakra-ui/react'
+import { Box, Text, Link, HStack } from '@chakra-ui/react'
 import NextLink from 'next/link'
 import { QuestionIcon } from '@chakra-ui/icons'
 
 interface LessonHeaderProps {
   title: string
-  discussionUrl: string
+  discussionUrl?: string
 }
 
+const DEFAULT_DISCUSSION_URL = 'https://developerdao.peeranha.io/'
+
 export function LessonHeader({ title, discussionUrl }: LessonHeaderProps) {
-  const headerStyle = useStyleConfig('LessonHeader')
+  let forumLink = discussionUrl || DEFAULT_DISCUSSION_URL
 
   return (
     <Box>
-      <Box __css={headerStyle}>
-        <Text>{title}</Text>
+      <Box>
+        <Text
+          mt="1.5em"
+          fontWeight="bold"
+          fontSize="1.875rem"
+          letterSpacing={-0.025}
+          color="yellow.300"
+        >
+          {title}
+        </Text>
       </Box>
-      <HStack
-        borderWidth="thin"
-        borderColor="gray"
-        padding="4"
-        marginY="8"
-        columnGap={2}
-        maxWidth="xl"
-      >
-        <Box>
-          <QuestionIcon w={12} h={12} />
-        </Box>
-        <Box>
-          Please visit our{' '}
-          <Link
-            as={NextLink}
-            href={discussionUrl}
-            passHref
-            isExternal
-            textDecoration="underline"
-          >
-            forum
-          </Link>{' '}
-          for questions or more discussion.
-        </Box>
-      </HStack>
+      {forumLink && (
+        <HStack
+          borderWidth="thin"
+          borderColor="gray"
+          padding={4}
+          marginY={8}
+          columnGap={2}
+          maxWidth="xl"
+        >
+          <Box>
+            <QuestionIcon w={8} h={8} />
+          </Box>
+          <Box>
+            If you get stuck or have questions please visit our{' '}
+            <Link
+              as={NextLink}
+              href={forumLink}
+              passHref
+              isExternal
+              textDecoration="underline"
+            >
+              forum
+            </Link>
+            .
+          </Box>
+        </HStack>
+      )}
     </Box>
   )
 }

theme.ts

@@ -133,15 +133,6 @@ const components = {
       },
     },
   },
-  LessonHeader: {
-    baseStyle: {
-      mt: '1.5em',
-      fontWeight: 'bold',
-      fontSize: '1.875rem',
-      letterSpacing: '-.025em',
-      color: 'yellow.300',
-    },
-  },
 }
 
 export const theme = extendTheme({