Skip to content

Commit 33a5777

Browse files
sudeensudeen
committed
some design tweaking
1 parent 0e58773 commit 33a5777

19 files changed

+672
-193
lines changed

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@material-ui/styles": "^4.9.6",
99
"axios": "^0.19.2",
1010
"clsx": "^1.1.0",
11+
"fontfaceobserver": "^2.1.0",
1112
"fs-extra": "^9.0.0",
1213
"imagemin-mozjpeg": "^8.0.0",
1314
"imagemin-optipng": "^7.1.0",

‎pages/_app.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ThemeProvider } from "@material-ui/core/styles";
55
import Theme from "../src/ui/Theme";
66
import Header from "../src/ui/Header";
77
import Footer from "../src/ui/Footer";
8+
import Fonts from "../src/ui/Fonts";
89

910
export default class MyApp extends App {
1011
constructor(props) {
@@ -13,15 +14,17 @@ export default class MyApp extends App {
1314
this.state = { value: 0, selectedIndex: 0 };
1415
}
1516

16-
setValue = index => {
17+
setValue = (index) => {
1718
this.setState({ value: index });
1819
};
1920

20-
setSelectedIndex = index => {
21+
setSelectedIndex = (index) => {
2122
this.setState({ selectedIndex: index });
2223
};
2324

2425
componentDidMount() {
26+
Fonts();
27+
2528
// Remove the server-side injected CSS.
2629
const jssStyles = document.querySelector("#jss-server-side");
2730
if (jssStyles) {

‎pages/_document.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,11 @@ export default class MyDocument extends Document {
1919
<meta property="og:image:height" content="630" />
2020
<meta property="og:image:alt" content="company logo" />
2121
<link rel="icon" href="/favicon.png" />
22-
<link
22+
{/* Google font link is used in Fonts.js file */}
23+
{/* <link
2324
rel="stylesheet"
2425
href="https://fonts.googleapis.com/css?family=Pacifico|Raleway:100,400,400i,700|Roboto:300,400,500,700&display=swap"
25-
/>
26+
/> */}
2627
</Head>
2728
<body style={{ margin: 0 }}>
2829
<Main />
@@ -33,7 +34,7 @@ export default class MyDocument extends Document {
3334
}
3435
}
3536

36-
MyDocument.getInitialProps = async ctx => {
37+
MyDocument.getInitialProps = async (ctx) => {
3738
// Resolution order
3839
//
3940
// On the server:
@@ -62,7 +63,7 @@ MyDocument.getInitialProps = async ctx => {
6263

6364
ctx.renderPage = () =>
6465
originalRenderPage({
65-
enhanceApp: App => props => sheets.collect(<App {...props} />),
66+
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
6667
});
6768

6869
const initialProps = await Document.getInitialProps(ctx);

‎pages/about.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import Hidden from "@material-ui/core/Hidden";
99

1010
import CallToAction from "../src/ui/CallToAction";
1111

12-
const useStyles = makeStyles(theme => ({
12+
const useStyles = makeStyles((theme) => ({
1313
missionStatement: {
1414
fontStyle: "italic",
1515
fontWeight: 300,
@@ -24,6 +24,10 @@ const useStyles = makeStyles(theme => ({
2424
paddingLeft: "1.5em",
2525
paddingRight: "1.5em",
2626
},
27+
[theme.breakpoints.down("xs")]: {
28+
paddingLeft: "1em",
29+
paddingRight: "1em",
30+
},
2731
},
2832
avatar: {
2933
height: "25em",

‎pages/customsoftware.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import uxAnimation from "../src/animations/uxAnimation/data";
1616

1717
import CallToAction from "../src/ui/CallToAction";
1818

19-
const useStyles = makeStyles(theme => ({
19+
const useStyles = makeStyles((theme) => ({
2020
heading: {
2121
maxWidth: "40em",
2222
},
@@ -127,7 +127,15 @@ export default function CustomSoftware(props) {
127127
{/* Main Contents */}
128128
<Grid item container direction="column" className={classes.heading}>
129129
<Grid item>
130-
<Typography align={matchesMD ? "center" : undefined} variant="h1">
130+
<Typography
131+
align={matchesMD ? "center" : undefined}
132+
variant="h1"
133+
style={{
134+
lineHeight: matchesXS ? 1.1 : null,
135+
marginBottom: matchesXS ? "0.5em" : null,
136+
fontSize: "2.25em",
137+
}}
138+
>
131139
Custom Software Development
132140
</Typography>
133141
</Grid>
@@ -258,6 +266,7 @@ export default function CustomSoftware(props) {
258266
direction={matchesMD ? "column" : "row"}
259267
className={classes.rowContainer}
260268
justify="space-between"
269+
// style={{ display: matchesMD ? "grid" : undefined }}
261270
>
262271
<Grid
263272
item
@@ -317,7 +326,7 @@ export default function CustomSoftware(props) {
317326
direction={matchesSM ? "column" : "row"}
318327
md // not sure
319328
>
320-
<Grid item md>
329+
<Grid item md style={{ marginBottom: matchesSM ? "2em" : null }}>
321330
{/* To stop the animation isStopped={true} can be added in the Lottie component */}
322331
<Lottie
323332
options={scaleOptions}
@@ -433,7 +442,7 @@ export default function CustomSoftware(props) {
433442
</Typography>
434443
</Grid>
435444
</Grid>
436-
{/* Lottie component */}
445+
{/* Lottie component for Automation */}
437446
<Grid item md>
438447
{/* To stop the animation isStopped={true} can be added in the Lottie component */}
439448
<Lottie
@@ -449,8 +458,8 @@ export default function CustomSoftware(props) {
449458
className={classes.itemContainer}
450459
direction={matchesSM ? "column" : "row"}
451460
>
452-
{/* Lottie component */}
453-
<Grid item md>
461+
{/* Lottie component for User Experience */}
462+
<Grid item md style={{ marginBottom: matchesSM ? "2em" : null }}>
454463
{/* To stop the animation isStopped={true} can be added in the Lottie component */}
455464
<Lottie
456465
options={uxOptions}

0 commit comments

Comments
 (0)