App: restyle buttons

package.json

@@ -9,7 +9,15 @@
     "url": "https://tobiasfried.com"
   },
   "description": "A flexible icon family for interfaces, diagrams, presentations — whatever, really.",
-  "keywords": [ "phosphor", "icons", "svg", "design", "interface", "UI", "UX"],
+  "keywords": [
+    "phosphor",
+    "icons",
+    "svg",
+    "design",
+    "interface",
+    "UI",
+    "UX"
+  ],
   "repository": "github:rektdeckard/phosphor-web",
   "private": true,
   "dependencies": {

src/components/App/App.css

@@ -33,49 +33,39 @@ input {
 }
 
 button {
+  border: none;
   display: flex;
   align-items: center;
-  height: 72px;
-  padding: 0 40px 0 32px;
-  margin-top: 32px;
-  background-color: #ffd171;
+  justify-content: center;
+}
+
+button.main-button {
+  height: 64px;
+  width: 240px;
+  margin: 0 24px 0 0;
+  background-color: white;
   border-radius: 8px;
-  border: none;
   font-family: "Manrope";
   font-weight: 600;
   font-size: 20px;
   line-height: 30px;
+  box-sizing: border-box;
+  border: 2px solid black;
+  box-shadow: 4px 4px 0 0 black;
+  transform: translate(0, 0);
+  transition: all 0.2s ease;
   cursor: pointer;
   user-select: none;
 }
 
-button.main-button {
-  display: flex;
-  align-items: center;
-  height: 72px;
-  padding: 0 40px 0 32px;
-  margin-top: 32px;
-  background-color: #ffd171;
-  border-radius: 8px;
-  border: none;
-  font-family: "Manrope";
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 30px;
-  cursor: pointer;
-  transition: transform 0.15s 
-}
-
-button.main-button:hover {
-  outline: none;
-  transform: scale(1.05);
-  transition: transform 0.15s
-}
-
 button.main-button:active {
+  transform: translate(4px, 4px);
+  /* background-color: #DDDDDD; */
+  box-shadow: 0 0 0 0 black;
+}
+
+button.main-button:focus {
   outline: none;
-  background-color: #FFBF3B;
-  transform: scale(1);
 }
 
 a.main-link {

src/components/App/App.tsx

@@ -1,9 +1,8 @@
 import React, { Suspense } from "react";
 
-import { Info, Toolbar, IconGrid } from "../";
+import { Info, Toolbar, IconGrid, Header } from "../";
 import { Heart, Droid } from "phosphor-react";
 import "./App.css";
-import Header from "../Header/Header";
 
 const App: React.FC<any> = () => {
   return (
@@ -50,20 +49,37 @@ const App: React.FC<any> = () => {
               Copyright © 2020 Phosphor Icons
               <br />
               Phosphor Icons is designed by{" "}
-              <a className="main-link" href="https://helenazhang.com">Helena Zhang</a> + built by{" "}
-              <a className="main-link" href="https://tobiasfried.com">Tobias Fried</a>.
+              <a className="main-link" href="https://helenazhang.com">
+                Helena Zhang
+              </a>{" "}
+              + built by{" "}
+              <a className="main-link" href="https://tobiasfried.com">
+                Tobias Fried
+              </a>
+              .
               <br />
               This website is set in{" "}
-              <a className="main-link" href="https://manropefont.com/">Manrope</a> by{" "}
-              <a className="main-link" href="https://gent.media/">Mikhail Sharanda</a>.
+              <a className="main-link" href="https://manropefont.com/">
+                Manrope
+              </a>{" "}
+              by{" "}
+              <a className="main-link" href="https://gent.media/">
+                Mikhail Sharanda
+              </a>
+              .
             </p>
             <p>
               See also: <Droid size={20} />{" "}
-              <a className="main-link" href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor">
+              <a
+                className="main-link"
+                href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
+              >
                 Phosphor for Android
               </a>
             </p>
-            <a className="main-link" href="#">Back to zee top</a>
+            <a className="main-link" href="#">
+              Back to zee top
+            </a>
           </div>
         </div>
       </Info>