Doc changes (#2124)

* refactored Storybook UI

* refactored Storybook UI

* removed extra cards from the doc, added card for ui components

* added hover behavior to doc page & made it look selected

* separate storybook docs and tests

* separating storybook tests and docs

* fixed spelling errors in docs

* Final round of edits for frontend, added backend folder architecture

* Created CODE_OF_CONDUCT.md

* Add code of conduct to contributing.md

* doc changes

* fixed broken links

docs/src/css/custom.css

@@ -43,6 +43,7 @@
   --category-icon-background-color: #ebebeb;
   --category-icon-border-color: #d6d6d6;
   --level-1-color: #B3B3B3;
+  
 }
 
 .markdown > h1 {
@@ -162,10 +163,23 @@ li.coming-soon a::after {
   color:inherit
 } 
 
-.menu__list-item--level1 > .menu__link--active > .icon-and-text{
+.menu__list-item--level1 > .menu__link--active > .icon-and-text {
   color: black;
 }
 
+/* Change text color to white for dark mode */
+@media (prefers-color-scheme: dark) {
+  .menu__list-item--level1 > .menu__link--active > .icon-and-text {
+    color: white;
+  }
+}
+
+/* Reset to the browser's default text color for other cases (light mode) */
+.menu__list-item--level1 > .menu__link--active > .icon-and-text {
+  color: initial;
+}
+
+ 
 
 .menu__list-item--level1 > .menu__link--active,
 .menu__list-item--level1 > .menu__link:hover {

docs/src/theme/Icon/DarkMode/index.js

@@ -4,7 +4,7 @@ import {useColorMode} from '@docusaurus/theme-common';
 
 
 const IconDarkMode = (props) => {
-  const { colorMode } = useColorMode().colorMode;
+  const { colorMode } = useColorMode();
   return colorMode === 'dark' ? <TbMoon /> : <></>;
 }
 

docs/src/theme/Icon/LightMode/index.js

@@ -4,8 +4,8 @@ import {useColorMode} from '@docusaurus/theme-common';
 
 
 const IconLightMode = (props) =>  {
-  const { colorMode } = useColorMode().colorMode;
-  return colorMode === 'dark' ? <></>: <TbSun /> ;
+  const { colorMode } = useColorMode();
+  return colorMode === 'light' ? <TbSun /> : <></>;
 }
 
 export default IconLightMode;

docs/src/theme/icons.js

@@ -32,5 +32,7 @@ export {
   TbTopologyStar,
   TbVocabulary,
   TbZoomQuestion,
-  TbRocket
+  TbRocket,
+  TbAugmentedReality,
+  TbTerminal,
 } from "react-icons/tb";