madhavKD · madhavKD · Jan 17, 2023 · Jan 17, 2023 · Jan 17, 2023 · Jan 17, 2023
diff --git a/app/globals.css b/app/globals.css
@@ -42,4 +42,4 @@ a {
 
 .cl-createOrganization-root {
   width: 100%;
-}
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,13 +1,8 @@
 import './globals.css';
-import {
-  ClerkProvider,
-  SignedIn
-} from '@clerk/nextjs/app-beta';
+import 'reshaped/themes/reshaped/theme.css';
+
 import { Reshaped, View } from '../components/Reshaped/Reshaped';
 import RootStyleRegistry from './registry';
-import { MuiThemeProvider } from '../components/Mui';
-
-import 'reshaped/themes/reshaped/theme.css';
 import { SideNavigationBar } from '../components/UI/SideNavigationBar';
 
 export default function RootLayout({
@@ -16,16 +11,14 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <ClerkProvider>
-      <html lang="en">
-        {/*
+    <html lang="en">
+      {/*
             <head /> will contain the components returned by the nearest parent
             head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
           */}
         <head />
         <body>
           <RootStyleRegistry>
-            <MuiThemeProvider>
               <Reshaped theme="reshaped">
                 <View direction="row" height="100%" width="100%">
                   <View width="64px">
@@ -35,14 +28,9 @@ export default function RootLayout({
                     {children}
                   </View>
                 </View>
-                <SignedIn>
-                  {/* TODO: Create a new Organization or join an existing one */}
-                </SignedIn>
               </Reshaped>
-            </MuiThemeProvider>
           </RootStyleRegistry>
         </body>
       </html>
-    </ClerkProvider>
   );
 }
diff --git a/app/new-account/page.tsx b/app/new-account/page.tsx
@@ -1,16 +1,15 @@
 'use client'
-import { Icon, Text, View } from "../../components/Reshaped/Reshaped";
-// import { CreateOrganization } from "../../components/Clerk";
-import { CreateOrganization } from "@clerk/nextjs";
-import Image from "next/image";
+import { Text, View } from "../../components/Reshaped/Reshaped";
+// import { CreateOrganization } from "@clerk/nextjs";
+// import Image from "next/image";
 
 
 export default function NewAccount() {
     return (
         <View gap={5} direction={"column"} align={"center"} >
             <View.Item columns={5}>
                 <View align={"center"}>
-                    <CreateOrganization />
+                    {/* <CreateOrganization /> */}
                 </View>
             </View.Item>
             <View.Item columns={5}>

diff --git a/app/registry.tsx b/app/registry.tsx
@@ -4,8 +4,6 @@ import React, { useState } from "react";
 import { CacheProvider } from "@emotion/react";
 import createCache from "@emotion/cache";
 import { useServerInsertedHTML } from "next/navigation";
-import { ThemeProvider } from "@mui/material";
-import { theme } from "@dechea/orc.design-tokens.theme.theme";
 
 export default function RootStyleRegistry({
   children,
@@ -31,9 +29,7 @@ export default function RootStyleRegistry({
 
   return (
     <CacheProvider value={cache}>
-      <ThemeProvider theme={theme}>
-        {children}
-      </ThemeProvider>
+      {children}
     </CacheProvider>
   );
 }
diff --git a/app/selected-tooth/[section]/[item]/layout.tsx b/app/selected-tooth/[section]/[item]/layout.tsx
@@ -1,6 +1,6 @@
 
-import React from 'react';
-import { SelectedToothItems } from '../../../../components/UI/SelectedToothItems'
+import dynamic from 'next/dynamic'
+const SelectedToothItems = dynamic(() => import('../../../../components/UI/SelectedToothItems').then((comp) => comp.SelectedToothItems))
 
 export default function ItemLayout({ params, children }: { params: any, children: React.ReactNode }) {
   return (

diff --git a/app/selected-tooth/[section]/[item]/page.tsx b/app/selected-tooth/[section]/[item]/page.tsx
@@ -1,4 +1,4 @@
-
+'use client'
 
 export default function Page() {
     return (<></>)

diff --git a/app/selected-tooth/[section]/page.tsx b/app/selected-tooth/[section]/page.tsx
@@ -1,3 +1,4 @@
+'use client'
 
 export default function Page() {
     return (<></>)

diff --git a/app/selected-tooth/layout.tsx b/app/selected-tooth/layout.tsx
@@ -1,9 +1,10 @@
 
-import React from 'react';
+import dynamic from 'next/dynamic';
 import { View, Text, Divider } from '../../components/Reshaped/Reshaped'
-import { SelectedTooth } from '../../components/UI/SelectedTooth';
-import { Cart } from '../../components/UI/Cart';
-import { SelectTeeth } from '../../components/UI/ProstheticSelectionGuide/components/SelectTeeth';
+
+const SelectedTooth = dynamic(() => import('../../components/UI/SelectedTooth').then((comp) => comp.SelectedTooth))
+const Cart = dynamic(() => import('../../components/UI/Cart').then((comp) => comp.Cart))
+const SelectTeeth = dynamic(() => import('../../components/UI/ProstheticSelectionGuide/components/SelectTeeth').then((comp) => comp.SelectTeeth))
 
 export default function SelectedToothLayout({ children }: { children: React.ReactNode }) {
   return (

diff --git a/app/selected-tooth/page.tsx b/app/selected-tooth/page.tsx
@@ -1,3 +1,4 @@
+'use client'
 
 export default function Page() {
     return (<></>)

diff --git a/app/teeth-diagram/page.tsx b/app/teeth-diagram/page.tsx
@@ -1,9 +1,10 @@
 'use-client';
 
-
-import { ProstheticSelectionGuide } from '../../components/UI/ProstheticSelectionGuide';
+import dynamic from 'next/dynamic';
 import { View, Text } from '../../components/Reshaped/Reshaped'
 
+const ProstheticSelectionGuide = dynamic(() => import('../../components/UI/ProstheticSelectionGuide').then((comp) => comp.ProstheticSelectionGuide))
+
 export default function TeethDiagram() {
   return (
     <>

diff --git a/components/FetchUsers.tsx b/components/FetchUsers.tsx
@@ -1,17 +1,17 @@
 "use client"
-import { useAuth } from "@clerk/nextjs";
+// import { useAuth } from "@clerk/nextjs";
 import { Suspense } from "react";
 import { useQuery } from "../src/gqty";
 
 // TODO We need to rewrite to use SSR
 function Fetch() {
 
-    const { getToken } = useAuth();
+    // const { getToken } = useAuth();
 
-    getToken({ template: 'fauna' }).then((token) => { 
-        console.log(token)
-        window.localStorage.setItem("clerk-db-fauna-jwt", JSON.stringify(token));
-    })
+    // getToken({ template: 'fauna' }).then((token) => { 
+    //     console.log(token)
+    //     window.localStorage.setItem("clerk-db-fauna-jwt", JSON.stringify(token));
+    // })
 
 
     const query = useQuery({

diff --git a/components/SignInButton.tsx b/components/SignInButton.tsx
diff --git a/components/UI/Cart/Cart.tsx b/components/UI/Cart/Cart.tsx
@@ -1,12 +1,13 @@
 'use client';
+
+import { useState } from 'react';
 import {
   Accordion,
   View,
   Divider,
   Text,
   Button,
 } from '../../Reshaped/Reshaped';
-import { useState } from 'react';
 
 const CartSvg = () => (
   <svg

diff --git a/components/UI/ProstheticSelectionGuide/ProstheticSelectionGuide.tsx b/components/UI/ProstheticSelectionGuide/ProstheticSelectionGuide.tsx
@@ -1,11 +1,12 @@
 'use client';
 
 import React, { useState } from 'react';
-import { View, Container } from 'reshaped';
+import { View } from 'reshaped';
 import { TeethDiagram } from '../../teeth-diagram';
 import { TreatmentCard } from '../TreatmentCard';
 import { data } from '../__mock__/data';
 import { SelectProstheticsButton } from './components/SelectProtheticsButton';
+import './styles.css'
 
 export default function ProstheticSelectionGuide() {
   const [selectedTooth, setSelectedTooth] = useState<number[]>([]);
@@ -33,9 +34,11 @@ export default function ProstheticSelectionGuide() {
 
   return (
     <>
-      <View direction={'row'} justify={'center'}>
-        <View width={{s:"100%", xl:"80%"}} direction={'column'}>
-          <TeethDiagram toggleToothSelection={toggleToothSelection} />
+      <View direction={'row'} justify={'center'} className="responsive-container">
+        <View width="100%" direction={'column'} align="center">
+          <View align="center" width="100%">
+            <TeethDiagram toggleToothSelection={toggleToothSelection} />
+          </View>
           <View
             gap={10}
             direction="row"

diff --git a/.../UI/ProstheticSelectionGuide/components/SelectProtheticsButton/SelectProtheticsButton.tsx b/.../UI/ProstheticSelectionGuide/components/SelectProtheticsButton/SelectProtheticsButton.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import Image from 'next/image';
-import React from 'react';
 import { View, Button } from 'reshaped';
 import { useRouter } from "next/navigation";
 

diff --git a/components/UI/ProstheticSelectionGuide/styles.css b/components/UI/ProstheticSelectionGuide/styles.css
@@ -0,0 +1,11 @@
+@media (min-width: 900px) {
+  .responsive-container {
+    margin: 0px 24px 0px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .responsive-container {
+    margin: 0px 124px 0px;
+  }
+}
diff --git a/components/UI/SelectedTooth/components/EmployeeDropdown/EmployeeDropdown.tsx b/components/UI/SelectedTooth/components/EmployeeDropdown/EmployeeDropdown.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import React, { ChangeEvent, useState } from 'react';
 import {
   Text,

diff --git a/components/UI/SelectedToothItems/components/Products/Products.tsx b/components/UI/SelectedToothItems/components/Products/Products.tsx
@@ -1,4 +1,4 @@
-"use-client";
+"use client";
 
 import Image from "next/image";
 import {

diff --git a/components/UI/SelectedToothItems/index.tsx b/components/UI/SelectedToothItems/index.tsx
@@ -9,7 +9,6 @@ import { useRouter } from 'next/navigation';
 
 export function SelectedToothItems({ params }: { params: any }) {
   const router = useRouter()
-  const section = params.section;
   const item = params.item;
 
   const handleSelectItem = (questionIndex: number, optionIndex: number) => {

diff --git a/components/UI/SideNavigationBar/SideNavigationBar.tsx b/components/UI/SideNavigationBar/SideNavigationBar.tsx
@@ -1,9 +1,6 @@
 'use client';
 
-import { SignedIn, SignedOut, SignInButton } from "@clerk/nextjs";
-import { UserButton } from "@clerk/nextjs/app-beta";
 import Image from "next/image";
-import React from "react";
 import { Avatar, Divider, View, MenuItem, Button, Icon } from "../../Reshaped/Reshaped";
 
 export default function SideNavigationBar() {
@@ -27,7 +24,10 @@ export default function SideNavigationBar() {
 
         <View height="100%" direction="column" justify="end" align="center" paddingTop={2} paddingBottom={2}>
           <View width='64px' height='64px' align="center" justify="center">
-            <SignedOut>
+            <Button variant='ghost'>
+              <Avatar src="/User.svg" alt="Dechea" size={8} />
+            </Button>
+            {/* <SignedOut>
               <SignInButton mode="modal">
                 <Button variant='ghost'>
                   <Avatar src="/User.svg" alt="Dechea" size={8} />
@@ -36,7 +36,7 @@ export default function SideNavigationBar() {
             </SignedOut>
             <SignedIn>
               <UserButton />
-            </SignedIn>
+            </SignedIn> */}
           </View>
         </View>
       </View>

diff --git a/components/UI/__mock__/data.tsx b/components/UI/__mock__/data.tsx
@@ -1,8 +1,10 @@
 'use client';
 
-import { Tooth11 } from '../../teeth-diagram/components/Tooth11';
+import dynamic from 'next/dynamic';
 import { View } from '../../Reshaped/Reshaped';
 
+const Tooth11 = dynamic(() => import('../../teeth-diagram/components/Tooth11').then((comp) => comp.Tooth11), {ssr: false});
+
 export const ImplantIcon = () => (
   <View height="32px" width="32px" justify="center" align="center">
     <Tooth11 implant artificial root={false} />

diff --git a/components/teeth-diagram/TeethDiagram.tsx b/components/teeth-diagram/TeethDiagram.tsx
@@ -7,19 +7,19 @@ import {
   lowerJawLeftTeeth,
   lowerJawRightTeeth,
 } from '@dechea/hes.constants.tooth-position';
-import { Container, View } from 'reshaped';
+import { View } from 'reshaped';
 import { Teeth } from './components/Teeth';
 import { TeethDiagramProps } from './types/types';
 
 export const TeethDiagram = ({ toggleToothSelection }: TeethDiagramProps) => {
   return (
-    <View direction="column" gap={5} align="center" divided>
+    <View direction="column" gap={5} align="center" divided maxWidth="1920px" width="100%">
       {/* upper jaw */}
       <View.Item columns={12}>
-        <View direction="row" gap={5} divided wrap={false}>
+        <View direction="row" gap={6} wrap={false}>
           {/* Upper left */}
           <View.Item columns={6}>
-            <View direction="row" gap={2} align="end" justify="end">
+            <View direction="row" gap={6} align="end" justify="end">
               <Teeth
                 jawType="upper"
                 teeth={upperJawLeftTeeth}
@@ -30,7 +30,7 @@ export const TeethDiagram = ({ toggleToothSelection }: TeethDiagramProps) => {
 
           {/* Upper right */}
           <View.Item columns={6}>
-            <View direction="row" gap={2} align="end" justify="start">
+            <View direction="row" gap={6} align="end" justify="start">
               <Teeth
                 jawType="upper"
                 teeth={upperJawRightTeeth}
@@ -43,10 +43,10 @@ export const TeethDiagram = ({ toggleToothSelection }: TeethDiagramProps) => {
 
       {/* lower jaw */}
       <View.Item columns={12}>
-        <View direction="row" gap={5} divided wrap={false}>
+        <View direction="row" gap={6} wrap={false}>
           {/* Lower left */}
           <View.Item columns={6}>
-            <View direction="row" gap={2} align="start" justify="end">
+            <View direction="row" gap={6} align="start" justify="end">
               <Teeth
                 jawType="lower"
                 teeth={lowerJawLeftTeeth}
@@ -57,7 +57,7 @@ export const TeethDiagram = ({ toggleToothSelection }: TeethDiagramProps) => {
 
           {/* Lower right */}
           <View.Item columns={6}>
-            <View direction="row" gap={2} align="start" justify="start">
+            <View direction="row" gap={6} align="start" justify="start">
               <Teeth
                 jawType="lower"
                 teeth={lowerJawRightTeeth}

diff --git a/components/teeth-diagram/components/Teeth/Teeth.tsx b/components/teeth-diagram/components/Teeth/Teeth.tsx
@@ -2,8 +2,8 @@
 
 import React from 'react';
 import { View } from 'reshaped';
-import { teethMapping } from '../../teethMapping';
 import { TeethProps, ToothProps } from '../../types/types';
+import { teethMapping } from "../../teethMapping";
 
 const Tooth = ({ tooth, ...props }: ToothProps) => {
   const Tooth: React.FC = teethMapping[tooth as keyof typeof teethMapping];
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,4 +42,4 @@ a { @@
     .cl-createOrganization-root {
       width: 100%;
-    }
+    }