Merge pull request #240 from Esri/rslibed/social-share-twitter

revert: X branding back to Twitter
Esri · Oct 5, 2023 · fdd0410 · fdd0410
2 parents a510801 + f360f87
commit fdd0410
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 35 deletions.
diff --git a/packages/instant-apps-components/CHANGELOG.md b/packages/instant-apps-components/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v1.0.0-beta.136
+
+### instant-apps-social-share
+
+- Revert X back to Twitter branding
+
 ## v1.0.0-beta.135
 
 ### instant-apps-language-switcher

diff --git a/packages/instant-apps-components/package-lock.json b/packages/instant-apps-components/package-lock.json
diff --git a/packages/instant-apps-components/package.json b/packages/instant-apps-components/package.json
@@ -1,7 +1,7 @@
 {
   "homepage": "https://esri.github.io/instant-apps-components",
   "name": "@esri/instant-apps-components",
-  "version": "1.0.0-beta.135",
+  "version": "1.0.0-beta.136",
   "description": "Reusable ArcGIS Instant Apps web components.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

diff --git a/packages/instant-apps-components/src/assets/t9n/instant-apps-social-share/resources.json b/packages/instant-apps-components/src/assets/t9n/instant-apps-social-share/resources.json
@@ -27,12 +27,12 @@
       "tooltip": "Click to share to your Facebook account"
     },
     "twitter": {
-      "label": "X",
-      "tooltip": "Click to share to your X account"
+      "label": "Twitter",
+      "tooltip": "Click to share to your Twitter account"
     },
     "linkedIn": {
       "label": "LinkedIn",
       "tooltip": "Click to share to your LinkedIn account"
     }
   }
-}
+}
diff --git a/packages/instant-apps-components/src/assets/t9n/instant-apps-social-share/resources_en.json b/packages/instant-apps-components/src/assets/t9n/instant-apps-social-share/resources_en.json
@@ -27,12 +27,12 @@
       "tooltip": "Click to share to your Facebook account"
     },
     "twitter": {
-      "label": "X",
-      "tooltip": "Click to share to your X account"
+      "label": "Twitter",
+      "tooltip": "Click to share to your Twitter account"
     },
     "linkedIn": {
       "label": "LinkedIn",
       "tooltip": "Click to share to your LinkedIn account"
     }
   }
-}
+}
diff --git a/...t-apps-components/src/components/instant-apps-social-share/instant-apps-social-share.scss b/...t-apps-components/src/components/instant-apps-social-share/instant-apps-social-share.scss
@@ -10,8 +10,6 @@ $calciteBlue: #007ac2;
 $border: #d3d3d3;
 $hoverLight: #f3f3f3;
 $hoverDark: #262626;
-$xLogoLight: #000000;
-$xLogoDark: #ffffff;
 
 :host {
   display: block;
@@ -97,18 +95,6 @@ $xLogoDark: #ffffff;
       }
     }
 
-    &__x-logo--light {
-      path {
-        fill: $xLogoLight;
-      }
-    }
-
-    &__x-logo--dark {
-      path {
-        fill: $xLogoDark;
-      }
-    }
-
     &__tip {
       box-sizing: border-box;
       padding: 0 5% 1% 5%;

diff --git a/...nt-apps-components/src/components/instant-apps-social-share/instant-apps-social-share.tsx b/...nt-apps-components/src/components/instant-apps-social-share/instant-apps-social-share.tsx
@@ -20,8 +20,6 @@ type ShareItemOptions = 'link' | 'facebook' | 'twitter' | 'linkedIn';
 
 const base = 'instant-apps-social-share';
 
-const CALCITE_MODE_DARK = '.calcite-mode-dark';
-
 const CSS = {
   base,
   dialog: `${base}__dialog`,
@@ -39,11 +37,6 @@ const CSS = {
     vertical: `${base}__layout--vertical`,
     horizontal: `${base}__layout--horizontal`,
   },
-  xLogo: {
-    light: `${base}__x-logo--light`,
-    dark: `${base}__x-logo--dark`,
-  },
-
   success: {
     container: `${base}__success`,
     header: `${base}__success-header`,
@@ -436,7 +429,7 @@ export class InstantAppsSocialShare {
               </li>,
               <li onClick={this.handleShareItem.bind(this, 'twitter')} onKeyDown={this.handleOptionKeyDown('twitter')} role="menuitem" tabindex="0">
                 <span class={CSS.icon}>{this.renderTwitterIcon()}</span>
-                <span class={`${CSS.optionText}${optionText_RTL}`}>X</span>
+                <span class={`${CSS.optionText}${optionText_RTL}`}>Twitter</span>
               </li>,
               <li onClick={this.handleShareItem.bind(this, 'linkedIn')} onKeyDown={this.handleOptionKeyDown('linkedIn')} role="menuitem" tabindex="0">
                 <span class={CSS.icon}>{this.renderLinkedInIcon()}</span>
@@ -482,12 +475,19 @@ export class InstantAppsSocialShare {
   }
 
   renderTwitterIcon() {
-    const isCalciteModeDark = !!this.el.closest(CALCITE_MODE_DARK);
     return (
-      <svg class={isCalciteModeDark ? CSS.xLogo.dark : CSS.xLogo.light} width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        height="100%"
+        style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: '2' }}
+        version="1.1"
+        viewBox="0 0 512 512"
+        width="100%"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect height="400" style={{ fill: 'none' }} width="400" x="56" y="56" />
         <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="white"
+          d="M161.014,464.013c193.208,0 298.885,-160.071 298.885,-298.885c0,-4.546 0,-9.072 -0.307,-13.578c20.558,-14.871 38.305,-33.282 52.408,-54.374c-19.171,8.495 -39.51,14.065 -60.334,16.527c21.924,-13.124 38.343,-33.782 46.182,-58.102c-20.619,12.235 -43.18,20.859 -66.703,25.498c-19.862,-21.121 -47.602,-33.112 -76.593,-33.112c-57.682,0 -105.145,47.464 -105.145,105.144c0,8.002 0.914,15.979 2.722,23.773c-84.418,-4.231 -163.18,-44.161 -216.494,-109.752c-27.724,47.726 -13.379,109.576 32.522,140.226c-16.715,-0.495 -33.071,-5.005 -47.677,-13.148l0,1.331c0.014,49.814 35.447,93.111 84.275,102.974c-15.464,4.217 -31.693,4.833 -47.431,1.802c13.727,42.685 53.311,72.108 98.14,72.95c-37.19,29.227 -83.157,45.103 -130.458,45.056c-8.358,-0.016 -16.708,-0.522 -25.006,-1.516c48.034,30.825 103.94,47.18 161.014,47.104"
+          style={{ fill: '#1da1f2', fillRule: 'nonzero' }}
         />
       </svg>
     );