Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat UI: Styling changes #2826

Open
wants to merge 6 commits into
base: develop-postgres
Choose a base branch
from
+250 −44
Open

feat UI: Styling changes #2826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4a459d5
feat UI: Styling changes
karthik-nair-20 Jan 3, 2025
ae97b45
fix: typo
karthik-nair-20 Jan 4, 2025
0c24be9
coderabbit review comment
karthik-nair-20 Jan 11, 2025
1164659
code rabbit review
karthik-nair-20 Jan 11, 2025
ea99e52
codeRabbit suggestion
karthik-nair-20 Jan 12, 2025
9775003
rabbit
karthik-nair-20 Jan 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 68 additions & 14 deletions docs/docusaurus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@ const config: Config = {
// Replace with your project's social card
image: 'img/docusaurus-social-card.jpg',
navbar: {
title: 'My Site',
title: 'Talawa-docs',
logo: {
alt: 'My Site Logo',
src: 'img/logo.svg',
src: 'img/logos/logo.png',
},
karthik-nair-20 marked this conversation as resolved.
Show resolved Hide resolved
items: [
{
Expand All @@ -60,9 +60,39 @@ const config: Config = {
label: 'Tutorial',
},
{
href: 'https://github.com/facebook/docusaurus',
label: 'GitHub',
position: 'right',
label: "Mobile Guide",
position: "left",
href: "https://docs-mobile.talawa.io/",
target: "_blank",
},
{
label: "Admin Guide",
position: "left",
href: "https://docs-admin.talawa.io/",
target: "_blank",
},
{
label: "API Guide",
position: "left",
href: "https://docs-api.talawa.io/",
target: "_self",
},
{
label: "Demo",
position: "left",
href: "http://admin-demo.talawa.io/",
},
karthik-nair-20 marked this conversation as resolved.
Show resolved Hide resolved
{
to: "https://github.com/PalisadoesFoundation",
position: "right",
className: "header-github-link",
"aria-label": "GitHub repository",
},
{
to: "https://www.youtube.com/@PalisadoesOrganization",
position: "right",
className: "header-youtube-link",
"aria-label": "Palisadoes Youtube channel",
karthik-nair-20 marked this conversation as resolved.
Show resolved Hide resolved
},
],
},
Expand All @@ -82,28 +112,52 @@ const config: Config = {
title: 'Community',
items: [
{
label: 'Stack Overflow',
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
label: "Slack",
to: "https://github.com/PalisadoesFoundation",
className: "footer__icon footer__slack",
},
{
label: 'Discord',
href: 'https://discordapp.com/invite/docusaurus',
label: "News",
to: "https://www.palisadoes.org/news/",
className: "footer__icon footer__news",
},
{
label: 'X',
href: 'https://x.com/docusaurus',
label: "Contact Us",
to: "https://www.palisadoes.org/contact/",
className: "footer__icon footer__contact",
},
karthik-nair-20 marked this conversation as resolved.
Show resolved Hide resolved
],
},
{
title: 'More',
title: "Social Media",
items: [
{
label: 'GitHub',
href: 'https://github.com/facebook/docusaurus',
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",
}
karthik-nair-20 marked this conversation as resolved.
Show resolved Hide resolved
],
},
{
title: "Development",
items: [
{
label: " GitHub",
to: "https://github.com/PalisadoesFoundation",
className: "footer__icon footer__github",
},
]
}
Comment on lines +151 to +160
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Confirm the "Development" section aligns with user expectations.
The "Development" footer section references GitHub, but consider whether it might also include contributor guides, code of conduct, or other dev resources for completeness.

],
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
},
karthik-nair-20 marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
160 changes: 144 additions & 16 deletions docs/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,154 @@
*/

/* You can override the default Infima variables here. */

:root {
--ifm-color-primary: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.29);
--secondary-blue-900: #001c63;
--sidebar-bg-color: #f3f4f6;
--secondary-blue-500: #3970fd;
--primary-blue-600: #1e56e3;
--base-neutral-0: #ffffff;
--primary-neutral-800: #1f2a37;
--ifm-menu-color-active: #1e56e3;
--primary-neutral-600: #4d5761;
--ifm-breadcrumb-color-active: var(--primary-neutral-600);
--ifm-link-color: #1e56e3;
--ifm-button-background-color: #2e8555;
--ifm-button-background-color-dark: #205d3b;
karthik-nair-20 marked this conversation as resolved.
Show resolved Hide resolved
--ifm-button-background-color-hover: #359469;
--ifm-button-background-color-dark-hover: #266745;
--ifm-hover-overlay: rgba(0, 0, 0, 0.05);
--brand-color: black;
--next-prev-border-color: #e5e7eb;
--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";
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
--ifm-background: #111927;
--ifm-background-surface-color: var(--ifm-background-color);
--ifm-menu-color: var(--ifm-color-gray-200);
--ifm-toc-link-color: var(--ifm-color-gray-200);
--ifm-code-background: #001b66;
--ifm-color-content: var(--ifm-color-white);
--ifm-navbar-search-input-background-color: #001b66;
--ifm-table-stripe-background: #001242;
--ifm-navbar-search-input-placeholder-color: var(--ifm-color-gray-200);
--ifm-hover-overlay: rgba(0, 0, 0, 0);
--ifm-color-primary: #1e56e3;
--secondary-blue-900: #c6d6ff;
--sidebar-bg-color: #161f36;
--primary-neutral-800: #c9c9cc;
--ifm-button-background-color: #25c2a0;
--ifm-button-background-color-dark: #2e8555;
--ifm-navbar-link-color: #9da4ae;
--ifm-navbar-border-color: #2d3956;
--brand-color: white;
--primary-neutral-600: #c4c4c4;
--next-prev-border-color: #293441;
}

