From 5e9814fe924cc3319400411ff8e9c31e6ff1e5f4 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Fri, 5 Jul 2024 00:01:45 +0200
Subject: [PATCH] Convert chat to tailwind

---
 src/components/gui/Chat.vue | 34 +++-------------------------------
 1 file changed, 3 insertions(+), 31 deletions(-)

diff --git a/src/components/gui/Chat.vue b/src/components/gui/Chat.vue
index b3d97ee..6c27211 100644
--- a/src/components/gui/Chat.vue
+++ b/src/components/gui/Chat.vue
@@ -1,43 +1,15 @@
 <template>
-  <div class="chat-wrapper">
-    <input placeholder="Type something..." />
+  <div class="chat-wrapper w-full h-full flex justify-start items-center">
+    <input class="max-w-[750px] w-full h-[51px] rounded-lg text-xl px-[24px] py-0 bg-white bg-opacity-85 border-2 border-solid border-white text-gray-200 bg-[url('/assets/icons/submit-icon.svg')] bg-no-repeat bg-30px" placeholder="Type something..." />
   </div>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped lang="scss">
-@import '@/assets/scss/main';
 
 .chat-wrapper {
-  width: 100%;
-  height: 100px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
   input {
-    max-width: 750px;
-    width: 100%;
-    height: 51px;
-    border-radius: 8px;
-    font-size: 1.2rem;
-    padding: 0 24px;
-    background-color: rgba($white, 0.85);
-    border: 2px solid $white;
-    color: $gray-2;
-    background-image: url('/assets/icons/submit-icon.svg');
-    background-repeat: no-repeat;
-    background-size: 30px;
+    // @TODO: find Tailwind alternative as calc() doesnt work
     background-position: calc(100% - 25px) center;
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: 500px;
-      width: 30px;
-      height: 30px;
-    }
   }
 }
 </style>