Skip to content

Commit 55eb60b

Browse files
myronkaifungmyronkaifung
authored
Myronkaifung build darkmode (#1253)
* Update theme.config.tsx Remove hue from default config (affecting style overrides) * Update tailwind.config.js Add bg colors for light/dark mode * Update _app.tsx Add div around components to force bg colors based on light/dark mode selection * Update overrides.scss - create dark mode and light mode styling * Update colors.scss Add light mode and dark mode bg color * Update FeedbackCollector.module.scss adjust feedback collector styling to work with light/dark mode * Update _document.js change background color of Kapa widget * Update what-is-mixpanel.mdx Add div around components to target for style * Update what-to-track.mdx Add div around component to target for styling * Update identify-users.mdx add div around components to target for styling * Update install-mixpanel.mdx add div around component to target for styling * Update track-events.mdx * Update theme.config.tsx * Update overrides.scss * Update colors.scss * Update tailwind.config.js * Update overrides.scss * Update tailwind.config.js * Update theme.config.tsx * Update tailwind.config.js * Update overrides.scss * Update _document.js * Update overrides.scss * Update what-is-mixpanel.mdx * Update what-to-track.mdx * Update identify-users.mdx * Update install-mixpanel.mdx * Update track-events.mdx * Update _document.js * Update overrides.scss - Add style from changelog-index.js to here - Add style from feedback feedback components - Add style from extended buttons components * Update theme.config.tsx Enable hue again since color affects search module * Update changelogs.mdx add value to className for easier targeting * Update changelog-index.js - add class names for easier targeting in override CSS - added divs for organization * Update FeedbackCollector.tsx - renamed classes for easier targeting - consolidated CSS to override.scss, feedback scss no longer necessary * Update _document.js - update opacity style - update logo * Update overrides.scss * Update changelog-index.js * Update overrides.scss * Update overrides.scss * Update overrides.scss * use transparent logo in kapa module * Update overrides.scss * Update overrides.scss * Update overrides.scss
1 parent b23dc1f commit 55eb60b

15 files changed

+2136
-720
lines changed

‎components/FeedbackCollector/FeedbackCollector.module.scss

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,59 +2,60 @@
22
@use "sass:color";
33

44
.root {
5-
border-top-width: 1px;
6-
padding-top: 28px;
5+
// border-top-width: 1px;
6+
padding-top: 28px;
77
}
88

99
.title {
10-
font-weight: 500;
11-
font-size: 16px;
10+
font-weight: 500;
11+
font-size: 16px;
1212
}
1313

1414
.feedback {
15-
margin-bottom: 36px;
16-
margin-top: 36px;
15+
margin-bottom: 36px;
16+
margin-top: 36px;
1717
}
1818

1919
.buttonContainer {
20-
display: inline-flex;
21-
flex-wrap: wrap;
20+
display: inline-flex;
21+
flex-wrap: wrap;
2222
}
2323

2424
.button {
25-
background-color: colors.$base80;
26-
border-radius: 16px;
27-
box-shadow: 0 6px 12px color.adjust(colors.$black, $alpha: -0.95);
28-
display: flex;
29-
font-weight: 500;
30-
margin-right: 16px;
31-
margin-top: 16px;
32-
padding: 16px 24px;
25+
// background-color: colors.$base80;
26+
border-radius: 16px;
27+
box-shadow: 0 6px 12px color.adjust(colors.$black, $alpha: -0.95);
28+
display: flex;
29+
font-weight: 500;
30+
margin-right: 16px;
31+
margin-top: 16px;
32+
padding: 16px 24px;
33+
transition: 0.5s;
34+
35+
&:hover {
36+
background-color: colors.$purple20;
37+
color: colors.$purple100;
38+
box-shadow: 0 6px 12px color.adjust(colors.$purple140, $alpha: -0.95);
3339
transition: 0.5s;
3440

35-
&:hover {
36-
background-color: colors.$purple20;
37-
box-shadow: 0 6px 12px color.adjust(colors.$purple140, $alpha: -0.95);
38-
transition: 0.5s;
39-
40-
.thumbsDown, .thumbsUp {
41-
color: colors.$purple200;
42-
transition: 0.5s;
43-
}
44-
41+
.thumbsDown,
42+
.thumbsUp {
43+
color: colors.$purple140;
44+
transition: 0.5s;
4545
}
46+
}
4647
}
4748

4849
.thumbsUp {
49-
color: green;
50+
color: green;
5051
}
5152

5253
.thumbsDown {
53-
color: colors.$lava140;
54+
color: colors.$lava140;
5455
}
5556

5657
.inlineIcon {
57-
display: inline-block;
58-
margin-left: 8px;
59-
width: 22px;
58+
display: inline-block;
59+
margin-left: 8px;
60+
width: 22px;
6061
}

‎components/FeedbackCollector/FeedbackCollector.tsx

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { track } from "../../utils/tracking";
55
import ThumbsDownIcon from "../svg/ThumbsDown";
66
import ThumbsUpIcon from "../svg/ThumbsUp";
77

8-
import style from "./FeedbackCollector.module.scss";
8+
// import style from "./FeedbackCollector.module.scss";
99

1010
export function FeedbackCollector() {
1111
const [gaveFeedback, setGaveFeedback] = useState(false);
@@ -14,7 +14,7 @@ export function FeedbackCollector() {
1414
// changelogs don't have h1s
1515
const props = {
1616
title: document.querySelector(`h1`)?.textContent || document.title,
17-
}
17+
};
1818
track(isPositive ? `Docs Promoter` : `Docs Detractor`, props);
1919
setGaveFeedback(true);
2020

@@ -25,28 +25,36 @@ export function FeedbackCollector() {
2525
};
2626

2727
return (
28-
<div className={style.root}>
29-
{gaveFeedback ?
30-
<p className={clsx(style.title, style.feedback)}>Thanks for your feedback!</p> : (
28+
<div className="feedbackCollectorContainer">
29+
<div className="feedbackCollectorRoot">
30+
{gaveFeedback ? (
31+
<p className="feedbackThankYouText">Thanks for your feedback!</p>
32+
) : (
3133
<>
32-
<p className={style.title}>Was this page useful?</p>
33-
<div className={style.buttonContainer}>
34-
<button className={style.button} onClick={() => handleFeedback(true)}>
34+
<p className="feedbackQuestionTitle">Was this page useful?</p>
35+
<div className="feedbackButtonContainer">
36+
<button
37+
className="feedbackButton"
38+
onClick={() => handleFeedback(true)}
39+
>
3540
Yes
36-
<span className={clsx(style.thumbsUp, style.inlineIcon)}>
41+
<span className="feedbackThumbsUpIcon">
3742
<ThumbsUpIcon />
3843
</span>
3944
</button>
40-
<button className={style.button} onClick={() => handleFeedback(false)}>
45+
<button
46+
className="feedbackButton"
47+
onClick={() => handleFeedback(false)}
48+
>
4149
Could be better
42-
<span className={clsx(style.thumbsDown, style.inlineIcon)}>
50+
<span className="feedbackThumbsDownIcon">
4351
<ThumbsDownIcon />
4452
</span>
4553
</button>
4654
</div>
4755
</>
48-
)
49-
}
56+
)}
57+
</div>
5058
</div>
5159
);
5260
}

‎components/changelog-index.js

Lines changed: 61 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,48 @@
1-
import React, { useState, useEffect } from 'react';
1+
import React, { useState, useEffect } from "react";
22
import { getPagesUnderRoute } from "nextra/context";
3-
import ExtendedButton from '/components/ExtendedButton/ExtendedButton'
3+
import ExtendedButton from "/components/ExtendedButton/ExtendedButton";
44
import Link from "next/link";
55

66
const renderMedia = (page) => {
77
if (page.frontMatter?.thumbnail) {
8-
return <img src={page.frontMatter.thumbnail}
9-
alt="Thumbnail"
10-
style={{ maxWidth: '560px', width:"100%", borderRadius: "16px", marginBottom: "16px"}}
11-
className="max-w-full h-auto" />;
8+
return (
9+
<img
10+
src={page.frontMatter.thumbnail}
11+
alt="Thumbnail"
12+
style={{
13+
maxWidth: "560px",
14+
width: "100%",
15+
borderRadius: "16px",
16+
marginBottom: "16px",
17+
}}
18+
className="max-w-full h-auto"
19+
/>
20+
);
1221
} else if (page.frontMatter?.video) {
1322
const videoURL = page.frontMatter.video;
1423
let embedURL;
1524

1625
if (videoURL.includes("youtube.com") || videoURL.includes("youtu.be")) {
17-
const videoId = videoURL.split('v=')[1] ? videoURL.split('v=')[1].split('&')[0] : videoURL.split('/').pop();
26+
const videoId = videoURL.split("v=")[1]
27+
? videoURL.split("v=")[1].split("&")[0]
28+
: videoURL.split("/").pop();
1829
embedURL = `https://www.youtube.com/embed/${videoId}`;
1930
} else if (videoURL.includes("loom.com")) {
20-
const videoId = videoURL.split('/').pop();
31+
const videoId = videoURL.split("/").pop();
2132
embedURL = `https://www.loom.com/embed/${videoId}?hideEmbedTopBar=true`;
2233
}
2334

2435
return (
2536
<iframe
2637
src={embedURL}
27-
style = {{maxWidth:"560px", width:"100%", aspectRatio: 16 / 9, height:"auto", borderRadius: "16px", marginBottom: "16px"}}
38+
style={{
39+
maxWidth: "560px",
40+
width: "100%",
41+
aspectRatio: 16 / 9,
42+
height: "auto",
43+
borderRadius: "16px",
44+
marginBottom: "16px",
45+
}}
2846
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
2947
allowFullScreen
3048
title="Video"
@@ -43,67 +61,60 @@ export default function ChangelogIndex({ more = "Read more" }) {
4361
// Load initial or additional pages
4462
useEffect(() => {
4563
const morePages = allPages.slice(pageIndex, pageIndex + itemsPerPage);
46-
setDisplayedPages(prev => [...prev, ...morePages]);
64+
setDisplayedPages((prev) => [...prev, ...morePages]);
4765
}, [pageIndex]);
48-
66+
4967
const loadMore = () => {
50-
setPageIndex(prev => prev + itemsPerPage);
68+
setPageIndex((prev) => prev + itemsPerPage);
5169
};
5270

5371
return (
54-
<div style={{display: 'block', maxWidth: '560px', width:'100%', marginLeft: 'auto', marginRight: 'auto', alignItems: 'center' }}>
72+
<div
73+
style={{
74+
display: "block",
75+
maxWidth: "560px",
76+
width: "100%",
77+
marginLeft: "auto",
78+
marginRight: "auto",
79+
alignItems: "center",
80+
}}
81+
className="changelogIndexContainer"
82+
>
5583
{displayedPages.map((page) => (
56-
<div key={page.route} className="mb-10">
84+
<div key={page.route} className="changelogIndexItem">
5785
<h3>
5886
<Link
5987
href={page.route}
6088
style={{ color: "inherit", textDecoration: "none" }}
61-
className="block font-semibold mt-8 text-2xl "
89+
className="changelogItemTitle block"
6290
>
6391
{page.meta?.title || page.frontMatter?.title || page.name}
6492
</Link>
6593
</h3>
6694
{page.frontMatter?.date ? (
67-
<p className="opacity-50 text-sm mt-1 mb-2 leading-7">
68-
{page.frontMatter.date}
69-
</p>
95+
<p className="changelogDate">{page.frontMatter.date}</p>
7096
) : null}
71-
97+
7298
{renderMedia(page)}
7399

74100
<p className="opacity-80 mt-6 leading-7">
75-
{page.frontMatter?.description}{" "}
76-
<span className="inline-block">
77-
<Link
78-
href={page.route}
79-
className="text-[color:hsl(var(--nextra-primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font"
80-
>
81-
{more + " →"}
82-
</Link>
83-
</span>
84-
</p>
101+
{page.frontMatter?.description}{" "}
102+
<span className="inline-block">
103+
<Link href={page.route} className="changelogReadMoreLink">
104+
{more + " →"}
105+
</Link>
106+
</span>
107+
</p>
108+
<div className="changelogDivider nx-mt-16"></div>
85109
</div>
86110
))}
87-
{pageIndex + itemsPerPage < allPages.length && (
88-
<button onClick={loadMore} className="text-white
89-
90-
// Background
91-
bg-gradient-to-b from-purple50 to-purple100 hover:from-purple50 hover:to-purple100 active:from-purple50 active:to-purple140
92-
93-
// Shadow
94-
shadow-sm hover:shadow-md
95-
96-
// Shadow
97-
rounded-full hover:rounded-lg
98-
99-
// Font
100-
font-medium text-md
101-
102-
// Padding
103-
px-7 py-2.5">
104-
Load More
105-
</button>
106-
)}
107-
</div>
111+
{pageIndex + itemsPerPage < allPages.length && (
112+
<div class="changelogLoadMoreButtonContainer">
113+
<button onClick={loadMore} className="changelogLoadMoreButton">
114+
Load More
115+
</button>
116+
</div>
117+
)}
118+
</div>
108119
);
109120
}

0 commit comments

Comments
 (0)