feat(dark mode): add dark mode for books and about page

issue #799
sabertazimi · May 4, 2022 · 85c6b25 · 85c6b25
1 parent 76b58f4
commit 85c6b25
Show file tree

Hide file tree

Showing 25 changed files with 129 additions and 111 deletions.
diff --git a/components/Anchor/Anchor.tsx b/components/Anchor/Anchor.tsx
@@ -1,10 +1,12 @@
 import type { AnchorLinkProps, AnchorProps } from 'antd';
 import { Anchor as AntAnchor } from 'antd';
 
-interface AProps extends AnchorProps {}
-interface LProps extends AnchorLinkProps {}
+interface Props extends AnchorProps {}
 
-const Anchor = (props: AProps): JSX.Element => <AntAnchor {...props} />;
-const Link = (props: LProps): JSX.Element => <AntAnchor.Link {...props} />;
+interface LinkProps extends AnchorLinkProps {}
+
+const Anchor = (props: Props): JSX.Element => <AntAnchor {...props} />;
+
+const Link = (props: LinkProps): JSX.Element => <AntAnchor.Link {...props} />;
 
 export { Anchor, Link };
diff --git a/components/Article/Article.css b/components/Article/Article.css
@@ -0,0 +1,8 @@
+/* Remove arrow icon from GFM task list item */
+li.task-list-item > span {
+  @apply hidden;
+}
+
+li.task-list-item > div {
+  @apply ml-0;
+}
diff --git a/components/Article/__snapshots__/Article.test.tsx.snap b/components/Article/__snapshots__/Article.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`Article should render correctly (snapshot) 1`] = `
           1 Basic Notes
         </h1>
         <span
-          class="ant-tag inline-flex justify-center items-center mt-1  bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark text-base font-extrabold"
+          class="ant-tag inline-flex justify-center items-center mt-1 text-base font-extrabold bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark"
         >
           <span
             aria-label="calendar"
@@ -71,7 +71,7 @@ exports[`Article should render correctly (snapshot) 1`] = `
           </span>
         </span>
         <span
-          class="ant-tag inline-flex justify-center items-center mt-1  bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark text-base font-extrabold"
+          class="ant-tag inline-flex justify-center items-center mt-1 text-base font-extrabold bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark"
         >
           <span
             aria-label="edit"
@@ -97,7 +97,7 @@ exports[`Article should render correctly (snapshot) 1`] = `
           </span>
         </span>
         <span
-          class="ant-tag inline-flex justify-center items-center mt-1  bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark text-base font-extrabold"
+          class="ant-tag inline-flex justify-center items-center mt-1 text-base font-extrabold bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark"
         >
           <span
             aria-label="clock-circle"
@@ -468,7 +468,7 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
           1 Basic Notes
         </h1>
         <span
-          class="ant-tag inline-flex justify-center items-center mt-1  bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark text-base font-extrabold"
+          class="ant-tag inline-flex justify-center items-center mt-1 text-base font-extrabold bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark"
         >
           <span
             aria-label="calendar"
@@ -494,7 +494,7 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
           </span>
         </span>
         <span
-          class="ant-tag inline-flex justify-center items-center mt-1  bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark text-base font-extrabold"
+          class="ant-tag inline-flex justify-center items-center mt-1 text-base font-extrabold bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark"
         >
           <span
             aria-label="edit"
@@ -520,7 +520,7 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
           </span>
         </span>
         <span
-          class="ant-tag inline-flex justify-center items-center mt-1  bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark text-base font-extrabold"
+          class="ant-tag inline-flex justify-center items-center mt-1 text-base font-extrabold bg-black border-black text-light dark:bg-light dark:border-light dark:text-dark"
         >
           <span
             aria-label="clock-circle"

diff --git a/components/BooksGrid/BookCard.tsx b/components/BooksGrid/BookCard.tsx
@@ -1,5 +1,5 @@
 import Badge from '@components/Badge';
-import Card from '@components/Card';
+import { Card, Meta } from '@components/Card';
 import { Book as BookIcon } from '@components/Icons';
 import { getColorByName } from '@config';
 import type { Book } from '@types';
@@ -14,15 +14,14 @@ const BookCard = ({ book }: Props): JSX.Element => {
   return (
     <Badge.Ribbon text={title} color={getColorByName(title)}>
       <Card
-        hoverable
         title={
           <a href={url}>
             <BookIcon className="text-6xl align-top" />
             <span className="text-span-xl">{title}</span>
           </a>
         }
       >
-        <Card.Meta title={description} description={`Written by ${author}`} />
+        <Meta title={description} description={`Written by ${author}`} />
       </Card>
     </Badge.Ribbon>
   );

diff --git a/components/BooksGrid/__snapshots__/BooksGrid.test.tsx.snap b/components/BooksGrid/__snapshots__/BooksGrid.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`BooksGrid should render correctly (snapshot) 1`] = `
         class="ant-ribbon-wrapper"
       >
         <div
