feature: replace css with tailwind

tyr-rust-bootcamp · Aug 24, 2024 · cca5608 · cca5608
1 parent dd21644
commit cca5608
Show file tree

Hide file tree

Showing 15 changed files with 904 additions and 634 deletions.
diff --git a/index.html b/index.html
@@ -5,11 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Slack-like Chat UI</title>
-    <!-- Add Google Font -->
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
-      rel="stylesheet"
-    />
+    <!-- Inter font from Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
   </head>
 
   <body>

diff --git a/package.json b/package.json
@@ -21,6 +21,9 @@
   "devDependencies": {
     "@tauri-apps/cli": ">=2.0.0-rc.0",
     "@vitejs/plugin-vue": "^5.0.5",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
     "vite": "^5.3.1"
   }
 }
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+    ]
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,22 +1,11 @@
 <template>
-  <router-view />
+  <div class="h-full flex flex-col overflow-hidden">
+    <router-view />
+  </div>
 </template>
 
 <script>
 export default {
   name: 'App',
 };
 </script>
-
-<style>
-html, body, #app {
-  height: 100%;
-  margin: 0;
-  overflow: hidden; /* Prevent scrolling */
-}
-
-#app {
-  display: flex;
-  flex-direction: column;
-}
-</style>
diff --git a/src/assets/styles.css b/src/assets/styles.css
@@ -1,35 +1 @@
 /* Apply the Inter font globally */
-body {
-  font-family: 'Inter', sans-serif;
-  background-color: #f5f5f5;
-  color: #333;
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-size: 16px;
-  line-height: 1.5;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 600;
-}
-
-button,
-input {
-  font-family: inherit;
-  font-size: 16px;
-}
-
-a {
-  text-decoration: none;
-  color: inherit;
-}
-
-#app {
-  height: 100%;
-}
diff --git a/src/components/MessageList.vue b/src/components/MessageList.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="message-list">
-    <div v-if="messages.length === 0" class="no-messages">
+  <div class="flex-1 overflow-y-auto p-5">
+    <div v-if="messages.length === 0" class="text-center text-gray-400 mt-5">
       No messages in this channel yet.
     </div>
     <div v-else>
-      <div v-for="message in messages" :key="message.id" class="message">
-        <img :src="`https://ui-avatars.com/api/?name=${getSender(message.senderId).fullname.replace(' ', '+')}`" class="avatar" alt="Avatar" />
-        <div class="message-content">
-          <div class="message-header">
-            <span class="message-user">{{ getSender(message.senderId).fullname }}</span>
-            <span class="message-time">{{ formatTime(message.createdAt) }}</span>
+      <div v-for="message in messages" :key="message.id" class="flex items-start mb-5">
+        <img :src="`https://ui-avatars.com/api/?name=${getSender(message.senderId).fullname.replace(' ', '+')}`" class="w-10 h-10 rounded-full mr-3" alt="Avatar" />
+        <div class="max-w-4/5">
+          <div class="flex items-center mb-1">
+            <span class="font-bold mr-2">{{ getSender(message.senderId).fullname }}</span>
+            <span class="text-xs text-gray-500">{{ formatTime(message.createdAt) }}</span>
           </div>
-          <div class="message-text">{{ message.content }}</div>
+          <div class="text-sm leading-relaxed break-words whitespace-pre-wrap">{{ message.content }}</div>
         </div>
       </div>
     </div>
@@ -58,60 +58,3 @@ export default {
   }
 };
 </script>
-
-<style scoped>
-/* Container styling */
-.message-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-/* Individual message styling */
-.message {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 20px;
-}
-
-.avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  margin-right: 10px;
-}
-
-.message-content {
-  max-width: 80%;
-}
-
-/* Header styling: username and timestamp */
-.message-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 5px;
-}
-
-.message-user {
-  font-weight: bold;
-  margin-right: 10px;
-}
-
-.message-time {
-  font-size: 12px;
-}
-
-/* Message text styling */
-.message-text {
-  font-size: 14px;
-  line-height: 1.4;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.no-messages {
-  text-align: center;
-  color: #b9bbbe;
-  margin-top: 20px;
-}
-</style>
diff --git a/src/components/MessageSend.vue b/src/components/MessageSend.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="message-send">
+  <div class="flex items-center p-4 bg-white border-t border-gray-200">
     <input
       v-model="message"
       @keyup.enter="sendMessage"
       placeholder="Type a message..."
-      class="message-input"
+      class="flex-1 px-4 py-3 mr-2 text-sm bg-gray-100 border-none rounded-lg focus:outline-none"
       type="text"
     />
-    <button @click="sendMessage" class="send-button">
+    <button @click="sendMessage" class="p-2 text-white bg-blue-600 rounded-full hover:bg-blue-700 focus:outline-none">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="icon"
+        class="w-5 h-5"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -66,52 +66,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-/* Container styling */
-.message-send {
-  display: flex;
-  align-items: center;
-  padding: 10px 0px;
-  background-color: #fff;
-  border-top: 1px solid #eee;
-}
-
-/* Input field styling */
-.message-input {
-  flex: 1;
-  padding: 12px 12px;
-  border: none;
-  border-radius: 10px;
-  background-color: #eee;
-  font-size: 14px;
-  margin: 0px 10px;
-}
-
-.message-input::placeholder {
-  color: #72767d;
-}
-
-/* Send button styling */
-.send-button {
-  background-color: #5865f2;
-  border: none;
-  border-radius: 50%;
-  padding: 10px;
-  margin-right: 5px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-}
-
-.send-button .icon {
-  width: 20px;
-  height: 20px;
-}
-
-.send-button:hover {
-  background-color: #4752c4;
-}
-</style>