From 90fa93a2213c542caf17f026ca66fd5a99be41a7 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sun, 24 Apr 2022 14:29:41 -0500
Subject: [PATCH] Update search and index for carbon

---
 components/search.vue | 41 ++++++++++++++++++++++++-----------------
 pages/index.vue       | 18 ++++++++++--------
 2 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/components/search.vue b/components/search.vue
index 8a8c571..19d9ff0 100644
--- a/components/search.vue
+++ b/components/search.vue
@@ -1,11 +1,11 @@
 <template>
     <div
         ref="search-container"
-        class="search-container w-full"
+        class="search-container w-full space-y-4"
     >
 
         <slot name="before-search">
-            <div class="list-summary-wrapper flex justify-center text-center text-sm my-4">
+            <div class="list-summary-wrapper flex justify-center text-center text-sm">
 
                 <ListSummary
                     :app-list="appList"
@@ -15,21 +15,23 @@
             </div>
         </slot>
 
-        <div class="search-input relative">
-            <input
-                id="search"
-                ref="search"
-                :autofocus="autofocus"
-                v-model="query"
-                aria-label="Type here to Search"
-                class="appearance-none w-full text-white font-hairline sm:text-5xl outline-none bg-transparent p-3"
-                type="search"
-                placeholder="Type to Search"
-                autocomplete="off"
-                @keyup="queryResults(query); scrollInputToTop()"
-            >
-            <div class="search-input-separator border-white border-t-2" />
-            <div class="quick-buttons overflow-x-auto whitespace-no-wrap py-2 space-x-2">
+        <div class="search-input relative space-y-4">
+            <div>
+                <input
+                    id="search"
+                    ref="search"
+                    :autofocus="autofocus"
+                    v-model="query"
+                    aria-label="Type here to Search"
+                    class="appearance-none w-full text-white font-hairline sm:text-5xl outline-none bg-transparent p-3"
+                    type="search"
+                    placeholder="Type to Search"
+                    autocomplete="off"
+                    @keyup="queryResults(query); scrollInputToTop()"
+                >
+                <div class="search-input-separator border-white border-t-2" />
+            </div>
+            <div class="quick-buttons overflow-x-auto whitespace-no-wrap space-x-2">
                 <button
                     v-for="button in quickButtons"
                     :key="button.query"
@@ -43,6 +45,9 @@
                 >{{ button.label }}</button>
             </div>
         </div>
+
+        <Carbon class="carbon-inline-wide" />
+
         <div
             ref="search-container"
             class="search-container relative divide-y divide-gray-700 w-full rounded-lg border border-gray-700 bg-gradient-to-br from-darker to-dark my-8 px-5"
@@ -201,6 +206,7 @@ import { getAppCategory } from '~/helpers/categories.js'
 import { getAppEndpoint } from '~/helpers/app-derived.js'
 // import appList from '~/static/app-list.json'
 
+import Carbon from '~/components/carbon-inline.vue'
 import LinkButton from '~/components/link-button.vue'
 // import RelativeTime from '~/components/relative-time.vue'
 import ListSummary from '~/components/list-summary.vue'
@@ -208,6 +214,7 @@ import ListSummary from '~/components/list-summary.vue'
 
 export default {
     components: {
+        Carbon,
         // EmailSubscribe: () => process.client ? import('~/components/email-subscribe.vue') : null,
         ListSummary,
         LinkButton,
diff --git a/pages/index.vue b/pages/index.vue
index edb8cf4..54f6729 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,14 @@
 <template>
     <section class="container py-24">
-        <div class="flex flex-col items-center">
-            <h1 class="title text-4xl md:text-6xl font-hairline leading-tight text-center">
-                Does It ARM?
-            </h1>
-            <h2 class="subtitle md:text-xl text-center">
-                Apps that are reported to support Apple Silicon
-            </h2>
+        <div class="flex flex-col items-center space-y-4">
+            <div class="hero">
+                <h1 class="title text-3xl md:text-6xl font-hairline leading-tight text-center">
+                    Does It ARM?
+                </h1>
+                <h2 class="subtitle md:text-xl text-center">
+                    Apps that are reported to support Apple Silicon
+                </h2>
+            </div>
 
             <Search
                 :app-list="allList"
@@ -15,7 +17,7 @@
                 @update:query="onQueryUpdate"
             >
                 <template v-slot:before-search>
-                    <div class="list-summary-wrapper flex justify-center text-center text-sm my-4">
+                    <div class="list-summary-wrapper flex justify-center text-center text-sm">
 
                         <ListSummary
                             :custom-numbers="customSummaryNumbers"