improve UI

src/View/ChatPages/messagePage.css

@@ -78,18 +78,19 @@
   max-width: var(--max-content-width);
 }
 
-.message-bubble .main {
+.message-bubble .tile.main {
   display: flex;
   flex-direction: row;
+  align-items: start;
 
-  background-color: var(--surface);
+  padding: 0px;
 
   width: 100%;
   max-width: var(--max-input-width);
   overflow: hidden;
 }
 
-.message-bubble .main .text-container {
+.message-bubble .tile.main .text-container {
   display: flex;
   flex-direction: column;
 
@@ -99,46 +100,48 @@
   flex: 1;
 }
 
-.message-bubble .main .button-container {
+.message-bubble .tile.main .button-container {
   display: flex;
-  align-items: start;
+
+  width: var(--control-height);
+  max-width: var(--control-height);
 }
 
-.message-bubble .main button {
+.message-bubble .tile.main button {
   justify-content: center;
 
   padding: 0px;
-  width: var(--control-height);
+  width: 100%;
 
   --surface: transparent;
 }
 
-.message-bubble .main .text-container {
+.message-bubble .tile.main .text-container {
   padding: var(--control-padding);
 }
 
-.message-bubble .main .timestamp,
-.message-bubble .main .timestamp .icon,
-.message-bubble .main .sender-name {
+.message-bubble .tile.main .timestamp,
+.message-bubble .tile.main .timestamp .icon,
+.message-bubble .tile.main .sender-name {
   font-size: 0.8rem;
   opacity: 0.6;
 }
 
-.message-bubble .main .timestamp {
+.message-bubble .tile.main .timestamp {
   display: flex;
   align-items: center;
   gap: var(--gap-between-tiles);
 }
 
-.message-bubble .main .timestamp .icon {
+.message-bubble .tile.main .timestamp .icon {
   display: none;
 }
 
-.message-bubble .main .sender-name {
+.message-bubble .tile.main .sender-name {
   font-weight: bold;
 }
 
-.message-bubble .main .body {
+.message-bubble .tile.main .body {
   word-break: break-word;
 }
 
@@ -150,15 +153,15 @@
   align-items: flex-end;
 }
 
-.message-bubble[sentbyuser] .main,
-.message-bubble[sentbyuser] .main .timestamp {
+.message-bubble[sentbyuser] .tile.main,
+.message-bubble[sentbyuser] .tile.main .timestamp {
   flex-direction: row-reverse;
 }
 
-.message-bubble[sentbyuser] .main .timestamp .icon {
+.message-bubble[sentbyuser] .tile.main .timestamp .icon {
   display: flex;
 }
 
-.message-bubble[sentbyuser] .main span {
+.message-bubble[sentbyuser] .tile.main span {
   text-align: right;
-}
+}

src/View/Components/chatMessage.tsx

@@ -32,7 +32,7 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
       class="message-bubble"
       toggle:sentbyuser={chatMessageViewModel.sentByUser}
     >
-      <div class="main">
+      <div class="main tile">
         <div class="text-container">
           <span class="sender-name ellipsis">
             {chatMessageViewModel.sender}
@@ -46,6 +46,7 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
             {chatMessageViewModel.dateSent}
           </span>
         </div>
+        
         <div class="button-container">
           <button
             on:click={openModal}

src/aero.css

@@ -0,0 +1,86 @@
+/*
+AERO
+*/
+:root {
+    --primary: hsl(220, 100%, 90%);
+    --primary-hover: hsl(220, 100%, 88%);
+    --primary-active: hsl(220, 100%, 85%);
+    --text-on-color: black;
+
+    --surface: hsla(220, 30%, 90%, 50%);
+    --surface-hover: hsla(220, 30%, 85%, 50%);
+    --surface-active: hsla(220, 30%, 80%, 50%);
+  
+    --control-height: 2rem;
+    --outline-width: 2px;
+  }
+  
+  .gap {
+    gap: 0px !important;
+  }
+  
+  .flex-row :is(button, input, .tile):not(:last-child) {
+    margin-right: var(--gap-between-tiles);
+  }
+  
+  .flex-column :is(button, input, .tile):not(:last-child) {
+    margin-bottom: var(--gap-between-tiles);
+  }
+  
+  button,
+  input,
+  select,
+  textarea,
+  .tile {
+    border-radius: 5px;
+  }
+  
+  button,
+  input,
+  select,
+  textarea {
+    font-size: 0.9rem;
+  }
+  
+  button .icon {
+    font-size: 1.1rem;
+  }
+  
+  .modal > div {
+    border-radius: 7px;
+  }
+  
+  :is(input, select):not(.tile *),
+  button,
+  .tile {
+    position: relative;
+    border: 1px solid var(--border);
+  }
+  
+  :is(input, select):not(.tile *)::before,
+  button::before,
+  .tile::before {
+    content: "";
+  
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+  
+    opacity: 0.25;
+  
+    pointer-events: none;
+  }
+  
+  :is(input, select):not(.tile *)::before,
+  button::before,
+  .tile:has(select)::before {
+    background: linear-gradient(#b7b7b7, #fff 45%, #bdbdbd 70%, #eee);
+  }
+  
+  :is(input):not(.tile *)::before,
+  .tile:has(input)::before {
+    background: linear-gradient(#d8d8d8, #bdbdbd 35%, #eee);
+  }
+