Fix footer icons

Author: cdedreuille

apps/frontpage/components/home/share/code.tsx

@@ -1,10 +1,10 @@
-import type { FC } from "react";
-import React from "react";
-import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
-import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
-import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import type { FC } from 'react';
+import React from 'react';
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
-SyntaxHighlighter.registerLanguage("jsx", jsx);
+SyntaxHighlighter.registerLanguage('jsx', jsx);
 
 interface CodeProps {
   fileName?: string;
@@ -14,20 +14,23 @@ interface CodeProps {
 export const Code: FC<CodeProps> = ({ fileName, code, ...props }) => {
   return (
     <div
-      className="w-full max-w-[800px] h-[550px] text-[10px] sm:h-[550px] sm:text-sm lg:text-md border border-zinc-600 rounded-lg overflow-hidden flex flex-col shadow-md"
+      className="w-full max-w-[800px] h-[550px] text-[10px] sm:h-[550px] sm:text-sm lg:text-md border border-slate-700 rounded-lg overflow-hidden flex flex-col shadow-md"
       {...props}
     >
-      <div className="flex-none relative bg-[#1d1f24] border-b border-zinc-600 px-[11px] py-3 flex gap-2">
+      <div className="flex-none relative bg-[#1d1f24] border-b border-slate-700 px-[11px] py-3 flex gap-2">
         <div className="w-[10px] h-[10px] rounded-[50%] bg-[#fc521f]" />
         <div className="w-[10px] h-[10px] rounded-[50%] bg-[#ffae00]" />
         <div className="w-[10px] h-[10px] rounded-[50%] bg-[#66bf3c]" />
-        {fileName ? <div className="text-zinc-400 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-mono text-ellipsis overflow-hidden text-xs">
+        {fileName ? (
+          <div className="text-zinc-400 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-mono text-ellipsis overflow-hidden text-xs">
             {fileName}
-          </div> : null}
+          </div>
+        ) : null}
       </div>
       <SyntaxHighlighter
         customStyle={{
-          background: "#232a35",
+          background: '#282C34',
+          minHeight: '100%',
           margin: 0,
           borderRadius: 0,
           padding: 20,

apps/frontpage/components/home/social-validation/social-validation.tsx

@@ -2,12 +2,7 @@ import React from 'react';
 import { cn } from '@repo/utils';
 import Link from 'next/link';
 import Image from 'next/image';
-import {
-  DiscordIcon,
-  GithubIcon,
-  TwitterIcon,
-  YoutubeIcon,
-} from '@storybook/icons';
+import { DiscordIcon, GithubIcon } from '@storybook/icons';
 import { Container } from '@repo/ui';
 import { Button } from '../../ui/button';
 import { AspectRatio } from '../../ui/aspect-ratio';
@@ -316,28 +311,51 @@ export function SocialValidation({
           </div>
         </div>
         <div className={cn(socialCard)}>
-          <TwitterIcon
-            aria-label="Discord"
-            className="text-[#4999E9]"
-            size={48}
-          />
+          <div className="w-12 h-12 flex items-center justify-center">
+            <svg
+              aria-label="Twitter"
+              fill="none"
+              height="40"
+              viewBox="0 0 14 14"
+              width="40"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11.02.446h2.137L8.49 5.816l5.51 7.28H9.67L6.298 8.683l-3.88 4.413H.282l5.004-5.735L0 .446h4.442l3.064 4.048L11.02.446zm-.759 11.357h1.18L3.796 1.655H2.502l7.759 10.148z"
+                fill="#fff"
+              />
+            </svg>
+          </div>
           <div className="text-white text-md">
             Get the latest news and updates from Storybook maintainers.
           </div>
           <Button asChild jumpOnHover rounded="full" variant="outlineHome">
-            <a href="https://twitter.com/storybookjs">Follow on Twitter</a>
+            <a href="https://twitter.com/storybookjs">Follow on X</a>
           </Button>
           <div>
             <div className="text-sm text-white">24,200+</div>
             <div className="text-sm text-zinc-500">Followers</div>
           </div>
         </div>
         <div className={cn(socialCard)}>
-          <YoutubeIcon
-            aria-label="Discord"
-            className="text-[#EA3223]"
-            size={48}
-          />
+          <div className="w-12 h-12 flex items-center justify-center">
+            <svg
+              fill="none"
+              height="49"
+              viewBox="0 0 48 49"
+              width="48"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M46.9969 12.9116C46.4449 10.84 44.8186 9.20874 42.7533 8.65511C39.0101 7.64893 24 7.64893 24 7.64893C24 7.64893 8.98999 7.64893 5.2467 8.65511C3.18153 9.20874 1.55497 10.84 1.00302 12.9116C0 16.6662 0 24.5 0 24.5C0 24.5 0 32.3336 1.00302 36.0886C1.55497 38.16 3.18153 39.7912 5.2467 40.3451C8.98999 41.3511 24 41.3511 24 41.3511C24 41.3511 39.0101 41.3511 42.7533 40.3451C44.8186 39.7912 46.4449 38.16 46.9969 36.0886C48 32.3336 48 24.5 48 24.5C48 24.5 48 16.6662 46.9969 12.9116Z"
+                fill="#ED1D24"
+              />
+              <path
+                d="M19.0909 31.6124L31.6364 24.5003L19.0909 17.3875V31.6124Z"
+                fill="white"
+              />
+            </svg>
+          </div>
           <div className="text-white text-md">
             Watch tutorials, feature previews, and interviews.
           </div>