From 689d1b50325c96aa9bf796b69084042db3ccfe0b Mon Sep 17 00:00:00 2001
From: Philipp Meier <philipp@p-meier.dev>
Date: Fri, 5 Jul 2024 21:34:07 +0200
Subject: [PATCH] fix: Fixed flickering in the dark mode.

---
 .../ClientApp/src/Features/Notes/NoteEditControl.tsx       | 4 ++--
 src/Chrono/ClientApp/src/Features/Notes/NotePage.tsx       | 7 ++++---
 .../src/Features/TaskLists/TaskItemViewControl.tsx         | 7 ++++---
 .../src/Features/TaskLists/TaskListEditControl.tsx         | 5 +++--
 .../ClientApp/src/Features/Tasks/TaskEditControl.tsx       | 4 ++--
 .../ClientApp/src/Shared/Components/NoItemsMessage.tsx     | 5 +++--
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/Chrono/ClientApp/src/Features/Notes/NoteEditControl.tsx b/src/Chrono/ClientApp/src/Features/Notes/NoteEditControl.tsx
index 3009ef9..e4861da 100644
--- a/src/Chrono/ClientApp/src/Features/Notes/NoteEditControl.tsx
+++ b/src/Chrono/ClientApp/src/Features/Notes/NoteEditControl.tsx
@@ -1,5 +1,5 @@
 import {useEffect, useState} from "react";
-import {useNavigate} from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import {Button, Confirm, Container, Dropdown, Form, Icon, Input} from "semantic-ui-react";
 import {Note} from "../../Entities/Note";
 
