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 ( - + + + ); }; 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() { ) : ( - +
Most popular images @@ -219,12 +226,7 @@ function Home() { {renderMostPopular()} {/* currently most popular will be by downloads until stars are implemented */} - +
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 ( } + className={classes.formControl} + componentsProps={{ typography: { variant: 'body2', className: classes.cardContentText } }} + control={} label={filter.label} id={title} checked={getCheckboxStatus(filter.label)} @@ -67,8 +90,8 @@ function FilterCard(props) { return ( - - {title || 'Filter Title'} + + {title || 'Filter Title'} {getFilterRows()} 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' } }