From f06830e4d20a54479e977b985a1ba1a8e9ff3d4a Mon Sep 17 00:00:00 2001 From: wrzesinski-hubert Date: Sun, 22 Nov 2020 17:22:13 +0100 Subject: [PATCH] scrollbars and small css changes --- src/components/Admin.tsx | 10 ++++++---- src/components/App.tsx | 1 + src/components/CourseCard.tsx | 16 +++++++++------- src/components/Dropdown.tsx | 10 +++++----- src/components/Rightbar.tsx | 8 +++----- src/components/Scheduler.tsx | 2 -- src/components/Topbar.tsx | 12 ++++++------ src/contexts/CoursesProvider.tsx | 6 +++--- 8 files changed, 33 insertions(+), 32 deletions(-) diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx index d9793b9..4fe17d4 100644 --- a/src/components/Admin.tsx +++ b/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` 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; diff --git a/src/components/App.tsx b/src/components/App.tsx index 50f963a..96d29c3 100644 --- a/src/components/App.tsx +++ b/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 = () => { diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 105452a..b402512 100644 --- a/src/components/CourseCard.tsx +++ b/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,28 +78,27 @@ 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({ expanded: { 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', }, }, }); diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index e4fc4ec..30f9bd8 100644 --- a/src/components/Dropdown.tsx +++ b/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; } `; diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index 15bdd05..b87ec44 100644 --- a/src/components/Rightbar.tsx +++ b/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; diff --git a/src/components/Scheduler.tsx b/src/components/Scheduler.tsx index 119d965..aca9af7 100644 --- a/src/components/Scheduler.tsx +++ b/src/components/Scheduler.tsx @@ -80,7 +80,6 @@ export const Scheduler = () => { }, []); return ( - <> {days.map((day, indexCell) => @@ -128,6 +127,5 @@ export const Scheduler = () => { - ); }; diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index 8c4ced6..95f5871 100644 --- a/src/components/Topbar.tsx +++ b/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 ( diff --git a/src/contexts/CoursesProvider.tsx b/src/contexts/CoursesProvider.tsx index f7fd50d..5718001 100644 --- a/src/contexts/CoursesProvider.tsx +++ b/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>( - `${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);