Skip to content

Commit 246f76c

Browse files
hbuchelhbuchel
committed
rename to sass files, add theme
1 parent f0d3bb4 commit 246f76c

18 files changed

+190
-128
lines changed

‎src/components/Layout/Layout.tsx

+60-59
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { useState } from 'react';
1+
import { useState, forwardRef, useEffect } from 'react';
22
import Head from 'next/head';
3-
import { Footer } from '@/components/Footer/';
43
import { useRouter } from 'next/router';
4+
import { Flex, View, Button, ThemeProvider } from '@aws-amplify/ui-react';
5+
6+
import { defaultTheme } from '@/themes/defaultTheme';
7+
import { Footer } from '@/components/Footer/';
58
import { GlobalNav, NavMenuItem } from '@/components/GlobalNav/GlobalNav';
69
import { TestNav } from '@/components/TestNav';
7-
import { Flex, View, Button } from '@aws-amplify/ui-react';
810
import { PLATFORM_DISPLAY_NAMES } from '@/data/platforms';
911
import SearchBar from '@/components/SearchBar';
1012
import { IconMenu, IconDoubleChevron } from '@/components/Icons';
11-
1213
import { LEFT_NAV_LINKS, RIGHT_NAV_LINKS } from '@/utils/globalnav';
13-
import { forwardRef, useEffect } from 'react';
1414
import { trackPageVisit } from '../../utils/track';
1515

1616
export const Layout = forwardRef(function Layout(
@@ -83,69 +83,70 @@ export const Layout = forwardRef(function Layout(
8383
key="twitter:image"
8484
/>
8585
</Head>
86-
<View className={`layout-wrapper layout-wrapper--${pageType}`}>
87-
<GlobalNav
88-
leftLinks={LEFT_NAV_LINKS as NavMenuItem[]}
89-
rightLinks={RIGHT_NAV_LINKS as NavMenuItem[]}
90-
currentSite="Docs"
91-
/>
92-
<View className={`layout-search layout-search--${pageType}`}>
93-
<Flex className="search-menu-bar">
94-
<Button
95-
onClick={() => toggleMenuOpen(true)}
96-
size="small"
97-
className="search-menu-toggle mobile-toggle"
98-
>
99-
<IconMenu aria-hidden="true" />
100-
Menu
101-
</Button>
102-
<View className="search-menu-bar__search">
103-
<SearchBar />
104-
</View>
105-
</Flex>
106-
</View>
107-
<View
108-
className={`layout-sidebar${
109-
menuOpen ? ' layout-sidebar--expanded' : ''
110-
}`}
111-
>
112-
<View
113-
className="layout-sidebar__backdrop"
114-
onClick={() => toggleMenuOpen(false)}
115-
></View>
116-
<View className="layout-sidebar__inner">
117-
<div className="layout-sidebar-platform">
86+
<ThemeProvider theme={defaultTheme}>
87+
<View className={`layout-wrapper layout-wrapper--${pageType}`}>
88+
<GlobalNav
89+
leftLinks={LEFT_NAV_LINKS as NavMenuItem[]}
90+
rightLinks={RIGHT_NAV_LINKS as NavMenuItem[]}
91+
currentSite="Docs"
92+
/>
93+
<View className={`layout-search layout-search--${pageType}`}>
94+
<Flex className="search-menu-bar">
11895
<Button
96+
onClick={() => toggleMenuOpen(true)}
11997
size="small"
120-
colorTheme="overlay"
121-
className="mobile-toggle"
122-
onClick={() => toggleMenuOpen(false)}
98+
className="search-menu-toggle mobile-toggle"
12399
>
124-
<IconDoubleChevron aria-hidden="true" />
100+
<IconMenu aria-hidden="true" />
125101
Menu
126102
</Button>
127-
[ Platform switcher goes here]
128-
</div>
129-
<div className="layout-sidebar-menu">
130-
<TestNav />
131-
</div>
103+
<View className="search-menu-bar__search">
104+
<SearchBar />
105+
</View>
106+
</Flex>
132107
</View>
133-
{/* <button
134-
className="mobile-toggle-close"
135-
onClick={() => toggleMenuOpen(false)}
108+
<View
109+
className={`layout-sidebar${
110+
menuOpen ? ' layout-sidebar--expanded' : ''
111+
}`}
136112
>
137-
<IconDoubleChevron aria-hidden="true" />
138-
Close menu
139-
</button> */}
140-
</View>
113+
<View
114+
className={`layout-sidebar__backdrop${
115+
menuOpen ? ' layout-sidebar__backdrop--expanded' : ''
116+
}`}
117+
onClick={() => toggleMenuOpen(false)}
118+
></View>
119+
<View
120+
className={`layout-sidebar__inner${
121+
menuOpen ? ' layout-sidebar__inner--expanded' : ''
122+
}`}
123+
>
124+
<div className="layout-sidebar-platform">
125+
<Button
126+
size="small"
127+
colorTheme="overlay"
128+
className="mobile-toggle"
129+
onClick={() => toggleMenuOpen(false)}
130+
>
131+
<IconDoubleChevron aria-hidden="true" />
132+
Menu
133+
</Button>
134+
[ Platform switcher goes here]
135+
</div>
136+
<div className="layout-sidebar-menu">
137+
<TestNav />
138+
</div>
139+
</View>
140+
</View>
141141

142-
<View className="layout-main">
143-
<Flex as="main" className="main">
144-
{children}
145-
</Flex>
146-
<Footer />
142+
<View className="layout-main">
143+
<Flex as="main" className="main">
144+
{children}
145+
</Flex>
146+
<Footer />
147+
</View>
147148
</View>
148-
</View>
149+
</ThemeProvider>
149150
</>
150151
);
151152
});

‎src/pages/_app.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import '@algolia/autocomplete-theme-classic';
22
import '@aws-amplify/ui-react/styles.css';
3-
import '../styles/styles.css';
4-
import '../styles/contribute-styles.css';
3+
import '../styles/styles.scss';
54
import Head from 'next/head';
65
import { MDXProvider } from '@mdx-js/react';
76
import { Layout } from '@/components/Layout';

‎src/pages/index.tsx

+39-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useEffect, useState } from 'react';
2-
1+
import React, { useEffect } from 'react';
2+
import { Heading, Text, Flex, View, Button } from '@aws-amplify/ui-react';
33
import { Layout } from '@/components/Layout';
44

