fix roomcard layout

Student-Labs-2023 · Aug 15, 2023 · 3f90d80 · 3f90d80
1 parent 93ee863
commit 3f90d80
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx
@@ -13,7 +13,6 @@ const Container = styled.div`
   display: flex;
   width: calc(100% - 20px);
   padding: 24px;
-  justify-content: space-between;
   align-items: center;
 
   border-radius: 10px;
@@ -24,13 +23,13 @@ const Container = styled.div`
 
 const Info = styled.div`
   display: flex;
-  width: 329px;
-  justify-content: space-between;
+  width: 392px;
+  gap: 24px;
   align-items: center;
 `;
 
 const Title = styled.h3`
-  width: 259px;
+  width: 100%;
   font-family: var(--font);
   font-size: 20px;
   font-style: normal;
@@ -41,7 +40,7 @@ const Title = styled.h3`
 `;
 
 const Teacher = styled.h4`
-  min-width: 251px;
+  min-width: 360px;
   font-family: var(--font);
   font-size: 18px;
   font-style: normal;
@@ -56,6 +55,7 @@ const Access = styled.div`
   width: 229px;
   justify-content: space-between;
   align-items: center;
+  margin-left: 129px;
 `;
 
 let Path = styled.path``;
@@ -100,7 +100,7 @@ const RoomCard: React.FC<Props> = ({ room }) => {
       ) : (
         <img src={callDisabled} alt="недоступен" />
       )}
-      <Access style={room.owner_fullname === user?.name ? {width: "249px"} : {}} >
+      <Access>
         <JoinButton href={`https://network-class-videosdk-client.pages.dev/?roomId=${room.id}&email=${user?.email}`} />
         <Tooltip active={tooltipActive}>
           <Button onClick={copyLink}>

diff --git a/src/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx
@@ -37,8 +37,7 @@ const Container = styled.div`
 
 const Header = styled.div`
     display: flex;
-    width: 80%;
-    justify-content: space-between;
+    width: 100%;
     align-items: center;
     margin: 0 auto 27px;
 `
@@ -81,10 +80,10 @@ const RoomsList: React.FC<Props> = observer(({ rooms, loading, error }) => {
   return (
     <Container>
         <Header>
-            <Head>Название</Head>
-            <Head>Владелец</Head>
-            <Head>Статус</Head>
-            <Head>Доступ</Head>
+            <Head style={{ marginLeft: 93 }}>Название</Head>
+            <Head style={{ marginLeft: 216 }}>Владелец</Head>
+            <Head style={{ marginLeft: 234 }}>Статус</Head>
+            <Head style={{ marginLeft: 110 }}>Доступ</Head>
         </Header>
         {searchedRooms.length > 0 ?
         <>