.main-wrapper{
background-color: var(--ifm-background);
display: block;
padding: 0 max(var(--ifm-pre-padding), 16px);
max-width: 1400px;
margin: 0 auto;
}

.table-of-contents {
font-size: 0.75rem;
}
karthik-nair-20 marked this conversation as resolved.
Show resolved Hide resolved

.main__content{
background-color: var(--ifm-background);
}

.menu__link,
.menu * {
font-size: 1rem;
padding-left: 0.5rem;
font-weight: 700;
line-height: 1.5;
}

.menu__list {
border-bottom: 1px solid var(--next-prev-border-color);
padding: 0 15px;
}

.navbar {
background-color: var(--sidebar-bg-color);
box-shadow: var(--ifm-navbar-shadow);
padding: 24px;
height: 80px;
border-bottom: 1px solid var(--ifm-navbar-border-color) ;
}

.navbar__item {
font-size: 0.875rem;
}

.navbar__link:hover,
.navbar__link--active {
color: var(--ifm-color-primary);
text-decoration: none;
}

.navbar__items--right > .navbar__item:not(:first-of-type) {
margin-left: 0.25rem;
}

.footer--dark {
--ifm-footer-background-color: #111927;
border-top: 1px solid var(--next-prev-border-color);
}

.header-github-link:before {
content: "";
width: 20px;
height: 20px;
display: flex;
background: url("../../static/img/logos/github-dark.svg") no-repeat;
position: relative;
right: 8px;
top: 1.5px;
}

.header-youtube-link:before {
content: "";
width: 25px;
height: 30px;
display: flex;
background: url("../../static/img/logos/youtube.svg") no-repeat;
position: relative;
right: 8px;
top: 4.5px;
}

html[data-theme="dark"] .header-github-link:before {
background: url("../../static/img/logos/github.svg") no-repeat;
}
html[data-theme="dark"] .header-youtube-link:before {
background: url("../../static/img/logos/youtube-light.svg") no-repeat;
}

.footer--dark li {
margin-bottom: 0;
padding: 0.5rem;
line-height: normal;
transition: opacity 0.2s;
}

.footer--dark li:hover {
opacity: 0.8;
}

.footer__icon {
margin: 0;
color: #fff;
}
Comment on lines +155 to +158
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Consider enhancing footer icon styles.

The footer icon styles could be improved by:

  • Adding a size constraint for consistency
  • Including spacing between icon and text
  • Ensuring proper vertical alignment
 .footer__icon {
   margin: 0;
   color: #fff;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.footer__icon {
margin: 0;
color: #fff;
}
.footer__icon {
margin: 0;
color: #fff;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

20 changes: 18 additions & 2 deletions docs/src/pages/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,27 @@
*/

.heroBanner {
padding: 4rem 0;
padding: 8rem 0;
karthik-nair-20 marked this conversation as resolved.
Show resolved Hide resolved
text-align: center;
position: relative;
overflow: hidden;
}

.title {
font-size: 3rem;
font-weight: 700;
color: var(--primary-neutral-600);
}

.subtitle {
margin-top: 1rem;
max-width: 42rem;
font-size: 1.25rem;
color: #718096;
margin-left: auto;
margin-right: auto;
}
Comment on lines +19 to +26
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Consider using CSS variables for color consistency.

The subtitle color is defined using a hex value #718096. For better maintainability and theme consistency, consider using a CSS variable.

 .subtitle {
   margin-top: 1rem;
   max-width: 42rem;
   font-size: 1.25rem;
-  color: #718096;
+  color: var(--primary-neutral-600);
   margin-left: auto;
   margin-right: auto;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.subtitle {
margin-top: 1rem;
max-width: 42rem;
font-size: 1.25rem;
color: #718096;
margin-left: auto;
margin-right: auto;
}
.subtitle {
margin-top: 1rem;
max-width: 42rem;
font-size: 1.25rem;
color: var(--primary-neutral-600);
margin-left: auto;
margin-right: auto;
}


@media screen and (max-width: 996px) {
.heroBanner {
padding: 2rem;
Expand All @@ -20,4 +35,5 @@
display: flex;
align-items: center;
justify-content: center;
}
margin-top: 2rem;
}
26 changes: 14 additions & 12 deletions docs/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,21 @@ import styles from './index.module.css';
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<header className={styles.heroBanner}>
<div className="container">
<Heading as="h1" className="hero__title">
{siteConfig.title}
</Heading>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/docs/intro"
>
Docusaurus Tutorial - 5min ⏱️
</Link>
<div className="content">
<Heading as="h1" className="title">
{siteConfig.title}
</Heading>
<p className="subtitle">{siteConfig.tagline}</p>
karthik-nair-20 marked this conversation as resolved.
Show resolved Hide resolved
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/docs/intro"
>
Docusaurus Tutorial - 5min ⏱️
</Link>
karthik-nair-20 marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
</div>
</header>
Expand Down
1 change: 1 addition & 0 deletions docs/static/img/logos/github-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions docs/static/img/logos/github.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/img/logos/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions docs/static/img/logos/youtube-light.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions docs/static/img/logos/youtube.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading