Better input

views/layouts/main.html

@@ -7,6 +7,7 @@
     <title>JADE 2.0</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
 
     <style>
         body,
@@ -27,24 +28,24 @@
             padding: 10px;
         }
 
-        .chat-input-container .field.has-addons {
+        .textarea-wrapper {
+            position: relative;
+        }
+
+        .textarea {
             width: 100%;
-            /* Ensure the field container takes full width */
-        }
-
-        .chat-input-container form.control.is-expanded {
-            flex-grow: 1;
-            /* Make the form (input container) grow to fill available space */
-        }
-
-        .image.is-32x32 {
-            width: 32px;
-            height: 32px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
+            padding-right: 140px;
+            /* Adjust this value based on the button and dropdown width */
             box-sizing: border-box;
-            border-radius: 6px;
+        }
+
+        .button-group {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
     </style>
 </head>
@@ -73,6 +74,14 @@
     <!-- Style stuff -->
 
     <style>
+        svg text {
+            font-family: 'Russo One', sans-serif;
+            text-transform: uppercase;
+            fill: #000;
+            stroke: #000;
+            font-size: 240px;
+        }
+
         .message-content {
             background-color: #303030;
             border-radius: 5px;