From 5ccea9eed3161413d514f52a899a10e92444087a Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Thu, 15 Feb 2024 21:43:23 +0900 Subject: [PATCH] feat: implement design update requests --- .../docusaurus-playground/src/pages/index.mdx | 4 ++-- packages/logos-docusaurus-theme/package.json | 2 +- .../CallToActionButton.scss | 7 ------ .../CallToActionSection.scss | 4 ++++ .../mdx/FeatureList/FeatureList.scss | 1 - .../components/mdx/HeroAction/HeroAction.scss | 9 -------- .../mdx/LogoCarousel/LogoCarousel.tsx | 4 +++- .../mdx/ProfileCard/ProfileCard.scss | 22 ++++++++++++++++--- .../mdx/ProfileCard/ProfileCard.tsx | 8 ++++--- .../components/mdx/Roadmap/Roadmap.scss | 4 ++++ .../client/components/mdx/Roadmap/Roadmap.tsx | 6 ++++- .../mdx/ShowcaseCard/ShowcaseCard.scss | 4 ++-- .../mdx/TimelineItem/TimelineItem.scss | 3 ++- yarn.lock | 8 +++---- 14 files changed, 51 insertions(+), 35 deletions(-) diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx index d29ec22..d60e96a 100644 --- a/packages/docusaurus-playground/src/pages/index.mdx +++ b/packages/docusaurus-playground/src/pages/index.mdx @@ -359,8 +359,8 @@ import * as challengesData from '/generated/challenges.json' & { title?: React.ReactNode + gridGap?: string | number items?: { title?: string logoSrc?: string @@ -21,6 +22,7 @@ export type LogoCarouselProps = Omit< export const LogoCarousel: React.FC = ({ title, + gridGap = '80px', className, items = [], children, @@ -43,7 +45,7 @@ export const LogoCarousel: React.FC = ({ {items.map((item) => ( diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss index 12d07f8..e8de91c 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.scss @@ -20,7 +20,10 @@ gap: 24px; } -.mdx-profile-card__avatar { +.mdx-profile-card__profile-placeholder { + display: flex; + justify-content: center; + align-items: center; width: 52px !important; height: 52px !important; border-radius: 50%; @@ -36,6 +39,12 @@ } } +.mdx-profile-card__profile-image { + width: 52px !important; + height: 52px !important; + border-radius: 50%; +} + .mdx-profile-card__name { } @@ -43,14 +52,21 @@ display: flex; flex-direction: row; gap: 8px; - width: 100%; + + height: 16px; + align-items: center; + margin-top: 8px; } .mdx-profile-card__link { text-decoration: none; height: fit-content; position: relative; - max-width: calc(50% - 4px); + + svg { + width: 16px; + height: 16px; + } } @include utils.responsive('lg', 'down') { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx index 0577905..7c7a5c2 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ProfileCard/ProfileCard.tsx @@ -65,12 +65,14 @@ export const ProfileCard: React.FC = ({ return (
- {typeof imgSrc === 'undefined' ? ( - + {typeof imgSrc === 'undefined' && name ? ( + + {name[0]?.toUpperCase()} + ) : ( {typeof )} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss index f781b37..dda8479 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.scss @@ -13,6 +13,10 @@ display: none; } } + + .mdx-roadmap__timeline-item--no-border { + border: none; + } } .mdx-roadmap__timeline-item { diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx index 2a43b9b..99acad9 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Roadmap/Roadmap.tsx @@ -98,7 +98,11 @@ export const Roadmap: React.FC = ({ description={item.description} borderStyle={handleBorderStyle(item, index, timeline)} periodStyle={handlePeriodStyle(item?.period ?? currentYear)} - className={clsx('mdx-roadmap__timeline-item', item.className)} + className={clsx( + 'mdx-roadmap__timeline-item', + noBorder && 'mdx-roadmap__timeline-item--no-border', + item.className, + )} /> ))} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss index c842eef..8aca6dd 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss @@ -13,7 +13,7 @@ } .mdx-showcase-card__logo { - width: 58px; + width: 40px; height: auto; } @@ -39,7 +39,7 @@ .mdx-showcase-card--large { .mdx-showcase-card__logo { - width: 58px; + width: 40px; } } diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss index 1dbc631..d0b9841 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/TimelineItem/TimelineItem.scss @@ -67,7 +67,8 @@ } .mdx-timeline-item__description { - margin-top: auto; + margin-top: 24px; + margin-bottom: auto; } @include utils.responsive('lg', 'down') { diff --git a/yarn.lock b/yarn.lock index 90bacdd..1984d41 100644 --- a/yarn.lock +++ b/yarn.lock @@ -62,10 +62,10 @@ react-hot-toast "^2.4.1" react-use "^17.4.0" -"@acid-info/lsd-react@^0.1.0-beta.1": - version "0.1.0-beta.1" - resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-beta.1.tgz#a6d8dc04a3422a1a840d032fc1d1730f4cc34e29" - integrity sha512-YletiehVgoXmMhIH03u67Dxg8ZiFNrGhEsvN9/+jCTnOaBQxf0/JgS7kqBeZUlqK88prU6P/QzZruiWsxVFKgA== +"@acid-info/lsd-react@^0.1.0-beta.3": + version "0.1.0-beta.3" + resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-beta.3.tgz#2f211b647d68d6fce163afb60989494f555354be" + integrity sha512-lD/x1BZyYdQCUmtMH3YpKSInEO73wRFRxUM6lzbz5UDDUnPfDpj/g4mQrXKL1keV3ujGJbMLaCC36cZT8VgNNw== dependencies: "@datepicker-react/hooks" "^2.8.4" "@emotion/react" "^11.10.5"