improve UI

dist/index.css

@@ -185,6 +185,26 @@ main {
   --subtle-luma-dark: 5%;
 }
 
+/* src/coloredTile.css */
+.colored-tile {
+  position: relative;
+  display: flex;
+  align-items: flex-end !important;
+  justify-content: start;
+  overflow: hidden;
+}
+.colored-tile h2 {
+  margin: 0px;
+}
+.colored-tile .shadow {
+  position: absolute;
+  left: -15px;
+  bottom: -45px;
+  font-size: 7rem;
+  opacity: 0.1;
+  white-space: nowrap;
+}
+
 /* src/View/chatPage.css */
 #chat-page-wrapper {
   display: none;
@@ -491,27 +511,6 @@ body[showing-chat] #chat-page-wrapper {
   text-align: right;
 }
 
-/* src/View/Components/chatEntry.css */
-.chat-entry {
-  position: relative;
-  display: flex;
-  align-items: flex-end !important;
-  justify-content: start;
-  height: 8rem;
-  overflow: hidden;
-}
-.chat-entry h2 {
-  margin: 0px;
-}
-.chat-entry .shadow {
-  position: absolute;
-  left: -15px;
-  bottom: -45px;
-  font-size: 6rem;
-  opacity: 0.1;
-  white-space: nowrap;
-}
-
 /* src/View/Components/fileBrowser.css */
 .file-browser {
   width: 100%;

dist/index.js

@@ -1927,7 +1927,15 @@
 
   // src/View/Components/boardEntry.tsx
   function BoardEntry(boardInfo) {
-    const view = /* @__PURE__ */ createElement("button", { color: boardInfo.color, class: "tile" }, /* @__PURE__ */ createElement("b", null, boardInfo.name));
+    const view = /* @__PURE__ */ createElement(
+      "button",
+      {
+        color: boardInfo.color,
+        class: "tile colored-tile"
+      },
+      /* @__PURE__ */ createElement("span", { class: "shadow" }, boardInfo.name),
+      /* @__PURE__ */ createElement("b", null, boardInfo.name)
+    );
     return view;
   }
   var BoardInfoToEntry = (boardInfo) => {
@@ -2484,7 +2492,8 @@
       "button",
       {
         "set:color": chatViewModel.settingsPageViewModel.color,
-        class: "chat-entry tile",
+        class: "tile colored-tile",
+        style: "height: 8rem",
         "on:click": chatViewModel.open
       },
       /* @__PURE__ */ createElement(

src/View/Components/boardEntry.tsx

@@ -1,12 +1,14 @@
-import "./chatEntry.css";
-
 import * as React from "bloatless-react";
 
 import { BoardInfoFileContent } from "../../Model/Files/taskModel";
 
 export function BoardEntry(boardInfo: BoardInfoFileContent) {
   const view = (
-    <button color={boardInfo.color} class="tile">
+    <button
+      color={boardInfo.color}
+      class="tile colored-tile"
+    >
+      <span class="shadow">{boardInfo.name}</span>
       <b>{boardInfo.name}</b>
     </button>
   );

src/View/Components/chatEntry.tsx

@@ -1,5 +1,3 @@
-import "./chatEntry.css";
-
 import * as React from "bloatless-react";
 
 import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
@@ -8,7 +6,8 @@ export function ChatEntry(chatViewModel: ChatViewModel) {
   const view = (
     <button
       set:color={chatViewModel.settingsPageViewModel.color}
-      class="chat-entry tile"
+      class="tile colored-tile"
+      style="height: 8rem"
       on:click={chatViewModel.open}
     >
       <span

src/coloredTile.css

@@ -1,26 +1,24 @@
-.chat-entry {
+.colored-tile {
     position: relative;
 
     display: flex;
     align-items: flex-end !important;
     justify-content: start;
 
-    height: 8rem;
-
     overflow: hidden;
 }
 
-.chat-entry h2 {
+.colored-tile h2 {
     margin: 0px;
 }
 
-.chat-entry .shadow {
+.colored-tile .shadow {
     position: absolute;
 
     left: -15px;
     bottom: -45px;
 
-    font-size: 6rem;
+    font-size: 7rem;
 
     opacity: 0.1;
 

src/index.tsx

@@ -1,5 +1,6 @@
 import "./base.css";
 import "./colors.css";
+import "./coloredTile.css";
 
 import * as React from "bloatless-react";