Updated Twitter/Facebook naming to X/Meta

Only did this for user-facing naming and icons. OAuth routing still has to be twitter/facebook since grant still uses those, as do the services' routing themselves. Decided not to change ENV_VARs and database naming to avoid bugs.
EtherealEngine · Apr 16, 2024 · a63484b · a63484b
1 parent d704bac
commit a63484b
Show file tree

Hide file tree

Showing 16 changed files with 168 additions and 42 deletions.
diff --git a/packages/client-core/i18n/en/admin.json b/packages/client-core/i18n/en/admin.json
@@ -364,11 +364,11 @@
       "host": "Host",
       "protocol": "Protocol",
       "discord": "Discord",
-      "facebook": "Facebook",
+      "facebook": "Meta",
       "google": "Google",
       "github": "Github",
       "linkedIn": "LinkedIn",
-      "twitter": "Twitter",
+      "twitter": "X",
       "key": "Key",
       "callback": "Callback",
       "appTitle": "App Title",
@@ -626,7 +626,7 @@
       "userSearch": "user by id, name or account identifier",
       "linkedAccounts": "Linked Accounts",
       "discord": "Discord",
-      "facebook": "Facebook",
+      "facebook": "Meta",
       "google": "Google",
       "github": "Github",
       "linkedIn": "LinkedIn",

diff --git a/packages/client-core/i18n/en/social.json b/packages/client-core/i18n/en/social.json
@@ -65,7 +65,7 @@
     "ph-tags": "Tags",
     "ph-link": "Link",
     "ph-aboutYou": "More about you",
-    "ph-twitter": "twitter",
+    "ph-twitter": "x",
     "ph-instagram": "instagram",
     "ph-tiktok": "tiktok",
     "sign-out": "Sign-Out"
