Merge pull request supabase#16805 from Akshat-bhatia73/fix/Twitter-Logo

Icons now visible in light mode and new twitter logo throughout docs

apps/docs/components/AuthProviders.tsx

@@ -11,7 +11,7 @@ export default function AuthProviders({ type }: { type: string }) {
         {filterProviders.map((x) => (
           <Link href={`${x.href}`} key={x.name} passHref>
             <a className="col-span-6 lg:col-span-4 xl:col-span-3">
-              <IconPanel title={x.name} icon={x.logo} />
+              <IconPanel title={x.name} icon={x.logo} hasLightIcon={x.hasLightIcon} />
             </a>
           </Link>
         ))}

apps/docs/components/Navigation/Footer.tsx

@@ -88,14 +88,14 @@ const Footer = () => (
         <Button type="text" asChild>
           <a href="https://twitter.com/supabase" target="_blank" rel="noreferrer noopener">
             <svg
-              width="17"
-              height="17"
-              viewBox="0 0 17 17"
+              width="15"
+              height="15"
+              viewBox="0 0 24 24"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M5.52713 13.7223C10.5582 13.7223 13.3101 9.55365 13.3101 5.93898C13.3101 5.82032 13.3101 5.70232 13.3021 5.58565C13.8375 5.198 14.2996 4.71806 14.6667 4.16832C14.1675 4.38965 13.6378 4.53483 13.0955 4.59898C13.6665 4.25702 14.0939 3.71922 14.2981 3.08565C13.7612 3.40424 13.1739 3.6288 12.5615 3.74965C12.1491 3.31083 11.6035 3.02021 11.0093 2.92279C10.4151 2.82537 9.80528 2.92658 9.27438 3.21076C8.74347 3.49494 8.32106 3.94623 8.07255 4.49476C7.82403 5.04328 7.76328 5.65844 7.89969 6.24498C6.81213 6.19048 5.74819 5.90787 4.77693 5.4155C3.80567 4.92313 2.9488 4.232 2.26194 3.38698C1.91217 3.98912 1.80502 4.70193 1.96231 5.38029C2.1196 6.05866 2.52951 6.65157 3.10857 7.03832C2.67343 7.02572 2.2477 6.90865 1.86729 6.69698V6.73165C1.86755 7.36318 2.08621 7.97519 2.4862 8.46389C2.88618 8.95259 3.44287 9.28791 4.06186 9.41298C3.65909 9.52279 3.2365 9.53876 2.82658 9.45965C3.00135 10.0033 3.34168 10.4787 3.79996 10.8194C4.25824 11.1601 4.81154 11.349 5.38247 11.3597C4.81524 11.8054 4.16572 12.1349 3.47104 12.3293C2.77636 12.5238 2.05017 12.5794 1.33398 12.493C2.585 13.2959 4.04066 13.7217 5.52713 13.7197"
+                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
                 fill="var(--colors-scale9)"
               />
             </svg>

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -341,12 +341,14 @@ export const SocialLoginItems = [
     name: 'Twitter',
     icon: '/docs/img/icons/twitter-icon',
     url: '/guides/auth/social-login/auth-twitter',
+    hasLightIcon: true,
   },
   {
     name: 'GitHub',
     icon: '/docs/img/icons/github-icon',
     url: '/guides/auth/social-login/auth-github',
     isDarkMode: true,
+    hasLightIcon: true,
   },
   {
     name: 'Gitlab',
@@ -435,6 +437,7 @@ export const PhoneLoginsItems = [
     linkDescription:
       'Vonage is a communication platform as a service (CPaaS) provider for consumers and businesses.',
     isDarkMode: true,
+    hasLightIcon: true,
   },
 ]
 

apps/docs/data/authProviders.ts

@@ -68,6 +68,7 @@ const authProviders = [
     platform: true,
     selfHosted: true,
     authType: 'social',
+    hasLightIcon: true,
   },
   {
     name: 'GitLab',
@@ -168,6 +169,7 @@ const authProviders = [
     platform: true,
     selfHosted: true,
     authType: 'social',
+    hasLightIcon: true,
   },
   {
     name: 'Twitch',
@@ -208,6 +210,7 @@ const authProviders = [
     platform: true,
     selfHosted: true,
     authType: 'phone',
+    hasLightIcon: true,
   },
 ]
 

apps/docs/pages/guides/auth/phone-login.mdx

@@ -33,6 +33,7 @@ Supabase supports Phone Login with several communications platforms. Follow the
           span="col-span-6"
           icon={item.icon}
           isDarkMode={item.isDarkMode}
+          hasLightIcon={item.hasLightIcon}
         >
           {item.linkDescription}
         </IconPanel>

apps/docs/pages/guides/auth/social-login.mdx

@@ -35,6 +35,7 @@ Supabase supports a suite of social providers. Follow these guides to configure
           span="col-span-6"
           icon={item.icon}
           isDarkMode={item.isDarkMode}
+          hasLightIcon={item.hasLightIcon}
         >
           {item.description}
         </IconPanel>

apps/docs/pages/guides/getting-started.mdx

@@ -43,7 +43,13 @@ export const meta = {
     return (
       <Link href={`${item.href}`} key={item.title} passHref>
         <a className={'col-span-4'}>
-          <GlassPanel title={item.title} span="col-span-6" background={false} icon={item.icon}>
+          <GlassPanel
+            title={item.title}
+            span="col-span-6"
+            background={false}
+            icon={item.icon}
+            hasLightIcon={item.hasLightIcon}
+          >
             {item.description}
           </GlassPanel>
         </a>
@@ -106,6 +112,7 @@ export const useCases = [
     href: '/docs/guides/ai#examples',
     description: `Build AI-enabled applications using our Vector toolkit.`,
     icon: '/docs/img/icons/openai_logo',
+    hasLightIcon: true,
   },
   {
     title: 'Subscription Payments (SaaS)',