Improve Twitter theme

.changeset/brave-geese-clap.md

@@ -0,0 +1,5 @@
+---
+'react-tweet': patch
+---
+
+Updated Twitter theme

packages/react-tweet/src/api/types/user.ts

@@ -2,8 +2,9 @@ export interface TweetUser {
   id_str: string
   name: string
   profile_image_url_https: string
+  profile_image_shape: 'Circle' | 'Square'
   screen_name: string
   verified: boolean
-  verified_type: string
+  verified_type?: 'Business' | 'Government'
   is_blue_verified: boolean
 }

packages/react-tweet/src/twitter-theme/components.tsx

@@ -1,4 +1,5 @@
 export * from './types.js'
+export * from './icons/index.js'
 export * from './embedded-tweet.js'
 export * from './tweet-actions-copy.js'
 export * from './tweet-actions.js'

packages/react-tweet/src/twitter-theme/icons/icons.module.css

@@ -0,0 +1,9 @@
+.verified {
+  margin-left: 0.125rem;
+  max-width: 20px;
+  max-height: 20px;
+  height: 1.25em;
+  fill: currentColor;
+  user-select: none;
+  vertical-align: text-bottom;
+}

packages/react-tweet/src/twitter-theme/icons/index.ts

@@ -0,0 +1,3 @@
+export * from './verified.js'
+export * from './verified-business.js'
+export * from './verified-government.js'

packages/react-tweet/src/twitter-theme/icons/verified-business.tsx

@@ -0,0 +1,53 @@
+import s from './icons.module.css'
+
+export const VerifiedBusiness = () => (
+  <svg
+    viewBox="0 0 22 22"
+    aria-label="Verified account"
+    role="img"
+    className={s.verified}
+  >
+    <g>
+      <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id="0-a"
+        x1="4.411"
+        x2="18.083"
+        y1="2.495"
+        y2="21.508"
+      >
+        <stop offset="0" stopColor="#f4e72a"></stop>
+        <stop offset=".539" stopColor="#cd8105"></stop>
+        <stop offset=".68" stopColor="#cb7b00"></stop>
+        <stop offset="1" stopColor="#f4ec26"></stop>
+        <stop offset="1" stopColor="#f4e72a"></stop>
+      </linearGradient>
+      <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id="0-b"
+        x1="5.355"
+        x2="16.361"
+        y1="3.395"
+        y2="19.133"
+      >
+        <stop offset="0" stopColor="#f9e87f"></stop>
+        <stop offset=".406" stopColor="#e2b719"></stop>
+        <stop offset=".989" stopColor="#e2b719"></stop>
+      </linearGradient>
+      <g clipRule="evenodd" fillRule="evenodd">
+        <path
+          d="M13.324 3.848L11 1.6 8.676 3.848l-3.201-.453-.559 3.184L2.06 8.095 3.48 11l-1.42 2.904 2.856 1.516.559 3.184 3.201-.452L11 20.4l2.324-2.248 3.201.452.559-3.184 2.856-1.516L18.52 11l1.42-2.905-2.856-1.516-.559-3.184zm-7.09 7.575l3.428 3.428 5.683-6.206-1.347-1.247-4.4 4.795-2.072-2.072z"
+          fill="url(#0-a)"
+        ></path>
+        <path
+          d="M13.101 4.533L11 2.5 8.899 4.533l-2.895-.41-.505 2.88-2.583 1.37L4.2 11l-1.284 2.627 2.583 1.37.505 2.88 2.895-.41L11 19.5l2.101-2.033 2.895.41.505-2.88 2.583-1.37L17.8 11l1.284-2.627-2.583-1.37-.505-2.88zm-6.868 6.89l3.429 3.428 5.683-6.206-1.347-1.247-4.4 4.795-2.072-2.072z"
+          fill="url(#0-b)"
+        ></path>
+        <path
+          d="M6.233 11.423l3.429 3.428 5.65-6.17.038-.033-.005 1.398-5.683 6.206-3.429-3.429-.003-1.405.005.003z"
+          fill="#d18800"
+        ></path>
+      </g>
+    </g>
+  </svg>
+)

packages/react-tweet/src/twitter-theme/icons/verified-government.tsx

