change design
This commit is contained in:
Elisee ADJIGUIDI
parent
0d42eda749
commit
72a4f42cdb
@ -32,11 +32,11 @@ function RedAlert ({handleClose, text}: AlertProps) {
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
>
|
||||
>
|
||||
<BiErrorCircle/>
|
||||
<p>{text}</p>
|
||||
</motion.div>
|
||||
{setTimeout(handleClose, 1500)}
|
||||
{setTimeout(handleClose, 1500)}
|
||||
</Backdrop>
|
||||
)
|
||||
}
|
||||
|
||||
@ -40,9 +40,9 @@ function PlayButton() {
|
||||
<button onClick={handleButtonClick} className="playButton">Play</button>
|
||||
{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
|
||||
<div className='checkbox'>
|
||||
<p><input type="checkbox" value="superpower"/> Super Power </p>
|
||||
<p><input type="checkbox" value="obstacle"/> Obstacle </p>
|
||||
<p><input type="checkbox" value="speed"/> Faster and Faster </p>
|
||||
<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power </p>
|
||||
<p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p>
|
||||
<p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
/* ::: :::::::: */
|
||||
/* Message.tsx :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
|
||||
/* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2023/06/01 18:24:46 by apommier #+# #+# */
|
||||
/* Updated: 2023/06/20 12:47:33 by apommier ### ########.fr */
|
||||
/* Updated: 2023/06/23 19:33:40 by sadjigui ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
@ -42,11 +42,13 @@ function MessageMe({message, own}: MessageMeProps){
|
||||
const [user, setUser] = useState<User>();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollRef.current)
|
||||
{
|
||||
scrollRef.current.scrollIntoView({ behavior: "smooth",})
|
||||
}
|
||||
scrollRef.current.scrollIntoView({ behavior: "smooth"});
|
||||
}})
|
||||
useEffect(() => {
|
||||
const fetchProfilePicture = async () => {
|
||||
try {
|
||||
// const user = await api.get("/profile");
|
||||
|
||||
@ -103,25 +103,26 @@ const Modal = ({handleClose}) => {
|
||||
<Backdrop>
|
||||
<motion.div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="modal"
|
||||
className="modalSetting"
|
||||
variant={dropIn}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
>
|
||||
{/* <p>New Conversation</p> */}
|
||||
<div className="settingFirstPart2">
|
||||
|
||||
{selectTags.map((selectTag) => (
|
||||
<div key={selectTag.id}>
|
||||
<div key={selectTag.id}>
|
||||
<select
|
||||
value={selectTag.selectedOption}
|
||||
onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
|
||||
>
|
||||
>
|
||||
<option value="">{
|
||||
selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
|
||||
}</option>
|
||||
selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
|
||||
}</option>
|
||||
{users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.name)).map((item, index) => (
|
||||
<option key={index} value={item.username}>
|
||||
<option key={index} value={item.username}>
|
||||
{item.username}
|
||||
</option>
|
||||
))}
|
||||
@ -136,28 +137,30 @@ const Modal = ({handleClose}) => {
|
||||
|
||||
<Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="settingSecondPart">
|
||||
|
||||
{convs.length > 0 && (
|
||||
<select
|
||||
value={channel}
|
||||
onChange={(event) => setChannel(event.target.value)}
|
||||
<select
|
||||
value={channel}
|
||||
onChange={(event) => setChannel(event.target.value)}
|
||||
|
||||
>
|
||||
<option value="">Select an option</option>
|
||||
{convs.map((conv) => (
|
||||
!(!conv.group || conv.private || (conv.banned && conv.banned.includes(user.username)) || (conv.members && conv.members.includes(user.username))) && (
|
||||
<option key={conv.id} value={conv.id}>
|
||||
!(!conv.group || conv.private || (conv.banned && conv.banned.includes(user.username)) || (conv.members && conv.members.includes(user.username))) && (
|
||||
<option key={conv.id} value={conv.id}>
|
||||
{conv.name}
|
||||
</option>
|
||||
)
|
||||
))}
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
{channel.private ? (
|
||||
<input className="mdp" placeholder="password" type="text" />
|
||||
):("")}
|
||||
<input className="mdp" placeholder="password" type="text" />
|
||||
):("")}
|
||||
|
||||
|
||||
<div className="div_submit">
|
||||
@ -166,6 +169,7 @@ const Modal = ({handleClose}) => {
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
</Backdrop>
|
||||
)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.home{
|
||||
background-color: rgb(0, 0, 0);
|
||||
height: 90vh;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -202,6 +202,7 @@ p {
|
||||
text-decoration: none;
|
||||
font-weight:lighter;
|
||||
margin: 1%;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.darkSubmit{
|
||||
@ -307,11 +308,17 @@ p {
|
||||
/* flex-direction: column; */
|
||||
/* align-items: center; */
|
||||
background-color: #3e3c61;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.settingFirstPart{
|
||||
margin-top: 10%;
|
||||
margin-left: 15%;
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.settingFirstPart2{
|
||||
margin-top: 10%;
|
||||
margin-left: 30%;
|
||||
}
|
||||
|
||||
.settingSecondPart{
|
||||
@ -324,6 +331,7 @@ p {
|
||||
.checkbox{
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
input.in{
|
||||
@ -331,17 +339,25 @@ input.in{
|
||||
margin-left: 0px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
border-radius: 4px;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
font-weight:100;
|
||||
font-size: 20px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
input.in_howLong{
|
||||
margin-top: 14.5%;
|
||||
margin-top: 13%;
|
||||
margin-left: 0px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
border-radius: 12px;
|
||||
width: 15%;
|
||||
border-radius: 4px;
|
||||
width: 10%;
|
||||
height: 10%;
|
||||
font-weight:100;
|
||||
font-size: 20px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.mdp{
|
||||
@ -351,3 +367,9 @@ input.in_howLong{
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.case{
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -62,6 +62,7 @@
|
||||
.page {
|
||||
text-align: center;
|
||||
overflow-y: scroll;
|
||||
/* height: 80vh; */
|
||||
/* height: 50vh; */
|
||||
/* width: 50vh; */
|
||||
/* background-color: black; */
|
||||
@ -96,11 +97,11 @@
|
||||
}
|
||||
|
||||
.history{
|
||||
display: inline-block;
|
||||
display:inline-block;
|
||||
color: white;
|
||||
background-color: #5843e4;
|
||||
border-radius: 20px;
|
||||
padding: 14px;
|
||||
padding: 20px 500px;
|
||||
font-size: 1.7rem;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
.playButton {
|
||||
background-image: linear-gradient(90deg, #5843e4, #5a0760);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
border-radius: 5vh;
|
||||
color: white;
|
||||
/* display: block; */
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 30vh;
|
||||
padding: 2vh 4vw;
|
||||
padding: 2vh 5vw;
|
||||
height: 10vh;
|
||||
width: 20vw;
|
||||
font-size: 250%;
|
||||
text-align: center;
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user