updated demo react application

Aby-JS · Aby-JS · commit 2874ca07f1da · 2024-04-03T03:30:55.000+05:00
diff --git a/examples/react/package-lock.json b/examples/react/package-lock.json
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@corbado/react": "^1.0.3",
+    "@corbado/react": "^2.1.1-alpha.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
diff --git a/examples/react/src/assets/corbado-custom-theme.css b/examples/react/src/assets/corbado-custom-theme.css
@@ -1,64 +1,9 @@
 .corbado-custom-theme {
-  .cb-container {
-    background-color: var(--color-white);
-    color: var(--color-black);
-    border-color: var(--color-dark-brown);
-  }
-
-  .cb-header,
-  .cb-subheader,
-  .cb-body {
-    font-family: var(--font-roboto);
-    color: var(--color-black);
-  }
-
-  .cb-link-primary {
-    color: var(--color-light-brown);
-  }
-
-  .cb-link-secondary {
-    color: var(--color-dark-brown);
-  }
-
-  .cb-error {
-    color: var(--color-light-brown);
-  }
-
-  .cb-form-input label {
-    color: var(--color-light-brown);
-  }
-
-  .cb-button-primary {
-    background-color: var(--color-light-brown);
-    color: var(--color-white);
-  }
-
-  .cb-button-primary:hover {
-    background-color: var(--color-dark-brown);
-    color: var(--color-white);
-  }
-
-  .cb-button-secondary {
-    border-color: var(--color-light-brown);
-    color: var(--color-light-brown);
-    background-color: var(--color-white);
-  }
-
-  .cb-button-secondary:hover {
-    background-color: var(--color-dark-brown);
-  }
-
-  .cb-finger-print-icon {
-    background-color: var(--color-light-brown);
-    border-radius: 3.5rem;
-  }
-
-  .cb-passkey-list-card {
-    background-color: var(--color-dark-brown);
-    color: var(--color-white);
-  }
-
-  .cb-dialog {
-    color: var(--color-black);
-  }
+  --cb-primary-color: var(--color-light-brown);
+  --cb-primary-color-hover: var(--color-dark-brown);
+  --cb-primary-color-disabled: #eedcc4;
+  --cb-button-text-primary-color: var(--color-black);
+  --cb-secondary-link-color: var(--color-dark-brown);
+  --cb-primary-font: var(--font-roboto);
+  --cb-secondary-font: var(--font-roboto);
 }
diff --git a/examples/react/src/components/Header.tsx b/examples/react/src/components/Header.tsx
@@ -1,12 +1,12 @@
-import { useCorbadoSession } from '@corbado/react';
+import { useCorbado } from '@corbado/react';
 import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub';
 import { faBook } from '@fortawesome/free-solid-svg-icons/faBook';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import 'prismjs/themes/prism-tomorrow.min.css';
 import { useState } from 'react';
 
 export const Header = () => {
-  const { user, isAuthenticated } = useCorbadoSession();
+  const { user, isAuthenticated } = useCorbado();
   const [bounceGihub, setBounceGithub] = useState(false);
   const [bounceDocumentation, setBounceDocumentation] = useState(false);
 
diff --git a/examples/react/src/index.css b/examples/react/src/index.css
@@ -30,3 +30,7 @@
 input:checked ~ .dot {
   transform: translateX(100%);
 }
+
+.cb-primary-button {
+  background-color: var(--cb-primary-color);
+}
diff --git a/examples/react/src/translations/enCustomized.ts b/examples/react/src/translations/enCustomized.ts
@@ -1,22 +1,24 @@
 const en = {
-  authentication: {
-    signup: {
-      start: {
-        header: "Let's create an account to check Corbado Test App",
-        subheader: 'Would you like to login? ',
-        button_login: 'Log in',
+  signup: {
+    'signup-init': {
+      'signup-init': {
+        header: "Let's create an account",
+        subheader: 'to check ',
+        text_login: 'Would you like to login? ',
         button_submit: 'Sign up',
-        textField_name: 'Full name',
-        textField_email: 'Username',
+        textField_fullName: 'Full Name',
+        text_divider: 'or use social logins',
       },
     },
-    login: {
-      start: {
-        header: 'Please login to check Corbado Test App',
-        subheader: 'Would you like to create an account? ',
+  },
+  login: {
+    'login-init': {
+      'login-init': {
+        header: 'Please login',
+        subheader: 'to check ',
+        text_signup: 'Would you like to create an account? ',
         button_signup: 'Sign up',
         button_submit: 'Login',
-        textField_email: 'Username',
       },
     },
   },
diff --git a/examples/react/src/translations/enDefault.ts b/examples/react/src/translations/enDefault.ts

Original file line number	Diff line number	Diff line change
`@@ -30,3 +30,7 @@`
`30`	`30`	`input:checked ~ .dot {`
`31`	`31`	`transform: translateX(100%);`
`32`	`32`	`}`
	`33`	`+`
	`34`	`+.cb-primary-button {`
	`35`	`+ background-color: var(--cb-primary-color);`
	`36`	`+}`