Add GitHub button

ebigram · Feb 7, 2019 · 0178901 · 0178901
1 parent 0159648
commit 0178901
Showing 1 changed file with 29 additions and 4 deletions.
diff --git a/src/app.js b/src/app.js
@@ -72,8 +72,8 @@ function Error({ error }) {
         <p>
           GitHub API rate limit exceeded for your IP (60 requests per hour).
         </p>
-        <p>Log in with GitHub for more:</p>
-        <button onClick={login}>Log In</button>
+        <p>Sign in with GitHub for more:</p>
+        <GitHubButton onClick={login} />
       </Center>
     );
   }
@@ -84,8 +84,8 @@ function Error({ error }) {
         <p>File not found.</p>
         {!isLoggedIn() && (
           <React.Fragment>
-            <p>Is it from a private repo? Log in with GitHub:</p>
-            <button onClick={login}>Log In</button>
+            <p>Is it from a private repo? Sign in with GitHub:</p>
+            <GitHubButton onClick={login} />
           </React.Fragment>
         )}
       </Center>
@@ -110,6 +110,31 @@ function Loading({ repo, sha, path }) {
   );
 }
 
+function GitHubButton({ onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      style={{ fontWeight: 600, padding: "0.5em 0.7em", cursor: "pointer" }}
+    >
+      <div>
+        <svg
+          fill="currentColor"
+          preserveAspectRatio="xMidYMid meet"
+          height="1em"
+          width="1em"
+          viewBox="0 0 40 40"
+          style={{ verticalAlign: "middle", marginRight: "0.5rem" }}
+        >
+          <g>
+            <path d="m20 0c-11 0-20 9-20 20 0 8.8 5.7 16.3 13.7 19 1 0.2 1.3-0.5 1.3-1 0-0.5 0-2 0-3.7-5.5 1.2-6.7-2.4-6.7-2.4-0.9-2.3-2.2-2.9-2.2-2.9-1.9-1.2 0.1-1.2 0.1-1.2 2 0.1 3.1 2.1 3.1 2.1 1.7 3 4.6 2.1 5.8 1.6 0.2-1.3 0.7-2.2 1.3-2.7-4.5-0.5-9.2-2.2-9.2-9.8 0-2.2 0.8-4 2.1-5.4-0.2-0.5-0.9-2.6 0.2-5.3 0 0 1.7-0.5 5.5 2 1.6-0.4 3.3-0.6 5-0.6 1.7 0 3.4 0.2 5 0.7 3.8-2.6 5.5-2.1 5.5-2.1 1.1 2.8 0.4 4.8 0.2 5.3 1.3 1.4 2.1 3.2 2.1 5.4 0 7.6-4.7 9.3-9.2 9.8 0.7 0.6 1.4 1.9 1.4 3.7 0 2.7 0 4.9 0 5.5 0 0.6 0.3 1.2 1.3 1 8-2.7 13.7-10.2 13.7-19 0-11-9-20-20-20z" />
+          </g>
+        </svg>
+        Sign in with GitHub
+      </div>
+    </button>
+  );
+}
+
 function login() {
   auth()
     .then(data => {