From 5e2064d59fa0782a2cc865608790038a1ef97669 Mon Sep 17 00:00:00 2001
From: nikitafedorishchev <kolnik1114@gmail.com>
Date: Mon, 23 Mar 2026 15:41:05 +0100
Subject: [PATCH] Redesign for demo apps

---
 example/android/app/build.gradle         |  4 +-
 example/capacitor.config.ts              |  5 +-
 example/ios/App/App/App.entitlements     |  4 +-
 example/ios/App/App/Frontegg-Multi.plist |  6 ++-
 example/ios/App/App/Frontegg.plist       |  2 +
 example/src/app/auth/login.page.html     | 10 ++--
 example/src/app/tab1/tab1.page.html      | 66 +++++++++++++++---------
 example/src/app/tab2/tab2.page.html      | 21 +++++---
 example/src/global.scss                  | 45 ++++++++++++++++
 example/src/theme/variables.scss         | 20 +++----
 10 files changed, 130 insertions(+), 53 deletions(-)

diff --git a/example/android/app/build.gradle b/example/android/app/build.gradle
index 0171b05..87214fe 100644
--- a/example/android/app/build.gradle
+++ b/example/android/app/build.gradle
@@ -1,8 +1,8 @@
 apply plugin: 'com.android.application'
 apply plugin: 'org.jetbrains.kotlin.android'
 
-def fronteggDomain = "app-x4gr8g28fxr5.frontegg.com"
-def fronteggClientId = "5f493de4-01c5-4a61-8642-fca650a6a9dc"
+def fronteggDomain = "autheu.davidantoon.me"
+def fronteggClientId = "b6adfe4c-d695-4c04-b95f-3ec9fd0c6cca"
 
 android {
   namespace "com.frontegg.demo"
diff --git a/example/capacitor.config.ts b/example/capacitor.config.ts
index e1d7765..4121bed 100644
--- a/example/capacitor.config.ts
+++ b/example/capacitor.config.ts
@@ -15,8 +15,9 @@ const config: CapacitorConfig = {
       useDiskCacheWebView: false,
       regions:[{
         key: 'default',
-        baseUrl: 'https://app-x4gr8g28fxr5.frontegg.com',
-        clientId: '5f493de4-01c5-4a61-8642-fca650a6a9dc'
+        baseUrl: 'https://autheu.davidantoon.me',
+        clientId: 'b6adfe4c-d695-4c04-b95f-3ec9fd0c6cca',
+        applicationId: '7ae7de24-99f7-4880-a325-1b638ad933ee'
       }]
     }
   }
diff --git a/example/ios/App/App/App.entitlements b/example/ios/App/App/App.entitlements
index d502483..8f9f3be 100644
--- a/example/ios/App/App/App.entitlements
+++ b/example/ios/App/App/App.entitlements
@@ -8,8 +8,8 @@
 	</array>
 	<key>com.apple.developer.associated-domains</key>
 	<array>
-		<string>webcredentials:app-x4gr8g28fxr5.frontegg.com</string>
-		<string>applinks:app-x4gr8g28fxr5.frontegg.com</string>
+		<string>webcredentials:autheu.davidantoon.me</string>
+		<string>applinks:autheu.davidantoon.me</string>
 	</array>
 </dict>
 </plist>
diff --git a/example/ios/App/App/Frontegg-Multi.plist b/example/ios/App/App/Frontegg-Multi.plist
index 70859d9..7585faf 100644
--- a/example/ios/App/App/Frontegg-Multi.plist
+++ b/example/ios/App/App/Frontegg-Multi.plist
@@ -8,9 +8,11 @@
             <key>key</key>
             <string>default</string>
             <key>baseUrl</key>
-            <string>https://app-x4gr8g28fxr5.frontegg.com</string>
+            <string>https://autheu.davidantoon.me</string>
             <key>clientId</key>
-            <string>5f493de4-01c5-4a61-8642-fca650a6a9dc</string>
+            <string>b6adfe4c-d695-4c04-b95f-3ec9fd0c6cca</string>
+            <key>applicationId</key>
+            <string>7ae7de24-99f7-4880-a325-1b638ad933ee</string>
         </dict>
     </array>
     <key>embeddedMode</key>
diff --git a/example/ios/App/App/Frontegg.plist b/example/ios/App/App/Frontegg.plist
index 2fee2b1..7731b76 100644
--- a/example/ios/App/App/Frontegg.plist
+++ b/example/ios/App/App/Frontegg.plist
@@ -12,5 +12,7 @@
 	<string>https://autheu.davidantoon.me</string>
 	<key>clientId</key>
 	<string>b6adfe4c-d695-4c04-b95f-3ec9fd0c6cca</string>
