From 0aead4d551fa57d764819f74526e60111a3c5a1d Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 5 Nov 2021 13:14:07 +0800
Subject: [PATCH] feat: update UI

---
 components/Counter.vue    |  4 +--
 components/Footer.vue     |  4 +--
 components/InputEntry.vue | 44 ++++++++++++-----------
 components/Logos.vue      | 20 +++++++++++
 components/PageView.vue   |  4 +--
 package.json              |  4 +--
 pages/hi/[id].vue         | 14 ++++----
 pages/index.vue           |  8 +----
 pnpm-lock.yaml            | 76 +++++++++++++++++++--------------------
 9 files changed, 98 insertions(+), 80 deletions(-)
 create mode 100644 components/Logos.vue

diff --git a/components/Counter.vue b/components/Counter.vue
index d81305c..c80a18f 100644
--- a/components/Counter.vue
+++ b/components/Counter.vue
@@ -4,13 +4,13 @@ const { count, inc, dec } = useCount()
 
 <template>
   <div inline-flex m="y-3">
-    <button btn class="!p-2" @click="dec()">
+    <button btn p-2 rounded-full @click="dec()">
       <div i-carbon-subtract></div>
     </button>
     <div font="mono" w="15" m-auto inline-block>
       {{ count }}
     </div>
-    <button btn class="!p-2" @click="inc()">
+    <button btn p-2 rounded-full @click="inc()">
       <div i-carbon-add></div>
     </button>
   </div>
diff --git a/components/Footer.vue b/components/Footer.vue
index 2308f5e..76cede8 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    text="2xl gray-500"
+    text="xl gray4"
     m-5
     flex
     justify-center
-    gap-2
+    gap-3
   >
     <NuxtLink i-carbon-campsite to="/" />
     <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="__blank" />
diff --git a/components/InputEntry.vue b/components/InputEntry.vue
index 076455a..1afbb15 100644
--- a/components/InputEntry.vue
+++ b/components/InputEntry.vue
@@ -9,28 +9,30 @@ const go = () => {
 </script>
 
 <template>
-  <input
-    id="input"
-    v-model="name"
-    placeholder="What's your name?"
-    type="text"
-    autocomplete="false"
-    p="x-4 y-2"
-    m="t-5"
-    w="250px"
-    text="center"
-    bg="transparent"
-    border="~ rounded gray-200 dark:gray-700"
-    outline="none active:none"
-    @keydown.enter="go"
-  >
   <div>
-    <button
-      class="m-3 text-sm btn"
-      :disabled="!name"
-      @click="go"
+    <input
+      id="input"
+      v-model="name"
+      placeholder="What's your name?"
+      type="text"
+      autocomplete="false"
+      p="x-4 y-2"
+      m="t-5"
+      w="250px"
+      text="center"
+      bg="transparent"
+      border="~ rounded gray-200 dark:gray-700"
+      outline="none active:none"
+      @keydown.enter="go"
     >
-      GO
-    </button>
+    <div>
+      <button
+        class="m-3 text-sm btn"
+        :disabled="!name"
+        @click="go"
+      >
+        GO
+      </button>
+    </div>
   </div>
 </template>
diff --git a/components/Logos.vue b/components/Logos.vue
new file mode 100644
index 0000000..3d27a17
--- /dev/null
+++ b/components/Logos.vue
@@ -0,0 +1,20 @@
+<template>
+  <div inline-flex text-2xl font-300 cursor-default>
+    <div flex flex-col children:mx-auto>
+      <img w-18 inline-block src="/nuxt.png" />
+      <span text-green5 mt--2>Nuxt 3</span>
+    </div>
+    <div
+      text="3xl gray4"
+      m="x-4 y-auto"
+      transition-all-500
+      transform
+      hover:rotate-135
+      i-carbon-add
+    />
+    <div flex flex-col children:mx-auto>
+      <img w-18 inline-block src="/vite.png" />
+      <span text-purple5 mt--2>Vitesse</span>
+    </div>
+  </div>
+</template>
diff --git a/components/PageView.vue b/components/PageView.vue
index 3f17688..1b0c690 100644
--- a/components/PageView.vue
+++ b/components/PageView.vue
@@ -5,7 +5,7 @@ const time = useTimeAgo(computed(() => data.value.startAt))
 </script>
 
 <template>
-  <div text-gray>
-    <span font-500>{{ data.pageview }}</span> page views since <span font-500>{{ time }}</span>
+  <div text-gray:50>
+    <span font-500 text-gray>{{ data.pageview }}</span> page views since <span text-gray>{{ time }}</span>
   </div>
 </template>
diff --git a/package.json b/package.json
index a6da2d0..137b24d 100644
--- a/package.json
+++ b/package.json
@@ -8,11 +8,11 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.10.0",
     "@iconify/json": "^1.1.423",
-    "@unocss/nuxt": "^0.5.1",
+    "@unocss/nuxt": "^0.6.1",
     "@vueuse/core": "^6.7.6",
     "eslint": "^8.1.0",
     "nuxt3": "latest",
     "typescript": "^4.4.4",
-    "unocss": "^0.5.1"
+    "unocss": "^0.6.1"
   }
 }
