Merge remote-tracking branch 'origin/dipper' into reborn

containers/react/src/components/Alert/GreenAlert.tsx

@@ -36,7 +36,9 @@ function GreenAlert ({handleClose, text}: AlertProps){
                 exit="exit"
             >
                 <AiOutlineCheckCircle />
-               <p>{text}</p>
+                <div className="text_alert">
+                    <h5>{text}</h5>
+                </div>
             </motion.div>
         </Backdrop>
     )

containers/react/src/components/Alert/RedAlert.tsx

@@ -35,7 +35,9 @@ function RedAlert ({handleClose, text}: AlertProps) {
                 exit="exit"
                 >
             <BiErrorCircle/>
-            <p>{text}</p>
+            <div className="text_alert">
+                <h5>{text}</h5>
+            </div>
             </motion.div>
         </Backdrop>
     )

containers/react/src/components/Alert/YellowAlert.tsx

@@ -52,7 +52,9 @@ function YellowAlert ({handleClose, text, icon}: AlertProps) {
                     <GiWingedSword />
                 ) : ("")}
 
+                <div className="text_alert">
                     <h5>{text}</h5>
+                </div>
             </motion.div>
         </Backdrop>
     )

containers/react/src/components/Messages/Chats.tsx

@@ -444,7 +444,7 @@ function Chats(){
 					}</option>
 				      {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.username)).map((item, index) => (
 				        <option key={index} value={item.username}>
-				          {item.username}
+				          {item.nickname}
 				        </option>
 				      ))}
 				    </select>

containers/react/src/components/Messages/GameModal.tsx

@@ -122,7 +122,7 @@ const GameModal = ({ handleClose }: ModalGame) => {
             <option value="">Select a user</option>
             {users.map((user: User) => (
               <option key={user.id} value={user.username}>
-                {user.username}
+                {user.nickname}
               </option>
             ))}
           </select>

containers/react/src/components/Messages/ModalSetting.tsx

@@ -13,18 +13,24 @@ import GreenAlert from "../Alert/GreenAlert.tsx";
 
 
 const dropIn = {
-    hidden:{y:"-100vh",
+	hidden: {
-            opacity: 0,},
+		y: "-100vh",
-    visible:{y: "0",
+		opacity: 0,
+	},
+	visible: {
+		y: "0",
 		opacity: 0,
 		transotion: {
 			duration: 0.1,
 			type: "spring",
 			damping: 100,
 			stiffness: 500,
-            }},
+		}
-    exit:{y: "100vh",
+	},
-            opacity: 0,},
+	exit: {
+		y: "100vh",
+		opacity: 0,
+	},
 
 };
 
@@ -76,8 +82,7 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 		// Function to run when myVariable changes
 		const handleVariableChange = () => {
 			console.log('Variable changed:', privateConv);
-		  if (privateConv === undefined)
+			if (privateConv === undefined) {
-		  {
 				console.log("return")
 				return;
 			}
@@ -174,8 +179,7 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 			if (res.data === 2)
 				setUnban(true);
 
-			if (socket)
+			if (socket) {
-			{
 				console.log("emit to ban server")
 				socket.emit("ban", { username: selectedUser })
 			}
@@ -196,6 +200,9 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 		handleClose();
 	};
 
+	const [muteAlert, setMuteAlert] = useState(false);
+	const closeMuteAlert = () => setMuteAlert(false);
+
 	const handleMute = async (e: { key: string; }) => {
 		console.log(`e in press= ${e.key}`)
 		if (e.key != "Enter")
@@ -204,7 +211,9 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 		// console.log("value mute = ", e.target.value);
 		console.log("value mute = ", time);
 		try {
-			await api.post("/mute", {convId: convId, username: selectedUser, time: time})
+			const ret = await api.post("/mute", { convId: convId, username: selectedUser, time: time })
+			if (ret.data)
+				setMuteAlert(true);
 		} catch (err) {
 			console.log(err);
 		}
@@ -268,6 +277,7 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 						<input
 							onChange={(e) => setNewName(e.target.value)}
 							onKeyDown={handleName}
+							maxLength={25}
 							type="text"
 							className="in"
 							placeholder="New Name"
@@ -291,7 +301,7 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 								</option>
 								{users.map((item, index) => (
 									<option key={index} value={item.username}>
-				          {item.username}
+										{item.nickname}
 									</option>
 								))}
 							</select>
@@ -321,6 +331,9 @@ const ModalSetting = ({handleClose, convId,  socket }: ModalSettingProps) => {
 					{unban ? (
 						<GreenAlert handleClose={closeUnban} text={selectedUser + ": was unbanned"} />
 					) : ("")}
+					{muteAlert ? (
+						<GreenAlert handleClose={closeMuteAlert} text="Mute"/>
+					):("")}
 				</AnimatePresence>
 
 			</motion.div>

containers/react/src/styles/Messages.css

@@ -266,7 +266,7 @@ p {
 	color: rgba(255, 255, 255, 1);
 }
 
-.redAlert{
+/* .redAlert{
 	width: clamp(50%, 500px, 90%);
 	height: min(50%, 100px);
 
@@ -275,23 +275,30 @@ p {
 	border-radius: 12px;
 	flex-direction: row;
 	align-items: center;
+	text-align: center;
+	background-color: rgba(133, 6, 6, 0.7);
+	font-size: 25px;
+	color: rgba(255, 255, 255, 1);
+} */
+
+.redAlert{
+	width: clamp(50%, 500px, 90%);
+	height: min(50%, 100px);
+
+	margin: auto;
+	padding: 1rem;
+	border-radius: 12px;
+	flex-direction: row;
+	text-align: center;
+	/* align-items: center; */
 	background-color: rgba(133, 6, 6, 0.7);
 	font-size: 25px;
 	color: rgba(255, 255, 255, 1);
 }
 
-.redAlert{
+.text_alert{
-	width: clamp(50%, 500px, 90%);
+	text-align: center;
-	height: min(50%, 100px);
+	justify-content: center;
-
-	margin: auto;
-	padding: 1rem;
-	border-radius: 12px;
-	flex-direction: row;
-	align-items: center;
-	background-color: rgba(133, 6, 6, 0.7);
-	font-size: 25px;
-	color: rgba(255, 255, 255, 1);
 }
 
 .yellowAlert{
@@ -303,17 +310,13 @@ p {
 	border-radius: 12px;
 	flex-direction: row;
 	align-items: center;
+	text-align: center;
 	background-color: rgba(212, 175, 55, 0.7);
 	font-size: 25px;
 	color: rgba(255, 255, 255, 1);
 	flex-wrap: wrap;
 }
 
-.yellowAlert::p {
-	overflow-wrap: break-word;
-	max-width: 1000px;
-}
-
 .modalSetting{
 	width: clamp(50%, 700px, 90%);
 	height: min(50%, 300px);