+	<key>applicationId</key>
+	<string>7ae7de24-99f7-4880-a325-1b638ad933ee</string>
 </dict>
 </plist>
diff --git a/example/src/app/auth/login.page.html b/example/src/app/auth/login.page.html
index 2bbd2d9..6455871 100644
--- a/example/src/app/auth/login.page.html
+++ b/example/src/app/auth/login.page.html
@@ -1,4 +1,4 @@
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" class="frontegg-content">
     <ion-header [translucent]="true">
         <ion-toolbar>
             <ion-title>Frontegg Ionic SDK</ion-title>
@@ -7,10 +7,10 @@
     <div *ngIf="loading" style="display: flex; justify-content: center; align-items: center; height: 50vh;">
         <ion-spinner></ion-spinner>
     </div>
-    <div *ngIf="!loading && !isAuthenticated" style="padding: 16px;">
+    <div *ngIf="!loading && !isAuthenticated" class="frontegg-card">
         <ion-text>Not Logged In</ion-text>
-        <br/>
-        <br/>
-        <ion-button (click)="openLogin()">Login</ion-button>
+        <div class="frontegg-btn-stack" style="margin-top: 16px;">
+            <ion-button class="frontegg-btn" expand="block" (click)="openLogin()">Login</ion-button>
+        </div>
     </div>
 </ion-content>
diff --git a/example/src/app/tab1/tab1.page.html b/example/src/app/tab1/tab1.page.html
index aeb92fc..149374a 100644
--- a/example/src/app/tab1/tab1.page.html
+++ b/example/src/app/tab1/tab1.page.html
@@ -6,36 +6,56 @@
     </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" class="frontegg-content">
     <ion-header collapse="condense">
         <ion-toolbar>
             <ion-title size="large">Frontegg Ionic SDK</ion-title>
         </ion-toolbar>
     </ion-header>
 
-    <br/>
-    <ion-text>Email: {{user ? user.email : 'Not Logged In' }}</ion-text>
-    <br/>
-    <ion-text>isLoading: {{isLoading ? 'true' : 'false'}}</ion-text>
-    <br/>
-    <ion-text>Is Refreshing Token: {{refreshingToken ? 'true' : 'false'}}</ion-text>
-    <br/>
-    <ion-text>isAuthenticated: {{isAuthenticated ? 'true' : 'false'}}</ion-text>
-    <br/>
-    <ion-text>Active Tenant: {{user?.activeTenant?.name}}</ion-text>
-    <br/>
-    <ion-text>
-        accessToken:{{' '}}
-        {{accessToken ? accessToken.substring(accessToken.length - 40) : ''}}
-    </ion-text>
-    <br/>
-    <br/>
+    <div class="frontegg-card">
+        <ion-text>Email: {{user ? user.email : 'Not Logged In' }}</ion-text>
+        <br/>
+        <ion-text>isLoading: {{isLoading ? 'true' : 'false'}}</ion-text>
+        <br/>
+        <ion-text>Is Refreshing Token: {{refreshingToken ? 'true' : 'false'}}</ion-text>
+        <br/>
+        <ion-text>isAuthenticated: {{isAuthenticated ? 'true' : 'false'}}</ion-text>
+        <br/>
+        <ion-text>Active Tenant: {{user?.activeTenant?.name}}</ion-text>
+        <br/>
+        <ion-text>
+            accessToken:{{' '}}
+            {{accessToken ? accessToken.substring(accessToken.length - 40) : ''}}
+        </ion-text>
 
+        <div class="frontegg-btn-stack" style="margin-top: 16px;">
+            <ion-button
+              *ngIf="!isAuthenticated"
+              class="frontegg-btn"
+              expand="block"
+              (click)="login()"
+            >
+              Login
+            </ion-button>
 
-    <ion-button *ngIf="!isAuthenticated" (click)="login()">Login</ion-button>
-    <ion-button *ngIf="isAuthenticated" (click)="logout()">Logout</ion-button>
+            <ion-button
+              *ngIf="isAuthenticated"
+              class="frontegg-btn"
+              expand="block"
+              (click)="logout()"
+            >
+              Logout
+            </ion-button>
 