diff --git a/pages/hi/[id].vue b/pages/hi/[id].vue
index 26a4bd1..41cbc71 100644
--- a/pages/hi/[id].vue
+++ b/pages/hi/[id].vue
@@ -7,20 +7,22 @@ const name = route.params.id
 <template>
   <div>
     <div i-twemoji:waving-hand text-4xl inline-block animate-bounce></div>
-    <h3 text-2xl>
-      Hi!
+    <h3 text-2xl font-500>
+      Hi,
     </h3>
-    <div>{{ name }}</div>
+    <div text-xl>
+      {{ name }}!
+    </div>
+
+    <Counter />
 
     <div>
       <NuxtLink
-        class="btn m-3 text-sm mt-6"
+        class="btn m-3 text-sm"
         to="/"
       >
         Back
       </NuxtLink>
     </div>
-
-    <Counter />
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 91965f0..ff17e67 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,6 @@
 <template>
   <div>
-    <img w-16 inline-block src="/nuxt.png" />
-    <img w-16 inline-block src="/vite.png" />
-    <h1 mt-1 text-2xl cursor-default>
-      <span text-green-500 hover:text-white hover:bg-green-600>Nuxt 3</span>
-      <span text-gray-400 mx-2>+</span>
-      <span text-purple-500>Vitesse</span>
-    </h1>
+    <Logos mb-6 />
     <Suspense>
       <PageView />
       <template #fallback>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e22c689..4775f99 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,22 +3,22 @@ lockfileVersion: 5.3
 specifiers:
   '@antfu/eslint-config': ^0.10.0
   '@iconify/json': ^1.1.423
-  '@unocss/nuxt': ^0.5.1
+  '@unocss/nuxt': ^0.6.1
   '@vueuse/core': ^6.7.6
   eslint: ^8.1.0
   nuxt3: latest
   typescript: ^4.4.4
-  unocss: ^0.5.1
+  unocss: ^0.6.1
 
 devDependencies:
   '@antfu/eslint-config': 0.10.0_eslint@8.1.0+typescript@4.4.4
   '@iconify/json': 1.1.423
-  '@unocss/nuxt': 0.5.1
+  '@unocss/nuxt': 0.6.1
   '@vueuse/core': 6.7.6
   eslint: 8.1.0
   nuxt3: 3.0.0-27267816.6bd7186
   typescript: 4.4.4
-  unocss: 0.5.1
+  unocss: 0.6.1
 
 packages:
 
@@ -1001,60 +1001,60 @@ packages:
       eslint-visitor-keys: 3.0.0
     dev: true
 
