diff --git a/components/Anchor/Anchor.tsx b/components/Anchor/Anchor.tsx index 8188d304a..1e464e1ab 100644 --- 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 => ; -const Link = (props: LProps): JSX.Element => ; +interface LinkProps extends AnchorLinkProps {} + +const Anchor = (props: Props): JSX.Element => ; + +const Link = (props: LinkProps): JSX.Element => ; export { Anchor, Link }; diff --git a/components/Article/Article.css b/components/Article/Article.css new file mode 100644 index 000000000..e82be077b --- /dev/null +++ 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 index 164baad81..2d0bfbd1a 100644 --- 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 { return ( @@ -22,7 +21,7 @@ const BookCard = ({ book }: Props): JSX.Element => { } > - + ); diff --git a/components/BooksGrid/__snapshots__/BooksGrid.test.tsx.snap b/components/BooksGrid/__snapshots__/BooksGrid.test.tsx.snap index a320feb89..b5d384531 100644 --- 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" >
( + +); + +const Meta = (props: MetaProps): JSX.Element => ; + +export { Card, Meta }; diff --git a/components/Card/index.ts b/components/Card/index.ts index c2910bffb..35b56a6cd 100644 --- 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 new file mode 100644 index 000000000..e723ce0be --- /dev/null +++ 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 index 6554da65c..adc9422db 100644 --- 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 ( - }> - }> + } title={} description={`Joined in ${createDate}`} diff --git a/components/GithubCard/GithubCardContent.tsx b/components/GithubCard/GithubCardContent.tsx index 792eeeb90..329839e36 100644 --- a/components/GithubCard/GithubCardContent.tsx +++ b/components/GithubCard/GithubCardContent.tsx @@ -9,17 +9,17 @@ interface Props { const GithubCardContent = ({ profile }: Props): JSX.Element => (
- + {profile.bio || 'No Description'}
- + {profile.location || 'Earth'}
diff --git a/components/GithubCard/GithubRepoCard.tsx b/components/GithubCard/GithubRepoCard.tsx index e694f3082..1219480c7 100644 --- 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,7 +13,6 @@ const GithubRepoCard = ({ repo }: Props): JSX.Element => ( @@ -21,14 +20,14 @@ const GithubRepoCard = ({ repo }: Props): JSX.Element => ( } > - {repo.language} } /> - + {repo.stars} diff --git a/components/GithubCard/__snapshots__/GithubCard.test.tsx.snap b/components/GithubCard/__snapshots__/GithubCard.test.tsx.snap index 0106345d7..98f248a08 100644 --- 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" >
42 Followers @@ -187,7 +187,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = ` class="ant-ribbon-wrapper" >
42 Followers @@ -714,7 +714,7 @@ exports[`GithubCard should render correctly when missing bio and location data ( class="ant-ribbon-wrapper" >
{ cover={} className={classNames(className, 'text-center')} > - + ); }; diff --git a/components/ImageCard/__snapshots__/ImageCard.test.tsx.snap b/components/ImageCard/__snapshots__/ImageCard.test.tsx.snap index 3c0cf42b1..be893827a 100644 --- a/components/ImageCard/__snapshots__/ImageCard.test.tsx.snap +++ b/components/ImageCard/__snapshots__/ImageCard.test.tsx.snap @@ -3,7 +3,7 @@ exports[`ImageCard should render local image correctly (snapshot) 1`] = `
( - +

{title}

diff --git a/components/PostsGrid/__snapshots__/PostCard.test.tsx.snap b/components/PostsGrid/__snapshots__/PostCard.test.tsx.snap index e34c1ceac..4e773c9ae 100644 --- a/components/PostsGrid/__snapshots__/PostCard.test.tsx.snap +++ b/components/PostsGrid/__snapshots__/PostCard.test.tsx.snap @@ -3,7 +3,7 @@ exports[`PostCard should render correctly (snapshot) 1`] = `
( {icon} diff --git a/components/ThemeSwitch/ThemeSwitch.module.css b/components/ThemeSwitch/ThemeSwitch.module.css index 5b8c06f6d..e709cb111 100644 --- a/components/ThemeSwitch/ThemeSwitch.module.css +++ b/components/ThemeSwitch/ThemeSwitch.module.css @@ -1,4 +1,4 @@ .button { - @apply w-6 h-full; + @apply w-6 h-full !important; @apply text-center; } diff --git a/pages/_app.tsx b/pages/_app.tsx index d6d1869b1..f01f17a29 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -6,6 +6,10 @@ import type { AppProps } from 'next/app'; import '../styles/tailwind.css'; import 'antd/dist/antd.css'; import '../styles/globals.css'; +import '../components/Article/Article.css'; +import '../components/Card/Card.css'; +import '../components/Editor/Editor.css'; +import '../components/Image/Image.css'; const App = ({ Component, pageProps }: AppProps): JSX.Element => ( <> diff --git a/styles/globals.css b/styles/globals.css index 8c2d9e8bc..4e72b2eb9 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -3,22 +3,3 @@ body { font-family: var(--font-stack); font-size: var(--font-size); } - -/* Remove arrow icon from GFM task list item */ -li.task-list-item > span { - @apply hidden; -} - -li.task-list-item > div { - @apply ml-0; -} - -/* Center aligning image preview icon */ -.ant-image-mask-info { - @apply flex items-center; -} - -/* Remove border radius for sandpack editor */ -.sp-wrapper .sp-layout { - @apply rounded-none; -} diff --git a/styles/tailwind.css b/styles/tailwind.css index 4b57d27d4..600eaac25 100644 --- a/styles/tailwind.css +++ b/styles/tailwind.css @@ -23,7 +23,7 @@ @layer components { .text-span { - @apply inline-block ml-2 text-xl align-bottom !important; + @apply inline-block ml-2 text-xl align-bottom dark:text-light !important; } .text-span-lg { @@ -45,4 +45,12 @@ .flex-container { @apply flex flex-row flex-wrap justify-center items-center content-center !important; } + + .card { + @apply transition duration-300 transform-gpu !important; + @apply shadow-xl hover:shadow-2xl hover:-translate-y-2 !important; + @apply dark:shadow-dark dark:hover:shadow-primary !important; + @apply dark:border dark:border-solid dark:border-light !important; + @apply dark:bg-black !important; + } }