@@ -191,10 +191,10 @@
   },
   "registration": {
     "ph-phoneEmail": "Use phone / email",
-    "facebook": "Continue with Facebook",
+    "facebook": "Continue with Meta",
     "google": "Continue with Google",
     "linkedin": "Continue with Linkedin",
-    "twitter": "Continue with Twitter",
+    "twitter": "Continue with X",
     "gitHub": "Continue with GitHub",
     "connect": "Connect your email or phone number",
     "logIn": "Log in",

diff --git a/packages/client-core/i18n/en/user.json b/packages/client-core/i18n/en/user.json
@@ -38,9 +38,9 @@
     "social": {
       "gitHub": "Login with GitHub",
       "google": "Login with Google",
-      "facebook": "Login with Facebook",
+      "facebook": "Login with Meta",
       "linkedin": "Login with Linkedin",
-      "twitter": "Login with Twitter"
+      "twitter": "Login with X"
     },
     "register": {
       "header": "Sign Up",

diff --git a/packages/client-core/package.json b/packages/client-core/package.json
@@ -39,7 +39,7 @@
     "@hookstate/core": "4.0.0-rc21",
     "@hookstate/localstored": "4.0.0-rc21",
     "@iconify/react": "4.1.0",
-    "@mui/icons-material": "5.11.11",
+    "@mui/icons-material": "5.15.15",
     "@mui/lab": "5.0.0-alpha.94",
     "@mui/material": "5.11.13",
     "@mui/x-date-pickers": "6.9.2",

diff --git a/packages/client-core/src/admin/components/Users/UserDrawer.tsx b/packages/client-core/src/admin/components/Users/UserDrawer.tsx
@@ -56,6 +56,8 @@ import { useFind, useMutation } from '@etherealengine/spatial/src/common/functio
 import { DiscordIcon } from '../../../common/components/Icons/DiscordIcon'
 import { GoogleIcon } from '../../../common/components/Icons/GoogleIcon'
 import { LinkedInIcon } from '../../../common/components/Icons/LinkedInIcon'
+import { MetaIcon } from '../../../common/components/Icons/MetaIcon'
+import { XIcon } from '../../../common/components/Icons/XIcon'
 import { NotificationService } from '../../../common/services/NotificationService'
 import { userHasAccess } from '../../../user/userHasAccess'
 import DrawerView from '../../common/DrawerView'
@@ -130,7 +132,7 @@ export const LinkedProviders = (props: { selectedUser?: UserType }) => {
           {facebookIp && (
             <Grid item md={6} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
               <Tooltip title={t('admin:components.user.facebook')} arrow>
-                <Icon type="Facebook" width="20px" height="20px" viewBox="0 0 40 40" />
+                <MetaIcon width="20px" height="20px" viewBox="0 0 40 40" />
               </Tooltip>
               <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
                 {facebookIp.accountIdentifier!}
@@ -140,7 +142,7 @@ export const LinkedProviders = (props: { selectedUser?: UserType }) => {
           {twitterIp && (
             <Grid item md={6} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
               <Tooltip title={t('admin:components.user.twitter')} arrow>
-                <Icon type="Twitter" width="20px" height="20px" viewBox="0 0 40 40" />
+                <XIcon width="20px" height="20px" viewBox="0 0 40 40" />
               </Tooltip>
               <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
                 {twitterIp.accountIdentifier!}

diff --git a/packages/client-core/src/admin/components/Users/UserTable.tsx b/packages/client-core/src/admin/components/Users/UserTable.tsx
@@ -46,7 +46,7 @@ import { DiscordIcon } from '../../../common/components/Icons/DiscordIcon'
 import { FacebookIcon } from '../../../common/components/Icons/FacebookIcon'
 import { GoogleIcon } from '../../../common/components/Icons/GoogleIcon'
 import { LinkedInIcon } from '../../../common/components/Icons/LinkedInIcon'
-import { TwitterIcon } from '../../../common/components/Icons/TwitterIcon'
+import { XIcon } from '../../../common/components/Icons/XIcon'
 import { AuthState } from '../../../user/services/AuthService'
 import TableComponent from '../../common/Table'
 import { UserData, UserProps, userColumns } from '../../common/variables/user'
@@ -126,7 +126,7 @@ const UserTable = ({ className, search, skipGuests }: UserProps & { skipGuests:
           )}
           {twitterIp && (
             <Tooltip title={twitterIp.accountIdentifier!} arrow>
-              <TwitterIcon width="20px" height="20px" viewBox="0 0 40 40" />
+              <XIcon width="20px" height="20px" viewBox="0 0 40 40" />
             </Tooltip>
           )}
           {linkedinIp && (

diff --git a/packages/client-core/src/admin2/components/settings/tabs/authentication.tsx b/packages/client-core/src/admin2/components/settings/tabs/authentication.tsx
@@ -202,18 +202,22 @@ const AuthenticationTab = forwardRef(({ open }: { open: boolean }, ref: React.Mu
       </Text>
 
       <div className="grid grid-cols-6 gap-x-6 gap-y-4">
-        {Object.keys(state.value).map((strategyName, i) => (
-          <Toggle
-            key={i}
-            className="col-span-1 capitalize"
-            containerClassName="justify-start"
-            labelClassName="capitalize"
-            label={strategyName}
-            value={state[strategyName].value}
-            disabled={strategyName === 'jwt'}
-            onChange={(value) => onSwitchHandle(state[strategyName], value)}
-          />
-        ))}
+        {Object.keys(state.value).map((strategyName, i) => {
+          const displayStrategyName =
+            strategyName === 'twitter' ? 'x' : strategyName === 'facebook' ? 'meta' : strategyName
+          return (
+            <Toggle
+              key={i}
+              className="col-span-1 capitalize"
+              containerClassName="justify-start"
+              labelClassName="capitalize"
+              label={displayStrategyName}
+              value={state[strategyName].value}
+              disabled={strategyName === 'jwt'}
+              onChange={(value) => onSwitchHandle(state[strategyName], value)}
+            />
+          )
+        })}
       </div>
 
       <Text component="h3" fontSize="xl" fontWeight="semibold" className="my-4 w-full">

diff --git a/packages/client-core/src/admin2/components/user/AccountIdentifiers.tsx b/packages/client-core/src/admin2/components/user/AccountIdentifiers.tsx
@@ -29,11 +29,12 @@ import React from 'react'
 import { MdEmail } from 'react-icons/md'
 import {
   RiDiscordFill,
-  RiFacebookBoxFill,
   RiGithubFill,
   RiGoogleFill,
+  RiLinkedinFill,
   RiMessage2Line,
-  RiTwitterFill
+  RiMetaFill,
+  RiTwitterXFill
 } from 'react-icons/ri'
 
 export default function AccountIdentifiers({ user }: { user: UserType }) {
@@ -60,17 +61,17 @@ export default function AccountIdentifiers({ user }: { user: UserType }) {
       ) : null}
       {facebookIp ? (
         <ToolTip title={facebookIp.accountIdentifier!}>
-          <RiFacebookBoxFill className="h-6 w-6" />
+          <RiMetaFill className="h-6 w-6" />
         </ToolTip>
       ) : null}
       {twitterIp ? (
         <ToolTip title={twitterIp.accountIdentifier!}>
-          <RiTwitterFill className="h-6 w-6" />
+          <RiTwitterXFill className="h-6 w-6" />
         </ToolTip>
       ) : null}
       {linkedinIp ? (
         <ToolTip title={linkedinIp.accountIdentifier!}>
-          <RiTwitterFill className="h-6 w-6" />
+          <RiLinkedinFill className="h-6 w-6" />
         </ToolTip>
       ) : null}
       {githubIp ? (

diff --git a/packages/client-core/src/common/components/Icons/MetaIcon.tsx b/packages/client-core/src/common/components/Icons/MetaIcon.tsx
@@ -0,0 +1,79 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const MetaIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="40px" height="40px">
+        <path
+          fill="#0081fb"
+          d="M47,29.36l-2.193,1.663L42.62,29.5c0-0.16,0-0.33-0.01-0.5c0-0.16,0-0.33-0.01-0.5	c-0.14-3.94-1.14-8.16-3.14-11.25c-1.54-2.37-3.51-3.5-5.71-3.5c-2.31,0-4.19,1.38-6.27,4.38c-0.06,0.09-0.13,0.18-0.19,0.28	c-0.04,0.05-0.07,0.1-0.11,0.16c-0.1,0.15-0.2,0.3-0.3,0.46c-0.9,1.4-1.84,3.03-2.86,4.83c-0.09,0.17-0.19,0.34-0.28,0.51	c-0.03,0.04-0.06,0.09-0.08,0.13l-0.21,0.37l-1.24,2.19c-2.91,5.15-3.65,6.33-5.1,8.26C14.56,38.71,12.38,40,9.51,40	c-3.4,0-5.56-1.47-6.89-3.69C1.53,34.51,1,32.14,1,29.44l4.97,0.17c0,1.76,0.38,3.1,0.89,3.92C7.52,34.59,8.49,35,9.5,35	c1.29,0,2.49-0.27,4.77-3.43c1.83-2.53,3.99-6.07,5.44-8.3l1.37-2.09l0.29-0.46l0.3-0.45l0.5-0.77c0.76-1.16,1.58-2.39,2.46-3.57	c0.1-0.14,0.2-0.28,0.31-0.42c0.1-0.14,0.21-0.28,0.31-0.41c0.9-1.15,1.85-2.22,2.87-3.1c1.85-1.61,3.84-2.5,5.85-2.5	c3.37,0,6.58,1.95,9.04,5.61c2.51,3.74,3.82,8.4,3.97,13.25c0.01,0.16,0.01,0.33,0.01,0.5C47,29.03,47,29.19,47,29.36z"
+        />
+        <linearGradient
+          id="wSMw7pqi7WIWHewz2_TZXa"
+          x1="42.304"
+          x2="13.533"
+          y1="24.75"
+          y2="24.75"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#0081fb" />
+          <stop offset=".995" stop-color="#0064e1" />
+        </linearGradient>
+        <path
+          fill="url(#wSMw7pqi7WIWHewz2_TZXa)"
+          d="M4.918,15.456	C7.195,11.951,10.483,9.5,14.253,9.5c2.184,0,4.354,0.645,6.621,2.493c2.479,2.02,5.122,5.346,8.419,10.828l1.182,1.967	c2.854,4.746,4.477,7.187,5.428,8.339C37.125,34.606,37.888,35,39,35c2.82,0,3.617-2.54,3.617-5.501L47,29.362	c0,3.095-0.611,5.369-1.651,7.165C44.345,38.264,42.387,40,39.093,40c-2.048,0-3.862-0.444-5.868-2.333	c-1.542-1.45-3.345-4.026-4.732-6.341l-4.126-6.879c-2.07-3.452-3.969-6.027-5.068-7.192c-1.182-1.254-2.642-2.754-5.067-2.754	c-1.963,0-3.689,1.362-5.084,3.465L4.918,15.456z"
+        />
+        <linearGradient
+          id="wSMw7pqi7WIWHewz2_TZXb"
+          x1="7.635"
+          x2="7.635"
+          y1="32.87"
+          y2="13.012"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stop-color="#0081fb" />
+          <stop offset=".995" stop-color="#0064e1" />
+        </linearGradient>
+        <path
+          fill="url(#wSMw7pqi7WIWHewz2_TZXb)"
+          d="M14.25,14.5	c-1.959,0-3.683,1.362-5.075,3.465C7.206,20.937,6,25.363,6,29.614c0,1.753-0.003,3.072,0.5,3.886l-3.84,2.813	C1.574,34.507,1,32.2,1,29.5c0-4.91,1.355-10.091,3.918-14.044C7.192,11.951,10.507,9.5,14.27,9.5L14.25,14.5z"
+        />
+        <path
+          d="M21.67,20.27l-0.3,0.45l-0.29,0.46c0.71,1.03,1.52,2.27,2.37,3.69l0.21-0.37c0.02-0.04,0.05-0.09,0.08-0.13 c0.09-0.17,0.19-0.34,0.28-0.51C23.19,22.5,22.39,21.29,21.67,20.27z M24.94,15.51c-0.11,0.14-0.21,0.28-0.31,0.42 c0.73,0.91,1.47,1.94,2.25,3.1c0.1-0.16,0.2-0.31,0.3-0.46c0.04-0.06,0.07-0.11,0.11-0.16c0.06-0.1,0.13-0.19,0.19-0.28 c-0.76-1.12-1.5-2.13-2.23-3.03C25.15,15.23,25.04,15.37,24.94,15.51z"
+          opacity=".05"
+        />
+        <path
+          d="M21.67,20.27l-0.3,0.45c0.71,1.02,1.51,2.24,2.37,3.65c0.09-0.17,0.19-0.34,0.28-0.51C23.19,22.5,22.39,21.29,21.67,20.27 z M24.63,15.93c0.73,0.91,1.47,1.94,2.25,3.1c0.1-0.16,0.2-0.31,0.3-0.46c-0.77-1.14-1.52-2.16-2.24-3.06 C24.83,15.65,24.73,15.79,24.63,15.93z"
+          opacity=".07"
+        />
+      </svg>
+    </SvgIcon>
+  )
+}
diff --git a/packages/client-core/src/common/components/Icons/XIcon.tsx b/packages/client-core/src/common/components/Icons/XIcon.tsx
@@ -0,0 +1,38 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+export const XIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="40px" height="40px">
+        <path d="M26.37,26l-8.795-12.822l0.015,0.012L25.52,4h-2.65l-6.46,7.48L11.28,4H4.33l8.211,11.971L12.54,15.97L3.88,26h2.65 l7.182-8.322L19.42,26H26.37z M10.23,6l12.34,18h-2.1L8.12,6H10.23z" />
+      </svg>
+    </SvgIcon>
+  )
+}
diff --git a/packages/client-core/src/user/components/Oauth/TwitterCallback.tsx b/packages/client-core/src/user/components/Oauth/TwitterCallback.tsx
@@ -68,7 +68,7 @@ const TwitterCallbackComponent = (props): JSX.Element => {
 
   return state.error && state.error !== '' ? (
     <Container className={styles.oauthError}>
-      <div className={styles.title}>{t('user:oauth.authFailed', { service: 'Twitter' })}</div>
+      <div className={styles.title}>{t('user:oauth.authFailed', { service: 'X' })}</div>
       <div className={styles.message}>{state.error}</div>
       <Button onClick={redirectToRoot} className={styles.gradientButton}>
         {t('user:oauth.redirectToRoot')}

diff --git a/packages/client-core/src/user/components/UserMenu/menus/ProfileMenu.tsx b/packages/client-core/src/user/components/UserMenu/menus/ProfileMenu.tsx
@@ -34,10 +34,10 @@ import Button from '@etherealengine/client-core/src/common/components/Button'
 import commonStyles from '@etherealengine/client-core/src/common/components/common.module.scss'
 import ConfirmDialog from '@etherealengine/client-core/src/common/components/ConfirmDialog'
 import { DiscordIcon } from '@etherealengine/client-core/src/common/components/Icons/DiscordIcon'
-import { FacebookIcon } from '@etherealengine/client-core/src/common/components/Icons/FacebookIcon'
 import { GoogleIcon } from '@etherealengine/client-core/src/common/components/Icons/GoogleIcon'
 import { LinkedInIcon } from '@etherealengine/client-core/src/common/components/Icons/LinkedInIcon'
-import { TwitterIcon } from '@etherealengine/client-core/src/common/components/Icons/TwitterIcon'
+import { MetaIcon } from '@etherealengine/client-core/src/common/components/Icons/MetaIcon'
+import { XIcon } from '@etherealengine/client-core/src/common/components/Icons/XIcon'
 import InputText from '@etherealengine/client-core/src/common/components/InputText'
 import Menu from '@etherealengine/client-core/src/common/components/Menu'
 import Text from '@etherealengine/client-core/src/common/components/Text'
@@ -570,7 +570,7 @@ const ProfileMenu = ({ hideLogin, onClose, isPopover }: Props): JSX.Element => {
                   {authState?.value?.facebook && !oauthConnectedState.facebook.value && (
                     <IconButton
                       id="facebook"
-                      icon={<FacebookIcon width="40" height="40" viewBox="0 0 40 40" />}
+                      icon={<MetaIcon width="40" height="40" viewBox="0 0 40 40" />}
                       onClick={handleOAuthServiceClick}
                     />
                   )}
@@ -584,7 +584,7 @@ const ProfileMenu = ({ hideLogin, onClose, isPopover }: Props): JSX.Element => {
                   {authState?.value?.twitter && !oauthConnectedState.twitter.value && (
                     <IconButton
                       id="twitter"
-                      icon={<TwitterIcon width="40" height="40" viewBox="0 0 40 40" />}
+                      icon={<XIcon width="40" height="40" viewBox="0 0 40 40" />}
                       onClick={handleOAuthServiceClick}
                     />
                   )}
@@ -617,7 +617,7 @@ const ProfileMenu = ({ hideLogin, onClose, isPopover }: Props): JSX.Element => {
                       {authState?.facebook.value && oauthConnectedState.facebook.value && (
                         <IconButton
                           id="facebook"
-                          icon={<Icon type="Facebook" viewBox="0 0 40 40" />}
+                          icon={<MetaIcon viewBox="0 0 40 40" />}
                           onClick={handleRemoveOAuthServiceClick}
                         />
                       )}
@@ -631,7 +631,7 @@ const ProfileMenu = ({ hideLogin, onClose, isPopover }: Props): JSX.Element => {
                       {authState?.twitter.value && oauthConnectedState.twitter.value && (
                         <IconButton
                           id="twitter"
-                          icon={<Icon type="Twitter" viewBox="0 0 40 40" />}
+                          icon={<XIcon viewBox="0 0 40 40" />}
                           onClick={handleRemoveOAuthServiceClick}
                         />
                       )}

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -40,7 +40,7 @@
     "@etherealengine/projects": "^1.6.0",
     "@etherealengine/ui": "^1.6.0",
     "@hookstate/core": "4.0.0-rc21",
-    "@mui/icons-material": "5.11.11",
+    "@mui/icons-material": "5.15.15",
     "@mui/material": "5.11.13",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@swc/core": "1.3.41",

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -36,7 +36,7 @@
     "@etherealengine/ui": "^1.6.0",
     "@etherealengine/visual-script": "^1.6.0",
     "@hookstate/core": "4.0.0-rc21",
-    "@mui/icons-material": "5.11.11",
+    "@mui/icons-material": "5.15.15",
     "@mui/material": "5.11.13",
     "@mui/styles": "5.11.13",
     "@uiw/react-color-sketch": "^2.1.1",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -41,7 +41,7 @@
     "@etherealengine/engine": "^1.6.0",
     "@etherealengine/hyperflux": "^1.6.0",
     "@etherealengine/projects": "^1.6.0",
-    "@mui/icons-material": "5.11.11",
+    "@mui/icons-material": "5.15.15",
     "@mui/material": "5.11.13",
     "@pixiv/three-vrm": "^2.0.6",
     "@pixiv/types-vrmc-vrm-1.0": "^2.0.6",