-          class="ant-card ant-card-bordered ant-card-hoverable"
+          class="ant-card ant-card-bordered card"
         >
           <div
             class="ant-card-head"

diff --git a/components/Card/Card.css b/components/Card/Card.css
@@ -0,0 +1,8 @@
+/* Add dark mode support for ant design card */
+.ant-card-meta-title {
+  @apply dark:text-light;
+}
+
+.ant-card-meta-description {
+  @apply dark:text-gray-50/50;
+}
diff --git a/components/Card/Card.tsx b/components/Card/Card.tsx
@@ -0,0 +1,15 @@
+import { classNames } from '@components/utils';
+import { Card as AntCard } from 'antd';
+import type { CardMetaProps, CardProps } from 'antd/lib/card';
+
+interface Props extends CardProps {}
+
+interface MetaProps extends CardMetaProps {}
+
+const Card = ({ className, ...props }: Props): JSX.Element => (
+  <AntCard {...props} className={classNames(className, 'card')} />
+);
+
+const Meta = (props: MetaProps): JSX.Element => <AntCard.Meta {...props} />;
+
+export { Card, Meta };
diff --git a/components/Card/index.ts b/components/Card/index.ts
@@ -1 +1 @@
-export { Card as default } from 'antd';
+export { Card, Meta } from './Card';
diff --git a/components/Editor/Editor.css b/components/Editor/Editor.css
@@ -0,0 +1,4 @@
+/* Remove border radius for sandpack editor */
+.sp-wrapper .sp-layout {
+  @apply rounded-none;
+}
diff --git a/components/GithubCard/GithubCard.tsx b/components/GithubCard/GithubCard.tsx
@@ -1,6 +1,6 @@
 import Avatar from '@components/Avatar';
 import Badge from '@components/Badge';
-import Card from '@components/Card';
+import { Card, Meta } from '@components/Card';
 import { getColorByName } from '@config';
 import type { Profile, Repo } from '@types';
 import GithubCardContent from './GithubCardContent';
