New app store badge

SoapboxSocial · Jan 20, 2021 · 8661f65 · 8661f65
1 parent ff37d9f
commit 8661f65
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 32 deletions.
diff --git a/icons/apple.tsx b/icons/apple.tsx
@@ -0,0 +1,15 @@
+export default function Apple({ size = 24, className = "" }) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+    >
+      <title>{"Apple"}</title>
+      <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
+    </svg>
+  );
+}
diff --git a/pages/_app.js b/pages/_app.js
@@ -3,7 +3,7 @@ import "../styles/globals.css";
 
 export default function SoapboxApp({ Component, pageProps }) {
   return (
-    <div className="wrapper">
+    <div className="flex flex-col min-h-screen">
       <Component {...pageProps} />
 
       <Footer />

diff --git a/pages/_document.js b/pages/_document.js
@@ -20,8 +20,6 @@ export default class SoapboxDocument extends Document {
             type="font/woff2"
             crossOrigin="anonymous"
           />
-          <link rel="preload" as="image" href="/badge_black.svg" />
-          <link rel="preload" as="image" href="/badge_white.svg" />
           <link
             rel="apple-touch-icon"
             sizes="180x180"
@@ -63,7 +61,7 @@ export default class SoapboxDocument extends Document {
             })}
           />
         </Head>
-        <body>
+        <body className="flex flex-col min-h-screen">
           <Main />
           <NextScript />
         </body>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,6 +2,7 @@ import Meta from "../components/meta";
 import Page from "../components/page";
 import Room from "../components/room";
 import { APP_STORE_URL } from "../constants";
+import Apple from "../icons/apple";
 
 export default function HomePage() {
   return (
@@ -17,10 +18,13 @@ export default function HomePage() {
         </p>
 
         <a
-          className="badge"
+          className="py-4 px-6 bg-brand text-white rounded-full inline-flex items-center space-x-4"
           href={APP_STORE_URL}
           aria-label="Download on the App Store"
-        />
+        >
+          <Apple size={32} className="-mt-0.5" />
+          <span className="text-2xl font-medium">App Store</span>
+        </a>
       </main>
     </Page>
   );

diff --git a/public/badge_black.svg b/public/badge_black.svg
diff --git a/public/badge_white.svg b/public/badge_white.svg
diff --git a/styles/globals.css b/styles/globals.css
@@ -48,15 +48,6 @@ body {
   color: var(--textPrimary);
 }
 
-.wrapper {
-  min-height: 100vh;
-  /* mobile viewport bug fix */
-  min-height: -webkit-fill-available;
-
-  display: flex;
-  flex-direction: column;
-}
-
 .brand-mark {
   height: 4rem;
 }
@@ -112,21 +103,6 @@ body {
   }
 }
 
-.badge {
-  height: 4rem;
-  width: 12rem;
-  background-image: url("/badge_black.svg");
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
-/* @media (prefers-color-scheme: dark) {
-  .badge {
-    background-image: url("/badge_white.svg");
-  }
-} */
-
 .room {
   max-width: 428px;
   width: 100%;