@@ -0,0 +1,18 @@
+import s from './icons.module.css'
+
+export const VerifiedGovernment = () => (
+  <svg
+    viewBox="0 0 22 22"
+    aria-label="Verified account"
+    role="img"
+    className={s.verified}
+  >
+    <g>
+      <path
+        clipRule="evenodd"
+        d="M12.05 2.056c-.568-.608-1.532-.608-2.1 0l-1.393 1.49c-.284.303-.685.47-1.1.455L5.42 3.932c-.832-.028-1.514.654-1.486 1.486l.069 2.039c.014.415-.152.816-.456 1.1l-1.49 1.392c-.608.568-.608 1.533 0 2.101l1.49 1.393c.304.284.47.684.456 1.1l-.07 2.038c-.027.832.655 1.514 1.487 1.486l2.038-.069c.415-.014.816.152 1.1.455l1.392 1.49c.569.609 1.533.609 2.102 0l1.393-1.49c.283-.303.684-.47 1.099-.455l2.038.069c.832.028 1.515-.654 1.486-1.486L18 14.542c-.015-.415.152-.815.455-1.099l1.49-1.393c.608-.568.608-1.533 0-2.101l-1.49-1.393c-.303-.283-.47-.684-.455-1.1l.068-2.038c.029-.832-.654-1.514-1.486-1.486l-2.038.07c-.415.013-.816-.153-1.1-.456zm-5.817 9.367l3.429 3.428 5.683-6.206-1.347-1.247-4.4 4.795-2.072-2.072z"
+        fillRule="evenodd"
+      ></path>
+    </g>
+  </svg>
+)

packages/react-tweet/src/twitter-theme/icons/verified.tsx

@@ -0,0 +1,14 @@
+import s from './icons.module.css'
+
+export const Verified = () => (
+  <svg
+    viewBox="0 0 24 24"
+    aria-label="Verified account"
+    role="img"
+    className={s.verified}
+  >
+    <g>
+      <path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z"></path>
+    </g>
+  </svg>
+)

packages/react-tweet/src/twitter-theme/theme.css

@@ -53,6 +53,7 @@
   --tweet-bg-color: #fff;
   --tweet-bg-color-hover: rgb(247, 249, 249);
   --tweet-color-blue-primary: rgb(29, 155, 240);
+  --tweet-color-blue-primary-hover: rgb(26, 140, 216);
   --tweet-color-blue-secondary: rgb(0, 111, 214);
   --tweet-color-blue-secondary-hover: rgba(0, 111, 214, 0.1);
   --tweet-color-red-primary: rgb(249, 24, 128);
@@ -80,6 +81,7 @@
   --tweet-bg-color: rgb(21, 32, 43);
   --tweet-bg-color-hover: rgb(30, 39, 50);
   --tweet-color-blue-primary: rgb(29, 155, 240);
+  --tweet-color-blue-primary-hover: rgb(26, 140, 216);
   --tweet-color-blue-secondary: rgb(107, 201, 251);
   --tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1);
   --tweet-color-red-primary: rgb(249, 24, 128);
@@ -108,6 +110,7 @@
     --tweet-bg-color: rgb(21, 32, 43);
     --tweet-bg-color-hover: rgb(30, 39, 50);
     --tweet-color-blue-primary: rgb(29, 155, 240);
+    --tweet-color-blue-primary-hover: rgb(26, 140, 216);
     --tweet-color-blue-secondary: rgb(107, 201, 251);
     --tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1);
     --tweet-color-red-primary: rgb(249, 24, 128);

packages/react-tweet/src/twitter-theme/tweet-header.module.css

@@ -20,6 +20,9 @@
   overflow: hidden;
   border-radius: 9999px;
 }
+.avatarSquare {
+  border-radius: 4px;
+}
 .avatarShadow {
   height: 100%;
   width: 100%;
@@ -56,21 +59,16 @@
   overflow: hidden;
   white-space: nowrap;
 }
-.authorVerifiedIcon {
-  margin-left: 0.125rem;
-  max-width: 20px;
-  max-height: 20px;
-  height: 1.25em;
-  fill: currentColor;
-  user-select: none;
-  vertical-align: text-bottom;
-}
 .verifiedOld {
   color: var(--tweet-verified-old-color);
 }
 .verifiedBlue {
   color: var(--tweet-verified-blue-color);
 }
+.verifiedGovernment {
+  /* color: var(--tweet-verified-government-color); */
+  color: rgb(130, 154, 171);
+}
 .authorMeta {
   display: flex;
 }

packages/react-tweet/src/twitter-theme/tweet-header.tsx

@@ -2,6 +2,11 @@ import clsx from 'clsx'
 import type { EnrichedTweet } from '../utils.js'
 import type { TwitterComponents } from './types.js'
 import { AvatarImg } from './avatar-img.js'
