Skip to content

Commit f970335

Browse files
sebdevrsebdevr
committed
Updated css etc
1 parent 4b1f5d6 commit f970335

15 files changed

+515
-3976
lines changed

‎components/form/custom_input.js

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
export default function CustomInput(props) {
3-
const { label, placeholder, width = 175, name, setValue, value } = props;
3+
const { label, placeholder, width = 200, name, setValue, value } = props;
44
const errRef = React.useRef(null);
55
const parentRef = React.useRef(null);
66
const inputRef = React.useRef(null);
@@ -19,7 +19,7 @@ export default function CustomInput(props) {
1919
const handelChange = (e) => {
2020
errRef.current.innerHTML = "";
2121
setNewInput(e.target.value);
22-
22+
2323
setValue({
2424
...value,
2525
[newName]: e.target.value,
@@ -29,13 +29,13 @@ export default function CustomInput(props) {
2929
//This function will and a new input to the
3030
//getting the elements id
3131
e.preventDefault();
32-
if (value[newName]&&value[newName] !== "") {
32+
if (value[newName] && value[newName] !== "") {
3333
setValue({
3434
...value,
3535
[name]: [...value[name], value[newName]],
36-
[newName]:"",
36+
[newName]: "",
3737
});
38-
inputRef.current.value="";
38+
inputRef.current.value = "";
3939
} else {
4040
errRef.current.innerText = "Please enter valid name";
4141
}
@@ -68,7 +68,7 @@ export default function CustomInput(props) {
6868
<input
6969
id={index}
7070
value={value[name][index]}
71-
className="font-inter text-input"
71+
className="font-inter text-input text-white placeholder:text-[#828295] text-[12px] placeholder:italic"
7272
style={{ width }}
7373
placeholder={item}
7474
onChange={handleUpdate}
@@ -78,7 +78,7 @@ export default function CustomInput(props) {
7878
e.preventDefault();
7979
handelDelete(item);
8080
}}
81-
className="font-inter text-gray-500 absolute top-5 right-3 text-[12px]"
81+
className="font-inter absolute top-5 right-3 text-[12px] text-white placeholder:text-[#828295] placeholder:italic"
8282
>
8383
❌
8484
</button>
@@ -90,7 +90,7 @@ export default function CustomInput(props) {
9090
type="text"
9191
value={value[newName]}
9292
ref={inputRef}
93-
className="font-inter text-input-custom "
93+
className="font-inter text-white placeholder:text-[#828295] text-[12px] placeholder:italic text-input-custom "
9494
style={{ width }}
9595
placeholder={placeholder}
9696
/>

‎components/form/date_selector.js

+8-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
import React from "react";
22
export default function DateInput(props) {
3-
const { label, placeholder, name, handleChange } = props;
3+
const { label, name, handleChange } = props;
44

5+
const handelDate = (e) => {
6+
e.target.type = "date";
7+
};
58
return (
69
<div>
710
<label className="font-inter text-gray-500 text-[12px]">{label}</label>
811
<input
9-
type="date"
12+
type="text"
13+
onFocus={handelDate}
1014
name={name}
1115
onChange={handleChange}
12-
className="font-inter text-input text-gray-500 "
13-
placeholder={placeholder}
16+
className="font-inter text-input text-white placeholder:text-[#828295] text-[12px] placeholder:italic "
17+
placeholder="dd/mm/yyyy"
1418
/>
1519
</div>
1620
);

‎components/form/dropdown_selector.js

+25-10
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
1-
export default function DropdownSelector(props) {
2-
const { label, placeholder, options, handleChange, name } = props;
1+
import Select from "react-select";
32

3+
export default function DropdownSelector(props) {
4+
const { label, options, name } = props;
5+
const handleSelect = (e) => {
6+
props.handleChange({
7+
target: {
8+
name,
9+
value: e.value,
10+
},
11+
});
12+
};
413
return (
514
<div>
615
<label className="font-inter text-gray-500 text-[12px]">{label}</label>
7-
<select
8-
onChange={handleChange}
16+
<Select
17+
onChange={handleSelect}
918
name={name}
10-
className="font-inter text-input "
11-
placeholder={placeholder}
19+
options={options}
20+
classNamePrefix="select-wrapper"
21+
className="font-inter placeholder:text-[#828295] text-[12px] placeholder:italic "
22+
placeholder={options[0].label}
1223
>
13-
{options.map((option, index) => {
24+
{/* {options.map((option, index) => {
1425
return (
15-
<option className=" mb-2" key={index} value={option}>
26+
<option
27+
className=" p-2 bg-white text-black"
28+
key={index}
29+
value={option}
30+
>
1631
{option}
1732
</option>
1833
);
19-
})}
20-
</select>
34+
})} */}
35+
</Select>
2136
</div>
2237
);
2338
}

‎components/form/text_area.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function TextArea(props) {
88
onChange={handleChange}
99
name={name}
1010
type="text"
11-
className="font-inter textarea-input"
11+
className=" textarea-input text-white placeholder:text-[#828295] text-[12px] placeholder:italic "
1212
placeholder={placeholder}
1313
/>
1414
</div>

‎components/form/text_input.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function TextInput(props) {
77
type="text"
88
onChange={handleChange}
99
name={name}
10-
className="font-inter text-input"
10+
className="font-inter text-input text-white placeholder:text-[#828295] text-[12px] placeholder:italic"
1111
placeholder={placeholder}
1212
/>
1313
</div>

‎components/side.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Image from "next/image";
22

33
export default function Side() {
44
return (
5-
<div className="w-[371px] m-auto">
5+
<div className="w-[352px] m-auto">
66
<div className="bg-#0B0B22 overflow-hidden flex flex-wrap flex-col">
77
<div className="flex flex-wrap h-[20px] ">
88
<Image
@@ -48,7 +48,7 @@ export default function Side() {
4848

4949
function RenderStyledBlocks(props) {
5050
return (
51-
<span className="bg-[#828295] rounded-sm mx-1 leading-[20px] px-2">
51+
<span className="bg-[#828295] rounded-sm mx-1 leading-[20px] px-1">
5252
{props.children}
5353
</span>
5454
);

‎components/tabs.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@ function classNames(...classes) {
55
}
66

77
export default function Tabs(props) {
8-
const { active, setActive } = props;
8+
const { setActive } = props;
99
const handelChange = (e) => {
1010
e === 0 ? setActive("sip") : setActive("sccp");
1111
};
1212
return (
13-
<div className="ring-[1px] ring-[#828295] px-2 py-1 mt-5 rounded h-[60px] w-[350px]">
13+
<div className="py-1 mt-5 rounded h-[60px] w-[350px]">
1414
<Tab.Group onChange={handelChange}>
15-
<Tab.List className="flex space-x-1 rounded-xl bg-blue-900/20 p-1">
15+
<Tab.List className="flex ring-[1px] w-[350px] ring-[#828295] space-x-1 rounded-xl bg-blue-900/20 p-1">
1616
<Tab
1717
className={({ selected }) =>
1818
classNames(
19-
"text-[#85FFC4] h-[40px] w-[300px] rounded-lg text-sm font-medium leading-5 ",
19+
"text-[#00d1ff] h-[40px] w-[300px] rounded-lg text-sm font-medium leading-5 ",
2020
"ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none",
2121
selected
2222
? "btn-gradient shadow text-gray-50"
@@ -29,7 +29,7 @@ export default function Tabs(props) {
2929
<Tab
3030
className={({ selected }) =>
3131
classNames(
32-
"h-[40px] w-[300px] rounded-lg text-sm font-medium leading-5 text-[#85FFC4]",
32+
"h-[40px] w-[300px] rounded-lg text-sm font-medium leading-5 text-[#00d1ff]",
3333
"ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none ",
3434
selected
3535
? "btn-gradient text-gray-50 shadow"

‎components/user_card.js

+21-18
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,34 @@ import { useRouter } from "next/router";
44
export default function UserCard({ username, avatar_url, name, company, bio }) {
55
const router = useRouter();
66
return (
7-
<div className="bg-[#070714] shadow rounded flex flex-wrap flex-cols justify-center sm:flex-row gap-8 text-[12px] p-3 lg:h-[116px] shadow m-1 sm:m-auto ">
8-
<div className="flex flex-wrap gap-5 ">
9-
<Image
10-
alt="User"
11-
width={56}
12-
height={56}
13-
src={avatar_url ?? "/assets/user.png"}
14-
className="block object-contain rounded-full"
15-
/>
16-
<div className="text-white font-inter mt-6">
17-
<p className="font-bold text-[14px]">
18-
{name ?? "Name"} | {username ?? "Username"}
7+
<div className="bg-[#002b34] rounded md:w-full grid md:grid-cols-3 grid-cols-1 gap-5 md:gap-[175px] pb-3 md:pb-0 overflow-hidden sm:flex-row text-[12px] md:h-[116px] shadow m-1 sm:m-auto ">
8+
<div className="flex gap-5 w-[230px] m-auto md:ml-[25px] md:m-0 ">
9+
<div className="h-[56px] mt-[30px] w-[56px] rounded-full overflow-hidden">
10+
<Image
11+
alt="User"
12+
width={56}
13+
height={56}
14+
src={avatar_url ?? "/assets/user.png"}
15+
className="block object-contain rounded-full"
16+
/>
17+
</div>
18+
<div className="text-white mt-[40px] font-inter">
19+
<p className="font-bold w-[155px] text-[13px] truncate ">
20+
{name ?? "Name"} | {username ?? "Username "}
21+
</p>
22+
<p className="text-gray-400 min-w-[125px] text-[12px] ">
23+
{company ?? <>&nbsp;</>}
1924
</p>
20-
<p className="text-gray-400 text-[12px]">{company ?? <>&nbsp;</>}</p>
2125
</div>
2226
</div>
23-
24-
<div className="w-[230px] text-gray-400 leading-relaxed mt-4 ">
25-
<p>{bio ?? <>&nbsp;</>} </p>
27+
<div className="w-[230px] m-auto h-[56px] overflow-hidden text-gray-400 leading-relaxed md:mt-[30px] md:m-0 ">
28+
<p>{bio ?? <></>}</p>
2629
</div>
2730

28-
<div className=" text-gray-400 leading-relaxed mt-5 ml-5 ">
31+
<div className=" text-gray-400 w-[80px] m-auto grid place-items-center ">
2932
<div
3033
onClick={() => router.replace("/")}
31-
className="text-[12px] cursor-pointer text-[#85FFC4] bg-[#10104E] ring-[1px] ring-[#85FFC4] font-inter font-bold px-[14px] py-[7px] rounded-lg mt-2 "
34+
className="text-[12px] w-[65px] cursor-pointer text-[#00d1ff] ring-[1px] h-[28px] duration-300 font-inter font-bold px-[10px] py-[6.5px] rounded "
3235
>
3336
Log out
3437
</div>

0 commit comments

Comments
 (0)