55
import { trackPageVisit } from '@/utils/track';
@@ -16,11 +16,46 @@ export default function Page() {
1616
trackPageVisit();
1717
}, []);
1818

19-
return <div style={{ minHeight: '600px' }}>Home page</div>;
19+
return (
20+
<Flex className="home-content">
21+
<Flex className="home-intro">
22+
<Heading level={1} className="home-intro__heading">
23+
Amplify Docs
24+
</Heading>
25+
<Text className="home-intro__text">
26+
AWS Amplify streamlines full-stack app development. With its
27+
libraries, CLI, and services, you can easily connect your frontend to
28+
the cloud for authentication, storage, APIs, and more.
29+
</Text>
30+
<Flex>
31+
<Button variation="primary" size="large">
32+
How Amplify Works
33+
</Button>
34+
<Button>Get Started</Button>
35+
</Flex>
36+
</Flex>
37+
<Flex direction="column">
38+
<Heading level={2}>
39+
Build fullstack apps with your framework of choice
40+
</Heading>
41+
<Text>
42+
AWS Amplify provides libraries for popular web and mobile frameworks,
43+
like JavaScript, Flutter, Swift, and React. Our guides, APIs, and
44+
other resources will help you build, connect, and host fullstack apps
45+
on AWS. Get started by selecting your preferred framework.
46+
</Text>
47+
</Flex>
48+
<Flex direction="column" alignItems="flex-start">
49+
<Heading level={2}>Features for JavaScript</Heading>
50+
<Button as="a" href="/">
51+
View all features
52+
</Button>
53+
</Flex>
54+
</Flex>
55+
);
2056
}
2157

