Skip to content

Commit f54b18e

Browse files
Aadv1kAadv1k
authored
Merge pull request #17 from Aadv1k/dev
Refactor @frontend-projects/fem-fylo-dark-theme-landing-page and Fix EsLint linting warnings and errors.
2 parents 45eb2bb + 4558908 commit f54b18e

File tree

17 files changed

+290
-163
lines changed

17 files changed

+290
-163
lines changed

‎.husky/pre-commit

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
#!/usr/bin/env sh
22
. "$(dirname -- "$0")/_/husky.sh"
33

4-
npm run lint
4+
npm run lint:ws

‎.husky/pre-push

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
#!/usr/bin/env sh
22
. "$(dirname -- "$0")/_/husky.sh"
33

4-
npm ci && npm run build
4+
npm ci
5+
npm run build

‎config/.eslintrc.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
module.exports = {
22
extends: ["airbnb", "eslint-config-prettier"],
3+
parserOptions: {
4+
parser: '@babel/eslint-parser',
5+
requireConfigFile: false, // <== ADD THIS
6+
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
7+
sourceType: 'module' // Allows for the use of imports
8+
},
9+
310
plugins: ["prettier", "jest"],
411
env: {
512
browser: true,
@@ -12,7 +19,6 @@ module.exports = {
1219
"prettier/allowParens": "off",
1320
sourceType: 0,
1421
"no-restricted-syntax": ["off"],
15-
// why? just why is this even a thing? to make Js code look cool?
1622
"react/destructuring-assignment": ["off"],
1723
"react/jsx-filename-extension": ["off"],
1824
radix: "off",

‎package-lock.json

Lines changed: 101 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"build": "npm run build --ws && npm exec --ws -c ../../../scripts/deploy.sh && ./scripts/deployStatic.sh",
1212
"femFetch": "./scripts/femfetch.sh",
1313
"lint": "eslint .",
14+
"lint:ws": "npm exec --ws -c 'eslint --ext=.js,.jsx .'",
1415
"lint:fix": "eslint . --fix",
1516
"test:ws": "npm run test --if-present --ws",
1617
"format": "prettier --write ."
@@ -26,6 +27,7 @@
2627
},
2728
"homepage": "https://github.com/aadv1k/frontend-projects#readme",
2829
"devDependencies": {
30+
"@babel/eslint-parser": "^7.18.9",
2931
"@parcel/transformer-sass": "^2.6.2",
3032
"eslint": "^8.21.0",
3133
"eslint-config-airbnb": "^19.0.4",

‎packages/frontendmentor/fem-fylo-dark-theme-landing-page/public/index.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Frontend Mentor | Fylo landing page with dark theme and features grid</title>
7-
<link rel="preconnect" href="https://fonts.googleapis.com">
8-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9-
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Raleway:wght@400;700&display=swap" rel="stylesheet">
7+
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Raleway:wght@400;700&display=swap" rel="stylesheet">
1011
</head>
1112
<body>
1213
<main id="root"></main>

‎packages/frontendmentor/fem-fylo-dark-theme-landing-page/src/App.jsx

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

3-
import Navbar from "./Navbar";
4-
import Hero from "./Hero";
5-
import Features from "./Features";
6-
import CTA from "./CTA";
7-
import Testemonials from "./Testemonials";
8-
import Footer from "./Footer";
3+
import Navbar from "./components/Navbar";
4+
import Hero from "./components/Hero";
5+
import Features from "./components/Features";
6+
import CTA from "./components/CTA";
7+
import Testemonials from "./components/Testemonials";
8+
import Footer from "./components/Footer";
99

10-
export default function () {
10+
export default function App() {
1111
return (
12-
<React.Fragment>
12+
<>
1313
<Navbar />
1414
<Hero />
1515
<Features />
1616
<CTA />
1717
<Testemonials />
1818
<Footer />
19-
</React.Fragment>
19+
</>
2020
);
2121
}
22-

‎packages/frontendmentor/fem-fylo-dark-theme-landing-page/src/MuiTheme.js

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,54 @@ import { colors } from "./Variables";
33

44
const theme = createTheme({
55
typography: {
6-
fontFamily: "'Raleway', sans-serif",
6+
fontFamily: "'Open Sans', sans-serif",
7+
8+
button: {
9+
fontFamily: "'Raleway', sans-serif",
10+
},
11+
12+
h1: {
13+
fontSize: "2rem",
14+
maxWidth: "35ch",
15+
fontWeight: 700,
16+
fontFamily: "'Raleway', sans-serif",
17+
},
18+
19+
h2: {
20+
fontSize: "1.5rem",
21+
fontWeight: 700,
22+
maxWidth: "35ch",
23+
fontFamily: "'Raleway', sans-serif",
24+
},
25+
26+
h3: {
27+
fontSize: "1.3em",
28+
fontWeight: 700,
29+
lineHeight: 1.5,
30+
maxWidth: "35ch",
31+
fontFamily: "'Raleway', sans-serif",
32+
},
33+
34+
body2: {
35+
maxWidth: "60ch",
36+
fontSize: "1em",
37+
},
738
},
839

940
components: {
41+
MuiLink: {
42+
defaultProps: {
43+
underline: "hover",
44+
},
45+
46+
styleOverrides: {
47+
root: {
48+
textDecoration: "none",
49+
color: "inherit",
50+
},
51+
},
52+
},
53+
1054
MuiButton: {
1155
styleOverrides: {
1256
root: ({ ownerState }) => {
@@ -37,16 +81,16 @@ const theme = createTheme({
3781

3882
MuiCssBaseline: {
3983
styleOverrides: {
40-
body: {
41-
backgroundColor: colors.main,
42-
color: "#fff",
43-
},
44-
4584
"*": {
4685
margin: 0,
4786
padding: 0,
4887
boxSizing: "border-box",
4988
},
89+
90+
body: {
91+
backgroundColor: colors.main,
92+
color: "#fff",
93+
},
5094
},
5195
},
5296
},

‎packages/frontendmentor/fem-fylo-dark-theme-landing-page/src/CTA.jsx renamed to ‎packages/frontendmentor/fem-fylo-dark-theme-landing-page/src/components/CTA.jsx

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

33
import { Box, Typography, Button } from "@mui/material";
4-
import styled from "styled-components";
5-
import { sizes } from "./Variables.js";
6-
74
import { ArrowCircleRight } from "@mui/icons-material";
5+
import styled from "styled-components";
86

9-
import ProdImg from "./images/illustration-stay-productive.png";
7+
import { sizes } from "../Variables";
8+
import ProdImg from "../images/illustration-stay-productive.png";
109

1110
const Image = styled.div`
1211
img {
@@ -20,6 +19,7 @@ const Container = styled(Box)`
2019
align-items: center;
2120
padding: 3em 2em;
2221
flex: 50%;
22+
margin-block: 2.5em;
2323
2424
max-width: 1200px;
2525
width: 95%;
@@ -50,30 +50,24 @@ const Content = styled(Box)`
5050
}
5151
`;
5252

53-
const Heading = styled(Typography)`
54-
font-size: 1.5em;
55-
font-weight: 700;
56-
max-width: 600px;
57-
`;
58-
59-
export default function () {
53+
export default function CTA() {
6054
return (
6155
<Container>
6256
<Image>
6357
<img src={ProdImg} alt="" />
6458
</Image>
6559

6660
<Content>
67-
<Heading variant="h2">Stay productive, wherever you are</Heading>
68-
<p>
61+
<Typography variant="h1">Stay productive, wherever you are</Typography>
62+
<Typography variant="body2">
6963
Never let location be an issue when accessing your files. Fylo has you
7064
covered for all of your file storage needs.
71-
</p>
65+
</Typography>
7266

73-
<p>
67+
<Typography variant="body2">
7468
Securely share files and folders with friends, family and colleagues
7569
for live collaboration. No email attachments required.
76-
</p>
70+
</Typography>
7771

7872
<Button variant="text" endIcon={<ArrowCircleRight />} href="#">
7973
see how fylo works

0 commit comments

Comments
 (0)