Merge pull request #5 from Student-Labs-2023/develop

Develop
Student-Labs-2023 · Jul 23, 2023 · d17d47d · d17d47d
2 parents b0ade0d + 5c93666
commit d17d47d
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 95 deletions.
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -31,7 +31,7 @@ const App: React.FC = () => {
           <Route path="/lobby/access" element={<LobbyAccess />} />
           <Route path="/lobby/my" element={<LobbyMy />} />
           <Route path="/joinlesson/:id" element={<JoinCall />} />
-          <Route path="/lesson" element={<CallPage />} />
+          <Route path="/lesson/:id" element={<CallPage />} />
         </Routes>
       )}
     </>

diff --git 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/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/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 (
-    <Form>
+    <LobbyFormLayout>
         <Info>
             <ImageContainer>
                 <img src={addImageIcon} alt="установить аватар" />
@@ -99,6 +53,6 @@ export const CreateRoomForm: React.FC = () => {
             </Text>
         </Center>
         <FormButton>Создать</FormButton>
-    </Form>
+    </LobbyFormLayout>
   )
 }
diff --git 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 (
-    <Form>
+    <LobbyFormLayout>
         <Info>
             <ImageContainer>
                 <img src={avatar} alt="аватар" />
             </ImageContainer>
             <Input type="text" placeholder='Введите название класса' value='математика 10 класс' />
+        </Info>
+        <Center>
             <SwitchToggle/>
+            <Text>
+                Ваш класс будет виден всем пользователям приложения
+            </Text>
+        </Center>
+        <Buttons>
             <FormButton>Сохранить</FormButton>
             <button><img src={deleteIcon} alt="Удалить" /></button>
-        </Info>
-    </Form>
+        </Buttons>
+    </LobbyFormLayout>
   )
 }
diff --git 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 (
     <Page>
@@ -77,7 +79,7 @@ const JoinCall: React.FC = () => {
             <div className={styles.owner}>Морозов Антон Дмитриевич</div>
             <div className={styles.count}>0 участников</div>
             <div style={{ textAlign: "center" }}>
-              <EnterButton>Присоединиться</EnterButton>
+              <EnterButton onClick={joinLesson}>Присоединиться</EnterButton>
               {stateEnter === "Занятие началось" ||
               stateEnter === "Дождитесь разрешения на подключение" ? (
                 <div className={styles.stateOn}>{stateEnter}</div>

diff --git 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<Props> = ({ type, children }) => {
-  return <Button type={type ? type : "submit"}>{children}</Button>;
+const EnterButton: React.FC<Props> = ({ type, children, onClick }) => {
+  return <Button type={type ? type : "submit"} onClick={onClick}>{children}</Button>;
 };
 
 export default EnterButton;
diff --git 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
@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.form`
+    position: relative;
+    display: flex;
+    width: calc(100% - 20px);
+    max-width: 1196px;
+    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<Props> = ({ children }) => {
+  return (
+    <Container>{children}</Container>
+  )
+}
+
+export default LobbyFormLayout;
diff --git 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<Props> = ({ activeLink, /*allLength, accessLength, myLeng
             <Link href='/lobby/my' style={activeLink === 'my' ? {borderBottom: '2px var(--blue) solid', color: 'var(--blue)'} : {}}>Мои({2})</Link>
         </Left>
         <Right>
-        {activeLink === 'my' ? 
-                <>
-                    <AddRoomButton onClick={addRoom} />
-                    <EditButton onClick={editRooms}>
-                        <img src={editIcon} alt='Изменить'/>
-                    </EditButton>
-                </> 
-            :
-            <></>}
+            <AddRoomButton onClick={addRoom} />
+            <EditButton onClick={editRooms}>
+                <img src={editIcon} alt='Изменить'/>
+            </EditButton>
             <SearchInput/>
         </Right>
     </Container>