Improvements in examples (#160)

* added new landing page for react example

* added demo for react components

* updated example versions

* completed react example

* updated react version

examples/react-sdk/package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@corbado/react-sdk": "^0.1.7-alpha.8",
+    "@corbado/react-sdk": "^1.0.2",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/react/package.json

@@ -10,12 +10,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@corbado/react": "^0.1.1-alpha.6",
+    "@corbado/react": "^1.0.3",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1"
   },
   "devDependencies": {
+    "@types/prismjs": "^1.26.3",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

examples/react/src/App.tsx

@@ -1,16 +1,17 @@
 import { CorbadoProvider } from '@corbado/react';
 import RouteProvider from './routes';
-import englishTranslations from './translations/en';
+import { useContext } from 'react';
+import { CustomizationsContext } from './contexts/CustomizationsContext';
 
 function App() {
+  const { customTheme, darkMode, customTranslation } = useContext(CustomizationsContext);
+
   return (
     <CorbadoProvider
       projectId={import.meta.env.VITE_CORBADO_PROJECT_ID}
-      customTranslations={{
-        en: englishTranslations,
-      }}
-      darkMode='off'
-      theme='eloquent-corbado-test'
+      customTranslations={customTranslation}
+      darkMode={darkMode}
+      theme={customTheme}
     >
       <RouteProvider />
     </CorbadoProvider>

examples/react/src/assets/corbado-custom-theme.css

@@ -0,0 +1,64 @@
+.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);
+  }
+}