Skip to content

Commit 2ee6884

Browse files
BroLetsCodeItBroLetsCodeIt
committed
improved UI
1 parent 76a9000 commit 2ee6884

File tree

9 files changed

+80
-46
lines changed

9 files changed

+80
-46
lines changed

‎public/sound/lobby_enter.mp3

58 KB
Binary file not shown.

‎src/App.css

+9-6
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
display: flex;
33
align-items: center;
44
justify-content: center;
5-
color: #fff;
5+
/* color: #fff; */
66
height: 100vh;
7+
background-color: rgb(203, 201, 201);
78
}
89
::-webkit-scrollbar{
910
display: none;
1011
}
1112
.formWrapper {
12-
background: #282a36;
13+
background: #ffffff;
1314
padding: 20px;
1415
border-radius: 10px;
1516
width: 400px;
@@ -97,14 +98,16 @@ footer a:hover {
9798
}
9899

99100
.aside {
100-
background: #1c1e29;
101-
padding: 16px;
102-
color: #fff;
101+
background: #252526;
102+
103+
/* color: #fff; */
103104
display: flex;
104-
flex-direction: column;
105+
direction: rtl;
106+
/* flex-direction: column; */
105107
}
106108
.asideInner {
107109
flex: 1;
110+
108111
}
109112

110113
.clientsList {

‎src/components/CodeEditorNew.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ const CodeEditorNew = ({socketRef , roomId , onCodeChange}) => {
107107
<select
108108
name="theme"
109109
id="theme"
110-
className="bg-gray-900 px-1 py-1 rounded-md mb-1 border-2 border-gray-600 text-sm"
110+
className="bg-[#252526] px-1 py-1 rounded-md mb-1 text-sm"
111111
onChange={(e) => {
112112

113113
setCurrentTheme(e.target.value);
@@ -135,7 +135,7 @@ const CodeEditorNew = ({socketRef , roomId , onCodeChange}) => {
135135

136136
</select>
137137

138-
<div className="border-2 border-gray-600 px-1 gap-2 text-sm rounded-md flex items-center justify-between mb-1">
138+
{/* <div className="border-2 border-gray-600 px-1 gap-2 text-sm rounded-md flex items-center justify-between mb-1">
139139
<small>Font-Size : </small>
140140
<button
141141
disabled={fontSize <= 15}
@@ -156,7 +156,7 @@ const CodeEditorNew = ({socketRef , roomId , onCodeChange}) => {
156156
>
157157
+
158158
</button>
159-
</div>
159+
</div> */}
160160

161161
{/* <select
162162
name="language"

‎src/components/Header.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Header = () => {
1212
<nav className="fixed overflow-hidden z-20 w-full bg-white/80 dark:bg-gray-950/0 dark:shadow-md rounded-b-lg dark:shadow-gray-950/10 border-x dark:border-[--ui-dark-border-color] backdrop-blur-2xl">
1313

1414
<div className="px-6 m-auto max-w-6xl 2xl:px-0">
15-
<div className="flex flex-wrap items-center justify-between py-2 sm:py-4">
15+
<div className="flex flex-wrap items-center justify-around py-2 sm:py-4">
1616
<div className="w-full items-center flex justify-between lg:w-auto gap-3">
1717
<a href="/" aria-label="kshamlogo">
1818
<img src="/code_collab.webp" alt="" className="w-30 h-10" />
@@ -24,22 +24,22 @@ const Header = () => {
2424
<div className="mt-6 text-gray-600 dark:text-gray-300 md:-ml-4 lg:pr-4 lg:mt-0">
2525
<ul className="space-y-6 tracking-wide text-base lg:text-sm lg:flex lg:space-y-0">
2626
<li>
27-
<Link to="/" className="block md:px-4 transition hover:text-primary-600 ">
27+
<Link to="/" className="block md:px-4 transition hover:text-primary-600 text-black">
2828
<span>Home</span>
2929
</Link>
3030
</li>
3131
<li>
32-
<Link to="/aboutus" className="block md:px-4 transition hover:text-primary-600 ">
32+
<Link to="/aboutus" className="block md:px-4 transition hover:text-primary-600 text-black">
3333
<span>About us</span>
3434
</Link>
3535
</li>
3636
<li>
37-
<Link to="/docs" className="block md:px-4 transition hover:text-primary-600 ">
37+
<Link to="/docs" className="block md:px-4 transition hover:text-primary-600 text-black">
3838
<span>Docs</span>
3939
</Link>
4040
</li>
4141
<li>
42-
<Link to="/contact" className="block md:px-4 transition hover:text-primary-600 ">
42+
<Link to="/contact" className="block md:px-4 transition hover:text-primary-600 text-black">
4343
<span>Contact us</span>
4444
</Link>
4545
</li>

‎src/components/Loader/index.jsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
const Loader = () => {
3+
return (
4+
<div role="status">
5+
<svg aria-hidden="true" className="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
6+
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
7+
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
8+
</svg>
9+
<span className="sr-only">Loading...</span>
10+
</div>
11+
)
12+
}
13+
14+
export default Loader

‎src/index.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@
1010
text-rendering: optimizeLegibility;
1111
-webkit-font-smoothing: antialiased;
1212
-moz-osx-font-smoothing: grayscale;
13-
background: #1c1e29;
13+
/* background: #1c1e29; */
14+
1415
}

‎src/pages/Editor.jsx

+21-12
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import toast from "react-hot-toast";
1010
import { Navigate } from "react-router-dom";
1111
import { useNavigate } from "react-router-dom";
1212
import CodeEditorNew from "../components/CodeEditorNew.jsx";
13+
import { Copy, LogOut, SplineIcon } from "lucide-react";
14+
import Loader from "../components/Loader/index.jsx";
1315

1416

1517
const EditorPage = () => {
@@ -115,15 +117,16 @@ const EditorPage = () => {
115117
}
116118
return (
117119
<div className="main-wrap flex h-screen">
118-
<div className="aside flex items-start flex-col justify-between w-[16%]">
119-
<div className="asideInner w-full">
120-
<div className="logo flex items-end gap-3">
120+
<div className="aside flex items-start justify-between w-[16%]">
121+
<div className=" w-full flex flex-col items-end pl-2 pt-2 ">
122+
{/* <div className="logo flex items-end gap-3">
121123
<img className="logoImage w-10 h-10 rounded-md" src="/code_collab.webp" alt="logo" />
122124
<span className="size-7 font-extrabold tracking-tighter">CodeCollab<span className="text-green-400">.</span>io</span>
123-
</div>
124-
<h3 className="pt-3 tracking-tighter">Connected</h3>
125+
</div> */}
126+
<h3 className=" tracking-tighter text-gray-500">Connected</h3>
125127
<div className="clientsList pt-2 overflow-auto max-h-[30rem]">
126-
{clients.map((val, ind) => {
128+
129+
{clients.length != 0 ? (clients.map((val, ind) => {
127130
return (
128131
<div
129132
className=" text-black rounded-md flex flex-col items-center"
@@ -133,23 +136,29 @@ const EditorPage = () => {
133136
<small className="text-white">{val.username}</small>
134137
</div>
135138
);
136-
})}
139+
})) : (
140+
<Loader/>
141+
)
142+
}
137143
</div>
138144
</div>
139-
<div className=" w-full">
140-
<button className="btn copyBtn bg-white w-full text-black text-sm py-2" onClick={CopytoClipBoard}>Copy ROOM ID</button>
145+
<div className=" h-screen bg-[#3C3C3C] flex flex-col justify-end w-fit">
146+
<button className="btn copyBtn text-gray-400 text-sm py-2 w-fit" onClick={CopytoClipBoard} title="Copy Room Id">
147+
<Copy/>
148+
</button>
141149
<button
142-
className="btn leaveBtn text-sm w-full py-2"
150+
className="btn w-fit text-gray-400 text-sm py-2"
143151
onClick={() => {
144152
onLeave();
145153
}}
154+
title="Exit"
146155
>
147-
Leave
156+
<LogOut/>
148157
</button>
149158
</div>
150159
</div>
151160

152-
<div className="editorwrap text-white flex-1 p-2 border-l-2 border-gray-600 w-full h-screen overflow-auto">
161+
<div className="editorwrap text-white flex-1 border-l-2 border-gray-600 w-full h-screen overflow-auto bg-[#252526]">
153162
<CodeEditorNew socketRef={socketRef} roomId = {params.roomId} onCodeChange={(code)=> { codeRef.current = code}}/>
154163
</div>
155164
</div>

‎src/pages/Home.jsx

+20-12
Original file line numberDiff line numberDiff line change
@@ -37,54 +37,62 @@ const Home = () => {
3737
};
3838
return (
3939
<div className="homePageWrapper">
40-
<div className="formWrapper text-sm">
41-
<img
40+
<div className="formWrapper text-sm shadow-sm border-gray-300 border-2">
41+
{/* <img
4242
className="homePageLogo rounded-md"
4343
src="/code_collab.webp"
4444
alt="code-sync-logo"
45-
/>
46-
<h4 className="mainLabel">Paste invitation ROOM ID</h4>
47-
<div className="inputGroup">
45+
/> */}
46+
<h4 className="mainLabel text-black tracking-tight">Join with a Room ID <span className='italic text-blue-400'>or</span> create a new one.</h4>
47+
<div className='w-full border-b border-1 border-gray-200'></div>
48+
<div className="inputGroup pt-4">
49+
<label htmlFor="roomId" className='block mb-2 text-sm font-medium text-gray-900 '>Room ID</label>
4850
<input
51+
id='roomId'
52+
name='roomId'
4953
type="text"
5054
className="inputBox text-black "
51-
placeholder="ROOM ID"
55+
placeholder="Room Id"
5256
onChange={(e) => setRoomId(e.target.value)}
5357
value={roomId}
5458
onKeyUp={handleInputEnter}
5559
required
5660

5761
/>
62+
<label htmlFor="username" className='block mb-2 text-sm font-medium text-gray-900'>User Name</label>
5863
<input
64+
id='username'
65+
name='username'
5966
type="text"
6067
className="inputBox text-black"
61-
placeholder="USERNAME"
68+
placeholder="User name"
6269
onChange={(e) => setUsername(e.target.value)}
6370
value={username}
6471
onKeyUp={handleInputEnter}
6572
required
6673
/>
67-
<button className="btn joinBtn" onClick={joinRoom}>
74+
<button className="btn joinBtn 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" onClick={joinRoom}>
6875
Join
6976
</button>
77+
<div className='w-full border-b border-1 border-gray-200 pt-10'></div>
7078
<span className="createInfo">
71-
If you don&apos;t have an invite then create &nbsp;
79+
<span className='text-red-500'>*</span> If you don&apos;t have an invite then create &nbsp;
7280
<a
7381
onClick={createNewRoom}
7482
href=""
75-
className="createNewBtn"
83+
className="createNewBtn text-blue-600"
7684
>
7785
new room
7886
</a>
7987
</span>
8088
</div>
8189
</div>
82-
<footer>
90+
{/* <footer>
8391
<h4>
8492
Built with ❤️ &nbsp; by &nbsp;
8593
<a href="https://github.com/BroLetsCodeIt">BroLetsCodeIt</a>
8694
</h4>
87-
</footer>
95+
</footer> */}
8896
</div>
8997
);
9098
};

‎src/pages/Landing.jsx

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11

2-
import { MoveUpRight } from 'lucide-react';
32
import { Link } from 'react-router-dom';
43
import Header from '../components/Header';
54

@@ -8,7 +7,7 @@ const Landing = () => {
87
return (
98
<>
109
<section className="relative bg-white">
11-
<div className='fixed top-0 right-0 bg-gray-200 pl-7 pr-4 pb-10 pt-3 clip-custom-polygon z-50 '>
10+
<div className='fixed top-0 right-0 bg-gray-200 pl-7 pr-4 pb-16 pt-3 clip-custom-polygon z-50 '>
1211
<div className='transform rotate-45 pb-2 font-bold'>
1312
<Link to="https://github.com/BroLetsCodeIt/CodeCollab.io" target='_blank' className='transform rotate-45 pb-2 font-bold'>
1413
<img src="./githublogo.png" alt="logo" className='w-10'/>
@@ -72,14 +71,14 @@ const Landing = () => {
7271
</span>
7372
</div>
7473
<p className="text-wrap mx-auto mt-6 max-w-2xl text-gray-700 ">
75-
CodeCollab.io is a seamless online platform designed to bring developers together. Whether you&apos;re working on a collaborative project, pair programming, or teaching, CodeCollab.io makes it easy for you to create a coding room or join one in real-time. With built-in support for multiple themes, CodeCollab.io enhances your collaborative coding experience.
74+
CodeCollab.io is a seamless online platform designed to bring developers together. Whether you&apos;re working on a collaborative project, pair programming, or teaching, CodeCollab.io makes it easy for you to create a coding room & join one in real-time. With built-in support for multiple themes, CodeCollab.io enhances your collaborative coding experience.
7675
</p>
7776
<div className="mt-8 flex flex-row items-center justify-center gap-4">
78-
<div className="p-1 rounded-md bg-gray-950/5 border ">
79-
<Link to={'/home'} className="bg-green-400 px-2 py-1 rounded-sm text-white text-xl font-bold tracking-tighter flex items-center justify-between gap-2 ">Create Room<MoveUpRight/></Link>
77+
<div className=" shadow-sm rounded-md bg-gray-950/5 border-solid ">
78+
<Link to={'/home'} 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 ">Create Room</Link>
8079
</div>
81-
<div className="p-1 rounded-md bg-gray-950/5 border ">
82-
<Link to={'/home'} className="bg-green-400 px-2 py-1 rounded-sm text-white text-xl font-bold tracking-tighter flex items-center justify-between gap-2 ">Join Room<MoveUpRight/></Link>
80+
<div className="shadow-sm rounded-md bg-gray-950/5 border-solid">
81+
<Link to={'/home'} 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 ">Join Room</Link>
8382
</div>
8483
</div>
8584
</div>

0 commit comments

Comments
 (0)