Skip to content

Commit bee6193

Browse files
author
Shahein Moussavi
authored
Merge pull request #148 from openpracticelibrary/pre-release-refactor
mostly design changes, some code cleanup
2 parents c2bae3e + 7b9bd3f commit bee6193

35 files changed

Lines changed: 564 additions & 343 deletions

‎public/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@
3030
work correctly both with client-side routing and a non-root public URL.
3131
Learn how to configure a non-root public URL by running `npm run build`.
3232
-->
33+
<style>
34+
html {
35+
scroll-padding-top: 90px;
36+
}
37+
</style>
3338
<title>Open Practice Library</title>
3439
</head>
3540
<body>

‎src/assets/icons/GitIcon.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from "react";
22

3-
function GitIcon() {
3+
function GitIcon(props) {
44
return (
55
<svg
66
xmlns="http://www.w3.org/2000/svg"
7-
width="23" height="22"
7+
width={props.width || "23"}
8+
height={props.height || "22"}
89
viewBox="0 0 23 22"
910
>
1011
<path
11-
fill="#717171"
12+
fill={props.fill || "#717171"}
1213
fillRule="evenodd"
1314
d="M11.277 0C5.05 0 0 5.05 0 11.279c0 4.983 3.231 9.21 7.713 10.701.564.104.77-.244.77-.543 0-.268-.01-.977-.015-1.918-3.137.68-3.8-1.513-3.8-1.513-.512-1.303-1.252-1.65-1.252-1.65-1.024-.699.078-.685.078-.685 1.132.08 1.727 1.163 1.727 1.163 1.006 1.723 2.64 1.225 3.283.936.102-.728.394-1.225.716-1.507-2.505-.284-5.138-1.252-5.138-5.574 0-1.231.44-2.239 1.161-3.027-.116-.285-.503-1.432.111-2.984 0 0 .947-.304 3.101 1.156.9-.25 1.865-.375 2.824-.38.958.005 1.922.13 2.823.38 2.153-1.46 3.099-1.156 3.099-1.156.615 1.552.228 2.7.112 2.984.723.788 1.16 1.796 1.16 3.027 0 4.333-2.638 5.286-5.15 5.565.405.348.765 1.037.765 2.089 0 1.507-.013 2.724-.013 3.094 0 .301.203.652.775.542 4.478-1.495 7.707-5.719 7.707-10.7C22.557 5.049 17.507 0 11.277 0"
1415
/>

‎src/assets/icons/InstaIcon.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from "react";
22

3-
function InstaIcon() {
3+
function InstaIcon(props) {
44
return (
55
<svg
66
xmlns="http://www.w3.org/2000/svg"
7-
width="22"
8-
height="22"
7+
width={props.height || "22"}
8+
height={props.height || "22"}
99
viewBox="0 0 22 22"
1010
>
1111
<g
12-
fill="#717171"
12+
fill={props.fill || "#717171"}
1313
fillRule="evenodd"
1414
>
1515
<path d="M10.974.007c-2.98 0-3.354.013-4.525.066-1.168.053-1.965.239-2.663.51-.722.28-1.334.656-1.944 1.266-.61.61-.985 1.222-1.266 1.943C.305 4.49.12 5.288.066 6.456.013 7.626 0 8 0 10.981c0 2.98.013 3.354.066 4.524.053 1.168.239 1.966.51 2.664.28.722.656 1.334 1.266 1.944.61.61 1.222.985 1.944 1.265.698.272 1.495.457 2.663.51 1.17.054 1.545.067 4.525.067 2.98 0 3.354-.013 4.524-.066 1.168-.054 1.966-.24 2.664-.51.722-.281 1.334-.656 1.944-1.266.61-.61.985-1.222 1.266-1.944.27-.698.456-1.496.51-2.664.053-1.17.066-1.544.066-4.524s-.013-3.354-.066-4.525c-.054-1.168-.24-1.966-.51-2.664-.28-.721-.656-1.333-1.266-1.943-.61-.61-1.222-.986-1.944-1.266-.698-.271-1.496-.457-2.664-.51-1.17-.053-1.544-.066-4.524-.066zm0 1.977c2.93 0 3.277.011 4.434.064 1.07.049 1.651.228 2.038.378.512.2.878.437 1.262.82.384.385.621.75.82 1.263.15.386.33.967.378 2.037.053 1.158.064 1.505.064 4.435 0 2.93-.01 3.277-.064 4.434-.048 1.07-.227 1.651-.377 2.038-.2.512-.437.878-.821 1.262-.384.384-.75.621-1.262.82-.387.15-.968.33-2.038.378-1.157.053-1.504.064-4.434.064s-3.278-.01-4.435-.064c-1.07-.048-1.65-.227-2.037-.378-.512-.199-.878-.436-1.262-.82-.384-.384-.622-.75-.82-1.262-.151-.387-.33-.968-.379-2.038-.053-1.157-.064-1.504-.064-4.434s.011-3.277.064-4.435c.049-1.07.228-1.65.378-2.037.2-.513.437-.878.821-1.262.384-.384.75-.622 1.262-.821.386-.15.968-.329 2.037-.378 1.158-.053 1.505-.064 4.435-.064z"/>

‎src/assets/icons/PodIcon.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from "react";
22

3-
function PodIcon() {
3+
function PodIcon(props) {
44
return (
5-
<svg
6-
xmlns="http://www.w3.org/2000/svg"
7-
width="22"
8-
height="22"
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width={props.width || "22"}
8+
height={props.height || "22"}
99
viewBox="0 0 22 22"
1010
>
11-
<path fill="#717171" d="M10.997 0C4.93 0 0 4.936 0 11.003c0 4.374 2.593 8.336 6.602 10.084.227.102.49.075.692-.071.2-.147.307-.39.278-.637-.028-.246-.187-.459-.416-.556-3.512-1.53-5.781-4.99-5.781-8.82 0-5.324 4.298-9.628 9.622-9.628s9.628 4.304 9.628 9.628c0 3.828-2.266 7.289-5.775 8.82-.233.094-.396.307-.426.556-.03.25.078.495.281.641.204.146.472.17.698.062C19.41 19.332 22 15.374 22 11.002 22 4.937 17.064 0 10.997 0zm0 4.385c-3.646 0-6.611 2.971-6.611 6.618 0 1.82.746 3.561 2.07 4.81.276.262.712.249.972-.027.26-.277.248-.712-.028-.973-1.049-.99-1.64-2.368-1.64-3.81 0-2.904 2.334-5.243 5.237-5.243 2.904 0 5.242 2.34 5.242 5.243 0 1.443-.593 2.82-1.643 3.81-.179.17-.254.42-.197.66.056.238.236.43.472.5.235.07.49.01.669-.16 1.325-1.25 2.076-2.989 2.076-4.81 0-3.647-2.972-6.618-6.619-6.618zm0 3.46c-1.496 0-2.72 1.225-2.72 2.721s1.224 2.726 2.72 2.726c1.496 0 2.726-1.23 2.726-2.726s-1.23-2.72-2.726-2.72zm0 6.141c-1.511 0-2.744 1.24-2.744 2.752v2.512c0 1.512 1.233 2.75 2.744 2.75 1.512 0 2.752-1.238 2.752-2.75v-2.512c0-1.512-1.24-2.752-2.752-2.752z"/>
11+
<path fill={props.fill || "#717171"} d="M10.997 0C4.93 0 0 4.936 0 11.003c0 4.374 2.593 8.336 6.602 10.084.227.102.49.075.692-.071.2-.147.307-.39.278-.637-.028-.246-.187-.459-.416-.556-3.512-1.53-5.781-4.99-5.781-8.82 0-5.324 4.298-9.628 9.622-9.628s9.628 4.304 9.628 9.628c0 3.828-2.266 7.289-5.775 8.82-.233.094-.396.307-.426.556-.03.25.078.495.281.641.204.146.472.17.698.062C19.41 19.332 22 15.374 22 11.002 22 4.937 17.064 0 10.997 0zm0 4.385c-3.646 0-6.611 2.971-6.611 6.618 0 1.82.746 3.561 2.07 4.81.276.262.712.249.972-.027.26-.277.248-.712-.028-.973-1.049-.99-1.64-2.368-1.64-3.81 0-2.904 2.334-5.243 5.237-5.243 2.904 0 5.242 2.34 5.242 5.243 0 1.443-.593 2.82-1.643 3.81-.179.17-.254.42-.197.66.056.238.236.43.472.5.235.07.49.01.669-.16 1.325-1.25 2.076-2.989 2.076-4.81 0-3.647-2.972-6.618-6.619-6.618zm0 3.46c-1.496 0-2.72 1.225-2.72 2.721s1.224 2.726 2.72 2.726c1.496 0 2.726-1.23 2.726-2.726s-1.23-2.72-2.726-2.72zm0 6.141c-1.511 0-2.744 1.24-2.744 2.752v2.512c0 1.512 1.233 2.75 2.744 2.75 1.512 0 2.752-1.238 2.752-2.75v-2.512c0-1.512-1.24-2.752-2.752-2.752z"/>
1212
</svg>
1313
);
1414
}

‎src/assets/icons/YoutubeIcon.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React from "react";
22

3-
function YoutubeIcon() {
3+
function YoutubeIcon(props) {
44
return (
55
<svg
66
xmlns="http://www.w3.org/2000/svg"
7-
width="29"
8-
height="20"
7+
width={props.width || "29"}
8+
height={props.height || "20"}
99
viewBox="0 0 29 20"
1010
>
1111
<g
1212
fill="none"
1313
fillRule="evenodd"
1414
>
15-
<path fill="#717171" d="M27.662 3.088C27.337 1.873 26.38.915 25.164.59 22.961 0 14.126 0 14.126 0S5.291 0 3.088.59C1.873.915.915 1.873.59 3.088 0 5.29 0 9.888 0 9.888s0 4.597.59 6.8c.325 1.216 1.283 2.173 2.498 2.498 2.203.59 11.038.59 11.038.59s8.835 0 11.038-.59c1.216-.325 2.173-1.282 2.498-2.498.59-2.203.59-6.8.59-6.8s0-4.597-.59-6.8"/>
15+
<path fill={props.fill || "#717171"} d="M27.662 3.088C27.337 1.873 26.38.915 25.164.59 22.961 0 14.126 0 14.126 0S5.291 0 3.088.59C1.873.915.915 1.873.59 3.088 0 5.29 0 9.888 0 9.888s0 4.597.59 6.8c.325 1.216 1.283 2.173 2.498 2.498 2.203.59 11.038.59 11.038.59s8.835 0 11.038-.59c1.216-.325 2.173-1.282 2.498-2.498.59-2.203.59-6.8.59-6.8s0-4.597-.59-6.8"/>
1616
<path fill="#FFFFFE" d="M11.301 14.126L18.641 9.888 11.301 5.65 11.301 14.126"/>
1717
</g>
1818
</svg>

‎src/components/Home/Community.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ import MobiusLogo from "../../assets/images/mobius-small.png";
1515
import CCHeartLogo from "../../assets/images/ccheart-black.png";
1616

1717
const useStyles = makeStyles((theme) => ({
18+
communityHeader: {
19+
display: "flex",
20+
flexDirection: "row",
21+
justifyContent: "space-between",
22+
paddingBottom: theme.spacing(12),
23+
},
1824
communityBox: {
1925
display: "flex",
2026
justifyContent: "center",
@@ -56,6 +62,7 @@ const useStyles = makeStyles((theme) => ({
5662
collabBox: {
5763
alignItems: "center",
5864
justifyContent: "center",
65+
paddingTop: theme.spacing(9),
5966
},
6067
iconBox: {
6168
display: "flex",
@@ -114,10 +121,8 @@ const Community = (props) => {
114121

115122
return (
116123
<>
117-
<Grid item xs={10} data-testid="communityHeader">
124+
<Grid item xs={12} className={classes.communityHeader} data-testid="communityHeader">
118125
<Typography variant={"h1"} ref={props.communityRef}>Community driven</Typography>
119-
</Grid>
120-
<Grid item xs={2} className={classes.aboutTitle}>
121126
<Button className={classes.aboutButton} variant="contained" onClick={() => navigate("#")}>
122127
About us{" "}<ArrowForwardIcon className={classes.arrowForward}/>
123128
</Button>

‎src/components/Home/CuratedPractices.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ import { GET_CURATED_PRACTICES } from "../../graphql";
1313
import PracticeCardGrid from "../shared/PracticeCards/PracticeCardGrid";
1414

1515
const useStyles = makeStyles((theme) => ({
16+
practiceHeader: {
17+
display: "flex",
18+
flexDirection: "row",
19+
justifyContent: "space-between",
20+
paddingBottom: theme.spacing(12),
21+
},
1622
aboutTitle: {
1723
textAlign: "right",
1824
},
@@ -41,10 +47,8 @@ const CuratedPractices = (props) => {
4147

4248
return (
4349
<>
44-
<Grid item xs={9} data-testid="curatedList">
50+
<Grid item xs={12} className={classes.practiceHeader} data-testid="curatedList">
4551
<Typography variant={"h1"}>Popular Practices</Typography>
46-
</Grid>
47-
<Grid item xs={3} className={classes.aboutTitle}>
4852
<Button className={classes.libraryButton} variant="contained" onClick={() => navigate("/practice")}>
4953
See Everything{" "}<ArrowForwardIcon className={classes.arrowForward}/>
5054
</Button>

‎src/components/Home/Landing.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const useStyles = makeStyles((theme) => ({
1414
titleBox: {
1515
display: "flex",
1616
flexDirection: "row",
17-
justifyContent: "center",
1817
alignContent: "center",
1918
alignItems: "center",
2019
backgroundImage: `linear-gradient(180.18deg, #F3F3F3 0%, #FFFFFF 13.64%, #FFFFFF 43.94%, rgba(255,255,255,0.94) 79.58%, rgba(255,255,255,0.62) 100%), url(${GrayDiagonals})`,

‎src/components/allPractices/FilterBar/DropDownSelectionFilter.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,18 @@ import React from "react";
22
import MenuItem from "@material-ui/core/MenuItem";
33
import FormControl from "@material-ui/core/FormControl";
44
import Select from "@material-ui/core/Select";
5+
import Typography from "@material-ui/core/Typography";
56
import { makeStyles } from "@material-ui/core/styles";
67

78
const useStyles = makeStyles((theme) => ({
89
formControl: {
910
marginTop: ".5rem",
1011
minWidth: "20rem",
1112
},
13+
mobiusLoopFilters: {
14+
fontSize: "0.75rem",
15+
textTransform: "uppercase",
16+
},
1217
}));
1318

1419
const DropDownSelectionFilter = (props) => {
@@ -23,7 +28,11 @@ const DropDownSelectionFilter = (props) => {
2328
classes={classes.selectEmpty}
2429
>
2530
{items.map((item) => (
26-
<MenuItem value={item}>{item}</MenuItem>
31+
<MenuItem value={item}>
32+
<Typography variant="button" className={classes.mobiusLoopFilters}>
33+
{item}
34+
</Typography>
35+
</MenuItem>
2736
))}
2837
</Select>
2938
</FormControl>

‎src/components/allPractices/FilterBar/KeywordSearchToggle.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,33 @@
11
import React from "react";
2+
import { makeStyles } from "@material-ui/core/styles/index";
23
import { Typography, Button } from "@material-ui/core";
3-
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
4-
import ExpandLessIcon from '@material-ui/icons/ExpandLess';
4+
import FilterListIcon from '@material-ui/icons/FilterList';
5+
6+
const useStyles = makeStyles((theme) => ({
7+
filterText: {
8+
paddingRight: theme.spacing(1),
9+
},
10+
flip: {
11+
color: theme.palette.common.discovery_blue,
12+
},
13+
flipActive: {
14+
transform: "rotate(180deg)",
15+
color: theme.palette.common.discovery_blue,
16+
},
17+
}));
518

619
const KeywordSearchToggle = (props) => {
20+
const classes = useStyles();
721
const { toggle, keywordSearchToggle } = props;
822

923
return (
1024
<Button data-testid="keywordSearchToggle" onClick={toggle}>
11-
<Typography variant={"overline"}>Filter</Typography>
12-
{keywordSearchToggle ? <ExpandMoreIcon /> :<ExpandLessIcon />}
25+
<Typography variant={"overline"} className={classes.filterText}>Filter</Typography>
26+
{keywordSearchToggle ?
27+
<FilterListIcon className={classes.flipActive} fontSize="small" />
28+
:
29+
<FilterListIcon className={classes.flip} fontSize="small" />
30+
}
1331
</Button>
1432
);
1533
};

0 commit comments

Comments
 (0)