improve UI

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.css

@@ -1,28 +0,0 @@
-.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/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