From 32424d3c2fe396a6bc6622066b6cace4ddefb3e4 Mon Sep 17 00:00:00 2001
From: Peter Harrison <16875803+palisadoes@users.noreply.github.com>
Date: Mon, 20 Jan 2025 19:45:27 -0800
Subject: [PATCH 1/2] Updated CSS Heading Color Palette

---
 docs/docusaurus.config.ts |  22 +-
 docs/src/css/custom.css   |  27 ++
 docs/src/css/index.css    | 593 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 635 insertions(+), 7 deletions(-)
 create mode 100644 docs/src/css/index.css

diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
index c108b849bc..553508474d 100644
--- a/docs/docusaurus.config.ts
+++ b/docs/docusaurus.config.ts
@@ -30,18 +30,26 @@ const config: Config = {
   presets: [
     [
       'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
       {
         docs: {
-          sidebarPath: './sidebars.ts',
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
+          sidebarPath: require.resolve('./sidebars.js'),
+          editUrl: ({ docPath }) => {
+            return `https://github.com/PalisadoesFoundation/talawa-admin/edit/develop/docs/docs/${docPath}`;
+          },
+        },
+        blog: {
+          showReadingTime: true,
           editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+            'https://github.com/PalisadoesFoundation/talawa-admin/tree/develop/docs/docs',
         },
         theme: {
-          customCss: './src/css/custom.css',
+          customCss: [
+            require.resolve('./src/css/custom.css'),
+            require.resolve('./src/css/index.css'),
+          ],
         },
-      } satisfies Preset.Options,
+      },
     ],
   ],
 