@@ -146,7 +146,7 @@ const NoteEditControl = (props: {
           </Button.Group>
         </Form.Field>
         <Form.Field>
-          <Button as="a" href="/notes">
+          <Button as={Link} to="/notes">
             <Icon name="list ul"/>
             Back to the list
           </Button>
diff --git a/src/Chrono/ClientApp/src/Features/Notes/NotePage.tsx b/src/Chrono/ClientApp/src/Features/Notes/NotePage.tsx
index 34438a6..4d183a6 100644
--- a/src/Chrono/ClientApp/src/Features/Notes/NotePage.tsx
+++ b/src/Chrono/ClientApp/src/Features/Notes/NotePage.tsx
@@ -3,6 +3,7 @@ import {useEffect, useState} from "react";
 import {Button, Card, Container, Icon} from "semantic-ui-react";
 import {useMediaQuery} from "react-responsive";
 import {GetMyNotesResponse, NotePreview} from "../../Entities/Note";
+import {Link} from "react-router-dom";
 
 // Shared
 import NoItemsMessage from "../../Shared/Components/NoItemsMessage";
@@ -52,7 +53,7 @@ const NotePage = () => {
       <Card key={n.id}>
         <Card.Content>
           <Card.Header className="note-header">
-            <a href={`/notes/${n.id}`}>{n.title}</a>
+            <Link to={`/notes/${n.id}`}>{n.title}</Link>
             <Icon name="map pin" color={n.isPinned ? "blue" : "grey"} size="small" title={n.isPinned ? "Unpin" : "Pin"}
                   onClick={() => togglePinned(n)}/>
           </Card.Header>
@@ -74,8 +75,8 @@ const NotePage = () => {
       >
         <div className="buttons">
           <Button
-            as="a"
-            href={`/notes/add`}
+            as={Link}
+            to={`/notes/add`}
             circular={isMobileOptimized}
             size={isMobileOptimized ? "huge" : undefined}
             icon={isMobileOptimized}
diff --git a/src/Chrono/ClientApp/src/Features/TaskLists/TaskItemViewControl.tsx b/src/Chrono/ClientApp/src/Features/TaskLists/TaskItemViewControl.tsx
index e81c6f4..697510d 100644
--- a/src/Chrono/ClientApp/src/Features/TaskLists/TaskItemViewControl.tsx
+++ b/src/Chrono/ClientApp/src/Features/TaskLists/TaskItemViewControl.tsx
@@ -5,6 +5,7 @@ import SyntaxHighlighter from "react-syntax-highlighter"
 import {dracula} from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import {Task} from "../../Entities/Task";
 import {Category} from "../../Entities/Category";
+import {Link} from "react-router-dom";
 
 // Shared
 import IconLabel from "../../Shared/Components/IconLabel";
@@ -31,13 +32,13 @@ const TaskItemViewControl = (props: { task: Task; moveUp?: any; moveDown?: any }
             <IconLabel
               text={(!isMobileOptimized ? "No.: " : "#") + props.task.position}
             />
-            <a
-              href={`/lists/${props.task.listId}/tasks/${props.task.id}`}
+            <Link
+              to={`/lists/${props.task.listId}/tasks/${props.task.id}`}
               className="task-name"
               style={{marginLeft: "0.25em"}}
             >
               {props.task.name}
-            </a>
+            </Link>
           </Container>
           {!props.task.done && (
             <Container className="actions" textAlign="right">
diff --git a/src/Chrono/ClientApp/src/Features/TaskLists/TaskListEditControl.tsx b/src/Chrono/ClientApp/src/Features/TaskLists/TaskListEditControl.tsx
index 4029447..0d7ac95 100644
--- a/src/Chrono/ClientApp/src/Features/TaskLists/TaskListEditControl.tsx
+++ b/src/Chrono/ClientApp/src/Features/TaskLists/TaskListEditControl.tsx
@@ -7,6 +7,7 @@ import type {Task} from "../../Entities/Task";
 import type {TaskList, TaskListBrief} from "../../Entities/TaskList";
 import type {Category} from "../../Entities/Category";
 import {UserSettings} from "../../Entities/User";
+import {Link} from "react-router-dom";
 
 // Shared
 import NoItemsMessage from "../../Shared/Components/NoItemsMessage";
@@ -170,8 +171,8 @@ const TaskListEditControl = (props: { taskListId: number }) => {
         </div>
         <div className="buttons">
           <Button
-            as="a"
-            href={`/lists/${taskList?.id}/tasks/add`}
+            as={Link}
+            to={`/lists/${taskList?.id}/tasks/add`}
             circular={isMobileOptimized}
             size={isMobileOptimized ? "huge" : undefined}
             icon={isMobileOptimized}
diff --git a/src/Chrono/ClientApp/src/Features/Tasks/TaskEditControl.tsx b/src/Chrono/ClientApp/src/Features/Tasks/TaskEditControl.tsx
index 033adac..5247bde 100644
--- a/src/Chrono/ClientApp/src/Features/Tasks/TaskEditControl.tsx
+++ b/src/Chrono/ClientApp/src/Features/Tasks/TaskEditControl.tsx
@@ -1,6 +1,6 @@
 import "./TaskEditControl.less";
 import {useEffect, useState} from "react";
-import {useNavigate} from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import {Button, Confirm, Container, Dropdown, Form, Icon, Input} from "semantic-ui-react";
 import TaskCategoryEditControl from "./TaskCategoryEditControl";
 import {Task} from "../../Entities/Task";
@@ -240,7 +240,7 @@ const TaskEditControl = (props: {
           </Form.Field>
         )}
         <Form.Field>
-          <Button as="a" href={`/lists/${props.listId}`}>
+          <Button as={Link} to={`/lists/${props.listId}`}>
             <Icon name="list ul"/>
             Back to the list
           </Button>
diff --git a/src/Chrono/ClientApp/src/Shared/Components/NoItemsMessage.tsx b/src/Chrono/ClientApp/src/Shared/Components/NoItemsMessage.tsx
index 0a642fd..e74791f 100644
--- a/src/Chrono/ClientApp/src/Shared/Components/NoItemsMessage.tsx
+++ b/src/Chrono/ClientApp/src/Shared/Components/NoItemsMessage.tsx
@@ -1,4 +1,5 @@
 import {Button, Header, Icon, Segment} from "semantic-ui-react";
+import {Link} from "react-router-dom";
 
 type NoItemsMessageButton = {
   text: string;
@@ -18,8 +19,8 @@ const NoItemsMessage = (props: {
       {props.buttonOptions &&
           <Button
               primary
-              as="a"
-              href={props.buttonOptions.href}>
+              as={Link}
+              to={props.buttonOptions.href}>
             {props.buttonOptions.text}
           </Button>
       }