From 224c00c8d8e89832ddf890b9e9edbccfcd4dfd41 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Tue, 23 Jul 2024 00:09:39 +0200
Subject: [PATCH] improve UI

---
 dist/index.css                                | 41 +++++++++----------
 dist/index.js                                 | 13 +++++-
 src/View/Components/boardEntry.tsx            |  8 ++--
 src/View/Components/chatEntry.tsx             |  5 +--
 .../chatEntry.css => coloredTile.css}         | 10 ++---
 src/index.tsx                                 |  1 +
 6 files changed, 43 insertions(+), 35 deletions(-)
 rename src/{View/Components/chatEntry.css => coloredTile.css} (73%)

diff --git a/dist/index.css b/dist/index.css
index f5f9d4db..841602e4 100644
--- a/dist/index.css
+++ b/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%;
diff --git a/dist/index.js b/dist/index.js
index f358b9cb..e9192fb7 100644
--- a/dist/index.js
+++ b/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(
diff --git a/src/View/Components/boardEntry.tsx b/src/View/Components/boardEntry.tsx
index 559017e9..33695a87 100644
--- a/src/View/Components/boardEntry.tsx
+++ b/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>
   );
diff --git a/src/View/Components/chatEntry.tsx b/src/View/Components/chatEntry.tsx
index 2858a79c..7547649c 100644
--- a/src/View/Components/chatEntry.tsx
+++ b/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
diff --git a/src/View/Components/chatEntry.css b/src/coloredTile.css
similarity index 73%
rename from src/View/Components/chatEntry.css
rename to src/coloredTile.css
index 6c75370a..2d64aa70 100644
--- a/src/View/Components/chatEntry.css
+++ b/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;
 
diff --git a/src/index.tsx b/src/index.tsx
index 89089a9c..b9001d10 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,6 @@
 import "./base.css";
 import "./colors.css";
+import "./coloredTile.css";
 
 import * as React from "bloatless-react";