Redesign for demo apps

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"

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'
       }]
     }
   }

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>

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>

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>

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>

example/src/app/tab1/tab1.page.html

@@ -6,42 +6,66 @@
     </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>
 
-    <br/>
-    <br/>
-    <ion-button *ngIf="isAuthenticated" (click)="openAdminPortal()" aria-label="OpenAdminPortalButton">
-        Open Admin Portal
-    </ion-button>
+            <ion-button
+              *ngIf="isAuthenticated"
+              class="frontegg-btn"
+              expand="block"
+              (click)="openAdminPortal()"
+              aria-label="OpenAdminPortalButton"
+            >
+              Open Admin Portal
+            </ion-button>
+        </div>
+    </div>
 </ion-content>

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>

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);
+}
+

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;