Merge pull request #5 from zzzi-ori/event-ui-2.0

Event UI 2.0

src/components/ZInput.vue

@@ -47,7 +47,7 @@ const style = cva(
     variants: {
       filled: {
         true: '',
-        false: 'border-dark-green',
+        false: 'border-transBlack-15',
       },
       disabled: {
         true: 'bg-[#D4FFE6] border-dark-green text-dark-gray',
@@ -57,3 +57,15 @@ const style = cva(
   },
 )
 </script>
+<style scoped>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+</style>

src/components/button/ZButton.vue

@@ -1,38 +1,38 @@
 <template>
   <button :class="style({disabled, color})" :disabled="disabled">
-    <LeftLine/>
-    <slot/>
-    <RightLine/>
+    <LeftLine />
+    <slot />
+    <RightLine />
   </button>
 </template>
 <script setup lang="ts">
-import {cva} from 'class-variance-authority'
-import {PropType} from 'vue'
+import { cva } from 'class-variance-authority'
+import { PropType } from 'vue'
 import LeftLine from '../../components/button/_assets/LeftLine.vue'
 import RightLine from '../../components/button/_assets/RightLine.vue'
 
 defineProps({
-  disabled: {type: Boolean, default: false},
-  color: {type: String as PropType<ButtonColor>, default: 'primary'}
+  disabled: { type: Boolean, default: false },
+  color: { type: String as PropType<ButtonColor>, default: 'primary' },
 })
 
 type ButtonColor = 'primary' | 'secondary'
 
 const style = cva(
   [
     'text-black text-body-b',
-    'flex justify-between w-full rounded-[8px] px-[12px] py-[11px] border-2'
+    'flex justify-between w-full rounded-[8px] px-[12px] py-[11px] border-2',
   ]
   , {
     variants: {
       disabled: {
-        true: 'border-dark-green text-dark-green bg-green',
-        false: 'border-black'
+        true: 'border-transBlack-15 text-transBlack-15 bg-transBlack-10',
+        false: 'border-black',
       },
       color: {
         'primary': 'bg-[#FCBF31]',
-        'secondary': 'bg-green'
-      }
+        'secondary': 'bg-green',
+      },
     },
   })
 </script>

src/pages/play/PlayPage.vue

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import NextBlock from './_components/NextBlock.vue'
-import GameOver from './_components/GameOver.vue'
+import GameOver from './game-over/GameOver.vue'
 import Ground from './_components/Ground.vue'
 import Score from './_components/Score.vue'
 import { usePlayer } from '../../hooks/use-player.ts'