table ready

src/components/App.tsx

@@ -8,6 +8,8 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   display: flex;
   height: calc(100vh - 80px);
+  background-color: #ECEEF4;
+  padding:  20px;
 `;
 
 export const App = () => {

src/components/Profile.tsx

@@ -12,9 +12,8 @@ export const Profile = ({ anchorEl, handleClose }: ProfileProps) => {
 
   return (
     <Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
-      <MenuItem>Profile</MenuItem>
+      <MenuItem>Profil</MenuItem>
-      <MenuItem>My account</MenuItem>
+      <MenuItem onClick={logout}>Wyloguj</MenuItem>
-      <MenuItem onClick={logout}>Logout</MenuItem>
     </Menu>
   );
 };

src/components/Rightbar.tsx

@@ -25,6 +25,9 @@ const RightbarStyled = styled.div`
     background-color: black;
     border: 1px solid;
   }
+  background-color: white;
+  border-radius: 5px;
+  box-shadow: 3px 3px 3px -2px rgba(0, 0, 0, 0.59);
 `;
 const SaveButton = styled.div`
   display: flex;

src/components/Scheduler.tsx

@@ -5,8 +5,17 @@ import { days, hours } from '../constants/index';
 import styled from 'styled-components/macro';
 
 const SchedulerWrapper = styled.div`
+  display: flex;
   border-collapse: collapse;
   flex: 1;
+  background-color: white;
+  padding: 5px 15px 5px 5px;
+  border-radius: 5px;
+  margin-right: 20px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 3px 3px 3px -2px rgba(0, 0, 0, 0.59);
 `;
 
 const TableBody = styled.div`
@@ -31,10 +40,9 @@ interface TableCellProps {
 
 const TableCell = styled.div<TableCellProps>`
   height: ${({ height }) => height}px;
-  /* border: ${({ isHourColumn }) => !isHourColumn && '1px solid #ddd'}; */
+  border-width: ${({ isHourColumn }) => !isHourColumn && '2px'};
-  border-width: ${({ isHourColumn }) => !isHourColumn && '1px'};
+  border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'};
-  border-style: ${({ isHourColumn }) => !isHourColumn && 'solid dotted dotted dotted'};
+  border-color: rgb(242, 243, 245);  
-  /* border-bottom: ${({ isHourColumn }) => !isHourColumn && '1px dotted #ddd'}; */
   margin-top: ${({ isHourColumn, height }) => isHourColumn ? -(height / 2) : 0}px;
   display: flex;
   align-items: center;
@@ -44,6 +52,10 @@ const TableCell = styled.div<TableCellProps>`
   font-size:  0.75vw;
   user-select: none;
   border-collapse:collapse;
+  :nth-child(2) {
+    border-left: 2px solid rgb(242, 243, 245);
+  }
+  font-weight: bold;
   `;
 
 
@@ -77,7 +89,7 @@ export const Scheduler = () => {
                 {day}
               </TableCell>
             ) : (
-                <TableCell height={wrapperHeight / 26} key={indexCell} ref={cellRef}>
+                <TableCell height={wrapperHeight / 26} style={{ borderStyle: 'none none solid none' }} key={indexCell} ref={cellRef}>
                   {day}
                 </TableCell>
               ),
@@ -91,11 +103,21 @@ export const Scheduler = () => {
                   <TableCell height={wrapperHeight / 26} isHourColumn={true} key={`${indexRow}${indexCell}`}>
                     {value}
                   </TableCell>
-                ) : (
+                ) : indexRow === 23 ? (
+                  <TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
+                    {value}
+                  </TableCell>
+                ) : indexCell === 5 ? (
                   <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
                     {value}
                   </TableCell>
-                  ),
+                ) : indexRow % 2 !== 0 ? (
+                  <TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
+                    {value}
+                  </TableCell>
+                ) : <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
+                          {value}
+                        </TableCell>
               )}
             </TableRow>
           ))}

src/components/Topbar.tsx

@@ -1,7 +1,7 @@
 import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react';
 import Transfer from '../assets/transfer.png';
 import Search from '../assets/search.svg';
