chore: template list sidebar consistent with application page sidebar (#17882)

made template list sidebar consistent with application page sidebar

app/client/src/pages/Templates/Filters.tsx

@@ -15,7 +15,7 @@ import { Colors } from "constants/Colors";
 
 const FilterWrapper = styled.div`
   overflow: auto;
-  height: calc(100vh - ${(props) => props.theme.homePage.header + 200}px);
+  height: calc(100vh - ${(props) => props.theme.homePage.header + 256}px);
   ${thinScrollbar}
 
   .more {
@@ -41,10 +41,12 @@ const StyledFilterCategory = styled(Text)`
   margin-bottom: ${(props) => props.theme.spaces[4]}px;
   padding-left: ${(props) => props.theme.spaces[6]}px;
   font-weight: bold;
+  text-transform: capitalize;
 
   &.title {
-    margin-bottom: ${(props) => props.theme.spaces[12] - 2}px;
+    margin-bottom: ${(props) => props.theme.spaces[12] - 10}px;
     display: inline-block;
+    text-transform: uppercase;
   }
 `;
 
@@ -53,7 +55,7 @@ const ListWrapper = styled.div`
 `;
 
 const FilterCategoryWrapper = styled.div`
-  padding-bottom: ${(props) => props.theme.spaces[13] - 2}px;
+  padding-bottom: ${(props) => props.theme.spaces[13] - 11}px;
 `;
 
 export type Filter = {
@@ -88,7 +90,7 @@ function FilterItem({ item, onSelect, selected }: FilterItemProps) {
   return (
     <FilterItemWrapper selected={selected}>
       <Checkbox
-        backgroundColor={Colors.GREY_900}
+        // backgroundColor={Colors.GREY_900}
         className="filter"
         isDefaultChecked={selected}
         label={item.label}
@@ -132,7 +134,7 @@ function FilterCategory({
   return (
     <FilterCategoryWrapper>
       <StyledFilterCategory type={TextType.P4}>
-        {label.toLocaleUpperCase()}{" "}
+        {`${label} `}
         {!!selectedFilters.length && `(${selectedFilters.length})`}
       </StyledFilterCategory>
       <ListWrapper>
@@ -183,21 +185,23 @@ function Filters() {
   const selectedFilters = useSelector(getTemplateFilterSelector);
 
   return (
-    <FilterWrapper className="filter-wrapper">
+    <div>
       <StyledFilterCategory className={"title"} type={TextType.H5}>
         {createMessage(FILTERS)}
       </StyledFilterCategory>
-      {Object.keys(filters).map((filter) => {
-        return (
-          <FilterCategory
-            filterList={filters[filter]}
-            key={filter}
-            label={filter}
-            selectedFilters={selectedFilters[filter] ?? []}
-          />
-        );
-      })}
-    </FilterWrapper>
+      <FilterWrapper className="filter-wrapper">
+        {Object.keys(filters).map((filter) => {
+          return (
+            <FilterCategory
+              filterList={filters[filter]}
+              key={filter}
+              label={filter}
+              selectedFilters={selectedFilters[filter] ?? []}
+            />
+          );
+        })}
+      </FilterWrapper>
+    </div>
   );
 }
 

app/client/src/pages/Templates/TemplateList.tsx

@@ -13,16 +13,18 @@ const breakpointColumnsObject = {
 };
 
 const Wrapper = styled.div`
-  padding-right: ${(props) => props.theme.spaces[12]}px;
-  padding-left: ${(props) => props.theme.spaces[12]}px;
+  padding: 0 11px;
+  // padding-right: ${(props) => props.theme.spaces[12]}px;
+  // padding-left: ${(props) => props.theme.spaces[12]}px;
 
   .grid {
     display: flex;
-    margin-left: ${(props) => -props.theme.spaces[9]}px;
+    // margin-left: ${(props) => -props.theme.spaces[9]}px;
   }
 
   .grid_column {
-    padding-left: ${(props) => props.theme.spaces[9]}px;
+    padding: 11px
+    // padding-left: ${(props) => props.theme.spaces[9]}px;
   }
 `;
 

app/client/src/pages/Templates/index.tsx

@@ -42,7 +42,6 @@ const PageWrapper = styled.div`
   margin-top: ${(props) => props.theme.homePage.header}px;
   display: flex;
   height: calc(100vh - ${(props) => props.theme.homePage.header}px);
-  padding-left: 8vw;
 `;
 
 const SidebarWrapper = styled.div`
@@ -52,6 +51,8 @@ const SidebarWrapper = styled.div`
   padding-left: ${(props) => props.theme.spaces[7]}px;
   padding-top: ${(props) => props.theme.spaces[11]}px;
   flex-direction: column;
+  box-shadow: 1px 0px 0px ${Colors.GALLERY_2};
+  position: fixed;
 `;
 
 const SecondaryWrapper = styled.div`
@@ -65,15 +66,14 @@ export const TemplateListWrapper = styled.div`
   padding-top: ${(props) => props.theme.spaces[11]}px;
   width: calc(100% - ${(props) => props.theme.homePage.sidebar}px);
   height: calc(100vh - ${(props) => props.theme.headerHeight});
-  overflow: auto;
-  padding-right: 8vw;
+  margin-left: ${(props) => props.theme.homePage.sidebar}px;
 `;
 
 export const ResultsCount = styled.div`
   ${(props) => getTypographyByKey(props, "h1")}
   color: ${Colors.CODE_GRAY};
   margin-top: ${(props) => props.theme.spaces[5]}px;
-  margin-left: ${(props) => props.theme.spaces[12]}px;
+  margin-left: ${(props) => props.theme.spaces[12] - 8}px;
   padding-bottom: ${(props) => props.theme.spaces[11]}px;
 `;