@@ -76,7 +84,7 @@ const config: Config = {
           {
             label: 'Admin Guide',
             position: 'left',
-            href: 'https://docs-admin.talawa.io/docs',
+            href: '/docs',
             target: '_self',
           },
           {
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index f0f927b720..681c0404f3 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -6,6 +6,13 @@
  */
 
 :root {
+  --h1-markdown: #021526;
+  --h2-markdown: #3a6d8c;
+  --h3-markdown: #474e93;
+  --h4-markdown: #508c9b;
+  --h5-markdown: #6a9ab0;
+  --h6-markdown: #888888;
+  --hx-markdown-underline: #eeeeee;
   --secondary-blue-900: #001c63;
   --sidebar-bg-color: #f3f4f6;
   --secondary-blue-500: #3970fd;
@@ -119,12 +126,32 @@ h1.docTitle_node_modules-\@docusaurus-theme-classic-src-theme-DocItem- {
   --ifm-h2-font-size: 1.875rem;
   margin-bottom: 0.8rem;
   margin-top: calc(var(--ifm-h2-vertical-rhythm-top) * 0rem);
+  color: var(--h2-markdown);
+  border-bottom: 1px solid var(--hx-markdown-underline);
+  padding-bottom: 5px;
 }
 
 .markdown > h3 {
   --ifm-h3-font-size: 1.5rem;
   margin-bottom: 0.8rem;
   margin-top: calc(var(--ifm-h3-vertical-rhythm-top) * 0rem);
+  color: var(--h3-markdown);
+  border-bottom: 1px solid var(--hx-markdown-underline);
+  padding-bottom: 5px;
+}
+
+.markdown > h4 {
+  color: var(--h4-markdown);
+  border-bottom: 1px solid var(--hx-markdown-underline);
+  padding-bottom: 5px;
+}
+
+.markdown > h5 {
+  color: var(--h5-markdown);
+}
+
+.markdown > h6 {
+  color: var(--h6-markdown);
 }
 
 .navbar {
diff --git a/docs/src/css/index.css b/docs/src/css/index.css
new file mode 100644
index 0000000000..9c18f7f15d
--- /dev/null
+++ b/docs/src/css/index.css
@@ -0,0 +1,593 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+:root {
+  /* Brand colors */
+  --brand: #febc59;
+
+  /* Dark theme */
+  --dark: #282c34;
+  --deepdark: #20232a;
+
+  /* Text and subtle colors */
+  --text: #1a1a1a;
+  --subtle: #767676;
+  --divider: #ececec;
+
+  /* UI and components */
+  --tintColor: #f7f7f7;
+  --rn-note-background: rgba(255, 229, 100, 0.25);
+  --ifm-font-family-base: "Optimistic Display", system-ui, -apple-system,
+    sans-serif;
+  --ifm-font-size-base: 17px;
+  --ifm-spacing-horizontal: 16px;
+  --ifm-menu-link-padding-horizontal: 0;
+  --ifm-toc-padding-vertical: 6px;
+  --ifm-toc-link-color: var(--ifm-color-emphasis-700);
+  --ifm-code-font-size: 90%;
+  --ifm-code-border-radius: 3px;
+  --ifm-blockquote-color: var(--ifm-font-color-base);
+  --ifm-blockquote-font-size: 16px;
+  --ifm-table-head-color: var(--subtle);
+  --ifm-link-hover-decoration: none;
+}
+
+.navbar__brand {
+  color: var(--brand-color);
+  font-size: 20px;
+}
+
+/* Custom button */
+.custom-button {
+  margin-right: 10px;
+}
+
+/* Homepage */
+.homepage {
+  width: 100%;
+  max-width: 100%;
+}
+
+/* Header Hero */
+
+.HeaderHero {
+  padding-top: 20px;
+  margin-top: 4rem;
+  margin-bottom: 0;
+}
+
+.HeaderHero .TwoColumns .column {
+  max-width: initial;
+}
+
+.HeaderHero .TwoColumns .column.right {
+  text-align: end;
+}
+
+.HeaderHero .socialLinks {
+  display: flex;
+  justify-content: flex-end;
+  max-width: 1200px;
+  margin: -10px auto 0;
+}
+
+.HeaderHero .socialLinks .twitter-follow-button,
+.HeaderHero .socialLinks .github-button .slack-button {
+  margin-right: 1rem;
+}
+
+.HeaderHero .TwoColumns {
+  align-items: center;
+}
+
+.HeaderHero .title {
+  font-size: 3rem;
+  line-height: 1;
+  margin-top: 0;
+  margin-bottom: 20px;
+  font-weight: 500;
+  left: -250px;
+  opacity: 1.3;
+}
+
+.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;
+  left: -250px;
+}
+
+.HeaderHero .buttons {
+  margin-top: 40px;
+}
+
+.HeaderHero .image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media only screen and (min-width: 961px) {
+  .HeaderHero .TwoColumns {
+    grid-template-columns: 3fr 2fr;
+  }
+
+  .HeaderHero .TwoColumns .column.left {
+    padding-right: 0;
+    width: fit-content;
+  }
+}
+
+@media only screen and (max-width: 760px) {
+  .HeaderHero .title {
+    font-size: 60px;
+  }
+
+  .HeaderHero .tagline {
+    font-size: 30px;
+  }
+
+  .HeaderHero .socialLinks {
+    margin-top: -2rem;
+  }
+  .HeaderHero {
+    margin-top: 0.5rem;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-30px);
+  }
+
+  60% {
+    transform: translateY(-15px);
+  }
+}
+
+.bounce-animation {
+  animation: bounce 2s;
+}
+
+/* Second Panel */
+
+.SecondPanel {
+  overflow: hidden;
+}
+
+@media only screen and (max-width: 960px) {
+  .SecondPanel .column.last {
+    max-height: 300px;
+  }
+}
+
+@media only screen and (min-width: 481px) and (max-width: 960px) {
+  .SecondPanel .column.last {
+    width: 66.7%;
+    margin: 0 auto;
+  }
+}
+
+@media only screen and (min-width: 961px) {
+  .SecondPanel {
+    max-height: 600px;
+  }
+
+  /* Correct for whitespace in the image of phones */
+  .SecondPanel .column.left {
+    margin-top: -25px;
+  }
+}
+
+.second-panel-image {
+  width: 140%;
+  height: auto;
+  position: relative;
+  top: -50px;
+  left: -65px;
+  opacity: 2;
+}
+
+/* Third Panel */
+
+.third-panel-image {
+  width: 80%;
+  height: auto;
+  position: relative;
+  top: 30px;
+  right: -130px;
+  opacity: 2;
+}
+
+/* Fourth Panel */
+
+.NativeDevelopment {
+  overflow-y: hidden;
+}
+.NativeDevelopment .left {
+  margin: auto;
+}
+
+.NativeDevelopment .dissection {
+  position: relative;
+}
+
+.NativeDevelopment .dissection img {
+  left: 0;
+  top: 0;
+}
+
+@media only screen and (max-width: 960px) {
+  .NativeDevelopment .TwoColumns {
+    grid-gap: 2rem;
+  }
+  .NativeDevelopment .dissection {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .NativeDevelopment .dissection {
+    height: 350px;
+  }
+}
+
+@media only screen and (min-width: 481px) and (max-width: 960px) {
+  .NativeDevelopment .dissection {
+    height: 450px;
+  }
+}
+
+@media only screen and (min-width: 961px) {
+  .NativeDevelopment .dissection {
+    height: auto;
+  }
+}
+
+.fourth-panel-image {
+  width: 75%;
+  height: auto;
+  position: relative;
+  top: -50px;
+  left: -120px;
+  opacity: 2;
+}
+
+/* Fifth Panel */
+
+.fifth-panel {
+  min-height: 550px;
+}
+
+.fifth-panel-image {
+  width: 75%;
+  height: auto;
+  position: relative;
+  opacity: 2;
+  right: -70px;
+  margin-top: 20px;
+}
+
+.panel-height {
+  height: 50px;
+}
+
+.text-column-offset {
+  padding-top: 95px;
+}
+
+/* Correction for the bottom space in section six*/
+#docusaurus_skipToContent_fallback
+  > section.Section.SixthPanel.tint
+  > div
+  > div.column.last.right
+  > div {
+  margin-bottom: 0;
+}
+
+.SixthPanel {
+  min-height: 430px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.SixthPanel .column.last {
+  margin-bottom: -49px;
+}
+
+.SixthPanel pre {
+  margin: 0;
+}
+
+.SixthPanel .prism-code {
+  border-radius: 0;
+  font-size: 80%;
+  height: 450px;
+  width: 100%;
+}
+
+@media only screen and (max-width: 480px) {
+  .SixthPanel .column.last {
+    width: 100%;
+    padding: 0;
+    overflow-x: auto;
+  }
+
+  .SixthPanel .prism-code {
+    font-size: 10px;
+    padding: 1.25rem 1.25rem;
+  }
+}
+
+@media screen and (min-width: 481px) and (max-width: 960px) {
+  .SixthPanel .TwoColumns {
+    grid-gap: 2rem;
+  }
+
+  .SixthPanel .column.last {
+    width: 100%;
+    padding: 0;
+    height: 28rem;
+    overflow-y: scroll;
+  }
+
+  .SixthPanel .prism-code {
+    border-radius: 0;
+    font-size: 80%;
+    background-color: #fff;
+    color: #f8f8f2;
+  }
+}
+
+@media only screen and (min-width: 961px) {
+  .SixthPanel .TwoColumns .column.right {
+    max-width: 100%;
+    padding-left: 0;
+  }
+
+  .SixthPanel .TwoColumns {
+    justify-content: space-between;
+  }
+
+  .SixthPanel .column.right .prism-code {
+    /* Bleed background into the right */
+    margin-right: -9999px;
+    padding: 16px 1.5rem;
+    height: 460px;
+  }
+  .SixthPanel .column.left h2 {
+    text-align: left;
+  }
+  .SixthPanel .column.right .prism-code {
+    background-color: var(--ifm-color-emphasis-100) !important;
+    box-shadow: var(--ifm-navbar-shadow);
+  }
+}
+
+/* Seventh Panel */
+
+.SeventhPanel {
+  min-height: 550px;
+}
+
+.seventh-panel-image {
+  width: 500%;
+  height: auto;
+  position: relative;
+  opacity: 2;
+}
+
+.seventh-panel .content {
+  max-width: 900px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+@media only screen and (max-width: 480px) {
+  .seventh-panel .Heading {
+    width: 100%;
+    padding: 0 1rem;
+    margin-bottom: 1.5rem;
+  }
+}
+
+@media only screen and (min-width: 481px) and (max-width: 960px) {
+  .seventh-panel .Heading {
+    width: 100%;
+    padding: 0 4rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .seventh-panel .AppList {
+    width: 100%;
+    max-width: 500px;
+    margin: 2rem auto;
+  }
+}
+
+@media only screen and (min-width: 961px) {
+  .seventh-panel .column.first {
+    border-right: 1px solid var(--ifm-table-border-color);
+  }
+}
+
+.eigth-panel-image {
+  width: 1000%;
+  height: auto;
+  position: relative;
+  opacity: 2;
+}
+
+/* ActionButton */
+
+.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;
+  max-width: 50%;
+  border-radius: 0.375rem;
+  margin-right: 10px;
+}
+
+.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;
+}
+
+.ActionButton.primary:hover {
+  background-color: #1cbb99;
+}
+
+.ActionButton.secondary {
+  color: #1c1e21;
+  background-color: #ebedf0;
+}
+
+.ActionButton.secondary:hover {
+  background-color: #c7c7c7;
+}
+
+.ActionButton.secondary::after {
+  content: "›";
+  font-size: 24px;
+  margin-left: 5px;
+}
+
+@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;
+  }
+}
+
+.HomePage {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+/* Section */
+
+.Section {
+  width: 100%;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  overflow-x: hidden;
+  margin-bottom: 5rem;
+}
+
+@media only screen and (max-width: 960px) {
+  .Section {
+    margin-bottom: 2rem;
+    padding-top: 1rem;
+  }
+}
+
+.Section.tint {
+  background-color: var(--ifm-hover-overlay);
+}
+
+.Section.dark {
+  background-color: var(--dark);
+}
+
+/* Two columns */
+
+.TwoColumns {
+  display: grid;
+}
+
+.TwoColumns .column {
+  width: 100%;
+}
+
+.TwoColumns .column.first {
+  grid-area: first;
+}
+
+.TwoColumns .column.last {
+  grid-area: last;
+}
+
+@media only screen and (min-width: 961px) {
+  .TwoColumns {
+    margin: 0 auto;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-areas: "first last";
+  }
+
+  .TwoColumns.reverse {
+    grid-template-areas: "last first";
+  }
+
+  .TwoColumns .column {
+    max-width: 450px;
+  }
+
+  .TwoColumns .column.left {
+    padding-right: 50px;
+  }
+
+  .TwoColumns .column.right {
+    padding-left: 50px;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  .TwoColumns,
+  .TwoColumns.reverse {
+    grid-template-columns: 1fr;
+    grid-template-areas: "first" "last";
+  }
+
+  .TwoColumns .column {
+    padding: 0 4rem;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .TwoColumns .column {
+    padding: 0 1.25rem;
+  }
+}

From dc75b05ecd5a9a04b873fac6642b3074539ff6c6 Mon Sep 17 00:00:00 2001
From: Peter Harrison <16875803+palisadoes@users.noreply.github.com>
Date: Mon, 20 Jan 2025 19:53:34 -0800
Subject: [PATCH 2/2] Updated CSS Heading Color Palette

---
 docs/src/css/index.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index 9c18f7f15d..e58696a6ad 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -21,7 +21,7 @@
   /* UI and components */
   --tintColor: #f7f7f7;
   --rn-note-background: rgba(255, 229, 100, 0.25);
-  --ifm-font-family-base: "Optimistic Display", system-ui, -apple-system,
+  --ifm-font-family-base: 'Optimistic Display', system-ui, -apple-system,
     sans-serif;
   --ifm-font-size-base: 17px;
   --ifm-spacing-horizontal: 16px;
@@ -478,7 +478,7 @@
 }
 
 .ActionButton.secondary::after {
-  content: "›";
+  content: '›';
   font-size: 24px;
   margin-left: 5px;
 }
@@ -554,11 +554,11 @@
   .TwoColumns {
     margin: 0 auto;
     grid-template-columns: repeat(2, 1fr);
-    grid-template-areas: "first last";
+    grid-template-areas: 'first last';
   }
 
   .TwoColumns.reverse {
-    grid-template-areas: "last first";
+    grid-template-areas: 'last first';
   }
 
   .TwoColumns .column {
@@ -578,7 +578,7 @@
   .TwoColumns,
   .TwoColumns.reverse {
     grid-template-columns: 1fr;
-    grid-template-areas: "first" "last";
+    grid-template-areas: 'first' 'last';
   }
 
   .TwoColumns .column {