-  /@unocss/config/0.5.1:
-    resolution: {integrity: sha512-4AzkxLnWuUHVZC/Ao4X0wsu5x3McB38I1yEnuOmTGADXgzrnBaeDV4HCpycYrhINlOAlfMGuoZ3kaIznR+3YMQ==}
+  /@unocss/config/0.6.1:
+    resolution: {integrity: sha512-E8sJtn7Nh94E/8dKJDkAECcaVacPmuHj1YbIJDxhaH5o36uamivMI6uQE393/HHZ8fyiW/2Mm5QtP1kCqy8LHg==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.5.1
+      '@unocss/core': 0.6.1
       sucrase: 3.20.3
     dev: true
 
-  /@unocss/core/0.5.1:
-    resolution: {integrity: sha512-QGVm1h3BumjobzKFBppSf5OYYcH73bEUHiUyfsEDL1K2JzSswE+ugBw13NuCyIH442o8M7N3OEUIWjzs5gYy+g==}
+  /@unocss/core/0.6.1:
+    resolution: {integrity: sha512-eEJSrFFjbUh7/K+nLe1U3zkSSusqsXax1xM8gxjvRqrCeJC7fY/U4u1AwiWdGHjvObVIZXIAzoOd9PLBafMHag==}
     dev: true
 
-  /@unocss/nuxt/0.5.1:
-    resolution: {integrity: sha512-IubhlFC97Yu13GvVjd8Lm4WsA+t4bl4BmcoiO4P9KvgYvFolC4Xq3ZR0ef+nUCxylJLkp/+bqHYetcVJeBGxEg==}
+  /@unocss/nuxt/0.6.1:
+    resolution: {integrity: sha512-dQyUrNnZndicUCttlituOivVB5ZJGbKIX5C+Rks0c3jhiaDw5U12RsbterxRUXGRzwxsIOehGXmh0dQzrqHClg==}
     dependencies:
       '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27267816.6bd7186
-      unocss: 0.5.1
+      unocss: 0.6.1
     dev: true
 
-  /@unocss/preset-attributify/0.5.1:
-    resolution: {integrity: sha512-42oDw9iW/bP7xWkWnCaHLph1FQokYu9zjuErxYGvNNk8umGP/DxzFC3/BdMlAswzUDcVZgNsE7WJI3YZdf/vFA==}
+  /@unocss/preset-attributify/0.6.1:
+    resolution: {integrity: sha512-FnHec33XF1zTkh5BFfLTOe/EsYMRMlZUT6IoutBQIBf3/rwz9xNSLVwqVKqwD9mjYWvC5WvpekuYWJfoQ8TBSQ==}
     dependencies:
-      '@unocss/core': 0.5.1
+      '@unocss/core': 0.6.1
     dev: true
 
-  /@unocss/preset-icons/0.5.1:
-    resolution: {integrity: sha512-qt2wBccudSv3ciKLJ8MjHDSX17aplChmLAHV8NQe8AxBLvxVTPUvx3fVyPoopbcoioYstS1tWkqEazbk/CZFLQ==}
+  /@unocss/preset-icons/0.6.1:
+    resolution: {integrity: sha512-KWvfEZIjtXGW4sZYBjTjJF02DW4JLYf9tQwbjkVM87o9460ptU91JCzMoT562IY8mxy6l+GmuGJyYMhb9BfkjQ==}
     dependencies:
       '@iconify/utils': 1.0.18
-      '@unocss/core': 0.5.1
+      '@unocss/core': 0.6.1
       local-pkg: 0.4.0
     dev: true
 
-  /@unocss/preset-uno/0.5.1:
-    resolution: {integrity: sha512-siOQRK8WlDBZljjvzrgLkLfw8UxB+YUjDiwvJY59m8PSGjHyuQiY9tuCDVbPDd3XkMBHGE7oZgLVuzR6Waygzw==}
+  /@unocss/preset-uno/0.6.1:
+    resolution: {integrity: sha512-z9hTbfyYh3RDrmADYk3dZSYv9C9iF+RvOQrOVH8z1jBPj7D17ZYT/oKawO68bpqyM+hsSARkGHNpI1W0y8+4Nw==}
     dependencies:
-      '@unocss/core': 0.5.1
+      '@unocss/core': 0.6.1
     dev: true
 
-  /@unocss/reset/0.5.1:
-    resolution: {integrity: sha512-oSYmiUtcMeeMJDITBSp52ro6HGgpszswsV4X7qYQPO7NQVfv6awIWVSkm7zJj8znhxqCiDziur8v3OnxdsnncA==}
+  /@unocss/reset/0.6.1:
+    resolution: {integrity: sha512-GbKViNVaEl+YdGa7kJaBnXYpYgLg3TlXSW2ktptiQgCUdbMZDCPkO80cbr3nlVExjxEAxBR2arJGENh4+CafTg==}
     dev: true
 
-  /@unocss/scope/0.5.1:
-    resolution: {integrity: sha512-KjAOhsOYKFNZfnqYKd+AqJCQ4Wb2Hlix7E509i0dTFhlY43tk0ofsy+NG/2PLst4Xy+HV2d+ToV14jOLXeYTmQ==}
+  /@unocss/scope/0.6.1:
+    resolution: {integrity: sha512-iovbZyykTbqx0/5afR/afYNHsTLFBhn1JNaBx9AncPTVcSX2tRGKae0RXGgoQxbsVcNbls9/tNTz4yAKROtm0w==}
     dev: true
 
-  /@unocss/vite/0.5.1:
-    resolution: {integrity: sha512-Hk+EnjgA6YReyKga0Y2nzTa+ZJJOOhwRnpiUTP9Vi/TW1UH6ARzZ/H66pcMLEfaNgfWPHyHYrB1doXteCV72ZA==}
+  /@unocss/vite/0.6.1:
+    resolution: {integrity: sha512-VG4OkK3o3fQrCMm5XkRi0MsYveNhWuQ8XpVYQXLLciJCiDWIYblPzlm0ZK9u3PwqTmWzC4wXTVW9Q7OBzmCgXQ==}
     dependencies:
       '@rollup/pluginutils': 4.1.1
-      '@unocss/config': 0.5.1
-      '@unocss/core': 0.5.1
-      '@unocss/scope': 0.5.1
+      '@unocss/config': 0.6.1
+      '@unocss/core': 0.6.1
+      '@unocss/scope': 0.6.1
     dev: true
 
   /@vercel/nft/0.17.0:
@@ -6608,16 +6608,16 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss/0.5.1:
-    resolution: {integrity: sha512-6OMaaJEgRvLfwcxiYka0zpf0yNUm0t8QMr+I+sjxKWdar23NNDmO3a5crJj0rgvvaHR1tlOu2nIosw6dRV/Cig==}
+  /unocss/0.6.1:
+    resolution: {integrity: sha512-ygpeYK8Kbu7Vga9UdOps1jA3YWekD42/rzYy4FI+EhRTe5FtZDnhnXVPuSYWamYgVk6WIsVol3cYkPj5wynDkw==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.5.1
-      '@unocss/preset-attributify': 0.5.1
-      '@unocss/preset-icons': 0.5.1
-      '@unocss/preset-uno': 0.5.1
-      '@unocss/reset': 0.5.1
-      '@unocss/vite': 0.5.1
+      '@unocss/core': 0.6.1
+      '@unocss/preset-attributify': 0.6.1
+      '@unocss/preset-icons': 0.6.1
+      '@unocss/preset-uno': 0.6.1
+      '@unocss/reset': 0.6.1
+      '@unocss/vite': 0.6.1
     dev: true
 
   /unpipe/1.0.0: