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.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";