From d4d0f3e14dd4030813c0dc94855ab6de6c301749 Mon Sep 17 00:00:00 2001 From: Abhi Date: Thu, 30 Jan 2025 23:53:29 -0500 Subject: [PATCH 01/16] Fix navbar for consistent styling --- docs/docusaurus.config.ts | 3 ++- docs/src/css/custom.css | 17 ++++------------- docs/static/img/icons/logo.png | Bin 0 -> 5468 bytes 3 files changed, 6 insertions(+), 14 deletions(-) create mode 100644 docs/static/img/icons/logo.png diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index 96bebd7e15..3877182e94 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -62,7 +62,8 @@ const config: Config = { title: 'Talawa', logo: { alt: 'Talawa Logo', - src: 'img/icons/favicon_palisadoes.ico', + src: 'img/icons/logo.png', + href: "https://docs.talawa.io/", className: 'LogoAnimation', }, items: [ diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 294a9c7c63..84fdc446d1 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -63,11 +63,9 @@ --next-prev-border-color: #e5e7eb; --ifm-color-emphasis-100: #f4f8fb; --ifm-color-emphasis-0: #fff; - --ifm-font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, - Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - --ifm-font-family-monospace: 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, - Consolas, 'Liberation Mono', 'Courier New', monospace; + --ifm-font-family-base: 'Optimistic Display', system-ui, -apple-system, + sans-serif; +--ifm-font-size-base: 17px; } /* For readability concerns, you should choose a lighter palette in dark mode. */ @@ -188,13 +186,6 @@ h1 { .menu__link--sublist { text-transform: uppercase; } - -.navbar__brand img { - max-height: 50px; - width: auto; - padding: 5px; -} - .menu { background-color: var(--sidebar-bg-color); } @@ -301,7 +292,7 @@ h1 { } .navbar__item { - font-size: 0.99rem; + font-size: 0.875rem; font-weight: 600; } diff --git a/docs/static/img/icons/logo.png b/docs/static/img/icons/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..62ab0a91c3d8e2482895fffc61276eaea44f1c3c GIT binary patch literal 5468 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

@B;cpz)B6D9z#)g3sXMY zaa+t!3HYuvB@O+u@4g)lef*d1D~Omxk-gd>S4(r}5P<}ooJ4LUYeJQ#SID{CgHb9M zQMGWsWig-ExK0BozpQMR?D#V6fopnKu({2D)k3q+nm9V$z=x2f*R5avJok&PEsKU9 zCS!P@a+WawLUe-O9YGi4q+i^w-IwI_Cj+6u2-)ppNQt!;@+%h$$4;G(pPl(%Ne-SB zHc5F@^Rz$4b$Ne?G(vrIm)>t|bl+e`UcGd_TiEl@X(%BTIc4+XTWfqel2Qf4PLNdP z?fA%$K6JpCOcC9)2&Y{$E$Z7}i2D!{fn#BHn83R|<{Kp*qq-hO=XhMWv=w2J;-`t-ch8LDqjaq{`Ocdr^Gy?SRSxBa7I$sq7y=vtH_6T1Lkk({*Jf{>?=IE}pM< z^S*grl|p-l>B>kCoR;)@G{U1G$>TmNB*0+juj_K~4CJws(N16mhxJ9K_Fcz5u?wlY zq~;IvE^PnPH@_$8sD$YF-jU*Hr&9fGP}A3c9sa~_>KPKEybOIDH@AFKK)-L`8{_4x z31`Lzw=xnrMW0aLN@6#~izMrjoBF2C5R}+CxN#?EQKP{Gy*FGc z2Tmp39dlyC^8M3crSNiKUvQB}U<-PiFH&DphZ<#_=OObM8QB(}FCHHk^f}VWv*{TV z<=|j9w1Zu&_-F6khKx(09y0_vP1=aU8Q&MIx&V6%`bjnT29ih><0zzep4k_cer{Ph zgi1%4;{8D4=aMDlMZbal$`CP@VYs{Zl-^JsLXXbP^onLMqNdxVEqzmcMgB93^papg zpukf90XGX_h|=1uUIMhdV61bj*g-clnXm@c?sCd%SEZT>DdR+8t(l6b$%Jq1i9X`i z{`zsus>9Uvt)^nt=>5eVJ?3xmZwH$Uk}3PL5=~r^5Ppf3UJ>J2mKA4)QXREk(<`28 zSmf*;7P)lTK!KdvXl2Fu;(k6m$paxyHh$9(+Oc&7y^I#+8_Mp z_XIvt%3LRcGLW=qylo}fOJ`N`_2|~a#8FJ{o&DhxyJSn{T8Sf@ufHY@ znhT{mTZhG+Ti@s#&s0#>Y^$sW>`hBsxBnED0t8?^r1G<&B+u5yGF za2~}L@W|?<_Q{&jYm455;M2{7sqr}y&AEZn2n*{`v#-%kHL72*&F~vjYt57G%*^}* zvs64DG_0Y{H(ibK_)@|C!LRX8>875tmcI?H?=y3TTDdhuYZ}anJ0TB;g6YU*O@oqt zxGv;C#!mxwbp!PGsSG|GatB-=t`Rl~v~(-jmq^7c!9(^YZ)WGalZcR7g#1Ug*Q^zFF5yT5M4Bm(X$m&`}&e(XcHZU;uYbC{@?uZGIz0*rKp(6}w!UT*Joc|RvLU5)Kk zl%gW3EFf%6&jNik>u=BvljnbSn1yLa6FRaO+xci?FP1tFQ$HDvNb%+ATOoO4IWduE zq=Kutn5&Fg3ERW@0iOzT+$90|CziNPaJ}98&0Ayn6#M~CT;Ho8edNgp|D95WYdz+^ z#yanGW6EQ*;{nqD^LS&@ZG_fr>PK^_60^ke-08w%EVE{1o}=-7|Fd+n1Thc$xEiW>$pi0&bROYXa$DP1OWQ9*2Xz6+^;6phS}h52^1(^9Gy z51Sh`)6Kl15p9s`eq*r?;U87(-82?54?IJy`&OKWOvGMz?sj}_Ae{-~M6w+Teh}=w zWFlKQtc1Y5@z!44Wf-iuZ&ow$`&}M`H+dNU-(7FW$ZY-5wxo3LRAs)J3F8jiz2Zx6 z^SLj_)WU6veYLkF0JIpsnb}{jy_}7~Y#L__O9zvJw+-GlUS8PA)!;eikyQTO-|bZs zJ@EoY@BMRU{qqf~B%5BR<1TE{|MyEq@M7#80Yw#$_Sc*-W9+RdKn1FyfRcL?_#fiP BdOrXF literal 0 HcmV?d00001 From a08d5704453889144eb67e7f2f894f245333ad90 Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 00:04:56 -0500 Subject: [PATCH 02/16] Update homepage with minimal design --- docs/src/components/layout/HeaderHero.tsx | 21 +++ docs/src/css/custom.css | 219 ++++++++++++++-------- docs/src/pages/index.tsx | 25 ++- docs/src/utils/ActionButton.tsx | 33 ++++ docs/src/utils/Heading.tsx | 11 ++ docs/src/utils/HomeCallToAction.tsx | 31 +++ docs/src/utils/Section.tsx | 27 +++ 7 files changed, 283 insertions(+), 84 deletions(-) create mode 100644 docs/src/components/layout/HeaderHero.tsx create mode 100644 docs/src/utils/ActionButton.tsx create mode 100644 docs/src/utils/Heading.tsx create mode 100644 docs/src/utils/HomeCallToAction.tsx create mode 100644 docs/src/utils/Section.tsx diff --git a/docs/src/components/layout/HeaderHero.tsx b/docs/src/components/layout/HeaderHero.tsx new file mode 100644 index 0000000000..635ea86911 --- /dev/null +++ b/docs/src/components/layout/HeaderHero.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import Section from "../../utils/Section"; +import HomeCallToAction from "../../utils/HomeCallToAction"; + + +function HeaderHero() { + return ( +

+

Talawa

+

Admin Docs

+

+ Web based administrative dashboard for the Talawa mobile app +

+
+ +
+
+ ); +} + +export default HeaderHero diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 84fdc446d1..7a6a860b3d 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -211,11 +211,6 @@ h1 { padding: 0.5rem 0; } -/* new */ -/* .menu__list ul { - margin-left: 5px; - margin-right: 15px; -} */ /* Target specifically the link text */ .menu__link { @@ -639,102 +634,178 @@ a:hover { fill: var(--secondary-blue-900); } + /* Hide external link svg on Navbar */ -.iconExternalLink_nPIU { - display: none !important; +.navbar__item > svg, +.navbar-sidebar svg { + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + border: 0; + clip: rect(0 0 0 0); + clip-path: inset(50%); + overflow: hidden; +} + +/* Homepage */ +.homepage { + width: 100%; + max-width: 100%; } -.card__container { +/* Header Hero */ +.HeaderHero { + height: clamp(500px, 70vh, 800px); + padding-top: 20px; display: flex; - align-items: center; flex-direction: column; - margin: auto; - gap: 2rem; + text-align: center; + align-items: center; + margin-top: clamp(2rem, 15vh, 8rem); } -.card__description { - font-size: 0.8rem; - margin: 0; - padding-bottom: 1rem; +.HeaderHero .title { + font-size: 3rem; + line-height: 1; + margin-bottom: 0 !important; + font-weight: 500; + left: -250px; + opacity: 1.3; } -.card__general { - align-items: center; - background-color: var(--ifm-color-emphasis-100); - border-radius: 15px; - box-shadow: var(--ifm-navbar-shadow); - justify-content: center; - padding: 1rem; +.HeaderHero .tagline { + font-size: 1.5rem; + line-height: 1.3; + font-weight: 500; + margin-top: -7px; + opacity: 1.1; + left: -250px; +} + +.HeaderHero .description { + font-size: 1.2rem; + line-height: 1.3; + color: var(--primary-neutral-800); + opacity: 1.1; text-align: center; } -.card__general p { - padding-left: 1rem; +.HeaderHero .buttons { + margin-top: 40px; } -.card__wide { - display: flex; - gap: calc(2rem + 2px); - padding: 1.5rem 0; - margin: auto; +/* Action Button */ +.ActionButton { + padding: 0.75rem 1.25rem; + text-align: center; + font-size: 1.2rem; + font-weight: var(--ifm-button-font-weight); + text-decoration: none !important; + border-bottom: none; + transition: all 0.2s ease-out; + border-radius: 0.375rem; + margin-right: 10px; } -.card__wide ul { - list-style: none; - padding: 0; - margin: 0; +.ActionButton.primary { + color: var(--base-neutral-0); + background-color: var(--ifm-button-background-color); + border: var(--ifm-button-border-width) solid var(--ifm-button-border-color); + text-wrap: nowrap; } -.card__wide ul > li { - margin: 10px 0; - position: relative; - text-align: left; - padding-left: 25px; -} - -.card__wide ul > li::before { - content: '✦'; - font-size: 1 rem; - background: linear-gradient(45deg, #97aaff, #8dbaff, #004c8c, #00bfff); - background-size: 400% 400%; - color: transparent; - -webkit-background-clip: text; - background-clip: text; - animation: moveGradient 5s ease infinite; - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); +.ActionButton.primary:hover { + background-color: #1cbb99; } -@keyframes moveGradient { - 0% { - background-position: 0% 50%; - } +.ActionButton.secondary { + color: #1c1e21; + background-color: #ebedf0; +} - 50% { - background-position: 100% 50%; - } +.ActionButton.secondary:hover { + background-color: #c7c7c7; +} - 100% { - background-position: 0% 50%; - } +.ActionButton.secondary::after { + content: "›"; + font-size: 24px; + margin-left: 5px; +} + +/* Homepage */ +.HomePage { + width: 100%; + overflow-x: hidden; +} + +/* Section */ +.Section { + width: 100%; + padding-top: 50px; + padding: 0 1.25rem; + overflow-x: hidden; + margin-bottom: 5rem; +} + +.Section.tint { + background-color: var(--ifm-hover-overlay); +} + +.Section.dark { + background-color: var(--dark); +} +/* Small Screens */ +@media only screen and (max-width: 480px) { + .ActionButton { max-width: 100%; width: 100%; display: block; white-space: nowrap; } + .ActionButton.secondary { margin-top: 1rem; margin-left: auto; } + .custom-image { width: 80%; padding-top: 60px; } } +/* Small to Medium Screens */ +@media only screen and (max-width: 768px) { + .container > div > div:first-child { padding: 1rem !important; } + .center { text-align: center; } + .HeaderHero .title { font-size: 60px; } + .HeaderHero .tagline { font-size: 30px; } +} + +/* Medium Screens */ +@media (min-width: 481px) and (max-width: 960px) { + .ActionButton { max-width: 100%; width: 100%; display: block; white-space: nowrap; } + .ActionButton.secondary { margin-top: 1rem; } + .HeaderHero .ActionButton { margin: auto; margin-top: 1rem; } + .HeaderHero { margin-top: 2rem; } + .Section { margin-bottom: 2rem; padding-top: 1rem; } +} + +/* Medium to Large Screens */ +@media (min-width: 997px) and (max-width: 1327px) { + .container > div > div:first-child { padding-left: 4rem !important; padding-right: 4rem !important; } +} + +/* Large Screens */ +@media (min-width: 1200px) { + .HeaderHero { height: 50vh; overflow: hidden; } +} + +/* Responsive Navbar & Buttons */ @media (max-width: 996px) { - .fourth-panel > .card__wide { - height: auto; - } + .navbar__item.github-button, .navbar__item.youtube-button { display: none; } + .github-button, .youtube-button { margin: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal); } + .center { text-align: center; } } -@media only screen and (max-width: 960px) { - .card__container, - .card__wide { - margin: 0 2rem !important; - } +@media (max-width: 1000px) { + .navbar__items--right > .navbar__item:not(:first-of-type) { margin-left: 0.25rem; } + .github-button, .youtube-button { margin-right: 0.5rem; } + .hero__title { font-size: 2rem; } +} - .card__description { - padding-bottom: 1rem; - } +@media (max-width: 1049px) and (min-width: 1001px), (max-width: 1149px) and (min-width: 1050px) { + .navbar__items--right > .navbar__item:not(:first-of-type) { margin-left: 0.5rem; } + .github-button, .youtube-button { margin-right: 0.5rem; } } diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 26842c287f..3e0bb55c24 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -1,17 +1,22 @@ -import Layout from '@theme/Layout'; -import Head from '@docusaurus/Head'; +import React from "react"; +import Head from "@docusaurus/Head"; +import Layout from "@theme/Layout"; +import HeaderHero from "../components/layout/HeaderHero"; -export default function Home(): JSX.Element { - const pageTitle = 'Talawa-Docs: Powered by The Palisadoes'; + +const Index = () => { + const pageTitle = "Talawa-Docs: Powered by The Palisadoes"; return ( - + - + {pageTitle} + + + ); -} +}; + +export default Index; diff --git a/docs/src/utils/ActionButton.tsx b/docs/src/utils/ActionButton.tsx new file mode 100644 index 0000000000..232dae73de --- /dev/null +++ b/docs/src/utils/ActionButton.tsx @@ -0,0 +1,33 @@ +import React from "react"; + +interface ActionButtonProps { + href: string; + type?: "primary" | "secondary"; + target?: string; + children: React.ReactNode; + buttonClassName?: string; + ariaLabel?: string; +} + + function ActionButton({ + href, + type = "primary", + target, + children, + buttonClassName, +}: ActionButtonProps) { + return ( + + {children} + + ); +} + +export default ActionButton \ No newline at end of file diff --git a/docs/src/utils/Heading.tsx b/docs/src/utils/Heading.tsx new file mode 100644 index 0000000000..94d4fe822a --- /dev/null +++ b/docs/src/utils/Heading.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +interface HeadingProps { + text: string; + [key: string]: any; +} + +const Heading: React.FC = ({ text, ...props }) => { + return

{text}

; + } +export default Heading \ No newline at end of file diff --git a/docs/src/utils/HomeCallToAction.tsx b/docs/src/utils/HomeCallToAction.tsx new file mode 100644 index 0000000000..22ca75625f --- /dev/null +++ b/docs/src/utils/HomeCallToAction.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import ActionButton from "./ActionButton"; + +interface HomeCallToActionProps {} + + const HomeCallToAction: React.FC = () => { + return ( + <> + + Learn More + + + GitHub + + + ); +}; + + +export default HomeCallToAction \ No newline at end of file diff --git a/docs/src/utils/Section.tsx b/docs/src/utils/Section.tsx new file mode 100644 index 0000000000..ceffc469b3 --- /dev/null +++ b/docs/src/utils/Section.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import clsx from 'clsx'; +interface SectionProps { + element?: keyof JSX.IntrinsicElements; + children: React.ReactNode; + className?: string; + background?: "light" | "dark" | "tint"; + role?: string; +} + + function Section({ + element = "section", + children, + className, + background = "light", +}: SectionProps) { + const El = element; + return ( + + {children} + + ); +} + +export default Section From 17f1d5b51774ea3e9bca2fa92f157cdaa34679c2 Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 00:26:23 -0500 Subject: [PATCH 03/16] Fix docs page styling to be consistent with other docs websites --- docs/src/css/custom.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 7a6a860b3d..3c92296c18 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -195,6 +195,7 @@ h1 { line-height: 1.5; font-size: 0.7rem; padding-bottom: 0; + padding-left: 0; font-weight: 800; background: transparent !important; } @@ -219,7 +220,6 @@ h1 { overflow-wrap: break-word !important; width: 100% !important; max-width: 100% !important; - line-height: 1.2 !important; padding-right: 1rem !important; } @@ -572,10 +572,6 @@ html[data-theme='dark'] .header-youtube-link:before { .container > div > div:first-child { padding: 1rem !important; } - - .breadcrumbs__link { - padding: 0.25rem; - } } @media (min-width: 997px) and (max-width: 1327px) { From 36ce14497a3c98634b5dec380a0746ac3fc77ee8 Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 00:30:19 -0500 Subject: [PATCH 04/16] Update activeBasePath --- docs/docusaurus.config.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index 3877182e94..82e91d58f9 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -80,10 +80,10 @@ const config: Config = { target: '_self', }, { - label: 'Admin Guide', - position: 'left', - href: '/docs', - target: '_self', + to: "/docs", + activeBasePath: "docs", + label: "Admin Guide", + position: "left", }, { label: 'API Guide', From 77e94f5086e2ec383f338a4ab8a4c725b99892c8 Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 00:36:35 -0500 Subject: [PATCH 05/16] Add footer --- docs/docusaurus.config.ts | 56 +++++++++++++++++++++++++++++++++++++++ docs/src/css/custom.css | 4 --- 2 files changed, 56 insertions(+), 4 deletions(-) diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index 82e91d58f9..f394c47842 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -111,6 +111,62 @@ const config: Config = { }, ], }, + footer: { + style: "dark", + links: [ + { + title: "Community", + items: [ + { + label: "Slack", + to: "https://github.com/PalisadoesFoundation", + className: "footer__icon footer__slack", + }, + { + label: "News", + to: "https://www.palisadoes.org/news/", + className: "footer__icon footer__news", + }, + { + label: "Contact Us", + to: "https://www.palisadoes.org/contact/", + className: "footer__icon footer__contact", + }, + ], + }, + { + title: "Social Media", + items: [ + { + label: " Twitter", + to: "https://twitter.com/palisadoesorg?lang=en", + className: "footer__icon footer__twitter", + }, + { + label: " Facebook", + to: "https://www.facebook.com/palisadoesproject/", + className: "footer__icon footer__facebook", + }, + { + label: " Instagram", + to: "https://www.instagram.com/palisadoes/?hl=en", + className: "footer__icon footer__instagram", + }, + ], + }, + { + title: "Development", + items: [ + { + label: " GitHub", + to: "https://github.com/PalisadoesFoundation", + className: "footer__icon footer__github", + }, + ], + }, + ], + copyright: `Copyright © ${new Date().getFullYear()} The Palisadoes Foundation, LLC. Built with Docusaurus.`, + }, colorMode: { defaultMode: 'light', disableSwitch: false, diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 3c92296c18..50c747c05d 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -581,10 +581,6 @@ html[data-theme='dark'] .header-youtube-link:before { } } -.Section { - margin-bottom: 0 !important; -} - .Heading { font-size: 1.5rem; font-weight: 700; From 266fc8c1bc8c6fc0be048b9cd2c09409b21ad17e Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 07:16:30 -0500 Subject: [PATCH 06/16] Make files prettier --- docs/docusaurus.config.ts | 60 +++++------ docs/src/components/layout/HeaderHero.tsx | 11 +- docs/src/css/custom.css | 116 ++++++++++++++++------ docs/src/pages/index.tsx | 16 +-- docs/src/utils/ActionButton.tsx | 12 +-- docs/src/utils/Heading.tsx | 12 ++- docs/src/utils/HomeCallToAction.tsx | 19 ++-- docs/src/utils/Section.tsx | 20 ++-- 8 files changed, 159 insertions(+), 107 deletions(-) diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index f394c47842..c77d74af39 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -63,7 +63,7 @@ const config: Config = { logo: { alt: 'Talawa Logo', src: 'img/icons/logo.png', - href: "https://docs.talawa.io/", + href: 'https://docs.talawa.io/', className: 'LogoAnimation', }, items: [ @@ -80,10 +80,10 @@ const config: Config = { target: '_self', }, { - to: "/docs", - activeBasePath: "docs", - label: "Admin Guide", - position: "left", + to: '/docs', + activeBasePath: 'docs', + label: 'Admin Guide', + position: 'left', }, { label: 'API Guide', @@ -112,55 +112,55 @@ const config: Config = { ], }, footer: { - style: "dark", + style: 'dark', links: [ { - title: "Community", + title: 'Community', items: [ { - label: "Slack", - to: "https://github.com/PalisadoesFoundation", - className: "footer__icon footer__slack", + label: 'Slack', + to: 'https://github.com/PalisadoesFoundation', + className: 'footer__icon footer__slack', }, { - label: "News", - to: "https://www.palisadoes.org/news/", - className: "footer__icon footer__news", + label: 'News', + to: 'https://www.palisadoes.org/news/', + className: 'footer__icon footer__news', }, { - label: "Contact Us", - to: "https://www.palisadoes.org/contact/", - className: "footer__icon footer__contact", + label: 'Contact Us', + to: 'https://www.palisadoes.org/contact/', + className: 'footer__icon footer__contact', }, ], }, { - title: "Social Media", + title: 'Social Media', items: [ { - label: " Twitter", - to: "https://twitter.com/palisadoesorg?lang=en", - className: "footer__icon footer__twitter", + label: ' Twitter', + to: 'https://twitter.com/palisadoesorg?lang=en', + className: 'footer__icon footer__twitter', }, { - label: " Facebook", - to: "https://www.facebook.com/palisadoesproject/", - className: "footer__icon footer__facebook", + label: ' Facebook', + to: 'https://www.facebook.com/palisadoesproject/', + className: 'footer__icon footer__facebook', }, { - label: " Instagram", - to: "https://www.instagram.com/palisadoes/?hl=en", - className: "footer__icon footer__instagram", + label: ' Instagram', + to: 'https://www.instagram.com/palisadoes/?hl=en', + className: 'footer__icon footer__instagram', }, ], }, { - title: "Development", + title: 'Development', items: [ { - label: " GitHub", - to: "https://github.com/PalisadoesFoundation", - className: "footer__icon footer__github", + label: ' GitHub', + to: 'https://github.com/PalisadoesFoundation', + className: 'footer__icon footer__github', }, ], }, diff --git a/docs/src/components/layout/HeaderHero.tsx b/docs/src/components/layout/HeaderHero.tsx index 635ea86911..db2cdd49d8 100644 --- a/docs/src/components/layout/HeaderHero.tsx +++ b/docs/src/components/layout/HeaderHero.tsx @@ -1,7 +1,6 @@ -import React from "react"; -import Section from "../../utils/Section"; -import HomeCallToAction from "../../utils/HomeCallToAction"; - +import React from 'react'; +import Section from '../../utils/Section'; +import HomeCallToAction from '../../utils/HomeCallToAction'; function HeaderHero() { return ( @@ -9,7 +8,7 @@ function HeaderHero() {

Talawa

Admin Docs

- Web based administrative dashboard for the Talawa mobile app + Web based administrative dashboard for the Talawa mobile app

@@ -18,4 +17,4 @@ function HeaderHero() { ); } -export default HeaderHero +export default HeaderHero; diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 50c747c05d..4e3638e8a8 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -64,8 +64,8 @@ --ifm-color-emphasis-100: #f4f8fb; --ifm-color-emphasis-0: #fff; --ifm-font-family-base: 'Optimistic Display', system-ui, -apple-system, - sans-serif; ---ifm-font-size-base: 17px; + sans-serif; + --ifm-font-size-base: 17px; } /* For readability concerns, you should choose a lighter palette in dark mode. */ @@ -212,7 +212,6 @@ h1 { padding: 0.5rem 0; } - /* Target specifically the link text */ .menu__link { white-space: normal !important; @@ -626,7 +625,6 @@ a:hover { fill: var(--secondary-blue-900); } - /* Hide external link svg on Navbar */ .navbar__item > svg, @@ -723,7 +721,7 @@ a:hover { } .ActionButton.secondary::after { - content: "›"; + content: '›'; font-size: 24px; margin-left: 5px; } @@ -752,52 +750,114 @@ a:hover { } /* Small Screens */ @media only screen and (max-width: 480px) { - .ActionButton { max-width: 100%; width: 100%; display: block; white-space: nowrap; } - .ActionButton.secondary { margin-top: 1rem; margin-left: auto; } - .custom-image { width: 80%; padding-top: 60px; } + .ActionButton { + max-width: 100%; + width: 100%; + display: block; + white-space: nowrap; + } + .ActionButton.secondary { + margin-top: 1rem; + margin-left: auto; + } + .custom-image { + width: 80%; + padding-top: 60px; + } } /* Small to Medium Screens */ @media only screen and (max-width: 768px) { - .container > div > div:first-child { padding: 1rem !important; } - .center { text-align: center; } - .HeaderHero .title { font-size: 60px; } - .HeaderHero .tagline { font-size: 30px; } + .container > div > div:first-child { + padding: 1rem !important; + } + .center { + text-align: center; + } + .HeaderHero .title { + font-size: 60px; + } + .HeaderHero .tagline { + font-size: 30px; + } } /* Medium Screens */ @media (min-width: 481px) and (max-width: 960px) { - .ActionButton { max-width: 100%; width: 100%; display: block; white-space: nowrap; } - .ActionButton.secondary { margin-top: 1rem; } - .HeaderHero .ActionButton { margin: auto; margin-top: 1rem; } - .HeaderHero { margin-top: 2rem; } - .Section { margin-bottom: 2rem; padding-top: 1rem; } + .ActionButton { + max-width: 100%; + width: 100%; + display: block; + white-space: nowrap; + } + .ActionButton.secondary { + margin-top: 1rem; + } + .HeaderHero .ActionButton { + margin: auto; + margin-top: 1rem; + } + .HeaderHero { + margin-top: 2rem; + } + .Section { + margin-bottom: 2rem; + padding-top: 1rem; + } } /* Medium to Large Screens */ @media (min-width: 997px) and (max-width: 1327px) { - .container > div > div:first-child { padding-left: 4rem !important; padding-right: 4rem !important; } + .container > div > div:first-child { + padding-left: 4rem !important; + padding-right: 4rem !important; + } } /* Large Screens */ @media (min-width: 1200px) { - .HeaderHero { height: 50vh; overflow: hidden; } + .HeaderHero { + height: 50vh; + overflow: hidden; + } } /* Responsive Navbar & Buttons */ @media (max-width: 996px) { - .navbar__item.github-button, .navbar__item.youtube-button { display: none; } - .github-button, .youtube-button { margin: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal); } - .center { text-align: center; } + .navbar__item.github-button, + .navbar__item.youtube-button { + display: none; + } + .github-button, + .youtube-button { + margin: var(--ifm-menu-link-padding-vertical) + var(--ifm-menu-link-padding-horizontal); + } + .center { + text-align: center; + } } @media (max-width: 1000px) { - .navbar__items--right > .navbar__item:not(:first-of-type) { margin-left: 0.25rem; } - .github-button, .youtube-button { margin-right: 0.5rem; } - .hero__title { font-size: 2rem; } + .navbar__items--right > .navbar__item:not(:first-of-type) { + margin-left: 0.25rem; + } + .github-button, + .youtube-button { + margin-right: 0.5rem; + } + .hero__title { + font-size: 2rem; + } } -@media (max-width: 1049px) and (min-width: 1001px), (max-width: 1149px) and (min-width: 1050px) { - .navbar__items--right > .navbar__item:not(:first-of-type) { margin-left: 0.5rem; } - .github-button, .youtube-button { margin-right: 0.5rem; } +@media (max-width: 1049px) and (min-width: 1001px), + (max-width: 1149px) and (min-width: 1050px) { + .navbar__items--right > .navbar__item:not(:first-of-type) { + margin-left: 0.5rem; + } + .github-button, + .youtube-button { + margin-right: 0.5rem; + } } diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 3e0bb55c24..0ddfe6d4d0 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -1,14 +1,16 @@ -import React from "react"; -import Head from "@docusaurus/Head"; -import Layout from "@theme/Layout"; -import HeaderHero from "../components/layout/HeaderHero"; - +import React from 'react'; +import Head from '@docusaurus/Head'; +import Layout from '@theme/Layout'; +import HeaderHero from '../components/layout/HeaderHero'; const Index = () => { - const pageTitle = "Talawa-Docs: Powered by The Palisadoes"; + const pageTitle = 'Talawa-Docs: Powered by The Palisadoes'; return ( - + {pageTitle} diff --git a/docs/src/utils/ActionButton.tsx b/docs/src/utils/ActionButton.tsx index 232dae73de..79b9163eb7 100644 --- a/docs/src/utils/ActionButton.tsx +++ b/docs/src/utils/ActionButton.tsx @@ -1,17 +1,17 @@ -import React from "react"; +import React from 'react'; interface ActionButtonProps { href: string; - type?: "primary" | "secondary"; + type?: 'primary' | 'secondary'; target?: string; children: React.ReactNode; buttonClassName?: string; ariaLabel?: string; } - function ActionButton({ +function ActionButton({ href, - type = "primary", + type = 'primary', target, children, buttonClassName, @@ -19,7 +19,7 @@ interface ActionButtonProps { return ( = ({ text, ...props }) => { - return

{text}

; - } -export default Heading \ No newline at end of file + return ( +

+ {text} +

+ ); +}; +export default Heading; diff --git a/docs/src/utils/HomeCallToAction.tsx b/docs/src/utils/HomeCallToAction.tsx index 22ca75625f..60e47ef666 100644 --- a/docs/src/utils/HomeCallToAction.tsx +++ b/docs/src/utils/HomeCallToAction.tsx @@ -1,25 +1,19 @@ -import React from "react"; -import ActionButton from "./ActionButton"; +import React from 'react'; +import ActionButton from './ActionButton'; interface HomeCallToActionProps {} - const HomeCallToAction: React.FC = () => { +const HomeCallToAction: React.FC = () => { return ( <> - + Learn More GitHub @@ -27,5 +21,4 @@ interface HomeCallToActionProps {} ); }; - -export default HomeCallToAction \ No newline at end of file +export default HomeCallToAction; diff --git a/docs/src/utils/Section.tsx b/docs/src/utils/Section.tsx index ceffc469b3..8ae47139dc 100644 --- a/docs/src/utils/Section.tsx +++ b/docs/src/utils/Section.tsx @@ -1,27 +1,21 @@ -import React from "react"; +import React from 'react'; import clsx from 'clsx'; interface SectionProps { element?: keyof JSX.IntrinsicElements; children: React.ReactNode; className?: string; - background?: "light" | "dark" | "tint"; + background?: 'light' | 'dark' | 'tint'; role?: string; } - function Section({ - element = "section", +function Section({ + element = 'section', children, className, - background = "light", + background = 'light', }: SectionProps) { const El = element; - return ( - - {children} - - ); + return {children}; } -export default Section +export default Section; From 1e6bb3aba4cc15c162f9c572551457c4e009df11 Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 07:36:36 -0500 Subject: [PATCH 07/16] Implement coderabbit suggestions --- docs/src/components/layout/HeaderHero.tsx | 12 ++++++++---- docs/src/css/custom.css | 3 +-- docs/src/utils/Heading.tsx | 12 ++++++------ docs/src/utils/HomeCallToAction.tsx | 11 +++++++++-- 4 files changed, 24 insertions(+), 14 deletions(-) diff --git a/docs/src/components/layout/HeaderHero.tsx b/docs/src/components/layout/HeaderHero.tsx index db2cdd49d8..e07fc2b8a0 100644 --- a/docs/src/components/layout/HeaderHero.tsx +++ b/docs/src/components/layout/HeaderHero.tsx @@ -4,13 +4,17 @@ import HomeCallToAction from '../../utils/HomeCallToAction'; function HeaderHero() { return ( -
-

Talawa

-

Admin Docs

+
+

Talawa

+

Admin Docs

Web based administrative dashboard for the Talawa mobile app

-
+
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 4e3638e8a8..42d65a5273 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -735,8 +735,7 @@ a:hover { /* Section */ .Section { width: 100%; - padding-top: 50px; - padding: 0 1.25rem; + padding: 50px 1.25rem 0; overflow-x: hidden; margin-bottom: 5rem; } diff --git a/docs/src/utils/Heading.tsx b/docs/src/utils/Heading.tsx index 5c561a6452..652e1dbeb8 100644 --- a/docs/src/utils/Heading.tsx +++ b/docs/src/utils/Heading.tsx @@ -6,10 +6,10 @@ interface HeadingProps { } const Heading: React.FC = ({ text, ...props }) => { - return ( -

- {text} -

- ); -}; + return ( +

+ {text} +

+ ); + }; export default Heading; diff --git a/docs/src/utils/HomeCallToAction.tsx b/docs/src/utils/HomeCallToAction.tsx index 60e47ef666..a3b8f65924 100644 --- a/docs/src/utils/HomeCallToAction.tsx +++ b/docs/src/utils/HomeCallToAction.tsx @@ -3,10 +3,15 @@ import ActionButton from './ActionButton'; interface HomeCallToActionProps {} -const HomeCallToAction: React.FC = () => { +const HomeCallToAction: React.FC = () => { return ( <> - + Learn More = () => { href="https://github.com/PalisadoesFoundation/talawa-admin" buttonClassName="custom-button" target="_blank" + rel="noopener noreferrer" + aria-label="View Talawa Admin on GitHub" > GitHub From b8a6e2fab50da27f7fd381faf538ed31dc071e6f Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 08:00:22 -0500 Subject: [PATCH 08/16] "Implement coderabbit suggestions" --- docs/src/components/layout/HeaderHero.tsx | 14 +++--- docs/src/css/custom.css | 57 ++++++++--------------- docs/src/utils/Heading.tsx | 12 ++--- 3 files changed, 32 insertions(+), 51 deletions(-) diff --git a/docs/src/components/layout/HeaderHero.tsx b/docs/src/components/layout/HeaderHero.tsx index e07fc2b8a0..4b21879a7a 100644 --- a/docs/src/components/layout/HeaderHero.tsx +++ b/docs/src/components/layout/HeaderHero.tsx @@ -4,13 +4,13 @@ import HomeCallToAction from '../../utils/HomeCallToAction'; function HeaderHero() { return ( -
-

Talawa

-

Admin Docs

+
+

+ Talawa +

+

+ Admin Docs +

Web based administrative dashboard for the Talawa mobile app

diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 42d65a5273..e8f86be7d6 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -822,41 +822,22 @@ a:hover { } /* Responsive Navbar & Buttons */ -@media (max-width: 996px) { - .navbar__item.github-button, - .navbar__item.youtube-button { - display: none; - } - .github-button, - .youtube-button { - margin: var(--ifm-menu-link-padding-vertical) - var(--ifm-menu-link-padding-horizontal); - } - .center { - text-align: center; - } -} - -@media (max-width: 1000px) { - .navbar__items--right > .navbar__item:not(:first-of-type) { - margin-left: 0.25rem; - } - .github-button, - .youtube-button { - margin-right: 0.5rem; - } - .hero__title { - font-size: 2rem; - } -} - -@media (max-width: 1049px) and (min-width: 1001px), - (max-width: 1149px) and (min-width: 1050px) { - .navbar__items--right > .navbar__item:not(:first-of-type) { - margin-left: 0.5rem; - } - .github-button, - .youtube-button { - margin-right: 0.5rem; - } -} + @media (max-width: 1149px) { + .navbar__items--right > .navbar__item:not(:first-of-type) { + margin-left: 0.25rem; + } + .github-button, + .youtube-button { + margin-right: 0.5rem; + } + } + + @media (max-width: 996px) { + .navbar__item.github-button, + .navbar__item.youtube-button { + display: none; + } + .center { + text-align: center; + } + } \ No newline at end of file diff --git a/docs/src/utils/Heading.tsx b/docs/src/utils/Heading.tsx index 652e1dbeb8..55f3d0d529 100644 --- a/docs/src/utils/Heading.tsx +++ b/docs/src/utils/Heading.tsx @@ -6,10 +6,10 @@ interface HeadingProps { } const Heading: React.FC = ({ text, ...props }) => { - return ( -

- {text} -

- ); - }; + return ( +

+ {text} +

+ ); + } export default Heading; From 8a9591908e0de11d9d990a3b5518f70d536c1957 Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 08:02:36 -0500 Subject: [PATCH 09/16] Fix height issue of the hero section --- docs/src/css/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index e8f86be7d6..a83086023f 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -816,7 +816,7 @@ a:hover { /* Large Screens */ @media (min-width: 1200px) { .HeaderHero { - height: 50vh; + height: 500px; overflow: hidden; } } From 53cd6a572762f72c8a00c1434d2d9f7d378e1a1b Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 08:07:45 -0500 Subject: [PATCH 10/16] Make code prettier --- docs/src/css/custom.css | 38 +++++++++++++++++++------------------- docs/src/utils/Heading.tsx | 10 +++++----- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index a83086023f..6ad10d7d3b 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -822,22 +822,22 @@ a:hover { } /* Responsive Navbar & Buttons */ - @media (max-width: 1149px) { - .navbar__items--right > .navbar__item:not(:first-of-type) { - margin-left: 0.25rem; - } - .github-button, - .youtube-button { - margin-right: 0.5rem; - } - } - - @media (max-width: 996px) { - .navbar__item.github-button, - .navbar__item.youtube-button { - display: none; - } - .center { - text-align: center; - } - } \ No newline at end of file +@media (max-width: 1149px) { + .navbar__items--right > .navbar__item:not(:first-of-type) { + margin-left: 0.25rem; + } + .github-button, + .youtube-button { + margin-right: 0.5rem; + } +} + +@media (max-width: 996px) { + .navbar__item.github-button, + .navbar__item.youtube-button { + display: none; + } + .center { + text-align: center; + } +} diff --git a/docs/src/utils/Heading.tsx b/docs/src/utils/Heading.tsx index 55f3d0d529..03fc69e581 100644 --- a/docs/src/utils/Heading.tsx +++ b/docs/src/utils/Heading.tsx @@ -7,9 +7,9 @@ interface HeadingProps { const Heading: React.FC = ({ text, ...props }) => { return ( -

- {text} -

- ); - } +

+ {text} +

+ ); +}; export default Heading; From 0cc4e3b2602ede5a8f8bdb5343cc18cee909774d Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 21:56:56 -0500 Subject: [PATCH 11/16] Update with coderabbit suggestion --- docs/src/css/custom.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 6ad10d7d3b..332fdc9840 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -671,7 +671,7 @@ a:hover { line-height: 1.3; font-weight: 500; margin-top: -7px; - opacity: 1.1; + opacity: 1; left: -250px; } @@ -679,7 +679,7 @@ a:hover { font-size: 1.2rem; line-height: 1.3; color: var(--primary-neutral-800); - opacity: 1.1; + opacity: 1; text-align: center; } @@ -704,7 +704,7 @@ a:hover { color: var(--base-neutral-0); background-color: var(--ifm-button-background-color); border: var(--ifm-button-border-width) solid var(--ifm-button-border-color); - text-wrap: nowrap; + white-space: nowrap; } .ActionButton.primary:hover { From 1a2b205e1394d2a11b9a3b4772fba00e2d70c5d1 Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 22:08:03 -0500 Subject: [PATCH 12/16] Update styling according to coderabbit --- docs/src/css/custom.css | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 332fdc9840..e13c4e9ced 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -618,7 +618,7 @@ a:hover { .custom-image { width: 140%; padding: 10px; - opacity: 2; + opacity: 1; } .my-svg-icon path { @@ -663,7 +663,7 @@ a:hover { margin-bottom: 0 !important; font-weight: 500; left: -250px; - opacity: 1.3; + opacity: 1; } .HeaderHero .tagline { @@ -726,12 +726,6 @@ a:hover { margin-left: 5px; } -/* Homepage */ -.HomePage { - width: 100%; - overflow-x: hidden; -} - /* Section */ .Section { width: 100%; From 09cd4ff5c1b84733c41ac4cd74d1102c04a806df Mon Sep 17 00:00:00 2001 From: Abhi Date: Fri, 31 Jan 2025 23:46:19 -0500 Subject: [PATCH 13/16] Remove unused files --- docs/src/components/layout/HeaderHero.tsx | 5 ++--- docs/src/css/custom.css | 9 +-------- docs/src/utils/Heading.tsx | 15 --------------- docs/src/utils/Section.tsx | 21 --------------------- 4 files changed, 3 insertions(+), 47 deletions(-) delete mode 100644 docs/src/utils/Heading.tsx delete mode 100644 docs/src/utils/Section.tsx diff --git a/docs/src/components/layout/HeaderHero.tsx b/docs/src/components/layout/HeaderHero.tsx index 4b21879a7a..49ab35f73f 100644 --- a/docs/src/components/layout/HeaderHero.tsx +++ b/docs/src/components/layout/HeaderHero.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import Section from '../../utils/Section'; import HomeCallToAction from '../../utils/HomeCallToAction'; function HeaderHero() { return ( -
+

Talawa

@@ -17,7 +16,7 @@ function HeaderHero() {
-
+
); } diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index e13c4e9ced..8eedcdf939 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -580,12 +580,6 @@ html[data-theme='dark'] .header-youtube-link:before { } } -.Heading { - font-size: 1.5rem; - font-weight: 700; - text-align: left !important; -} - h1, h2, h3, @@ -597,8 +591,7 @@ h6 { } p, -textarea, -.Heading div { +textarea { margin-bottom: 1.25rem; color: var(--primary-neutral-800); font-size: 0.9375rem; diff --git a/docs/src/utils/Heading.tsx b/docs/src/utils/Heading.tsx deleted file mode 100644 index 03fc69e581..0000000000 --- a/docs/src/utils/Heading.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; - -interface HeadingProps { - text: string; - [key: string]: any; -} - -const Heading: React.FC = ({ text, ...props }) => { - return ( -

- {text} -

- ); -}; -export default Heading; diff --git a/docs/src/utils/Section.tsx b/docs/src/utils/Section.tsx deleted file mode 100644 index 8ae47139dc..0000000000 --- a/docs/src/utils/Section.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -interface SectionProps { - element?: keyof JSX.IntrinsicElements; - children: React.ReactNode; - className?: string; - background?: 'light' | 'dark' | 'tint'; - role?: string; -} - -function Section({ - element = 'section', - children, - className, - background = 'light', -}: SectionProps) { - const El = element; - return {children}; -} - -export default Section; From aebce2ad87e1eaf1b3d6f5180ced4e7cc881d69a Mon Sep 17 00:00:00 2001 From: Abhi Date: Sat, 1 Feb 2025 00:28:58 -0500 Subject: [PATCH 14/16] Update with coderabbit suggestion --- docs/src/utils/ActionButton.tsx | 2 +- docs/src/utils/HomeCallToAction.tsx | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/docs/src/utils/ActionButton.tsx b/docs/src/utils/ActionButton.tsx index 79b9163eb7..3b3fbf6d50 100644 --- a/docs/src/utils/ActionButton.tsx +++ b/docs/src/utils/ActionButton.tsx @@ -6,7 +6,7 @@ interface ActionButtonProps { target?: string; children: React.ReactNode; buttonClassName?: string; - ariaLabel?: string; + ariaLabel: string; } function ActionButton({ diff --git a/docs/src/utils/HomeCallToAction.tsx b/docs/src/utils/HomeCallToAction.tsx index a3b8f65924..3f4301b064 100644 --- a/docs/src/utils/HomeCallToAction.tsx +++ b/docs/src/utils/HomeCallToAction.tsx @@ -1,16 +1,14 @@ import React from 'react'; import ActionButton from './ActionButton'; -interface HomeCallToActionProps {} - -const HomeCallToAction: React.FC = () => { +const HomeCallToAction = () => { return ( <> Learn More From 6673554b437a4ac45fa3f63ff9e48db37fcc2416 Mon Sep 17 00:00:00 2001 From: Abhi Date: Sat, 1 Feb 2025 00:42:14 -0500 Subject: [PATCH 15/16] Refactor suggestion by coderabbit --- docs/src/utils/ActionButton.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/src/utils/ActionButton.tsx b/docs/src/utils/ActionButton.tsx index 3b3fbf6d50..bdb2771ba8 100644 --- a/docs/src/utils/ActionButton.tsx +++ b/docs/src/utils/ActionButton.tsx @@ -15,15 +15,16 @@ function ActionButton({ target, children, buttonClassName, + ariaLabel, }: ActionButtonProps) { return ( {children} From 3790660bfe29c15e172830797e28fb135d332e36 Mon Sep 17 00:00:00 2001 From: Abhi Date: Sat, 1 Feb 2025 00:48:03 -0500 Subject: [PATCH 16/16] Run prettier for updated component --- docs/src/utils/ActionButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/utils/ActionButton.tsx b/docs/src/utils/ActionButton.tsx index bdb2771ba8..33a955b24c 100644 --- a/docs/src/utils/ActionButton.tsx +++ b/docs/src/utils/ActionButton.tsx @@ -19,7 +19,7 @@ function ActionButton({ }: ActionButtonProps) { return (