Fix other small styling code issues

Author: pimterry

src/app/download/[slug]/page.tsx

@@ -80,7 +80,7 @@ export default async function DownloadPage({ params }: DownloadPageProps) {
                     target="_self"
                     href={`https://github.com/httptoolkit/httptoolkit-desktop/releases/download/${currentDownloadData?.releasePath}`}
                   >
-                    <Text fontSize="l" as="span" color="cinnarbarRed" fontWeight="medium">
+                    <Text fontSize="l" as="span" color="cinnabarRed" fontWeight="medium">
                       Click here
                     </Text>
                   </Link>.

src/app/will-it-cors/components/steps/components/index.tsx

@@ -545,15 +545,15 @@ export const ServerAllowsCorsRequest = ({
       </Text>
       {uselessSetCookie && (
         <Text fontSize="l">
-          <Text fontSize="l" color="cinnarbarRed" as="span" fontStyle="italic">
+          <Text fontSize="l" color="cinnabarRed" as="span" fontStyle="italic">
             This response sets a cookie that won&apos;t be used
           </Text>
           . Set-Cookie headers in responses are ignored, unless the initial request includes browser credentials.
         </Text>
       )}
       {!varyOnOrigin && someHeaderValues(responseHeaders, (v: string) => v.toLowerCase() === sourceOrigin) && (
         <Text fontSize="l">
-          <Text fontSize="l" color="cinnarbarRed" as="span" fontStyle="italic">
+          <Text fontSize="l" color="cinnabarRed" as="span" fontStyle="italic">
             This result may be cached incorrectly
           </Text>
           . Your response headers reference the page origin from the request, but they don&apos;t include `Origin` in a{' '}

src/components/layout/documentation/documentation.styles.ts

@@ -75,7 +75,6 @@ export const StyledDocumentationLayoutMobileHeading = styled(Heading)`
 
 export const StyledDocumentationLayoutDesktopHeading = styled.h1`
   font-size: ${fontSizes.heading.desktop.l};
-  color: ${textGradientMixin};
   ${textGradientMixin};
   line-height: 1.2;
   margin-bottom: 24px;

src/components/layout/footer/components/footer-column-block.tsx

@@ -14,7 +14,7 @@ export const FooterColumnBlock = ({ column }: { column: FooterColumn }) => {
       $displayOnMobile={displayOnMobile}
       $displayOnDesktop={displayOnDesktop}
     >
-      <Text as="label" fontSize="m" color="cinnarbarRed" fontWeight="bold">
+      <Text as="label" fontSize="m" color="cinnabarRed" fontWeight="bold">
         {column.title}
       </Text>
       <StyledMenuItems role="list" $displayOnMobile={displayOnMobile} $displayOnDesktop={displayOnDesktop}>

src/components/modules/input/index.tsx

@@ -23,7 +23,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           </StyledInputBorder>
         </Stack>
         {errorMessage && (
-          <Text fontSize="s" color="cinnarbarRed">
+          <Text fontSize="s" color="cinnabarRed">
             {errorMessage}
           </Text>
         )}

src/components/sections/cta/index.tsx

@@ -50,7 +50,7 @@ export const CTA = ({
           <SquareIcon $size={isHero ? 'xLarge' : 'medium'} $variant={isHero ? 'primary' : 'secondary'} icon={icon} />
         )}
         {subHeading && (
-          <Text as="label" color="cinnarbarRed" fontSize={labelSize} fontWeight="bold">
+          <Text as="label" color="cinnabarRed" fontSize={labelSize} fontWeight="bold">
             {subHeading?.text} {SubHeadingIcon && <SubHeadingIcon weight="fill" />}
           </Text>
         )}

src/styles/index.ts

@@ -26,7 +26,7 @@ export const textOrangeGradientMixin = css`
 export const textColors = {
   lightGrey: 'var(--text-light-grey)',
   darkGrey: 'var(--text-dark-grey)',
-  cinnarbarRed: 'var(--text-cinnabar-red)',
+  cinnabarRed: 'var(--text-cinnabar-red)',
   white: 'var(--text-white)',
   alwaysWhite: 'var(--text-always-white)',
   alwaysLightGrey: 'var(--text-always-light-grey)',