patch: explore page ux updates

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

src/__tests__/Explore/FilterCard.test.js

@@ -2,11 +2,19 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import FilterCard from 'components/Shared/FilterCard';
 import React, { useState } from 'react';
 import filterConstants from 'utilities/filterConstants';
+import MockThemeProvier from '__mocks__/MockThemeProvider';
 
 const StateFilterCardWrapper = () => {
   const [filters, setFilters] = useState([]);
   return (
-    <FilterCard title="Products" filters={filterConstants.osFilters} updateFilters={setFilters} filterValue={filters} />
+    <MockThemeProvier>
+      <FilterCard
+        title="Operating System"
+        filters={filterConstants.osFilters}
+        updateFilters={setFilters}
+        filterValue={filters}
+      />
+    </MockThemeProvier>
   );
 };
 

src/components/Explore/Explore.jsx

@@ -41,17 +41,17 @@ const useStyles = makeStyles((theme) => ({
   },
   resultsRow: {
     justifyContent: 'space-between',
-    alignItems: 'center',
-    color: '#00000099'
+    alignItems: 'center'
   },
   results: {
-    marginLeft: '1rem'
+    marginLeft: '1rem',
+    color: theme.palette.secondary.dark
   },
   sortForm: {
     backgroundColor: '#ffffff',
     borderColor: '#E0E0E0',
     borderRadius: '0.375em',
-    width: '25%',
+    width: '23%',
     textAlign: 'left'
   },
   filterButton: {

src/components/Home/Home.jsx

@@ -10,7 +10,7 @@ import { useNavigate, createSearchParams } from 'react-router-dom';
 import { sortByCriteria } from 'utilities/sortCriteria';
 import { HOME_POPULAR_PAGE_SIZE, HOME_RECENT_PAGE_SIZE } from 'utilities/paginationConstants';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   gridWrapper: {
     marginTop: 10,
     marginBottom: '5rem'
@@ -38,6 +38,18 @@ const useStyles = makeStyles(() => ({
     textAlign: 'center',
     letterSpacing: '-0.02rem'
   },
+  sectionHeaderContainer: {
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    width: '100%',
+    paddingTop: '1rem',
+    marginBottom: '1rem',
+    [theme.breakpoints.up('md')]: {
+      alignItems: 'flex-end',
+      flexDirection: 'row'
+    }
+  },
   sectionTitle: {
     fontWeight: '700',
     color: '#0F2139',
@@ -200,12 +212,7 @@ function Home() {
         <Loading />
       ) : (
         <Stack alignItems="center" className={classes.gridWrapper}>
-          <Stack
-            justifyContent="space-between"
-            alignItems={{ xs: 'flex-start', md: 'flex-end' }}
-            direction={{ xs: 'column', md: 'row' }}
-            sx={{ width: '100%', paddingTop: '3rem' }}
-          >
+          <Stack className={classes.sectionHeaderContainer} sx={{ paddingTop: '3rem' }}>
             <div>
               <Typography variant="h4" align="left" className={classes.sectionTitle}>
                 Most popular images
@@ -219,12 +226,7 @@ function Home() {
           </Stack>
           {renderMostPopular()}
           {/* currently most popular will be by downloads until stars are implemented */}
-          <Stack
-            justifyContent="space-between"
-            alignItems={{ xs: 'flex-start', md: 'flex-end' }}
-            direction={{ xs: 'column', md: 'row' }}
-            sx={{ width: '100%', paddingTop: '1rem' }}
-          >
+          <Stack className={classes.sectionHeaderContainer}>
             <div>
               <Typography variant="h4" align="left" className={classes.sectionTitle}>
                 Recently updated images

src/components/Shared/FilterCard.jsx

@@ -3,16 +3,38 @@ import { makeStyles } from '@mui/styles';
 import { isBoolean, isArray } from 'lodash';
 import React from 'react';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   card: {
     display: 'flex',
     minWidth: '15%',
     alignItems: 'flex-start',
     background: '#FFFFFF',
-    boxShadow: '0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)',
+    boxShadow: '0rem 0.313rem 0.625rem rgba(131, 131, 131, 0.08)',
     borderColor: '#FFFFFF',
-    borderRadius: '1.5rem',
+    borderRadius: '0.75rem',
     color: '#14191F'
+  },
+  cardContent: {
+    '&:last-child': {
+      padding: '1rem'
+    }
+  },
+  cardTitle: {
+    fontWeight: '600',
+    fontSize: '1.25rem',
+    lineHeight: '1.75rem',
+    letterSpacing: '-0.01rem',
+    marginBottom: '1rem'
+  },
+  formControl: {
+    marginLeft: '0',
+    marginRight: '0'
+  },
+  cardContentText: {
+    fontSize: '1rem',
+    color: theme.palette.secondary.dark,
+    lineHeight: '1.5rem',
+    paddingLeft: '0.5rem'
   }
 }));
 
@@ -52,8 +74,9 @@ function FilterCard(props) {
       return (
         <Tooltip key={index} title={filter.tooltip ?? filter.label} placement="top" arrow>
           <FormControlLabel
-            componentsProps={{ typography: { variant: 'body2' } }}
-            control={<Checkbox />}
+            className={classes.formControl}
+            componentsProps={{ typography: { variant: 'body2', className: classes.cardContentText } }}
+            control={<Checkbox sx={{ padding: '0.188rem', color: '#52637A' }} />}
             label={filter.label}
             id={title}
             checked={getCheckboxStatus(filter.label)}
@@ -67,8 +90,8 @@ function FilterCard(props) {
 
   return (
     <Card variant="outlined" className={classes.card}>
-      <CardContent>
-        <Typography variant="h6">{title || 'Filter Title'}</Typography>
+      <CardContent className={classes.cardContent}>
+        <Typography className={classes.cardTitle}>{title || 'Filter Title'}</Typography>
         <Stack direction="column">{getFilterRows()}</Stack>
       </CardContent>
     </Card>

src/components/Shared/RepoCard.jsx

@@ -42,7 +42,7 @@ const randomImage = () => {
 
 const useStyles = makeStyles(() => ({
   card: {
-    marginTop: '1rem',
+    marginBottom: '1rem',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',

src/index.js

@@ -11,14 +11,14 @@ const theme = createTheme(
     palette: {
       primary: {
         light: '#757ce8',
-        main: '#3f50b5',
+        main: '#14191F',
         dark: '#002884',
         contrastText: '#fff'
       },
       secondary: {
         light: '#ff7961',
-        main: '#ffab00',
-        dark: '#ba000d',
+        main: '#0F2139',
+        dark: '#52637A',
         contrastText: '#000'
       }
     }