yudejp/yude.jp
1
0
Fork 0
mirror of https://github.com/yudejp/yude.jp.git synced 2025-05-13 07:28:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix text rendering on NOT dark mode

Browse Source
This commit is contained in:
Sumire Isshiki 2024-03-05 09:53:22 +09:00
parent ebb8d9acf6
commit 12da318a24
2 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Chat.tsx
View File

@ -77,7 +77,7 @@ export default function Chat() {
return ( return (
<RecoilRoot> <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"> <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"/> <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> </svg>
@ -85,31 +85,31 @@ export default function Chat() {
{alert} {alert}
</div> </div>
</div> </div>
<div> <div className="text-wrap">
<div className="mb-5"> <div className="mb-5">
<label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">名前</label> <label className="block mb-2 text-sm font-medium 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} /> <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>
<div className="mb-5"> <div className="mb-5">
<label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">本文</label> <label className="block mb-2 text-sm font-medium 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} /> <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> </div>
<button <button
onClick={submit} onClick={submit}
type="button" 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 === ""} disabled={name === "" || body === ""}
> >
<FontAwesomeIcon icon={faPaperPlane} />{" "}送信 <FontAwesomeIcon icon={faPaperPlane} />{" "}送信
</button> </button>
</div> </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 &&
messages.map((message, index) => { messages.map((message, index) => {
return ( 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"> <p className="font-medium opacity-80">
{message.name} さん,{" "} {message.name} さん,{" "}
{ {
@ -117,9 +117,9 @@ export default function Chat() {
} }
</p> </p>
<p className="font-serif text-2xl"> <p className="font-serif text-2xl">
<InlineMath> {message.body.includes("$$") ? <InlineMath>
{message.body} {message.body.replace(/\$\$/g, "")}
</InlineMath> </InlineMath> : <>{message.body}</>}
</p> </p>
</div> </div>
) )

20
src/components/HorizontalMenu.tsx
View File

@ -1,18 +1,10 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 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 { faLink, faKey } from '@fortawesome/free-solid-svg-icons'
import { Pages } from "./VerticalMenu"
import { RecoilRoot, atom, useRecoilState } from 'recoil' 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({ export const currentPage = atom({
key: 'page', key: 'page',
default: Pages.Profile, default: Pages.Profile,
@ -23,7 +15,7 @@ export default function HorizontalMenu() {
return ( return (
<RecoilRoot> <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 <div
className={`self-start py-3 rounded-lg ${page === Pages.Profile ? "bg-slate-700" : ""}`} className={`self-start py-3 rounded-lg ${page === Pages.Profile ? "bg-slate-700" : ""}`}
onClick={() => {setPage(Pages.Profile)}} onClick={() => {setPage(Pages.Profile)}}
@ -48,6 +40,12 @@ export default function HorizontalMenu() {
> >
<FontAwesomeIcon icon={faStar} />{" "} <FontAwesomeIcon icon={faStar} />{" "}
</div> </div>
<div
className={`self-start py-3 rounded-lg ${page === Pages.Chat ? "bg-slate-700" : ""}`}
onClick={() => {setPage(Pages.Chat)}}
>
<FontAwesomeIcon icon={faComments} />{" "}
</div>
</div> </div>
</RecoilRoot> </RecoilRoot>
) )