fix: website revamp

site/gatsby-browser.js

@@ -1,4 +1,11 @@
+import React from 'react';
+
 import { ThemeProvider } from './src/components/Theme';
 import './src/styles/global.css';
+import { BrowserRouter } from 'react-router-dom';
 
-export const wrapRootElement = ({ element }) => <ThemeProvider>{element}</ThemeProvider>;
+export const wrapRootElement = ({ element }) => (
+  <BrowserRouter>
+    <ThemeProvider>{element}</ThemeProvider>
+  </BrowserRouter>
+);

site/src/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

site/src/components/Dropdown/index.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { React, useState } from 'react';
 import Sidebar from '../Sidebar';
 
 const Dropdown = () => {

site/src/components/Footer/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Footer = () => {
   return (
     <div className="ml-[17.5rem] pt-[5rem]">

site/src/components/Navigation/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { useContext } from 'react';
 import Search from '../../assets/images/Search.svg';
 import SearchDark from '../../assets/images/SearchDark.svg';

site/src/components/Sidebar/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import ChevronLightUp from '../../assets/images/Chevron-light-up.svg';

site/src/pages/404.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Link } from 'gatsby';
 
 const pageStyles = {

site/src/pages/components/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Components = () => {
   return <div className="text-center text-bold">Components</div>;
 };

site/src/pages/home/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Home = () => {
   return <div className="text-center text-bold">Home</div>;
 };

site/src/pages/identity/Content.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Content = (props) => {
   return (
     <div className="w-[844px] pt-8 text-gray-700 text-sm font-normal font-openSans leading-loose">

site/src/pages/identity/Heading.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Heading = (props) => {
   return (
     <div className="self-stretch text-gray-950 text-[52px] font-bold font-qanelas leading-[64px]">

site/src/pages/identity/Navigation.js

@@ -1,6 +1,8 @@
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 const Navigation = (props) => {
+  console.log('naviation');
   return (
     <div className="w-[1120px] h-14 relative mt-[32px]">
       <div className="w-[1160px] h-0.5 left-[-50px] top-[54px] absolute bg-gray-200" />
@@ -9,6 +11,7 @@ const Navigation = (props) => {
           <Link
             to={`/identity/${props.type}/overview`}
             className="grow shrink basis-0 text-center text-emerald-700 text-base font-semibold font-openSans leading-7"
+            relative="path"
           >
             Overview
           </Link>

site/src/pages/identity/Next.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Link } from 'react-router-dom';
 import nextIcon from '../../assets/images/Chevron-light.svg';
 

site/src/pages/identity/Previous.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Link } from 'react-router-dom';
 import PrevIcon from '../../assets/images/Chevron-light.svg';
 

site/src/pages/identity/Sidebar.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Sidebar = (props) => {
   return (
     <div className="float-right w-[11.25rem] h-[3.75rem] px-4 py-6 bg-slate-200 bg-opacity-10 rounded-lg backdrop-blur-lg flex-col justify-start items-start gap-4 inline-flex">

site/src/pages/identity/SubContent.js

@@ -1,3 +1,4 @@
+import React from 'react';
 const SubContent = (props) => {
   return (
     <>

site/src/pages/identity/SubHeading.js

@@ -1,3 +1,4 @@
+import React from 'react';
 const SubHeading = (props) => {
   return (
     <div className="w-[53.75rem] text-gray-950 text-[2rem] font-medium font-qanelas-medium leading-[3rem]">

site/src/pages/identity/SubText.js

@@ -1,5 +1,6 @@
 import SubContent from './SubContent';
 import SubHeading from './SubHeading';
+import React from 'react';
 
 const SubText = (props) => {
   return (

site/src/pages/identity/Text.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Content from './Content';
 import Heading from './Heading';
 

site/src/pages/identity/colors/code.js → site/src/pages/identity/color/code.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Next from '../Next';
 import Previous from '../Previous';
 import Sidebar from '../Sidebar';

site/src/pages/identity/colors/guidance.js → site/src/pages/identity/color/guidance.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Next from '../Next';
 import Previous from '../Previous';
 import Sidebar from '../Sidebar';

site/src/pages/identity/colors/index.js → site/src/pages/identity/color/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { useParams } from 'react-router-dom';
 import Navigation from '../Navigation';
 import Text from '../Text';

site/src/pages/identity/colors/overview.js → site/src/pages/identity/color/overview.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Next from '../Next';
 import Previous from '../Previous';
 import Sidebar from '../Sidebar';

site/src/pages/identity/elevation/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Elevation = () => {
   return <div className="text-center text-bold">Elevation</div>;
 };

site/src/pages/identity/page-layouts/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const PageLayout = () => {
   return <div className="text-center text-bold">Page Layout</div>;
 };

site/src/pages/identity/spacing/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 const Spacing = () => {
   return <div className="text-center text-bold">Spacing</div>;
 };

site/src/pages/identity/typography/code.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Next from '../Next';
 import Previous from '../Previous';
 import Sidebar from '../Sidebar';

site/src/pages/identity/typography/guidance.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Next from '../Next';
 import Previous from '../Previous';
 import Sidebar from '../Sidebar';

site/src/pages/identity/typography/index.js

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { useParams } from 'react-router-dom';
 import Navigation from '../Navigation';
 import Text from '../Text';