improve UI

dist/index.css

@@ -185,6 +185,83 @@ main {
   --subtle-luma-dark: 5%;
 }
 
+/* src/aero.css */
+: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);
+}
+
 /* src/View/chatPage.css */
 #chat-page-wrapper {
   display: none;
@@ -402,52 +479,54 @@ body[showing-chat] #chat-page-wrapper {
   width: 100%;
   max-width: var(--max-content-width);
 }
-.message-bubble .main {
+.message-bubble .tile.main {
   display: flex;
   flex-direction: row;
-  background-color: var(--surface);
+  align-items: start;
+  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;
   overflow: hidden;
   width: 100%;
   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;
 }
 .message-bubble[sentbyuser] {
@@ -456,14 +535,14 @@ body[showing-chat] #chat-page-wrapper {
 .message-bubble[sentbyuser] {
   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;
 }
 

dist/index.js

@@ -1311,7 +1311,7 @@
         class: "message-bubble",
         "toggle:sentbyuser": chatMessageViewModel.sentByUser
       },
-      /* @__PURE__ */ createElement("div", { class: "main" }, /* @__PURE__ */ createElement("div", { class: "text-container" }, /* @__PURE__ */ createElement("span", { class: "sender-name ellipsis" }, chatMessageViewModel.sender), /* @__PURE__ */ createElement(
+      /* @__PURE__ */ createElement("div", { class: "main tile" }, /* @__PURE__ */ createElement("div", { class: "text-container" }, /* @__PURE__ */ createElement("span", { class: "sender-name ellipsis" }, chatMessageViewModel.sender), /* @__PURE__ */ createElement(
         "span",
         {
           class: "body",

dist/styles.css

@@ -252,6 +252,9 @@ SIZES
   --gap-in-controls: 1.2rem;
   --large-gap: 2rem;
 
+  /* outline */
+  --outline-width: var(--gap-between-tiles);
+
   /* margin */
   --label-top-padding: 0.25rem;
   --label-tile-top-padding: 0.5rem;
@@ -379,7 +382,7 @@ label.tile:has(input:focus),
 label.tile:has(textarea:focus),
 textarea:focus:not(label.tile *),
 [selected] {
-  outline: var(--gap-between-tiles) solid var(--primary);
+  outline: var(--outline-width) solid var(--primary);
 }
 
 /* border-radius */
@@ -457,7 +460,7 @@ textarea {
   display: inline-flex;
 }
 
-.modal{
+.modal {
   display: none;
 }
 
@@ -1225,4 +1228,4 @@ input[type="checkbox"],
   font-style: normal;
   font-weight: 300;
   src: url("Icons/material-icons.woff") format("woff");
-}
+}

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);
+  }
+