Merge pull request #1683 from dxc-technology/rarrojolopez/twitter-app

Update Twitter branding by X branding in /app

Author: GomezIvann

app/src/images/twitter-black.svg

@@ -1,6 +1,6 @@
 import React from "react";
 import { DxcCard } from "@dxc-technology/halstack-react";
-import twitterIcon from "../images/twitter.svg";
+import XIcon from "../images/x.svg";
 
 function App() {
   return (
@@ -33,38 +33,38 @@ function App() {
         <h4>Image Background Color</h4>
         <DxcCard
           imageBgColor="#6B4187"
-          imageSrc={twitterIcon}
+          imageSrc={XIcon}
           imagePadding="xxlarge"
         />
       </div>
       <h4>Image Paddings</h4>
       <div className="test-case" id="xxsmall-imagePadding">
         <h4>xxsmall imagePadding</h4>
-        <DxcCard imageSrc={twitterIcon} imagePadding="xxsmall" />
+        <DxcCard imageSrc={XIcon} imagePadding="xxsmall" />
       </div>
       <div className="test-case" id="xsmall-imagePadding">
         <h4>xsmall imagePadding</h4>
-        <DxcCard imageSrc={twitterIcon} imagePadding="xsmall" />
+        <DxcCard imageSrc={XIcon} imagePadding="xsmall" />
       </div>
       <div className="test-case" id="small-imagePadding">
         <h4>small imagePadding</h4>
-        <DxcCard imageSrc={twitterIcon} imagePadding="small" />
+        <DxcCard imageSrc={XIcon} imagePadding="small" />
       </div>
       <div className="test-case" id="medium-imagePadding">
         <h4>medium imagePadding</h4>
-        <DxcCard imageSrc={twitterIcon} imagePadding="medium" />
+        <DxcCard imageSrc={XIcon} imagePadding="medium" />
       </div>
       <div className="test-case" id="large-imagePadding">
         <h4>large imagePadding</h4>
-        <DxcCard imageSrc={twitterIcon} imagePadding="large" />
+        <DxcCard imageSrc={XIcon} imagePadding="large" />
       </div>
       <div className="test-case" id="xlarge-imagePadding">
         <h4>xlarge imagePadding</h4>
-        <DxcCard imageSrc={twitterIcon} imagePadding="xlarge" />
+        <DxcCard imageSrc={XIcon} imagePadding="xlarge" />
       </div>
       <div className="test-case" id="xxlarge-imagePadding">
         <h4>xxlarge imagePadding</h4>
-        <DxcCard imageSrc={twitterIcon} imagePadding="xxlarge" />
+        <DxcCard imageSrc={XIcon} imagePadding="xxlarge" />
       </div>
       <h4>Margins</h4>
       <div className="test-case" id="xxsmall-margin">

app/src/images/twitter.svg

@@ -8,43 +8,40 @@ const colors = {
   },
 };
 
-const facebookSVG = () => {
-  return (
-    <svg
-      version="1.1"
-      id="Capa_1"
-      x="0px"
-      y="0px"
-      viewBox="0 0 438.536 438.536"
-      fill="currentColor"
-    >
-      <g>
-        <path
-          d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
+const facebookSVG = (
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    viewBox="0 0 438.536 438.536"
+    fill="currentColor"
+  >
+    <g>
+      <path
+        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
       C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
       h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
       C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
       c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
       c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
-        />
-      </g>
-    </svg>
-  );
-};
+      />
+    </g>
+  </svg>
+);
 
-const linkedinSVG = () => {
-  return (
-    <svg
-      version="1.1"
-      id="Capa_1"
-      x="0px"
-      y="0px"
-      viewBox="0 0 438.536 438.536"
-      fill="currentColor"
-    >
-      <g>
-        <path
-          d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
+const linkedinSVG = (
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    viewBox="0 0 438.536 438.536"
+    fill="currentColor"
+  >
+    <g>
+      <path
+        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
    C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
    h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
    C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332
@@ -55,44 +52,28 @@ const linkedinSVG = () => {
    c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974
    c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64
    H370.873z"
-        />
-      </g>
-    </svg>
-  );
-};
+      />
+    </g>
+  </svg>
+);
 
-const twitterSVG = () => {
-  return (
-    <svg
-      version="1.1"
-      id="Capa_1"
-      x="0px"
-      y="0px"
-      viewBox="0 0 438.536 438.536"
-      fill="currentColor"
-    >
-      <g>
-        <path
-          d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
-		C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
-		h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
-		C438.532,59.576,430.49,40.204,414.41,24.123z M335.471,168.735c0.191,1.713,0.288,4.278,0.288,7.71
-		c0,15.989-2.334,32.025-6.995,48.104c-4.661,16.087-11.8,31.504-21.416,46.254c-9.606,14.749-21.074,27.791-34.396,39.115
-		c-13.325,11.32-29.311,20.365-47.968,27.117c-18.648,6.762-38.637,10.143-59.953,10.143c-33.116,0-63.76-8.952-91.931-26.836
-		c4.568,0.568,9.329,0.855,14.275,0.855c27.6,0,52.439-8.565,74.519-25.7c-12.941-0.185-24.506-4.179-34.688-11.991
-		c-10.185-7.803-17.273-17.699-21.271-29.691c4.947,0.76,8.658,1.137,11.132,1.137c4.187,0,9.042-0.76,14.56-2.279
-		c-13.894-2.669-25.598-9.562-35.115-20.697c-9.519-11.136-14.277-23.84-14.277-38.114v-0.571
-		c10.085,4.755,19.602,7.229,28.549,7.422c-17.321-11.613-25.981-28.265-25.981-49.963c0-10.66,2.758-20.747,8.278-30.264
-		c15.035,18.464,33.311,33.213,54.816,44.252c21.507,11.038,44.54,17.227,69.092,18.558c-0.95-3.616-1.427-8.186-1.427-13.704
-		c0-16.562,5.853-30.692,17.56-42.399c11.703-11.706,25.837-17.561,42.394-17.561c17.515,0,32.079,6.283,43.688,18.846
-		c13.134-2.474,25.892-7.33,38.26-14.56c-4.757,14.652-13.613,25.788-26.55,33.402c12.368-1.716,23.88-4.95,34.537-9.708
-		C357.458,149.793,347.462,160.166,335.471,168.735z"
-        />
-      </g>
-    </svg>
-  );
-};
-const more_hor = () => (
+const XSVG = (
+  <svg
+    width="256"
+    height="256"
+    viewBox="0 0 256 256"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect width="256" height="256" rx="40" fill="white" />
+    <path
+      d="M140.192 118.205L187.848 64H176.556L135.158 111.056L102.117 64H64L113.975 135.163L64 192H75.2914L118.982 142.296L153.883 192H192L140.192 118.205ZM124.722 135.787L119.65 128.697L79.3634 72.3294H96.7094L129.232 117.837L134.282 124.927L176.551 184.076H159.205L124.722 135.787Z"
+      fill="#0F1419"
+    />
+  </svg>
+);
+
+const more_hor = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     height="24px"
@@ -116,7 +97,7 @@ function App() {
     },
     {
       value: "2",
-      label: "Twitter",
+      label: "X",
     },
     {
       value: "3",
@@ -136,8 +117,8 @@ function App() {
     },
     {
       value: "3",
-      label: "Twitter",
-      icon: twitterSVG,
+      label: "X",
+      icon: XSVG,
     },
   ];
 
@@ -285,7 +266,7 @@ function App() {
           options={optionsWithIcon}
           icon={facebookSVG}
           onSelectOption={selectOption}
-          label="Basic dropdown"
+          label="Basic ddddddddropdown"
           margin="medium"
         ></DxcDropdown>
       </div>