From 4f341ba882bf98856dca799da480c52aa2c5a719 Mon Sep 17 00:00:00 2001 From: Emil Novikov Date: Fri, 21 Jul 2023 12:29:13 +0600 Subject: [PATCH 1/5] fix errors --- src/entities/room/ui/RoomCard.tsx | 1 - src/pages/JoinCall/JoinCall.tsx | 2 ++ src/widgets/RoomsList.tsx | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx index 542e619..d98afc1 100644 --- a/src/entities/room/ui/RoomCard.tsx +++ b/src/entities/room/ui/RoomCard.tsx @@ -7,7 +7,6 @@ import avatar from "../../../../public/icons/avatar.svg"; import callActive from "../../../../public/icons/call-active.svg"; import callDisabled from "../../../../public/icons/call-disabled.svg"; import { useAuth0 } from "@auth0/auth0-react"; -import roomsFormState from "../../../pages/Lobby/store/roomsFormState"; import menuIcon from "../../../../public/icons/points.svg"; import Select from "../../../shared/ui/Select"; diff --git a/src/pages/JoinCall/JoinCall.tsx b/src/pages/JoinCall/JoinCall.tsx index be21321..9442652 100644 --- a/src/pages/JoinCall/JoinCall.tsx +++ b/src/pages/JoinCall/JoinCall.tsx @@ -40,6 +40,8 @@ type State = const JoinCall: React.FC = () => { const [stateEnter, setStateEnter] = useState("Занятие началось"); + console.log(setStateEnter); + const devices: string[][] = [ ["hghghg", "jhhhhhhhh"], ["qqqqqq", "qvvhhhhhhhhhrrrrrrrrr", "rr"], diff --git a/src/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx index ee895ce..d3d0516 100644 --- a/src/widgets/RoomsList.tsx +++ b/src/widgets/RoomsList.tsx @@ -66,7 +66,7 @@ const RoomsList: React.FC = observer(({ rooms }) => { {roomsState.state === 'edit' ? <> {rooms.map(room => - + )} : From 399246350013d80b8a572f94337c45cc268267fa Mon Sep 17 00:00:00 2001 From: Emil Novikov Date: Fri, 21 Jul 2023 21:53:55 +0600 Subject: [PATCH 2/5] add redirect to lesson --- src/app/App.tsx | 2 +- src/pages/JoinCall/JoinCall.tsx | 6 ++++-- src/shared/ui/EnterButton.tsx | 5 +++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index c930847..4041cfd 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -31,7 +31,7 @@ const App: React.FC = () => { } /> } /> } /> - } /> + } /> )} diff --git a/src/pages/JoinCall/JoinCall.tsx b/src/pages/JoinCall/JoinCall.tsx index 9442652..779bd7c 100644 --- a/src/pages/JoinCall/JoinCall.tsx +++ b/src/pages/JoinCall/JoinCall.tsx @@ -50,7 +50,9 @@ const JoinCall: React.FC = () => { const {id} = useParams(); - console.log(id); + function joinLesson() { + location.href = `/lesson/${id}`; + } return ( @@ -77,7 +79,7 @@ const JoinCall: React.FC = () => {
Морозов Антон Дмитриевич
0 участников
- Присоединиться + Присоединиться {stateEnter === "Занятие началось" || stateEnter === "Дождитесь разрешения на подключение" ? (
{stateEnter}
diff --git a/src/shared/ui/EnterButton.tsx b/src/shared/ui/EnterButton.tsx index 8954cd5..f3cc591 100644 --- a/src/shared/ui/EnterButton.tsx +++ b/src/shared/ui/EnterButton.tsx @@ -20,10 +20,11 @@ const Button = styled.button` interface Props { children?: string; type?: "button" | "submit" | "reset"; + onClick?: () => void; } -const EnterButton: React.FC = ({ type, children }) => { - return ; +const EnterButton: React.FC = ({ type, children, onClick }) => { + return ; }; export default EnterButton; From 14b71ae3020ae7a7632ba3ccc3c9fb55401fd795 Mon Sep 17 00:00:00 2001 From: Emil Novikov Date: Fri, 21 Jul 2023 22:01:58 +0600 Subject: [PATCH 3/5] taken out of the lobbyformlayout --- src/features/createRoom/ui/CreateRoomForm.tsx | 52 ++----------------- src/widgets/layout/LobbyFormLayout.tsx | 37 +++++++++++++ 2 files changed, 40 insertions(+), 49 deletions(-) create mode 100644 src/widgets/layout/LobbyFormLayout.tsx diff --git a/src/features/createRoom/ui/CreateRoomForm.tsx b/src/features/createRoom/ui/CreateRoomForm.tsx index 6f2d49d..77010da 100644 --- a/src/features/createRoom/ui/CreateRoomForm.tsx +++ b/src/features/createRoom/ui/CreateRoomForm.tsx @@ -1,33 +1,11 @@ import React from 'react'; import styled from 'styled-components'; +import LobbyFormLayout from '../../../widgets/layout/LobbyFormLayout'; import Input from '../../../shared/ui/Input'; import SwitchToggle from '../../../shared/ui/switchToggle/SwitchToggle'; import FormButton from '../../../shared/ui/formButton/FormButton'; import addImageIcon from '../../../../public/icons/gallery-add.svg'; -const Form = styled.form` - position: relative; - display: flex; - width: calc(1240px - 52px); - justify-content: space-between; - align-items: center; - padding: 24px; - border-radius: 10px; - background: var(--white); - margin: 2px auto 25px; - &::before { - content: ""; - position: absolute; - top: -2px; - bottom: -2px; - left: -2px; - right: -2px; - border-radius: 12px; - background: linear-gradient(223deg, rgba(255, 178, 64, 0.90) 0%, rgba(216, 97, 196, 0.90) 50.52%, rgba(23, 94, 241, 0.90) 100%); - z-index: -1; - } -` - const Info = styled.div` display: flex; gap: 24px; @@ -59,33 +37,9 @@ const Text = styled.p` width: 203px; ` -// const CreateButton = styled.button` -// font-family: var(--font); -// font-size: 18px; -// font-style: normal; -// font-weight: 400; -// line-height: normal; -// color: var(--orange); - -// display: flex; -// height: 44px; -// justify-content: center; -// align-items: center; -// padding: 0 10px; -// border-radius: 8px; -// border: 1px solid var(--orange); -// background: var(--white); -// box-shadow: 0px 2px 6px 0px #C5CCD5; -// transition: all .3s ease; -// &:hover { -// color: var(--white); -// background: var(--orange); -// } -// ` - export const CreateRoomForm: React.FC = () => { return ( -
+ установить аватар @@ -99,6 +53,6 @@ export const CreateRoomForm: React.FC = () => { Создать - +
) } \ No newline at end of file diff --git a/src/widgets/layout/LobbyFormLayout.tsx b/src/widgets/layout/LobbyFormLayout.tsx new file mode 100644 index 0000000..9ef45ec --- /dev/null +++ b/src/widgets/layout/LobbyFormLayout.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Container = styled.form` + position: relative; + display: flex; + width: calc(1240px - 52px); + justify-content: space-between; + align-items: center; + padding: 24px; + border-radius: 10px; + background: var(--white); + margin: 2px auto 25px; + &::before { + content: ""; + position: absolute; + top: -2px; + bottom: -2px; + left: -2px; + right: -2px; + border-radius: 12px; + background: linear-gradient(223deg, rgba(255, 178, 64, 0.90) 0%, rgba(216, 97, 196, 0.90) 50.52%, rgba(23, 94, 241, 0.90) 100%); + z-index: -1; + } +` + +interface Props { + children?: React.ReactNode, +} + +const LobbyFormLayout: React.FC = ({ children }) => { + return ( + {children} + ) +} + +export default LobbyFormLayout; From aa2921c7ad24aab3c85ecfb08443949100a80778 Mon Sep 17 00:00:00 2001 From: Emil Novikov Date: Fri, 21 Jul 2023 22:18:51 +0600 Subject: [PATCH 4/5] fix editform layout --- src/entities/room/ui/RoomCard.tsx | 4 +- src/features/editRoom/ui/EditRoomForm.tsx | 60 +++++++++++++---------- src/widgets/RoomsList.tsx | 3 +- src/widgets/layout/LobbyFormLayout.tsx | 3 +- 4 files changed, 40 insertions(+), 30 deletions(-) diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx index d98afc1..7b1ea99 100644 --- a/src/entities/room/ui/RoomCard.tsx +++ b/src/entities/room/ui/RoomCard.tsx @@ -13,15 +13,15 @@ import Select from "../../../shared/ui/Select"; const Container = styled.div` position: relative; display: flex; - width: calc(100% - 48px); + width: calc(100% - 20px); padding: 24px; justify-content: space-between; align-items: center; - margin-bottom: 18px; border-radius: 10px; background: var(--white); box-shadow: 0px 0px 8px 0px #e5eaf8; + margin: 0 auto 18px; `; const Info = styled.div` diff --git a/src/features/editRoom/ui/EditRoomForm.tsx b/src/features/editRoom/ui/EditRoomForm.tsx index 7d7c056..6f13c41 100644 --- a/src/features/editRoom/ui/EditRoomForm.tsx +++ b/src/features/editRoom/ui/EditRoomForm.tsx @@ -1,34 +1,12 @@ import React from 'react'; import styled from 'styled-components'; +import LobbyFormLayout from '../../../widgets/layout/LobbyFormLayout'; import Input from '../../../shared/ui/Input'; import SwitchToggle from '../../../shared/ui/switchToggle/SwitchToggle'; import FormButton from '../../../shared/ui/formButton/FormButton'; import avatar from '../../../../public/icons/avatar.svg'; import deleteIcon from '../../../../public/icons/delete.svg'; -const Form = styled.form` - position: relative; - display: flex; - width: calc(100% - 48px); - justify-content: space-between; - align-items: center; - padding: 24px; - border-radius: 10px; - background: var(--white); - margin: 2px auto 25px; - &::before { - content: ""; - position: absolute; - top: -2px; - bottom: -2px; - left: -2px; - right: -2px; - border-radius: 12px; - background: linear-gradient(223deg, rgba(255, 178, 64, 0.90) 0%, rgba(216, 97, 196, 0.90) 50.52%, rgba(23, 94, 241, 0.90) 100%); - z-index: -1; - } -` - const Info = styled.div` display: flex; gap: 24px; @@ -45,18 +23,48 @@ const ImageContainer = styled.button` border: 2px dashed #175EF1; ` +const Center = styled.div` + display: flex; + gap: 10px; + align-items: center; +` + +const Text = styled.p` + font-family: var(--font); + font-size: 14px; + font-style: normal; + font-weight: 300; + line-height: normal; + color: var(--grey_1); + width: 203px; +` + +const Buttons = styled.div` + display: flex; + width: 159px; + justify-content: space-between; + align-items: center; +` + export const EditRoomForm: React.FC = () => { return ( -
+ аватар + +
+ + Ваш класс будет виден всем пользователям приложения + +
+ Сохранить - - + +
) } diff --git a/src/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx index d3d0516..ec74b3e 100644 --- a/src/widgets/RoomsList.tsx +++ b/src/widgets/RoomsList.tsx @@ -7,7 +7,8 @@ import RoomCard from '../entities/room/ui/RoomCard'; import { EditRoomForm } from '../features/editRoom'; const Container = styled.div` - width: calc(1196px - 5px); + width: 100%; + max-width: 1196px; padding-right: 5px; margin: 0 auto; max-height: 642px; diff --git a/src/widgets/layout/LobbyFormLayout.tsx b/src/widgets/layout/LobbyFormLayout.tsx index 9ef45ec..cc22c59 100644 --- a/src/widgets/layout/LobbyFormLayout.tsx +++ b/src/widgets/layout/LobbyFormLayout.tsx @@ -4,7 +4,8 @@ import styled from 'styled-components'; const Container = styled.form` position: relative; display: flex; - width: calc(1240px - 52px); + width: calc(100% - 20px); + max-width: 1196px; justify-content: space-between; align-items: center; padding: 24px; From 5c93666155d88ee2eefd904c02acff047dbfb0e4 Mon Sep 17 00:00:00 2001 From: Emil Novikov Date: Fri, 21 Jul 2023 22:36:36 +0600 Subject: [PATCH 5/5] fix navbar layout --- src/features/Search/ui/SearchInput.tsx | 2 +- src/widgets/layout/Navbar.tsx | 16 +++++----------- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/src/features/Search/ui/SearchInput.tsx b/src/features/Search/ui/SearchInput.tsx index 1434eda..e47c361 100644 --- a/src/features/Search/ui/SearchInput.tsx +++ b/src/features/Search/ui/SearchInput.tsx @@ -4,7 +4,7 @@ import searchIcon from '../../../../public/icons/search.svg'; const Container = styled.div` display: flex; - width: 300px; + width: 280px; height: 46px; padding: 10px; align-items: center; diff --git a/src/widgets/layout/Navbar.tsx b/src/widgets/layout/Navbar.tsx index 6104ebe..ffa568b 100644 --- a/src/widgets/layout/Navbar.tsx +++ b/src/widgets/layout/Navbar.tsx @@ -34,9 +34,9 @@ const Link = styled.a` const Right = styled.div` display: flex; width: 420px; - justify-content: space-between; align-items: center; padding-bottom: 13px; + gap: 16px; ` const EditButton = styled.button` @@ -46,7 +46,6 @@ const EditButton = styled.button` padding: 10px; justify-content: center; align-items: center; - gap: 10px; border-radius: 10px; background: var(--white, #FFF); @@ -85,15 +84,10 @@ const Navbar: React.FC = ({ activeLink, /*allLength, accessLength, myLeng Мои({2}) - {activeLink === 'my' ? - <> - - - Изменить - - - : - <>} + + + Изменить +