feat: add option to use legacy twitter logo

supertokens · Sep 26, 2023 · 9cdd1df · 9cdd1df
1 parent de46665
commit 9cdd1df
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 33 deletions.
diff --git a/lib/build/recipe/thirdparty/providers/twitter.d.ts b/lib/build/recipe/thirdparty/providers/twitter.d.ts
diff --git a/lib/build/thirdparty-shared.js b/lib/build/thirdparty-shared.js
diff --git a/lib/ts/recipe/thirdparty/providers/twitter.tsx b/lib/ts/recipe/thirdparty/providers/twitter.tsx
@@ -21,10 +21,15 @@ import type { BuiltInProviderConfig } from "./types";
 
 import Provider from ".";
 
+export type TwitterProviderConfig = BuiltInProviderConfig & {
+    useLegacyTwitterLogo?: boolean;
+};
+
 /*
  * Class.
  */
 export default class Twitter extends Provider {
+    private useLegacyTwitterLogo = false;
     /*
      * Static Attributes.
      */
@@ -33,34 +38,55 @@ export default class Twitter extends Provider {
     /*
      * Constructor.
      */
-    constructor(config?: BuiltInProviderConfig) {
+    constructor(config?: TwitterProviderConfig) {
+        let id = "x";
+        let name = "X";
+        const _useLegacyTwitterLogo = Boolean(config?.useLegacyTwitterLogo);
+
+        if (_useLegacyTwitterLogo) {
+            id = "twitter";
+            name = "Twitter";
+        }
+
         super({
-            id: "twitter",
-            name: "Twitter",
+            id,
+            name,
             ...config,
         });
+
+        this.useLegacyTwitterLogo = _useLegacyTwitterLogo;
     }
 
     getLogo = (): JSX.Element => {
-        return (
-            <svg xmlns="http://www.w3.org/2000/svg" width="20.129" height="16.356" viewBox="0 0 20.129 16.356">
-                <g>
+        if (this.useLegacyTwitterLogo === true) {
+            return (
+                <svg xmlns="http://www.w3.org/2000/svg" width="20.129" height="16.356" viewBox="0 0 20.129 16.356">
                     <g>
-                        <path
-                            fill="#04ABEE"
-                            d="M45.232 35.964a8.242 8.242 0 0 1-2.372.649 4.141 4.141 0 0 0 1.816-2.284 8.268 8.268 0 0 1-2.623 1 4.133 4.133 0 0 0-7.037 3.771 11.724 11.724 0 0 1-8.516-4.317 4.133 4.133 0 0 0 1.282 5.517 4.1 4.1 0 0 1-1.87-.517v.052a4.132 4.132 0 0 0 3.313 4.049 4.147 4.147 0 0 1-1.865.071 4.134 4.134 0 0 0 3.858 2.868 8.338 8.338 0 0 1-6.114 1.71 11.745 11.745 0 0 0 18.08-9.894q0-.268-.012-.534a8.374 8.374 0 0 0 2.061-2.137z"
-                            transform="translate(34.799 -7.41) translate(2.201 4.266) translate(-62.103 -30.883)"
-                        />
+                        <g>
+                            <path
+                                fill="#04ABEE"
+                                d="M45.232 35.964a8.242 8.242 0 0 1-2.372.649 4.141 4.141 0 0 0 1.816-2.284 8.268 8.268 0 0 1-2.623 1 4.133 4.133 0 0 0-7.037 3.771 11.724 11.724 0 0 1-8.516-4.317 4.133 4.133 0 0 0 1.282 5.517 4.1 4.1 0 0 1-1.87-.517v.052a4.132 4.132 0 0 0 3.313 4.049 4.147 4.147 0 0 1-1.865.071 4.134 4.134 0 0 0 3.858 2.868 8.338 8.338 0 0 1-6.114 1.71 11.745 11.745 0 0 0 18.08-9.894q0-.268-.012-.534a8.374 8.374 0 0 0 2.061-2.137z"
+                                transform="translate(34.799 -7.41) translate(2.201 4.266) translate(-62.103 -30.883)"
+                            />
+                        </g>
                     </g>
-                </g>
+                </svg>
+            );
+        }
+        return (
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 1200 1227">
+                <path
+                    d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+                    fill="#000"
+                />
             </svg>
         );
     };
 
     /*
      * Static Methods
      */
-    static init(config?: BuiltInProviderConfig): Provider {
+    static init(config?: TwitterProviderConfig): Provider {
         if (Twitter.instance !== undefined) {
             console.warn("Twitter Provider was already initialized");
             return Twitter.instance;