From 12da318a2489221060ef40882d8926268f38852d Mon Sep 17 00:00:00 2001
From: yude <i@yude.jp>
Date: Tue, 5 Mar 2024 09:53:22 +0900
Subject: [PATCH] Fix text rendering on NOT dark mode

---
 src/components/Chat.tsx           | 24 ++++++++++++------------
 src/components/HorizontalMenu.tsx | 20 +++++++++-----------
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 1eea873..14fea2f 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -77,7 +77,7 @@ export default function Chat() {
 
     return (
         <RecoilRoot>
-            <div className={`w-1/2 absolute flex items-center p-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600${alert === "" ? ` hidden` : ``}`} role="alert">
+            <div className={`w-1/2 absolute flex items-center p-4 text-sm border border-gray-300 rounded-lg bg-gray-800 text-gray-300 border-gray-600${alert === "" ? ` hidden` : ``}`} role="alert">
                 <svg className="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                 </svg>
@@ -85,31 +85,31 @@ export default function Chat() {
                     {alert}
                 </div>
             </div>
-            <div>
+            <div className="text-wrap">
                 <div className="mb-5">
-                    <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">名前</label>
-                    <input type="text" id="name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value={name} onChange={updateName} />
+                    <label className="block mb-2 text-sm font-medium text-white">名前</label>
+                    <input type="text" id="name" className="block p-4 border rounded-lg text-base bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" value={name} onChange={updateName} />
                 </div>
                 <div className="mb-5">
-                    <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">本文</label>
-                    <input type="text" id="body" className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-blue-500 dark:focus:border-blue-500" value={body} onChange={updateBody} />
+                    <label className="block mb-2 text-sm font-medium text-white">本文</label>
+                    <input type="text" id="body" className="block p-4 border rounded-lg text-base bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" value={body} onChange={updateBody} />
                 </div>
                 <button
                     onClick={submit}
                     type="button"
-                    className={`text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800${ name === "" || body === "" ? " opacity-20" : ""}`}
+                    className={`text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-blue-600 hover:bg-blue-700 focus:ring-blue-800${ name === "" || body === "" ? " opacity-20" : ""}`}
                     disabled={name === "" || body === ""}
                 >
                     <FontAwesomeIcon icon={faPaperPlane} />{" "}送信
                 </button>
             </div>
 
-            <div className="overflow-auto max-h-96 mt-5 rounded-lg">
+            <div className="overflow-auto max-h-96 mt-5 rounded-lg max-w-2xl">
             {
                 messages &&
                 messages.map((message, index) => {
                     return (
-                        <div key={index} className="p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 mb-2">
+                        <div key={index} className="p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 mb-2">
                             <p className="font-medium opacity-80">
                                 {message.name} さん,{" "}
                                 {
@@ -117,9 +117,9 @@ export default function Chat() {
                                 }
                             </p>
                             <p className="font-serif text-2xl">
-                                <InlineMath>
-                                    {message.body}
-                                </InlineMath>
+                                {message.body.includes("$$") ? <InlineMath>
+                                    {message.body.replace(/\$\$/g, "")}
+                                </InlineMath> : <>{message.body}</>}
                             </p>
                         </div>
                     )
diff --git a/src/components/HorizontalMenu.tsx b/src/components/HorizontalMenu.tsx
index 3cd0e07..11f44fa 100644
--- a/src/components/HorizontalMenu.tsx
+++ b/src/components/HorizontalMenu.tsx
@@ -1,18 +1,10 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUser, faStar} from '@fortawesome/free-regular-svg-icons'
+import { faUser, faStar, faComments } from '@fortawesome/free-regular-svg-icons'
 import { faLink, faKey } from '@fortawesome/free-solid-svg-icons'
+import { Pages } from "./VerticalMenu"
 
 import { RecoilRoot, atom, useRecoilState } from 'recoil'
 
-export enum Pages {
-    Profile = 0,
-    Links = 1,
-    Keys = 2,
-    Activities = 3,
-    Spotify = 4,
-    Services = 5,
-  }
-
 export const currentPage = atom({
     key: 'page',
     default: Pages.Profile,
@@ -23,7 +15,7 @@ export default function HorizontalMenu() {
 
     return (
       <RecoilRoot>
-        <div className="text-lg font-medium text-center hover:cursor-pointer grid grid-cols-4 grid-flow-col">
+        <div className="text-lg font-medium text-center hover:cursor-pointer grid grid-cols-5 grid-flow-col">
             <div
                 className={`self-start py-3 rounded-lg ${page === Pages.Profile ? "bg-slate-700" : ""}`}
                 onClick={() => {setPage(Pages.Profile)}}
@@ -48,6 +40,12 @@ export default function HorizontalMenu() {
             >
                 <FontAwesomeIcon icon={faStar} />{" "}
             </div>
+            <div
+                className={`self-start py-3 rounded-lg ${page === Pages.Chat ? "bg-slate-700" : ""}`}
+                onClick={() => {setPage(Pages.Chat)}}
+            >
+                <FontAwesomeIcon icon={faComments} />{" "}
+            </div>
         </div>
       </RecoilRoot>
     )