From ecd584c4e295a997438be371f395d13b49a9ad60 Mon Sep 17 00:00:00 2001 From: Raul Kele <raulkeleblk@gmail.com> Date: Wed, 19 Apr 2023 13:57:58 +0300 Subject: [PATCH] patch: explore page ux updates Signed-off-by: Raul Kele <raulkeleblk@gmail.com> --- src/__tests__/Explore/FilterCard.test.js | 10 ++++++- src/components/Explore/Explore.jsx | 8 ++--- src/components/Home/Home.jsx | 28 +++++++++--------- src/components/Shared/FilterCard.jsx | 37 +++++++++++++++++++----- src/components/Shared/RepoCard.jsx | 2 +- src/index.js | 6 ++-- 6 files changed, 62 insertions(+), 29 deletions(-) diff --git a/src/__tests__/Explore/FilterCard.test.js b/src/__tests__/Explore/FilterCard.test.js index 7ca75fc6..edb537cf 100644 --- a/src/__tests__/Explore/FilterCard.test.js +++ b/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> ); }; diff --git a/src/components/Explore/Explore.jsx b/src/components/Explore/Explore.jsx index eba33257..dcb51321 100644 --- a/src/components/Explore/Explore.jsx +++ b/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: { diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx index 283f2685..999c184c 100644 --- a/src/components/Home/Home.jsx +++ b/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 diff --git a/src/components/Shared/FilterCard.jsx b/src/components/Shared/FilterCard.jsx index 8a80e051..af7712d6 100644 --- a/src/components/Shared/FilterCard.jsx +++ b/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> diff --git a/src/components/Shared/RepoCard.jsx b/src/components/Shared/RepoCard.jsx index 6741f999..733495a1 100644 --- a/src/components/Shared/RepoCard.jsx +++ b/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', diff --git a/src/index.js b/src/index.js index c0068ec7..dff19ee6 100644 --- a/src/index.js +++ b/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' } }