-import CloseIcon from '../assets/close.svg';
+import { ReactComponent as Close } from '../assets/close.svg';
 import ProfileIcon from '../assets/account.svg';
 import { Profile } from './Profile';
 import { Dropdown } from './Dropdown';
@@ -11,7 +11,7 @@ import styled from 'styled-components/macro';
 import ClickAwayListener from 'react-click-away-listener';
 
 const Topbar = styled.div`
-  background-color: #eceef4;
+  background-color: #E3E5ED;
   height: 80px;
   padding: 5px;
   font-size: 24px;
@@ -22,9 +22,10 @@ const Topbar = styled.div`
 
 const LogoWrapper = styled.div`
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   flex: 2;
+  margin-left: 10px;
 `;
 
 const Logo = styled.img`
@@ -37,6 +38,8 @@ const Logo = styled.img`
 `;
 
 const Text = styled.div`
+ margin-left: 10px;
+ font-size: 1.4rem;
  user-select: none;
   @media only screen and (max-width: 670px) {
     display: none;
@@ -46,7 +49,7 @@ const Text = styled.div`
 const FlexboxColumn = styled.div`
   display: flex;
   flex-direction: column;
-  flex: 9;
+  flex: 12;
 `;
 
 const InputWrapper = styled.div`
@@ -54,6 +57,7 @@ const InputWrapper = styled.div`
   margin-top: 15px;
   background-color: #f2f4f7;
   border-radius: 6px;
+  align-items: center;
 `;
 
 const Input = styled.input`
@@ -61,40 +65,45 @@ const Input = styled.input`
   font-size: 20px;
   height: 40px;
   width: 100%;
-  margin-left: 5px;
   border: none;
+  margin-left: 5px;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
   &:focus {
     outline: none;
   }
 `;
 
-const InputIcon = styled.img`
+const CloseIcon = styled(Close)`
   width: 30px;
+  height: 30px;
+  margin-right: 5px;
   @media only screen and (max-width: 670px) {
     width: 25px;
   }
   cursor: pointer;
+  :hover {
+    fill: grey;
+  }
 `;
 
 const IconWrapper = styled.div`
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
-  flex: 2;
+  width: 335px;
 `;
 
 const Icon = styled.img`
   width: 40px;
+  margin: 5px;
   cursor: pointer;
   @media only screen and (max-width: 670px) {
     width: 35px;
   }
 `;
 
-const VerticalLine = styled.div`
+
-  border-left: 1px solid black;
-  height: 30px;
-`;
 
 
 
@@ -139,20 +148,18 @@ export default function ({ handleTransfer }: TopbarProps) {
         <ClickAwayListener onClickAway={handleClickAway}>
           <InputWrapper>
             <Input placeholder="Wyszukaj przedmiot..." onChange={handleChange} onClick={handleClick} value={input} />
-            <InputIcon alt="close" src={CloseIcon} onClick={handleClearInput} />
+            <CloseIcon onClick={handleClearInput} />
-            <VerticalLine />
-            <InputIcon alt="search" src={Search} />
           </InputWrapper>
           <Dropdown open={open} input={input} handleCloseDropdown={handleCloseDropdown} />
         </ClickAwayListener>
       </FlexboxColumn>
 
       <IconWrapper>
-        <Icon alt="transfer" src={Transfer} onClick={handleTransfer} />
+        {/* <Text>Maciej Głowacki</Text> */}
+        {/* <Icon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
         <Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} />
         <Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
         <Profile anchorEl={anchorEl} handleClose={handleClose} />
-        <Text>nasz student</Text>
       </IconWrapper>
     </Topbar>
   );

src/constants/index.ts

@@ -8,29 +8,29 @@ export const days = [
 ];
 export const hours = [
   "8:00",
-  "8:30",
+  "",
   "9:00",
-  "9:30",
+  "",
   "10:00",
-  "10:30",
+  "",
   "11:00",
-  "11:30",
+  "",
   "12:00",
-  "12:30",
+  "",
   "13:00",
-  "13:30",
+  "",
   "14:00",
-  "14:30",
+  "",
   "15:00",
-  "15:30",
+  "",
   "16:00",
-  "16:30",
+  "",
   "17:00",
-  "17:30",
+  "",
   "18:00",
-  "18:30",
+  "",
   "19:00",
-  "19:30",
+  "",
 ];