-    <br/>
-    <br/>
-    <ion-button *ngIf="isAuthenticated" (click)="refreshToken()">Refresh Token</ion-button>
+            <ion-button
+              *ngIf="isAuthenticated"
+              class="frontegg-btn"
+              expand="block"
+              (click)="refreshToken()"
+            >
+              Refresh Token
+            </ion-button>
+        </div>
+    </div>
 </ion-content>
diff --git a/example/src/app/tab2/tab2.page.html b/example/src/app/tab2/tab2.page.html
index 63a0d76..a137307 100644
--- a/example/src/app/tab2/tab2.page.html
+++ b/example/src/app/tab2/tab2.page.html
@@ -6,17 +6,24 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" class="frontegg-content">
   <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">Tenants</ion-title>
     </ion-toolbar>
   </ion-header>
-
-
-  <br/>
-  <ion-button *ngFor="let tenant of tenants" (click)="switchTenant(tenant.tenantId)">
-    {{tenant.name}}{{tenant.tenantId === activeTenantId ? ' (active)' : ''}}{{tenant.tenantId === switching ? ' (switching...)' : ''}}
-  </ion-button>
+  <div class="frontegg-card">
+    <div class="frontegg-btn-stack" style="margin-top: 16px;">
+      <ion-button
+        *ngFor="let tenant of tenants"
+        class="frontegg-btn"
+        expand="block"
+        [disabled]="tenant.tenantId === switching"
+        (click)="switchTenant(tenant.tenantId)"
+      >
+        {{tenant.name}}{{tenant.tenantId === activeTenantId ? ' (active)' : ''}}{{tenant.tenantId === switching ? ' (switching...)' : ''}}
+      </ion-button>
+    </div>
+  </div>
 
 </ion-content>
diff --git a/example/src/global.scss b/example/src/global.scss
index d89e39b..f5f837e 100644
--- a/example/src/global.scss
+++ b/example/src/global.scss
@@ -24,3 +24,48 @@
 @import "@ionic/angular/css/text-alignment.css";
 @import "@ionic/angular/css/text-transformation.css";
 @import "@ionic/angular/css/flex-utils.css";
+
+/* -------------------------------------------------------------------------- */
+/* Demo UI (Frontegg)                                                      */
+/* Match Flutter/Kotlin button + spacing.                                   */
+/* -------------------------------------------------------------------------- */
+
+.frontegg-content {
+  --background: #f9fafc;
+}
+
+.frontegg-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 24px;
+}
+
+.frontegg-btn-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px; /* Flutter: SizedBox(height: 8) */
+}
+
+ion-button.frontegg-btn {
+  width: 100%;
+  /* Flutter: ElevatedButtonThemeData
+     - minHeight: 48
+     - borderRadius: 8
+     - padding: vertical 9, horizontal 24 */
+  min-height: 48px;
+  --border-radius: 8px;
+  --min-height: 48px;
+  --padding-top: 9px;
+  --padding-bottom: 9px;
+  --padding-start: 24px;
+  --padding-end: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+
+  /* Ensure solid primary fill */
+  --background: var(--ion-color-primary);
+  --background-hover: var(--ion-color-primary);
+  --background-activated: var(--ion-color-primary);
+}
+
diff --git a/example/src/theme/variables.scss b/example/src/theme/variables.scss
index c356afa..ab11c74 100644
--- a/example/src/theme/variables.scss
+++ b/example/src/theme/variables.scss
@@ -4,12 +4,12 @@
 /** Ionic CSS Variables **/
 :root {
   /** primary **/
-  --ion-color-primary: #eb445a;
-  --ion-color-primary-rgb: 235, 68, 90;
+  --ion-color-primary: #4D7DFA;
+  --ion-color-primary-rgb: 77, 125, 250;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #cf3c4f;
-  --ion-color-primary-tint: #ed576b;
+  --ion-color-primary-shade: #3E6BE0;
+  --ion-color-primary-tint: #5E90FF;
 
   /** secondary **/
   --ion-color-secondary: #3dc2ff;
@@ -83,12 +83,12 @@
    */
 
   body {
-    --ion-color-primary: #ff4961;
-    --ion-color-primary-rgb: 255, 73, 97;
-    --ion-color-primary-contrast: #000000;
-    --ion-color-primary-contrast-rgb: 0, 0, 0;
-    --ion-color-primary-shade: #e04055;
-    --ion-color-primary-tint: #ff5b71;
+    --ion-color-primary: #4D7DFA;
+    --ion-color-primary-rgb: 77, 125, 250;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3E6BE0;
+    --ion-color-primary-tint: #5E90FF;
 
     --ion-color-secondary: #50c8ff;
     --ion-color-secondary-rgb: 80,200,255;