+import {
+  Verified,
+  VerifiedGovernment,
+  VerifiedBusiness,
+} from './icons/index.js'
 import s from './tweet-header.module.css'
 
 type Props = {
@@ -11,6 +16,26 @@ type Props = {
 
 export const TweetHeader = ({ tweet, components }: Props) => {
   const Img = components?.AvatarImg ?? AvatarImg
+  const { user } = tweet
+  const verified = user.verified || user.is_blue_verified || user.verified_type
+  let icon = <Verified />
+  let iconClassName: string | null = s.verifiedBlue
+
+  if (verified) {
+    if (!user.is_blue_verified) {
+      iconClassName = s.verifiedOld
+    }
+    switch (user.verified_type) {
+      case 'Government':
+        icon = <VerifiedGovernment />
+        iconClassName = s.verifiedGovernment
+        break
+      case 'Business':
+        icon = <VerifiedBusiness />
+        iconClassName = null
+        break
+    }
+  }
 
   return (
     <div className={s.header}>
@@ -20,10 +45,15 @@ export const TweetHeader = ({ tweet, components }: Props) => {
         target="_blank"
         rel="noopener noreferrer"
       >
-        <div className={s.avatarOverflow}>
+        <div
+          className={clsx(
+            s.avatarOverflow,
+            user.profile_image_shape === 'Square' && s.avatarSquare
+          )}
+        >
           <Img
-            src={tweet.user.profile_image_url_https}
-            alt={tweet.user.name}
+            src={user.profile_image_url_https}
+            alt={user.name}
             width={48}
             height={48}
           />
@@ -40,28 +70,11 @@ export const TweetHeader = ({ tweet, components }: Props) => {
           rel="noopener noreferrer"
         >
           <div className={s.authorLinkText}>
-            <span title={tweet.user.name}>{tweet.user.name}</span>
+            <span title={user.name}>{user.name}</span>
           </div>
-          {tweet.user.verified ||
-            (tweet.user.is_blue_verified && (
-              <div
-                className={clsx(
-                  s.authorVerified,
-                  tweet.user.is_blue_verified ? s.verifiedBlue : s.verifiedOld
-                )}
-              >
-                <svg
-                  viewBox="0 0 24 24"
-                  aria-label="Verified account"
-                  role="img"
-                  className={s.authorVerifiedIcon}
-                >
-                  <g>
-                    <path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.71 4.2L6.8 12.46l1.41-1.42 2.26 2.26 4.8-5.23 1.47 1.36-6.2 6.77z"></path>
-                  </g>
-                </svg>
-              </div>
-            ))}
+          {verified && (
+            <div className={clsx(s.authorVerified, iconClassName)}>{icon}</div>
+          )}
         </a>
         <div className={s.authorMeta}>
           <a
@@ -70,14 +83,12 @@ export const TweetHeader = ({ tweet, components }: Props) => {
             target="_blank"
             rel="noopener noreferrer"
           >
-            <span title={`@${tweet.user.screen_name}`}>
-              @{tweet.user.screen_name}
-            </span>
+            <span title={`@${user.screen_name}`}>@{user.screen_name}</span>
           </a>
           <div className={s.authorFollow}>
             <span className={s.separator}>·</span>
             <a
-              href={tweet.user.follow_url}
+              href={user.follow_url}
               className={s.follow}
               target="_blank"
               rel="noopener noreferrer"

packages/react-tweet/src/twitter-theme/tweet-media-video.module.css

@@ -1,3 +1,19 @@
+.anchor {
+  display: flex;
+  align-items: center;
+  color: white;
+  padding: 0 1rem;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  font-weight: 700;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  user-select: none;
+  outline-style: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .videoButton {
   position: relative;
   height: 67px;
@@ -14,7 +30,7 @@
 }
 .videoButton:hover,
 .videoButton:focus-visible {
-  background-color: rgb(26, 140, 216);
+  background-color: var(--tweet-color-blue-primary-hover);
 }
 .videoButtonIcon {
   margin-left: 3px;
@@ -25,3 +41,30 @@
   fill: currentColor;
   user-select: none;
 }
+.watchOnTwitter {
+  position: absolute;
+  top: 12px;
+  right: 8px;
+}
+.watchOnTwitter > a {
+  min-width: 2rem;
+  min-height: 2rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  backdrop-filter: blur(4px);
+  background-color: rgba(15, 20, 25, 0.75);
+}
+.watchOnTwitter > a:hover {
+  background-color: rgba(39, 44, 48, 0.75);
+}
+.viewReplies {
+  position: relative;
+  min-height: 2rem;
+  background-color: var(--tweet-color-blue-primary);
+  border-color: var(--tweet-color-blue-primary);
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+}
+.viewReplies:hover {
+  background-color: var(--tweet-color-blue-primary-hover);
+}