From 01864e554c352a6870966248da8396e0e0d30d30 Mon Sep 17 00:00:00 2001
From: ReDBrother <bataevdmitriy@gmail.com>
Date: Wed, 6 Sep 2023 22:02:21 +0300
Subject: [PATCH] minor fixes

---
 .../app/apps/codebattle/assets/css/style.scss | 38 ++++++++++++++++++-
 .../assets/js/widgets/components/UserName.jsx |  4 +-
 .../js/widgets/pages/game/AnimationModal.jsx  |  2 +-
 .../widgets/pages/game/GameActionButtons.jsx  |  7 ++--
 .../widgets/pages/lobby/ChatActionModal.jsx   |  4 +-
 .../js/widgets/pages/lobby/LobbyWidget.jsx    |  6 ++-
 services/app/apps/codebattle/yarn.lock        |  6 +--
 7 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/services/app/apps/codebattle/assets/css/style.scss b/services/app/apps/codebattle/assets/css/style.scss
index 0e0fb9b52..be4b0afb5 100644
--- a/services/app/apps/codebattle/assets/css/style.scss
+++ b/services/app/apps/codebattle/assets/css/style.scss
@@ -427,7 +427,11 @@ a {
   }
 }
 
-.cb-lobby-widget-container,
+.cb-lobby-widget-container {
+  min-height: 400px;
+  max-height: 500px;
+}
+
 .cb-messages-container {
   height: 400px;
 
@@ -808,3 +812,35 @@ a:hover{
 .cb-left-scroll-control {
   background: linear-gradient(to left, transparent 0, var(--light) 12px ,var(--light) 100%);
 }
+
+// adapted styles from bootstrap 5.3
+
+.cb-overflow-x-auto {
+  overflow-x: auto;
+}
+
+.cb-overflow-x-hidden {
+  overflow-x: hidden;
+}
+.cb-overflow-x-visible {
+  overflow-x: visible;
+}
+
+.cb-overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.cb-overflow-y-auto {
+  overflow-y: auto;
+}
+
+.cb-overflow-y-hidden {
+  overflow-y: hidden;
+}
+.cb-overflow-y-visible {
+  overflow-y: visible;
+}
+
+.cb-overflow-y-scroll {
+  overflow-y: scroll;
+}
diff --git a/services/app/apps/codebattle/assets/js/widgets/components/UserName.jsx b/services/app/apps/codebattle/assets/js/widgets/components/UserName.jsx
index 93eeccc22..91a6538b9 100644
--- a/services/app/apps/codebattle/assets/js/widgets/components/UserName.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/components/UserName.jsx
@@ -46,7 +46,9 @@ const UserName = ({
       <a
         href={`/users/${user.id}`}
         key={user.id}
-        className="d-flex align-items-center"
+        className={cn('d-flex align-items-center', {
+          'text-danger': user.isAdmin,
+        })}
       >
         <p
           className={`text-truncate m-0 ${
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.jsx
index 2bebaaed4..c9d11695e 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/AnimationModal.jsx
@@ -34,7 +34,7 @@ function AnimationModal({ setModalShowing, modalShowing }) {
         <Modal.Body>
           <div className="d-flex justify-content-center">
             <img
-              className="w-100"
+              className="w-100 rounded-lg"
               style={{ maxWidth: '400px', height: '300px' }}
               src={gifs[result]}
               alt="animation"
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.jsx
index 5dbb65179..a9fae77f7 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/game/GameActionButtons.jsx
@@ -117,12 +117,13 @@ function GameActionButtons({
   resetBtnStatus,
   giveUpBtnStatus,
 }) {
-  const [modalShowing, setModalShowing] = useState(false);
   const dispatch = useDispatch();
 
   const { mainService } = useContext(RoomContext);
   const isTestingRoom = useMachineStateSelector(mainService, inTestingRoomSelector);
 
+  const [modalShowing, setModalShowing] = useState(false);
+
   const modalHide = () => {
     setModalShowing(false);
   };
@@ -150,8 +151,8 @@ function GameActionButtons({
         Are you sure you want to give up?
       </Modal.Body>
       <Modal.Footer className="mx-auto">
-        <Button onClick={handleGiveUp} className="btn-danger">Give up</Button>
-        <Button onClick={modalHide} className="btn-secondary">Cancel</Button>
+        <Button onClick={handleGiveUp} className="btn-danger rounded-lg">Give up</Button>
+        <Button onClick={modalHide} className="btn-secondary rounded-lg">Cancel</Button>
       </Modal.Footer>
     </Modal>
   );
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.jsx
index e2d0e3d03..1efee36ad 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/ChatActionModal.jsx
@@ -31,7 +31,7 @@ function ChatActionModal({
 
     dispatch(
       actions.showCreateGameInviteModal({
-        opponentInfo: { id: userId, name: userName },
+        opponentInfo: { id: Number(userId), name: userName },
       }),
     );
   }, [dispatch, setModalShowing]);
@@ -41,7 +41,7 @@ function ChatActionModal({
     const { userId, userName } = event.currentTarget.dataset;
     setModalShowing({ opened: false });
 
-    dispatch(lobbyMiddlewares.openDirect(userId, userName));
+    dispatch(lobbyMiddlewares.openDirect(Number(userId), userName));
     if (chatInputRef.current) {
       chatInputRef.current.focus();
     }
diff --git a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx
index 5b2c0b722..ef389b8b2 100644
--- a/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx
+++ b/services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx
@@ -384,7 +384,11 @@ const GameContainers = ({
   return (
     <div className="p-0 shadow-sm rounded-lg">
       <nav>
-        <div className="nav nav-tabs flex-nowrap overflow-auto bg-gray rounded-top border-dark border-bottom" id="nav-tab" role="tablist">
+        <div
+          id="nav-tab"
+          className="nav nav-tabs flex-nowrap cb-overflow-x-auto bg-gray rounded-top border-dark border-bottom"
+          role="tablist"
+        >
           <a
             className={tabLinkClassName(
               hashLinkNames.lobby,
diff --git a/services/app/apps/codebattle/yarn.lock b/services/app/apps/codebattle/yarn.lock
index 10e5f3340..4d970ed96 100644
--- a/services/app/apps/codebattle/yarn.lock
+++ b/services/app/apps/codebattle/yarn.lock
@@ -3873,9 +3873,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001517:
-  version "1.0.30001525"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001525.tgz"
-  integrity sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==
+  version "1.0.30001527"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001527.tgz"
+  integrity sha512-YkJi7RwPgWtXVSgK4lG9AHH57nSzvvOp9MesgXmw4Q7n0C3H04L0foHqfxcmSAm5AcWb8dW9AYj2tR7/5GnddQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"