Merge pull request #19 from docker/da-871-change-twitter-icon

Update twitter icon to X
docker · Oct 26, 2023 · 4909745 · 4909745
2 parents cfd61fa + 8c2a588
commit 4909745
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 24 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,11 +5,11 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Your first Docker container"
+    <meta name="description" content="Your first Docker container" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
     />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Welcome to Docker</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -22,8 +22,7 @@
   color: #61dafb;
 }
 
-
-.fa {
+.fa-brands {
   padding: 20px;
   font-size: 30px;
   width: 50px;
@@ -32,25 +31,24 @@
   text-decoration: none;
 }
 
-.fa:hover {
+.fa-brands:hover {
   opacity: 0.7;
 }
 
-
 /* Twitter */
-.fa-twitter {
-  background: #55ACEE;
+.fa-x-twitter {
+  background: #55acee;
   color: white;
 }
 
 /* Linkedin */
 .fa-linkedin {
-  background: #55ACEE;
+  background: #55acee;
   color: white;
 }
 
 /* Reddit */
 .fa-reddit {
-  background: #55ACEE;
+  background: #55acee;
   color: white;
-}
+}
diff --git a/src/App.js b/src/App.js
@@ -1,28 +1,59 @@
-import './App.css';
-import Confetti from './Confetti';
+import "./App.css";
+import Confetti from "./Confetti";
 
-const shareMessage = 'I just ran my first container using Docker'
-const shareLink = 'https://docker.com/'
+const shareMessage = "I just ran my first container using Docker";
+const shareLink = "https://docker.com/";
 
 const App = () => {
   return (
     <div className="App">
       <Confetti />
       <header className="App-header">
-        <h1 style={{ marginBottom: "0px" }}>
-          Congratulations!!!
-        </h1>
+        <h1 style={{ marginBottom: "0px" }}>Congratulations!!!</h1>
         <p style={{ marginTop: "10px", marginBottom: "50px" }}>
           You ran your first container.
         </p>
         <div>
-          <a target="_blank" href={"https://twitter.com/intent/tweet?text=" + shareMessage + "&url=" + shareLink} class="fa fa-twitter" rel="noopener noreferrer"> </a>
-          <a target="_blank" href={"https://www.linkedin.com/sharing/share-offsite/?url=" + shareLink} class="fa fa-linkedin" rel="noopener noreferrer"> </a>
-          <a target="_blank" href={"https://reddit.com/submit?title=" + shareMessage + "&url=" + shareLink} class="fa fa-reddit" rel="noopener noreferrer"> </a>
+          <a
+            target="_blank"
+            href={
+              "https://twitter.com/intent/tweet?text=" +
+              shareMessage +
+              "&url=" +
+              shareLink
+            }
+            class="fa-brands fa-x-twitter"
+            rel="noopener noreferrer"
+          >
+            {" "}
+          </a>
+          <a
+            target="_blank"
+            href={
+              "https://www.linkedin.com/sharing/share-offsite/?url=" + shareLink
+            }
+            class="fa-brands fa-linkedin"
+            rel="noopener noreferrer"
+          >
+            {" "}
+          </a>
+          <a
+            target="_blank"
+            href={
+              "https://reddit.com/submit?title=" +
+              shareMessage +
+              "&url=" +
+              shareLink
+            }
+            class="fa-brands fa-reddit"
+            rel="noopener noreferrer"
+          >
+            {" "}
+          </a>
         </div>
       </header>
     </div>
   );
-}
+};
 
 export default App;