scrollbars and small css changes

src/components/Admin.tsx

@@ -16,15 +16,16 @@ const LeftSide = styled.div`
 
 const Wrap = styled.div`
   display: flex;
-  height: calc(100vh - 80px);
+  height: calc(100vh - 120px);
   background-color: #ECEEF4;
+  width:100%;
 `;
 
 
 const Wrapper = styled.div`
-flex:5;
+  flex:12;
   display: flex;
-  height: calc(100vh - 80px);
+  height: calc(100vh - 120px);
   background-color: #ECEEF4;
 `;
 
@@ -42,7 +43,8 @@ const LeftPanelElement = styled.div<LeftPanelElement>`
   padding: 20px;
   cursor: pointer;
   box-shadow: ${({isCurrentTab})=>(isCurrentTab === true ? `inset 0px 0px 26px 0px rgba(0,0,0,0.55)` : "")};
-  border-bottom:1px solid;
+  border-bottom:1px solid #979797;
+  
 `;
 const Icon = styled.img`
   width: 40px;

src/components/App.tsx

@@ -12,6 +12,7 @@ const Wrapper = styled.div`
   background-color: #ECEEF4;
   padding-top:20px;
   padding-bottom:20px;
+  padding-right:20px;
 `;
 
 export const App = () => {

src/components/CourseCard.tsx

@@ -55,6 +55,9 @@ const ClassGroupStyled = styled.div`
     cursor: pointer;
     background-color: #9ed3ff;
   }
+  :last-child {
+    border-radius: 0 0 10px 10px;
+}
 `;
 
 interface ExpandIconProps {
@@ -75,12 +78,11 @@ const TypeClass = styled.div`
   position: absolute;
   border-radius: 15px;
   background-color: #00506b;
-  border: 2px solid;
+  border: 2px solid white;
   min-width: 45px;
   top: 5px;
   left: 5px;
   color: white;
-  font-weight: bold;
 `;
   
 const useStyles = makeStyles({
@@ -88,15 +90,15 @@ const useStyles = makeStyles({
     maxHeight: '244px',
     overflowY: 'auto',
     '&::-webkit-scrollbar': {
-      width: '0.4em',
+      width: '0.3em',
+      borderStyle:'none',
     },
     '&::-webkit-scrollbar-track': {
-      '-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)',
+      borderRadius: '10px',
     },
     '&::-webkit-scrollbar-thumb': {
       borderRadius: '10px',
-      backgroundColor: '#d4b851',
-      outline: '1px solid slategrey',
+      backgroundColor: '#4b4b4b',
     },
   },
 });

src/components/Dropdown.tsx

@@ -13,17 +13,17 @@ const DropdownContainer = styled.div`
   scroll-snap-type: y mandatory;
   scroll-behavior: smooth;
   ::-webkit-scrollbar-track {
+    background-color: #f2f4f7;
     border-radius: 10px;
-    background-color: #f5f5f5;
   }
   ::-webkit-scrollbar {
-    width: 12px;
-    background-color: #f5f5f5;
+    background-color: #f2f4f7;
+    width: 5px;
+    border-style:none;
   }
   ::-webkit-scrollbar-thumb {
     border-radius: 10px;
-    background-color: black;
-    border: 1px solid;
+    background-color: #4b4b4b;
   }
 `;
 

src/components/Rightbar.tsx

@@ -14,16 +14,14 @@ const RightbarStyled = styled.div`
   overflow-y: scroll;
   ::-webkit-scrollbar-track {
     border-radius: 10px;
-    background-color: #f5f5f5;
   }
   ::-webkit-scrollbar {
-    width: 12px;
-    background-color: #f5f5f5;
+    width: 5px;
+    border-style:none;
   }
   ::-webkit-scrollbar-thumb {
     border-radius: 10px;
-    background-color: black;
-    border: 1px solid;
+    background-color: #4b4b4b;
   }
   background-color: white;
   border-radius: 5px;

src/components/Scheduler.tsx

@@ -80,7 +80,6 @@ export const Scheduler = () => {
   }, []);
 
   return (
-    <>
       <SchedulerWrapper>
         <TableHead>
           {days.map((day, indexCell) =>
@@ -128,6 +127,5 @@ export const Scheduler = () => {
           <SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
         </TableBody>
       </SchedulerWrapper>
-    </>
   );
 };

src/components/Topbar.tsx

@@ -137,12 +137,12 @@ export default function ({ handleTransfer }: TopbarProps) {
     }
   }, [clearInput]);
 
-  // useEffect(() => {
-  //   console.log('input changed');
-  //   if (!open) {
-  //     setOpen(true);
-  //   }
-  // }, [input]);
+  useEffect(() => {
+    console.log('input changed');
+    if (!open) {
+      setOpen(true);
+    }
+  }, [input]);
 
   return (
     <Topbar>

src/contexts/CoursesProvider.tsx

@@ -85,7 +85,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
     );
 
     try {
-      await axiosInstance.post(`${process.env.REACT_APP_API_URL}/api/v1/commisions/add?`, JSON.stringify(basketIds));
+      await axiosInstance.post(`http://localhost:1285/api/v1/commisions/add?`, JSON.stringify(basketIds));
       enqueueSnackbar('Plan został zapisany', {
         variant: 'success',
         action,
@@ -116,7 +116,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   const getNewestTimetable = async () => {
     try {
       const { data } = await axiosInstance.get(
-        `${process.env.REACT_APP_API_URL}/api/v1/assignments/getCurrentAssignments`,
+        `http://localhost:1285/api/v1/assignments/getCurrentAssignments`,
       );
       const basket = data === '' ? [] : data;
       setBasket(basket);
@@ -129,7 +129,7 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {
   const fetchCourses = async () => {
     try {
       const { data: courses } = await axiosInstance.get<Array<Course>>(
-        `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
+        `http://localhost:1285/api/v1/courses/getCoursesWithGroups`,
       );
       const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
       console.log('courses: ', courses);