@@ -17,8 +17,8 @@ const GithubCard = ({ profile, repos }: Props): JSX.Element => {
 
   return (
     <Badge.Ribbon text={username} color={getColorByName(username)}>
-      <Card hoverable title={<GithubCardHeader profile={profile} />}>
-        <Card.Meta
+      <Card title={<GithubCardHeader profile={profile} />}>
+        <Meta
           avatar={<Avatar src={avatar} alt={username} />}
           title={<GithubCardContent profile={profile} />}
           description={`Joined in ${createDate}`}

diff --git a/components/GithubCard/GithubCardContent.tsx b/components/GithubCard/GithubCardContent.tsx
@@ -9,17 +9,17 @@ interface Props {
 const GithubCardContent = ({ profile }: Props): JSX.Element => (
   <Space direction="vertical">
     <div>
-      <InfoCircle className="text-2xl align-top" />
+      <InfoCircle className="text-2xl align-top dark:text-light" />
       <span className="text-span">{profile.bio || 'No Description'}</span>
     </div>
     <div>
-      <Environment className="text-2xl align-top" />
+      <Environment className="text-2xl align-top dark:text-light" />
       <span className="text-span">{profile.location || 'Earth'}</span>
     </div>
     <div>
       <a href={profile.followersUrl}>
         <User className="text-2xl align-top" />
-        <span className="text-span">{`${profile.followers} Followers`}</span>
+        <span className="inline-block ml-2 text-xl align-bottom">{`${profile.followers} Followers`}</span>
       </a>
     </div>
   </Space>

diff --git a/components/GithubCard/GithubRepoCard.tsx b/components/GithubCard/GithubRepoCard.tsx
@@ -1,5 +1,5 @@
 import Badge from '@components/Badge';
-import Card from '@components/Card';
+import { Card, Meta } from '@components/Card';
 import { Branches, Star } from '@components/Icons';
 import { Tag } from '@components/Tags';
 import { getColorByName } from '@config';
@@ -13,22 +13,21 @@ const GithubRepoCard = ({ repo }: Props): JSX.Element => (
   <Badge.Ribbon text={repo.name} color={getColorByName(repo.name)}>
     <Card
       className="mt-8"
-      hoverable
       title={
         <a href={repo.repoUrl}>
           <Branches className="text-4xl align-top" />
           <span className="text-span-lg">{repo.name}</span>
         </a>
       }
     >
-      <Card.Meta
+      <Meta
         title={
           <Tag className="mb-3" color={getColorByName(repo.language)}>
             {repo.language}
           </Tag>
         }
       />
-      <Star className="text-2xl align-top" />
+      <Star className="text-2xl align-top dark:text-light" />
       <span className="text-span">{repo.stars}</span>
     </Card>
   </Badge.Ribbon>

diff --git a/components/GithubCard/__snapshots__/GithubCard.test.tsx.snap b/components/GithubCard/__snapshots__/GithubCard.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
     class="ant-ribbon-wrapper"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-hoverable"
+      class="ant-card ant-card-bordered card"
     >
       <div
         class="ant-card-head"
@@ -82,7 +82,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
                   <div>
                     <span
                       aria-label="info-circle"
-                      class="anticon anticon-info-circle text-2xl align-top"
+                      class="anticon anticon-info-circle text-2xl align-top dark:text-light"
                       role="img"
                     >
                       <svg
@@ -116,7 +116,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
                   <div>
                     <span
                       aria-label="environment"
-                      class="anticon anticon-environment text-2xl align-top"
+                      class="anticon anticon-environment text-2xl align-top dark:text-light"
                       role="img"
                     >
                       <svg
@@ -167,7 +167,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
                         </svg>
                       </span>
                       <span
-                        class="text-span"
+                        class="inline-block ml-2 text-xl align-bottom"
                       >
                         42 Followers
                       </span>
@@ -187,7 +187,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered ant-card-hoverable mt-8"
+            class="ant-card ant-card-bordered mt-8 card"
           >
             <div
               class="ant-card-head"
@@ -252,7 +252,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
               </div>
               <span
                 aria-label="star"
-                class="anticon anticon-star text-2xl align-top"
+                class="anticon anticon-star text-2xl align-top dark:text-light"
                 role="img"
               >
                 <svg
@@ -295,7 +295,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered ant-card-hoverable mt-8"
+            class="ant-card ant-card-bordered mt-8 card"
           >
             <div
               class="ant-card-head"
@@ -360,7 +360,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
               </div>
               <span
                 aria-label="star"
-                class="anticon anticon-star text-2xl align-top"
+                class="anticon anticon-star text-2xl align-top dark:text-light"
                 role="img"
               >
                 <svg
@@ -403,7 +403,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered ant-card-hoverable mt-8"
+            class="ant-card ant-card-bordered mt-8 card"
           >
             <div
               class="ant-card-head"
@@ -468,7 +468,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
               </div>
               <span
                 aria-label="star"
-                class="anticon anticon-star text-2xl align-top"
+                class="anticon anticon-star text-2xl align-top dark:text-light"
                 role="img"
               >
                 <svg
@@ -533,7 +533,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
     class="ant-ribbon-wrapper"
   >
     <div
-      class="ant-card ant-card-bordered ant-card-hoverable"
+      class="ant-card ant-card-bordered card"
     >
       <div
         class="ant-card-head"
@@ -609,7 +609,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
                   <div>
                     <span
                       aria-label="info-circle"
-                      class="anticon anticon-info-circle text-2xl align-top"
+                      class="anticon anticon-info-circle text-2xl align-top dark:text-light"
                       role="img"
                     >
                       <svg
@@ -643,7 +643,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
                   <div>
                     <span
                       aria-label="environment"
-                      class="anticon anticon-environment text-2xl align-top"
+                      class="anticon anticon-environment text-2xl align-top dark:text-light"
                       role="img"
                     >
                       <svg
@@ -694,7 +694,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
                         </svg>
                       </span>
                       <span
-                        class="text-span"
+                        class="inline-block ml-2 text-xl align-bottom"
                       >
                         42 Followers
                       </span>
@@ -714,7 +714,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered ant-card-hoverable mt-8"
+            class="ant-card ant-card-bordered mt-8 card"
           >
             <div
               class="ant-card-head"
@@ -779,7 +779,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
               </div>
               <span
                 aria-label="star"
-                class="anticon anticon-star text-2xl align-top"
+                class="anticon anticon-star text-2xl align-top dark:text-light"
                 role="img"
               >
                 <svg
@@ -822,7 +822,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered ant-card-hoverable mt-8"
+            class="ant-card ant-card-bordered mt-8 card"
           >
             <div
               class="ant-card-head"
@@ -887,7 +887,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
               </div>
               <span
                 aria-label="star"
-                class="anticon anticon-star text-2xl align-top"
+                class="anticon anticon-star text-2xl align-top dark:text-light"
                 role="img"
               >
                 <svg
@@ -930,7 +930,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered ant-card-hoverable mt-8"
+            class="ant-card ant-card-bordered mt-8 card"
           >
             <div
               class="ant-card-head"
@@ -995,7 +995,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
               </div>
               <span
                 aria-label="star"
-                class="anticon anticon-star text-2xl align-top"
+                class="anticon anticon-star text-2xl align-top dark:text-light"
                 role="img"
               >
                 <svg
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { Card as default } from 'antd';
		export { Card, Meta } from './Card';