breekachuchan/chat
1
0
Fork 0
forked from lamp/chat
Code Pull Requests Activity

theme override

Browse Source
This commit is contained in:
Lamp 2022-09-25 00:21:16 -05:00
parent 2ad4a05527
commit 96c670e39f
2 changed files with 21 additions and 20 deletions

40
app/src/App.js

@ -10,22 +10,17 @@ var BASE_URL = window.location.hostname === "localhost" ? "http://localhost:8535
function App() {
var [user, _setUser] = useState(localStorage.user ? JSON.parse(localStorage.user) : {
uuid: uuidv1()
});
var [user, _setUser] = useState(localStorage.user ? JSON.parse(localStorage.user) : {uuid: uuidv1()});
var setUser = u => { _setUser(u); localStorage.user = JSON.stringify(u); }
function setUser(u) {
_setUser(u);
localStorage.user = JSON.stringify(u);
}
if (!user.uuid) {
setUser(Object.assign(user, {uuid: uuidv1()}));
}
var [theme, _setTheme] = useState(localStorage.theme);
var setTheme = theme => { _setTheme(theme); localStorage.theme = theme; }
return <div className="App h-full dark:bg-black dark:text-white">
{user.name ? <Chat user={user} setUser={setUser} /> : <InitPage setUser={setUser} />}
return <div className={(theme === "dark" || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) ? "dark" : ""}>
<div className="h-full dark:bg-black dark:text-white">
{user.name ? <Chat user={user} setUser={setUser} theme={theme} setTheme={setTheme} /> : <InitPage setUser={setUser} />}
</div>
</div>
}
export default App;
@ -34,7 +29,7 @@ export default App;
function Chat({user, setUser}) {
function Chat({user, setUser, theme, setTheme}) {
var [messages, setMessages] = useState([]);
var [users, setUsers] = useState([]);
@ -82,7 +77,7 @@ function Chat({user, setUser}) {
<UserList users={users} updateUser={updateUser} user={user} socket={socket} />
<ProgressBar progress={progress} />
<ChatInput sendMessage={sendMessage} user={user} updateUser={updateUser} setSettingsModalOpen={setSettingsModalOpen} socket={socket} setProgress={setProgress} />
<SettingsModal open={settingsModalOpen} setOpen={setSettingsModalOpen} user={user} updateUser={updateUser} />
<SettingsModal open={settingsModalOpen} setOpen={setSettingsModalOpen} user={user} updateUser={updateUser} theme={theme} setTheme={setTheme} />
</div>
)
}
@ -198,7 +193,7 @@ function ChatInput({sendMessage, user, updateUser, setSettingsModalOpen, socket,
t = t === "image" ? "img" : t === "video" ? "video" : t === "audio" ? "audio" : "file";
return `[${t}:${code}/${name}]`
}).join(" ");
setContent(content + ' ' + codes);
setContent(content => content + ' ' + codes);
}
return <div className='ChatInput'>
<form className="flex flex-row" onSubmit={onSubmit}>
@ -288,7 +283,7 @@ function UserList({users, updateUser, user: myUser, socket}) {
function SettingsModal({open, setOpen, user, updateUser}) {
function SettingsModal({open, setOpen, user, updateUser, theme, setTheme}) {
var [emojis, setEmojis] = useState([]);
async function getEmojis() {
var emojis = await (await fetch(BASE_URL + "/emojis")).json();
@ -318,7 +313,7 @@ function SettingsModal({open, setOpen, user, updateUser}) {
}
return <form onSubmit={onSubmit}>
<input type="file" onChange={event => setFile(event.target.files[0])} />
<input type="text" placeholder='Emoji name' className="text-black" value={name} onChange={event => setName(event.target.value.replace(/[^a-z0-9-_]/gi, ''))} />
<input type="text" placeholder='Emoji name' className="dark:text-black border" value={name} onChange={event => setName(event.target.value.replace(/[^a-z0-9-_]/gi, ''))} />
<input type="submit" className="border" />
</form>
}
@ -326,9 +321,14 @@ function SettingsModal({open, setOpen, user, updateUser}) {
if (open) return <div className="fixed top-0 left-0 w-full h-full bg-slate-500/50 flex justify-center items-center" onClick={e => setOpen(false)}>
<div className="bg-white dark:bg-black border rounded-lg w-8/12 p-8 h-4/6 overflow-auto" onClick={e => e.stopPropagation()}>
<div className="text-2xl border-b border-slate-500 mb-1">Settings</div>
<div className="m-3"><label>Name: <input type="text" className="dark:text-black" value={user.name} onChange={e => updateUser({name: e.target.value})} /></label></div>
<div className="m-3"><label>Name: <input type="text" className="dark:text-black border" value={user.name} onChange={e => updateUser({name: e.target.value})} /></label></div>
<div className="m-3"><label>Color: <input type="color" value={user.color} onChange={e => updateUser({color: e.target.value})} /></label></div>
<div className="m-3"><label>Website: <input type="text" className="dark:text-black" placeholder='http://example.com' value={user.website} onChange={e => updateUser({website: e.target.value})} /></label></div>
<div className="m-3"><label>Website: <input type="text" className="dark:text-black border" placeholder='http://example.com' value={user.website} onChange={e => updateUser({website: e.target.value})} /></label></div>
<div className="m-3"><label>Theme: <select className="dark:text-black border" value={theme} onChange={event => setTheme(event.target.value)}>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="">System</option>
</select></label></div>
<div className="text-2xl mt-8 border-b border-slate-500 mb-2">Emoji</div>
{emojis.map(emoji => <img src={BASE_URL+"/emoji/"+emoji} title={`:${emoji}:`} alt={`:${emoji}:`} key={emoji} className="w-8 h-8 inline-block m-1" />)}
<div className="text-xl mt-8">Upload Emoji</div>

1
app/tailwind.config.js

@ -7,4 +7,5 @@ module.exports = {
extend: {},
},
plugins: [],
darkMode: "class"
}