lots of style tweaks + deduplications

packages/styleguide/.storybook/components/Elements/Wrappers.tsx

@@ -0,0 +1,11 @@
+import { Background } from '@codecademy/gamut-styles';
+
+export const SourceWrapper: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  return (
+    <Background bg="white" borderRadius="md" px={24} py={8}>
+      {children}
+    </Background>
+  );
+};

packages/styleguide/.storybook/components/Headers/AboutHeader.tsx

@@ -2,6 +2,7 @@ import { FlexBox, Text } from '@codecademy/gamut';
 import * as React from 'react';
 import { ComponentHeaderProps } from './ComponentHeader';
 import { ComponentSource } from '../Elements/ComponentSource';
+import { SourceWrapper } from '../Elements/Wrappers';
 
 export type AboutHeaderProps = {
   title: string;
@@ -32,7 +33,11 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
       <Text variant="title-xs" mb={8}>
         {subtitle}
       </Text>
-      {source && <ComponentSource {...source} />}
+      {source && (
+        <SourceWrapper>
+          <ComponentSource {...source} />
+        </SourceWrapper>
+      )}
     </FlexBox>
   );
 };

packages/styleguide/.storybook/components/Headers/ComponentHeader.tsx

@@ -16,6 +16,7 @@ import {
   SourceAnchor,
   sourceAnchorProps,
 } from '../Elements/ComponentSource';
+import { SourceWrapper } from '../Elements/Wrappers';
 
 export type Source = { repo: string; githubLink?: string };
 
@@ -90,7 +91,7 @@ export const ComponentHeader: React.FC<ComponentHeaderProps> = ({
           {subtitle}
         </Text>
         {(design?.url || storyStatus !== 'static') && (
-          <Background bg="white" borderRadius="md" px={24} py={8}>
+          <SourceWrapper>
             <GridBox
               gap={16}
               fontWeight={700}
@@ -105,7 +106,7 @@ export const ComponentHeader: React.FC<ComponentHeaderProps> = ({
                 </SourceAnchor>
               )}
             </GridBox>
-          </Background>
+          </SourceWrapper>
         )}
 
         {design?.url && (