FilterCard changes

src/components/Cards/FilterCard/FilterCard.js

@@ -115,13 +115,13 @@ const FilterCard = () => {
 
   return (
     <FilterCardContainer>
+      <Header>
+        <Title>{t("filters.title")}</Title>
+        <Link to="#" textsize={"12px"} font={"Open Sans"} onClick={clearFilters}>
+          {t("filters.cancel")}
+        </Link>
+      </Header>
       <ContentContainer>
-        <Header>
-          <Title>{t("filters.title")}</Title>
-          <Link to="#" textsize={"12px"} onClick={clearFilters}>
-            {t("filters.cancel")}
-          </Link>
-        </Header>
         <FilterRadioDropdown
           data={[...Mockupdata[1]]}
           icon={

src/components/Cards/FilterCard/FilterCard.styled.js

@@ -5,6 +5,7 @@ import selectedTheme from "../../../themes";
 export const FilterCardContainer = styled(Box)`
   border-radius: 0;
   border-top-right-radius: 4px;
+  margin-top: -24px;
   height: calc(100% - 90px);
   padding: 36px;
   background-color: white;
@@ -19,18 +20,17 @@ export const FilterCardContainer = styled(Box)`
 export const Title = styled(Typography)`
   font-size: 24px;
   line-height: 33px;
-  font-weight: 900;
+  font-weight: 700;
   font-family: "Open Sans";
-  padding-left: 15px;
-  padding-top: 4px;
   color: ${selectedTheme.primaryText};
   position: relative;
-  top: -12px;
 `;
 export const Header = styled(Box)`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
 `;
 
 export const Footer = styled(Box)`
@@ -48,7 +48,19 @@ export const Footer = styled(Box)`
 `;
 export const ContentContainer = styled(Box)`
   overflow-y: auto;
-  margin-bottom: 10px;
+  height: 100%;
+  margin-bottom: 1.8rem;
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #ddd;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #777;
+  }
+  scrollbar-width: thin;
+  scrollbar-color: #ddd;
   ${() => window.scrollbars.visible && `padding-right: 15px;`}
 `