Skip to content

Commit b82ec69

Browse files
vojtaholikvojtaholik
committed
styles: cool-gray —> gray
1 parent f084bd6 commit b82ec69

File tree

13 files changed

+178
-78
lines changed

13 files changed

+178
-78
lines changed

‎src/components/app/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,8 @@ const FooterNavigation: FunctionComponent = () => {
119119

120120
const Footer: FunctionComponent = () => {
121121
return (
122-
<div className="bg-gray-50 mt-16">
123-
<footer className="max-w-screen-2xl w-full mx-auto px-4">
122+
<div className="bg-gray-50">
123+
<footer className="max-w-screen-xl w-full mx-auto xl:px-0 px-5">
124124
<FooterNavigation />
125125
<small className="space-x-6 py-6 text-xs w-full flex items-center md:justify-end justify-center text-gray-500">
126126
<div>©egghead.io</div>

‎src/components/app/Header.tsx‎

Lines changed: 57 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -9,54 +9,68 @@ const Header: FunctionComponent = () => {
99
const {viewer, loading} = useViewer()
1010

1111
return (
12-
<header className="px-4 py-3 sm:mb-5 mb-3 shadow-sm border-b border-gray-100 flex items-center justify-between">
13-
<div className="flex items-center justify-between w-full max-w-screen-2xl mx-auto">
14-
<Link href="/">
15-
<a className="flex items-center">
16-
<Eggo className="w-8 mr-1" />
17-
<span className="sm:inline-block hidden text-lg font-semibold">
18-
egghead.io
19-
</span>
20-
</a>
21-
</Link>
12+
<header className="px-5 py-3 sm:mb-5 mb-3 shadow-sm border-b border-gray-100 flex items-center justify-between">
13+
<div className="flex items-center justify-between w-full max-w-screen-xl mx-auto">
14+
<div className="flex items-center">
15+
<Link href="/">
16+
<a className="flex items-center">
17+
<Eggo className="w-8 mr-1" />
18+
<span className="sm:inline-block hidden text-lg font-semibold">
19+
egghead.io
20+
</span>
21+
</a>
22+
</Link>
23+
{!loading && (
24+
<nav className="sm:pl-5 pl-2 overflow-x-auto text-sm">
25+
<ul className="flex items-center space-x-1">
26+
<li className="">
27+
<Link href="/q" activeClassName="bg-gray-100 opacity-100">
28+
<a
29+
className="px-3 py-2 opacity-75 hover:opacity-100 hover:bg-gray-100 active:bg-gray-200 rounded-md inline-flex transition-all ease-in-out duration-300"
30+
onClick={() => track('clicked Content (header)')}
31+
>
32+
Content
33+
</a>
34+
</Link>
35+
</li>
36+
<li className="">
37+
<Link href="/learn" activeClassName="bg-gray-100 opacity-100">
38+
<a
39+
className="px-3 py-2 opacity-75 hover:opacity-100 hover:bg-gray-100 active:bg-gray-200 rounded-md inline-flex transition-all ease-in-out duration-300"
40+
onClick={() => track('clicked Topics (header)')}
41+
>
42+
Topics
43+
</a>
44+
</Link>
45+
</li>
46+
</ul>
47+
</nav>
48+
)}
49+
</div>
2250
{!loading && (
23-
<nav className="pl-5 overflow-x-auto">
24-
<ul className="flex items-center">
25-
<li className="sm:mr-8 mr-5">
26-
<Link href="/learn" activeClassName="underline">
27-
<a onClick={() => track('clicked Topics (header)')}>Topics</a>
28-
</Link>
51+
<div className="text-sm">
52+
{viewer ? (
53+
<li className="flex items-center justify-center space-x-1">
54+
<span>
55+
{viewer.name || viewer.full_name || 'member'}{' '}
56+
{viewer.is_pro && ' ⭐️'}
57+
</span>
58+
<img
59+
alt="avatar"
60+
className="w-8 rounded-full"
61+
src={viewer.avatar_url}
62+
/>
2963
</li>
30-
<li className="sm:mr-8 mr-5">
31-
<Link href="/q" activeClassName="underline">
32-
<a onClick={() => track('clicked Content (header)')}>
33-
Content
64+
) : (
65+
<li>
66+
<Link href="/login" activeClassName="underline">
67+
<a onClick={() => track('clicked Sign in (header)')}>
68+
Sign in
3469
</a>
3570
</Link>
3671
</li>
37-
38-
{viewer ? (
39-
<li className="flex items-center justify-center">
40-
<span>
41-
{viewer.full_name || 'member'} {viewer.is_pro && ' ⭐️'}
42-
</span>
43-
<img
44-
alt="avatar"
45-
className="w-8 rounded-full"
46-
src={viewer.avatar_url}
47-
/>
48-
</li>
49-
) : (
50-
<li>
51-
<Link href="/login" activeClassName="underline">
52-
<a onClick={() => track('clicked Sign in (header)')}>
53-
Sign in
54-
</a>
55-
</Link>
56-
</li>
57-
)}
58-
</ul>
59-
</nav>
72+
)}
73+
</div>
6074
)}
6175
</div>
6276
</header>

‎src/components/mdx/index.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Course from './course'
2+
import Link from 'next/link'
3+
import ResourceLink from './ResourceLink'
4+
import Card from './Card'
5+
import HeaderCard from './HeaderCard'
6+
import QuestionReveal from './QuestionReveal'
7+
import Callout from './Callout'
8+
import ProseSection from './ProseSection'
9+
import CheatSheet from './CheatSheet'
10+
import DefaultLayout from '../../layouts'
11+
12+
const mdxComponents = {
13+
Course,
14+
Link,
15+
ResourceLink,
16+
Card,
17+
HeaderCard,
18+
QuestionReveal,
19+
Callout,
20+
ProseSection,
21+
CheatSheet,
22+
DefaultLayout,
23+
}
24+
25+
export default mdxComponents

‎src/components/pages/courses/course-page-layout.tsx‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,19 @@ const CoursePageLayout: React.FunctionComponent<CoursePageLayoutProps> = ({
4949
const firstLessonURL = get(first(lessons), 'path')
5050
const {name: tagName, image_url: tagImage, slug: tagSlug} = primary_tag
5151

52+
const PlayButton = () => {
53+
return (
54+
<Link href={firstLessonURL}>
55+
<a className="inline-flex justify-center items-center px-5 py-3 rounded-md bg-blue-600 text-white transition-all hover:bg-blue-700 ease-in-out duration-200">
56+
<PlayIcon className="text-blue-100 mr-2" />
57+
Start Watching
58+
</a>
59+
</Link>
60+
)
61+
}
62+
5263
return (
5364
<>
54-
{' '}
5565
<NextSeo
5666
description={removeMarkdown(description)}
5767
canonical={http_url}
@@ -74,8 +84,8 @@ const CoursePageLayout: React.FunctionComponent<CoursePageLayoutProps> = ({
7484
],
7585
}}
7686
/>
77-
<div className="max-w-screen-lg mx-auto">
78-
<div className="md:mt-10 mt-5 grid md:grid-cols-5 grid-cols-1 md:gap-16 gap-5 rounded-md w-full left-0 mb-4">
87+
<div className="max-w-screen-xl mx-auto sm:pb-16 pb-8">
88+
<div className="mt-5 grid md:grid-cols-5 grid-cols-1 md:gap-16 gap-5 rounded-md w-full left-0 mb-4">
7989
<div className="md:col-span-3 md:row-start-auto row-start-2 flex flex-col h-full justify-center max-w-screen-2xl w-full mx-auto">
8090
<header>
8191
<h1 className="md:text-3xl text-2xl font-bold leading-tight md:text-left text-center">
@@ -100,6 +110,9 @@ const CoursePageLayout: React.FunctionComponent<CoursePageLayoutProps> = ({
100110
</Link>
101111
</UserRating>
102112
</div>
113+
<div className="md:hidden flex items-center justify-center w-full mt-5">
114+
<PlayButton />
115+
</div>
103116
<Markdown className="prose md:prose-lg text-gray-900 mt-6">
104117
{description}
105118
</Markdown>
@@ -137,7 +150,6 @@ const CoursePageLayout: React.FunctionComponent<CoursePageLayoutProps> = ({
137150
</div>
138151
)}
139152
</header>
140-
141153
<main>
142154
<section className="mt-8">
143155
<div className="mb-2 flex justify-between items-center">
@@ -183,16 +195,11 @@ const CoursePageLayout: React.FunctionComponent<CoursePageLayoutProps> = ({
183195
height={256}
184196
width={256}
185197
/>
186-
<div className="md:block hidden">
187-
<div className="py-6 border-b border-gray-200 w-full flex justify-center">
188-
<Link href={firstLessonURL}>
189-
<a className="inline-flex justify-center items-center px-5 py-3 rounded-md bg-blue-600 text-white transition-all hover:bg-blue-700 ease-in-out duration-200">
190-
<PlayIcon className="text-blue-100 mr-2" />
191-
Start Watching
192-
</a>
193-
</Link>
198+
<div className="md:block hidden space-y-10">
199+
<div className="w-full flex justify-center mt-10">
200+
<PlayButton />
194201
</div>
195-
<div className="py-6 border-b border-gray-200">
202+
<div className="">
196203
<InstructorProfile
197204
name={full_name}
198205
avatar_url={avatar_64_url}
@@ -202,7 +209,7 @@ const CoursePageLayout: React.FunctionComponent<CoursePageLayoutProps> = ({
202209
/>
203210
</div>
204211
{illustrator && (
205-
<div className="w-full py-6 border-b border-gray-200">
212+
<div className="w-full">
206213
<h4 className="font-semibold">Credits</h4>
207214
<span className="text-sm">
208215
{illustrator?.name} (illustration)

‎src/components/pages/lessons/AutoplayToggle.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, {FunctionComponent} from 'react'
2+
import cookies from 'utils/cookies'
3+
import useEggheadPlayer from 'components/EggheadPlayer/use-egghead-player'
4+
5+
type AutoplayToggleProps = {}
6+
7+
const AutoplayToggle: FunctionComponent<AutoplayToggleProps> = () => {
8+
// const {autoplay, setAutoplay} = useEggheadPlayer()
9+
const [autoplay, setAutoplay] = React.useState(false)
10+
React.useEffect(() => {
11+
cookies.set('egghead-autoplay', autoplay)
12+
}, [autoplay])
13+
14+
return (
15+
<div className="flex">
16+
<button
17+
onClick={() => setAutoplay(!autoplay)}
18+
type="button"
19+
name="autoplay"
20+
id="autoplay"
21+
aria-pressed="false"
22+
className={`${
23+
autoplay ? 'bg-indigo-600' : 'bg-gray-200'
24+
} relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`}
25+
>
26+
<span className="sr-only">
27+
{autoplay ? 'Turn autoplay off' : 'Turn autoplay on'}
28+
</span>
29+
<span
30+
aria-hidden="true"
31+
className={`${
32+
autoplay ? 'translate-x-5' : 'translate-x-0'
33+
} inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200`}
34+
></span>
35+
</button>
36+
<div className="ml-2">Autoplay</div>
37+
</div>
38+
)
39+
}
40+
41+
export default AutoplayToggle

‎src/components/pages/lessons/LessonInfo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,7 @@ const LessonInfo: FunctionComponent<LessonInfoProps> = ({
353353
</h4>
354354
</div>
355355
<div className="mt-3">
356-
<p className="text-sm text-cool-gray-600">
356+
<p className="text-sm text-gray-600">
357357
A Community Resource means that it’s free to access for all. The
358358
instructor of this lesson requested it to be open to the public.
359359
</p>

‎src/components/pages/login/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const LoginForm: FunctionComponent<LoginFormProps> = ({
4646
className={
4747
className
4848
? className
49-
: 'w-full mx-auto flex flex-col items-center justify-center sm:mt-24 mt-5 text-cool-gray-900'
49+
: 'w-full mx-auto flex flex-col items-center justify-center sm:mt-24 mt-5 text-gray-900'
5050
}
5151
>
5252
{image}
@@ -107,7 +107,7 @@ const LoginForm: FunctionComponent<LoginFormProps> = ({
107107
<div className="mt-1 relative rounded-md shadow-sm">
108108
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
109109
<svg
110-
className="h-5 w-5 text-cool-gray-400"
110+
className="h-5 w-5 text-gray-400"
111111
xmlns="http://www.w3.org/2000/svg"
112112
viewBox="0 0 20 20"
113113
fill="currentColor"
@@ -124,7 +124,7 @@ const LoginForm: FunctionComponent<LoginFormProps> = ({
124124
onChange={handleChange}
125125
onBlur={handleBlur}
126126
placeholder="you@company.com"
127-
className="py-3 text-cool-gray-900 placeholder-gray-400 focus:ring-indigo-500 focus:border-blue-500 block w-full pl-10 border-gray-300 rounded-md"
127+
className="py-3 text-gray-900 placeholder-gray-400 focus:ring-indigo-500 focus:border-blue-500 block w-full pl-10 border-gray-300 rounded-md"
128128
required
129129
/>
130130
</div>

‎src/components/search/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,10 @@ const Search: FunctionComponent<SearchProps> = ({
9191
>
9292
<Configure hitsPerPage={config.searchResultCount} />
9393
<AnimateSharedLayout>
94-
<motion.div layout className="max-w-screen-lg mx-auto">
94+
<motion.div
95+
layout
96+
className="max-w-screen-xl sm:pb-16 pb-8 md:-mt-4 -mt-2 mx-auto"
97+
>
9598
<AnimatePresence>
9699
{!isEmpty(instructor) && (
97100
<motion.div

‎src/components/search/refinement-list.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const TagItem: FunctionComponent<RefinementListProps> = ({
3232
<li key={item.label}>
3333
<a
3434
tabIndex={tabIndex}
35-
className={`block hover:bg-cool-gray-100 px-2 py-2 rounded-md transition ease-in-out duration-150 ${
35+
className={`block hover:bg-gray-100 px-2 py-2 rounded-md transition ease-in-out duration-150 ${
3636
item.isRefined ? 'text-blue-600 font-semibold' : 'font-normal'
3737
}`}
3838
href={createURL(item.value)}
@@ -88,7 +88,7 @@ const InstructorItem: FunctionComponent<RefinementListProps> = ({
8888
<li key={item.label}>
8989
<a
9090
tabIndex={tabIndex}
91-
className={`block hover:bg-cool-gray-100 px-2 py-2 rounded-md transition ease-in-out duration-150 ${
91+
className={`block hover:bg-gray-100 px-2 py-2 rounded-md transition ease-in-out duration-150 ${
9292
item.isRefined ? 'text-blue-600 font-semibold' : 'font-normal'
9393
}`}
9494
href={createURL(item.value)}
@@ -139,7 +139,7 @@ const Item: FunctionComponent<RefinementListProps> = ({
139139
<li key={item.label}>
140140
<a
141141
tabIndex={tabIndex}
142-
className={`block hover:bg-cool-gray-100 px-2 py-2 rounded-md transition ease-in-out duration-150 ${
142+
className={`block hover:bg-gray-100 px-2 py-2 rounded-md transition ease-in-out duration-150 ${
143143
item.isRefined ? 'text-blue-600 font-semibold' : 'font-normal'
144144
}`}
145145
href={createURL(item.value)}
@@ -202,12 +202,12 @@ const RefinementList: FunctionComponent<RefinementListProps> = ({
202202
<>
203203
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
204204
{/* prettier-ignore */}
205-
<svg className="text-cool-gray-500" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></g></svg>
205+
<svg className="text-gray-500" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></g></svg>
206206
</div>
207207
<input
208208
tabIndex={tabIndex}
209209
type="search"
210-
className="form-input bg-cool-gray-100 border-none rounded-md px-3 pl-8 py-2 w-full"
210+
className="form-input bg-gray-100 border-none rounded-md px-3 pl-8 py-2 w-full"
211211
placeholder={`Search ${label(attribute)}`}
212212
onChange={(event) => searchForItems(event.currentTarget.value)}
213213
/>

‎src/components/search/search-box.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@ const CustomSearchBox: FunctionComponent<CustomSearchBoxProps> = ({
2525
<div className="relative">
2626
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
2727
{/* prettier-ignore */}
28-
<svg className="text-cool-gray-500" width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></g></svg>
28+
<svg className="text-gray-500" width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></g></svg>
2929
</div>
3030
<input
3131
type="search"
3232
value={currentRefinement}
3333
onChange={(event) => refine(event.currentTarget.value)}
3434
placeholder={placeholder}
35-
className="form-input bg-cool-gray-100 rounded-md px-5 py-3 pl-10 w-full border border-transparent focus:outline-none focus:border-cool-gray-400 placeholder-cool-gray-600"
35+
className="form-input bg-gray-100 rounded-md px-5 py-3 pl-10 w-full border border-transparent focus:outline-none focus:border-cool-gray-400 placeholder-cool-gray-600"
3636
/>
3737
</div>
3838
</form>

0 commit comments

Comments
 (0)