improve UI

src/View/translations.ts

@@ -54,7 +54,7 @@ const englishTranslations = {
 
     homePage: {
         appName: "Coordination Tool",
-	greeting: (name: string) => `Hi ${name}!`,
+	greeting: (name: string) => `Hi ${name}`,
 
         ///
 

src/ViewModel/Global/coreViewModel.ts

@@ -52,12 +52,23 @@ export default class CoreViewModel {
         )
             return;
 
+	let exitNext: boolean = false;
+
         while (this.contexts.length > 0) {
             const currentContext: Context | undefined = this.context;
             if (!currentContext) return;
-            currentContext.handleContextClose(fromHistoryEvent);
+            const response = currentContext.handleContextClose(fromHistoryEvent);
+	    if (response == false) return;
             this.contextStack.delete(currentContext.contextId);
-            if (currentContext.contextId == contextId) break;
+	    if (response == true) {
+		exitNext = true;
+		continue;
+	    } else if (exitNext == true) {
+		break
+	    }
+	    else if (currentContext.contextId == contextId) {
+		break;
+	    }
         }
     };
 
@@ -196,7 +207,7 @@ export class Context {
     };
 
     close = (): void => {};
-    handleContextClose = (fromHistoryEvent: boolean): void => {};
+    handleContextClose = (fromHistoryEvent: boolean): void|boolean=> {};
 
     registerKeyStroke = (key: string, fn: () => void): void => {
         this.keystrokes.set(key, fn);

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -219,6 +219,12 @@ export default class CalendarPageViewModel extends TaskContainingPageViewModel {
     };
 
     loadData = (): void => {};
+    
+    // context
+    handleContextClose = (fromHistoryEvent: boolean): void | boolean => {
+	if (!fromHistoryEvent) return;
+	return true;
+    }
 
     // init
     constructor(

src/ViewModel/Pages/messagePageViewModel.ts

@@ -196,6 +196,13 @@ export default class MessagePageViewModel extends Context {
             this.setReactionFilter(previousFilter);
     };
 
+    // context
+    handleContextClose = (fromHistoryEvent: boolean):boolean=> {
+	if (this.replyViewSelectedMessage.value == undefined && fromHistoryEvent) return true;
+	this.resetReplyView();
+	return false;
+    }
+
     // init
     constructor(
         public readonly coreViewModel: CoreViewModel,

src/ViewModel/Pages/taskPageViewModel.ts

@@ -165,6 +165,12 @@ export default class TaskPageViewModel extends ContextHost<string> {
         this.updateBoardIndices();
         this.openLastUsedBoard();
     };
+    
+    // context
+    handleContextClose = (fromHistoryEvent: boolean): void | boolean => {
+	if (!fromHistoryEvent) return;
+	return true;
+    }
 
     // init
     constructor(

src/base.css

@@ -9,9 +9,7 @@
 /* Gradient */
 #background-wrapper {
     position: fixed;
-    inset: -80px;
-
-    filter: blur(40px);
+    inset: 0px;
 
     z-index: 1;
     pointer-events: none;
@@ -25,14 +23,20 @@ main {
     z-index: 2;
 }
 
-#background-wrapper div {
-    content: "";
-
+#background-wrapper > div {
     position: absolute;
-    inset: 0px;
+    inset: -100px;
 
     z-index: -1;
     pointer-events: none;
+    
+    opacity: .3;
+}
+
+#background-wrapper > div > div {
+    position: absolute;
+    inset: 0px;
+    filter: blur(80px);
 }
 
 #background-wrapper #sky {
@@ -40,8 +44,6 @@ main {
     bottom: -50%;
 
     background-image: radial-gradient(var(--sky-1), var(--sky-2));
-
-    opacity: 0.4;
 }
 
 body {
@@ -55,13 +57,12 @@ body {
     --color-2: hsl(37.43, 88.75%, 53.58%);
 
     filter: var(--backdrop-grass-filter);
-    opacity: 0.3;
 
     background-image: linear-gradient(
         350deg,
         var(--color-1),
         var(--color-2) 30%,
-        transparent 40%
+        transparent 50%
     );
 }
 
@@ -70,17 +71,16 @@ body {
     --color-2: hsl(110, 60%, 35%);
 
     filter: var(--backdrop-grass-filter);
-    opacity: 0.3;
 
     background-image: linear-gradient(
         9deg,
         var(--color-1),
         var(--color-2) 30%,
-        transparent 35%
+        transparent 45%
     );
 }
 
-body[theme="dark"] #background-wrapper {
+body[theme="dark"] #background-wrapper > div {
     opacity: 0.5;
 }
 

src/index.tsx

@@ -85,30 +85,32 @@ chatListViewModel.selectedChat.subscribe(() => {
 
 document.body.append(
     <div id="background-wrapper">
-        <div id="sky"></div>
-        <div id="grass-1"></div>
-        <div id="grass-2"></div>
+	<div>
+	    <div id="sky"></div>
+	    <div id="grass-1"></div>
+	    <div id="grass-2"></div>
+	</div>
     </div>,
 );
 document
     .querySelector("main")!
     .append(
-        HomePage(
-            coreViewModel,
-            storageViewModel,
-            settingsViewModel,
-            connectionViewModel,
-            fileTransferViewModel,
-            chatListViewModel,
-        ),
-        ChatPageWrapper(coreViewModel, chatListViewModel),
-        OnboardingModalWrapper(coreViewModel, onboardingViewModel),
-        ConnectionModal(coreViewModel, connectionViewModel),
-        DataTransferModalWrapper(
-            coreViewModel,
-            connectionViewModel,
-            fileTransferViewModel,
-        ),
-        StorageModal(coreViewModel, storageViewModel),
-        SettingsModal(coreViewModel, settingsViewModel),
+	HomePage(
+	    coreViewModel,
+	    storageViewModel,
+	    settingsViewModel,
+	    connectionViewModel,
+	    fileTransferViewModel,
+	    chatListViewModel,
+	),
+	ChatPageWrapper(coreViewModel, chatListViewModel),
+	OnboardingModalWrapper(coreViewModel, onboardingViewModel),
+	ConnectionModal(coreViewModel, connectionViewModel),
+	DataTransferModalWrapper(
+	    coreViewModel,
+	    connectionViewModel,
+	    fileTransferViewModel,
+	),
+	StorageModal(coreViewModel, storageViewModel),
+	SettingsModal(coreViewModel, settingsViewModel),
     );