slawk0/relay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements

Browse Source
This commit is contained in:
slawk0
2024-12-28 23:00:22 +01:00
parent 7c171d7215
commit a7866a3f3a
5 changed files with 35 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/index.html
View File

@@ -5,9 +5,9 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/turtle.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>Turtel chat 🐢</title>
<style>
body{

26
client/public/turtle.svg Normal file
View File

@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<polygon style="fill:#84D993;" points="350.609,320 512,320 512,286.609 457.461,247.096 "/>
<path style="fill:#B9F291;" d="M456.348,230.957c-30.736,0-55.652,24.917-55.652,55.652H512
C512,255.873,487.083,230.957,456.348,230.957z"/>
<rect y="286.609" style="fill:#84D993;" width="87.93" height="33.391"/>
<rect x="81.252" y="303.861" style="fill:#F6D76F;" width="274.922" height="49.53"/>
<rect x="33.391" y="303.304" style="fill:#B9F291;" width="89.043" height="105.739"/>
<rect x="311.652" y="302.191" style="fill:#84D993;" width="89.043" height="106.852"/>
<polygon style="fill:#578C76;" points="149.148,211.478 217.043,320 400.696,320 400.696,286.609 "/>
<g>
<polygon style="fill:#50BF94;" points="217.043,320 217.043,234.852 33.391,286.609 33.391,320 "/>
<path style="fill:#50BF94;" d="M162.504,146.922l54.539,139.687h183.652c0-56.221-25.264-106.552-65.059-140.23
C292.73,146.379,216.98,146.922,162.504,146.922z"/>
</g>
<g>
<path style="fill:#84D993;" d="M335.637,146.379c-31.99-27.088-73.381-43.422-118.594-43.422l-67.896,58.435l67.896,67.827
C271.519,229.218,317.938,194.715,335.637,146.379z"/>
<path style="fill:#84D993;" d="M217.043,286.609v-140.8c-54.476,0-80.139,0.57-118.594,0.57
c-39.795,33.678-65.058,84.009-65.058,140.23H217.043z"/>
</g>
<path style="fill:#B9F291;" d="M217.043,229.218V102.957c-45.213,0-86.604,16.334-118.594,43.422
C116.149,194.715,162.568,229.218,217.043,229.218z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
client/public/turtle.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

13
client/src/components/chat/MessageForm.tsx
View File

@@ -4,9 +4,8 @@ import type { KeyboardEventHandler } from 'react';
import { socket } from '../../socket/socket.tsx';
import { ChatMessagesProps, ContactsProps } from '../../pages/Chat.tsx';
import { axiosClient } from '../../App.tsx';
import { File, Paperclip, X } from 'lucide-react';
import { File, Paperclip, Send, X } from 'lucide-react';
import LoadingWheel from '@/components/chat/LoadingWheel.tsx';
type Input = {
message: string;
attachments: FileList | null;
@@ -260,7 +259,7 @@ const MessageForm = ({ contact }: MessageFormProps) => {
ref(e);
textareaRef.current = e;
}}
className={`w-full overflow-y-hidden resize-none bg-green-50 text-black rounded-md p-2 min-h-[40px] max-h-96
className={`ml-2 w-full overflow-y-hidden resize-none bg-gray-700 border-none text-white rounded-2xl p-2 min-h-[40px] max-h-96 placeholder:text-gray-400 placeholder:pl-2 focus:outline-none focus:ring-0
${isOverLimit ? 'border-2 border-red-500' : isNearLimit ? 'border-2 border-yellow-500' : ''} mx-auto`}
autoFocus={!!contact}
disabled={!contact}
@@ -274,7 +273,7 @@ const MessageForm = ({ contact }: MessageFormProps) => {
? 'text-red-500 font-bold'
: isNearLimit
? 'text-yellow-600'
: 'text-gray-500'
: 'text-gray-200'
}`}
>
{charCount}/2000
@@ -282,7 +281,7 @@ const MessageForm = ({ contact }: MessageFormProps) => {
</div>
</div>
{errorMessage ? <p className="text-red-200">{errorMessage}</p> : null}
<div className="flex gap-2">
<div className="flex mr-2">
<label
htmlFor="attachments"
className="flex items-center justify-center hover:cursor-pointer p-1 rounded-full hover:bg-gray-800"
@@ -304,11 +303,11 @@ const MessageForm = ({ contact }: MessageFormProps) => {
<span className="text-gray-500 text-sm">Uploading...</span>
)}
<button
className="text-black bg-green-500 hover:bg-green-400 font-bold py-2 px-4 rounded w-24 shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
className="text-white hover:bg-gray-800 p-1 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed h-10 w-10"
type="submit"
disabled={isOverLimit || isSending || isUploading}
>
{isSending ? <LoadingWheel /> : <p>send</p>}
{isSending ? <LoadingWheel /> : <Send />}
</button>
</div>
</div>

2
server/socket/socket.js
View File

@@ -17,7 +17,7 @@ function initializeSocket(io) {
const token = socket.handshake.auth.token;
if (!token) {
console.log("(socket) Not logged in");
return next(new Error("(socket) Not logged in"));
return next(new Error("Not logged in"));
}
try {