2258
Page.getLayout = function getLayout(page) {
23-
const [menuOpen, toggleMenuOpen] = useState(false);
2459
return (
2560
<Layout
2661
pageTitle={meta.title}

‎src/styles/algolia.css renamed to ‎src/styles/algolia.scss

File renamed without changes.

‎src/styles/base.css renamed to ‎src/styles/base.scss

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ ol[role='list'] {
3636
body {
3737
min-height: 100vh;
3838
line-height: 1.5;
39+
color: var(--amplify-colors-font-primary);
3940
}
4041

4142
/* Set shorter line heights on headings and interactive elements */

‎src/styles/contribute-styles.css renamed to ‎src/styles/contribute-styles.scss

File renamed without changes.

‎src/styles/font-faces.css renamed to ‎src/styles/font-faces.scss

File renamed without changes.

‎src/styles/footer.css renamed to ‎src/styles/footer.scss

File renamed without changes.

‎src/styles/home.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.home-intro {
2+
flex-direction: column;
3+
max-width: 460px;
4+
gap: var(--amplify-space-xl);
5+
&__heading {
6+
font-family: var(--font-code);
7+
}
8+
&__text {
9+
font-size: var(--amplify-font-sizes-large);
10+
}
11+
}
12+
13+
.home-content {
14+
flex-direction: column;
15+
gap: var(--amplify-space-xxxl);
16+
}

‎src/styles/layout.css renamed to ‎src/styles/layout.scss

+19-50
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
1-
.search-menu-bar__search {
2-
margin-inline-start: auto;
3-
}
4-
5-
.search-menu-toggle {
6-
display: inline-flex;
7-
gap: var(--amplify-space-xxxs);
8-
align-self: center;
9-
}
10-
111
.layout-wrapper {
122
--sidebar-width: 340px;
133
background-color: var(--amplify-colors-background-primary);
14-
}
15-
.layout-wrapper--home {
16-
background-image: radial-gradient(hsla(176, 68%, 41%, 0.21), #fff);
4+
&--home {
5+
background-image: radial-gradient(hsla(176, 68%, 41%, 0.21), #fff);
6+
}
177
}
188

199
.layout-search {
@@ -22,9 +12,9 @@
2212
z-index: 1;
2313
top: var(--docs-dev-center-nav);
2414
background: var(--amplify-colors-background-primary);
25-
}
26-
.layout-search--home {
27-
background: transparent;
15+
&--home {
16+
background: transparent;
17+
}
2818
}
2919

3020
.layout-main {
@@ -40,9 +30,9 @@
4030
z-index: 1;
4131
overflow: hidden;
4232
display: none;
43-
}
44-
.layout-sidebar--expanded {
45-
display: block;
33+
&--expanded {
34+
display: block;
35+
}
4636
}
4737

4838
.layout-sidebar__inner {
@@ -55,11 +45,10 @@
5545
display: grid;
5646
grid-template-rows: auto 1fr;
5747
overflow: hidden;
58-
}
59-
60-
.layout-sidebar--expanded .layout-sidebar__inner {
61-
animation: menu 0.2s ease-out forwards;
62-
animation-delay: 0.1s;
48+
&--expanded {
49+
animation: menu 0.2s ease-out forwards;
50+
animation-delay: 0.1s;
51+
}
6352
}
6453

6554
.layout-sidebar__backdrop {
@@ -68,13 +57,14 @@
6857
height: 100%;
6958
background: rgba(0, 0, 0, 0.2);
7059
opacity: 0;
71-
}
72-
.layout-sidebar--expanded .layout-sidebar__backdrop {
73-
animation: menuFade 0.2s ease-out forwards;
60+
&--expanded {
61+
animation: menuFade 0.2s ease-out forwards;
62+
}
7463
}
7564

7665
.layout-sidebar-platform {
7766
padding: var(--amplify-space-large);
67+
border-bottom: 1px solid var(--amplify-colors-neutral-20);
7868
}
7969
.layout-sidebar-menu {
8070
padding: var(--amplify-space-large);
@@ -86,28 +76,6 @@
8676
flex-direction: column;
8777
}
8878

89-
/* .mobile-toggle-close {
90-
background: var(--amplify-colors-background-primary);
91-
color: var(--amplify-colors-font-primary);
92-
border: 2px solid transparent;
93-
padding: var(--amplify-space-small) var(--amplify-space-medium);
94-
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
95-
position: absolute;
96-
top: 0;
97-
left: var(--sidebar-width);
98-
gap: var(--amplify-space-xxxs);
99-
align-items: center;
100-
display: none;
101-
opacity: 0;
102-
cursor: pointer;
103-
} */
104-
105-
.layout-sidebar--expanded .mobile-toggle-close {
106-
display: inline-flex;
107-
animation: menuFade 0.2s ease-out forwards;
108-
animation-delay: 0.2s;
109-
}
110-
11179
@keyframes menu {
11280
0% {
11381
transform: translate(-100%, 0);
@@ -132,14 +100,15 @@
132100
}
133101
.layout-sidebar {
134102
position: fixed;
103+
width: var(--sidebar-width);
135104
}
136105
.layout-sidebar,
137106
.layout-sidebar--expanded {
138107
display: block;
139108
}
140109

141110
.layout-sidebar__inner,
142-
.layout-sidebar--expanded .layout-sidebar__inner {
111+
.layout-sidebar__inner--expanded {
143112
transform: translate(0, 0);
144113
animation: none;
145114
}

‎src/styles/prism-language-error.css renamed to ‎src/styles/prism-language-error.scss

File renamed without changes.

‎src/styles/search.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.search-menu-bar__search {
2+
margin-inline-start: auto;
3+
}
4+
5+
.search-menu-toggle {
6+
gap: var(--amplify-space-xxxs);
7+
align-self: center;
8+
}

‎src/styles/styles.css

-13
This file was deleted.

0 commit comments

Comments
 (0)