solara 0.4.0 → 0.5.0

data/solara/lib/core/dashboard/brand/source/BrandRemoteSource.js

@@ -4,124 +4,36 @@ class BrandRemoteSource {
     constructor() {
     }
 
-    async createNewBrandConfogurations() {
-        const configurations_template = `
-        [
-  {
-    "key": "theme.json",
-    "name": "Theme Configuration",
-    "inputType": "color",
-    "content": {
-      "colors": {
-        "primary": "#CAAC16",
-        "secondary": "#5AC8FA",
-        "background": "#FFFFFF",
-        "surface": "#F2F2F7",
-        "error": "#FF3B30",
-        "onPrimary": "#FFFFFF",
-        "onSecondary": "#000000",
-        "onBackground": "#000000",
-        "onSurface": "#000000",
-        "onError": "#FFFFFF"
-      },
-      "typography": {
-        "fontFamily": {
-          "regular": "",
-          "medium": "",
-          "bold": ""
-        },
-        "fontSize": {
-          "small": 12,
-          "medium": 16,
-          "large": 20,
-          "extraLarge": 24
+    async createNewBrandConfigurations() {
+        const url = 'https://raw.githubusercontent.com/Solara-Kit/Solara/refs/heads/develop/solara/lib/core/template/configurations.json';
+
+        try {
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error('Network response was not ok: ' + response.statusText);
+            }
+
+            const configurations = await response.json();
+            const contentPromises = configurations.configurations.map(async (config) => {
+                const contentResponse = await fetch(config.url);
+                if (!contentResponse.ok) {
+                    throw new Error('Failed to fetch content for ' + config.key);
+                }
+                const content = await contentResponse.json();
+                return {
+                    key: config.key,
+                    name: config.name,
+                    content: content
+                };
+            });
+
+            // Wait for all content fetch promises to resolve
+            return await Promise.all(contentPromises);
+
+        } catch (error) {
+            console.error('There was a problem with the fetch operation:', error);
+            return null; // Return null in case of error
         }
-      },
-      "spacing": {
-        "small": 8,
-        "medium": 16,
-        "large": 24,
-        "extraLarge": 32
-      },
-      "borderRadius": {
-        "small": 4,
-        "medium": 8,
-        "large": 12
-      },
-      "elevation": {
-        "none": 0,
-        "low": 2,
-        "medium": 4,
-        "high": 8
-      }
-    }
-  },
-  {
-    "key": "brand_config.json",
-    "name": "Brand Configuration",
-    "inputType": "text",
-    "content": {}
-  },
-  {
-    "key": "android_config.json",
-    "name": "Android Configuration",
-    "inputType": "text",
-    "content": {
-      "applicationId": "",
-      "versionName": "1.0.0",
-      "versionCode": 1,
-      "sourceSets": []
-    }
-  },
-  {
-    "key": "android_signing.json",
-    "name": "Android Signing",
-    "inputType": "text",
-    "content": {
-      "storeFile": "",
-      "keyAlias": "",
-      "storePassword": "",
-      "keyPassword": ""
-    }
-  },
-  {
-    "key": "ios_config.json",
-    "name": "iOS Configuration",
-    "inputType": "text",
-    "content": {
-      "PRODUCT_BUNDLE_IDENTIFIER": "",
-      "MARKETING_VERSION": "1.0.0",
-      "BUNDLE_VERSION": 1,
-      "APL_MRCH_ID": ""
-    }
-  },
-  {
-    "key": "ios_signing.json",
-    "name": "iOS Signing",
-    "inputType": "text",
-    "content": {
-      "CODE_SIGN_IDENTITY": "",
-      "DEVELOPMENT_TEAM": "",
-      "PROVISIONING_PROFILE_SPECIFIER": "",
-      "CODE_SIGN_STYLE": "Automatic",
-      "CODE_SIGN_ENTITLEMENTS": ""
-    }
-  },
-  {
-    "key": "ios_signing.json",
-    "name": "iOS Signing",
-    "inputType": "text",
-    "content": {
-      "CODE_SIGN_IDENTITY": "",
-      "DEVELOPMENT_TEAM": "",
-      "PROVISIONING_PROFILE_SPECIFIER": "",
-      "CODE_SIGN_STYLE": "Automatic",
-      "CODE_SIGN_ENTITLEMENTS": ""
-    }
-  }
-]
-`;
-        return JSON.parse(configurations_template);
     }
 
     async getBrandConfigurationsJsonFromDirectory(dirHandle) {
@@ -161,9 +73,7 @@ class BrandRemoteSource {
             if (!response.ok) {
                 throw new Error('Network response was not ok: ' + response.statusText);
             }
-            const data = await response.json();
-            console.log(data);
-            return data; // Return the data instead of null
+            return await response.json();
         } catch (error) {
             console.error('There was a problem with the fetch operation:', error);
             return null; // Return null in case of error
@@ -175,33 +85,27 @@ class BrandRemoteSource {
         const expectedFiles = [
             {
                 key: 'theme.json',
-                name: 'Theme Configuration',
-                input_type: 'color'
+                name: 'Theme Configuration'
             },
             {
                 key: 'brand_config.json',
-                name: 'Brand Configuration',
-                input_type: 'text'
+                name: 'Brand Configuration'
             },
             {
                 key: 'android_config.json',
-                name: 'Android Configuration',
-                input_type: 'text'
+                name: 'Android Configuration'
             },
             {
                 key: 'android_signing.json',
-                name: 'Android Signing',
-                input_type: 'text'
+                name: 'Android Signing'
             },
             {
                 key: 'ios_config.json',
-                name: 'iOS Configuration',
-                input_type: 'text'
+                name: 'iOS Configuration'
             },
             {
                 key: 'ios_signing.json',
-                name: 'iOS Signing',
-                input_type: 'text'
+                name: 'iOS Signing'
             }
         ];
 
@@ -212,7 +116,6 @@ class BrandRemoteSource {
                     configList.push({
                         key: file.key,
                         name: file.name,
-                        inputType: file.input_type,
                         content: JSON.parse(fileContent)
                     });
                 }

data/solara/lib/core/dashboard/brands/Brands.js

@@ -2,6 +2,37 @@ import BrandsModel from './BrandsModel.js';
 import BrandsView from './BrandsView.js';
 import BrandsController from './BrandsController.js';
 
+const modeToggle = document.getElementById('modeToggle');
+const body = document.body;
+const icon = modeToggle.querySelector('i');
+
+function applyMode(mode) {
+    if (mode === 'dark') {
+        body.classList.add('dark-mode');
+        icon.classList.remove('fa-sun');
+        icon.classList.add('fa-moon');
+    } else {
+        body.classList.remove('dark-mode');
+        icon.classList.remove('fa-moon');
+        icon.classList.add('fa-sun');
+    }
+}
+
+const savedMode = localStorage.getItem('mode');
+if (savedMode) {
+    applyMode(savedMode);
+} else {
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    applyMode(systemPrefersDark ? 'dark' : 'light');
+}
+
+modeToggle.addEventListener('click', () => {
+    const currentMode = body.classList.contains('dark-mode') ? 'dark' : 'light';
+    const newMode = currentMode === 'dark' ? 'light' : 'dark';
+    applyMode(newMode);
+    localStorage.setItem('mode', newMode);
+});
+
 document.addEventListener('DOMContentLoaded', async () => {
     const model = new BrandsModel();
     const view = new BrandsView(model.source);

data/solara/lib/core/dashboard/brands/BrandsController.js

@@ -24,27 +24,22 @@ class BrandsController {
             .addEventListener('input', (e) => this.filterBrands(e.target.value));
 
         this.view.brandOptionsSheet.addEventListener('clone', (event) => {
-            console.log('Clone', event.detail);
             this.handleCloneOption(event)
         });
 
         this.view.brandOptionsSheet.addEventListener('offboard', (event) => {
-            console.log('Offboard', event.detail);
             this.handleOffboardOption(event)
         });
 
         this.view.brandOptionsSheet.addEventListener('doctor', (event) => {
-            console.log('Doctor', event.detail);
             this.handleDoctorOption(event)
         });
 
         this.view.brandOptionsSheet.addEventListener('aliases', (event) => {
-            console.log('Aliases', event.detail);
             this.handleAliasesOption(event)
         });
 
         this.view.brandOptionsSheet.addEventListener('settings', (event) => {
-            console.log('Settings', event.detail);
             this.handleSettingsOption(event)
         });
     }

data/solara/lib/core/dashboard/brands/BrandsView.js

@@ -40,8 +40,8 @@ class BrandsView {
         });
 
         const switchButton = brandItem.querySelector('.switch-button');
-        if (isCurrent && brand.content_changed) {
-            switchButton.textContent = "Apply Changes";
+        if (isCurrent) {
+            switchButton.textContent = "Sync";
             switchButton.style.display = "block";
         } else if (isCurrent && !brand.content_changed) {
             switchButton.style.display = "none";

data/solara/lib/core/dashboard/brands/brands.html

@@ -12,9 +12,34 @@
                 --background-color: #F5F7FA;
                 --text-color: #333;
                 --border-color: #E1E4E8;
-                --offboard-color: #dc3545;
+                --delete-color: #dc3545;
                 --field-shadow: 0 1.4px 3.5px rgba(0, 0, 0, 0.1);
+                --card-item-bg: rgba(255, 255, 255, 0.05);
+                --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+                --section-shadow: 0 1.4px 7px rgba(0, 0, 0, 0.1);
+                --delete-btn-color: #ff6b6b;
+                --delete-btn-hover: #ff4757;
+                --add-property-btn-color: #5ecd73;
+                --logo-shadow-color: rgba(255, 255, 255, 0.2);
+                --hover: rgba(0, 123, 255, 0.5);
             }
+
+            body.dark-mode {
+                --primary-color: #2C3E50;
+                --secondary-color: #34495E;
+                --background-color: #1A1A1A;
+                --text-color: #F5F5F5;
+                --border-color: #4A4A4A;
+                --delete-color: #E74C3C;
+                --field-shadow: 0 1.4px 3.5px rgba(255, 255, 255, 0.1);
+                --card-item-bg: rgba(255, 255, 255, 0.1);
+                --section-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
+                --delete-btn-color: #ff8f8f;
+                --delete-btn-hover: #ff6b6b;
+                --add-property-btn-color: #7eed8e;
+                --hover: rgba(255, 255, 255, 0.2);
+            }
+
             body {
                 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                 background-color: var(--background-color);
@@ -33,14 +58,29 @@
                 margin: 0;
                 font-size: 1.75em;
             }
+
+            .mode-toggle {
+                background: none;
+                border: none;
+                color: white;
+                font-size: 1.5em;
+                cursor: pointer;
+                margin-left: 15px;
+                transition: color 0.3s;
+            }
+
+            .mode-toggle:hover {
+                color: var(--hover);
+            }
+
             .brand-list {
                 max-width: 490px;
                 margin: 0 auto;
             }
             .brand-item {
-                background-color: #fff;
+                background-color: var(--card-item-bg);
                 border-radius: 8.4px;
-                box-shadow: 0 2.8px 4.2px rgba(0, 0, 0, 0.1);
+                box-shadow: var(--card-shadow);
                 padding: 14px;
                 display: flex;
                 align-items: center;
@@ -52,7 +92,6 @@
             }
             .brand-item:hover {
                 transform: translateY(-3.5px);
-                box-shadow: 0 4.2px 8.4px rgba(0, 0, 0, 0.15);
             }
             .brand-image {
                 width: 56px;
@@ -63,7 +102,8 @@
                 margin-right: 14px;
                 border-radius: 8.4px;
                 overflow: hidden;
-                box-shadow: 0 1.4px 3.5px rgba(0, 0, 0, 0.1);
+                box-shadow: var(--field-shadow);
+                padding: 5px;
             }
             .brand-image img {
                 width: 100%;
@@ -77,11 +117,11 @@
                 font-size: 14px;
                 font-weight: bold;
                 margin-bottom: 3.5px;
-                color: var(--primary-color);
+                color: var(--text-color);
             }
             .brand-key {
                 font-size: 9.8px;
-                color: #7f8c8d;
+                color: var(--text-color);
             }
             .brand-actions {
                 display: flex;
@@ -100,18 +140,18 @@
                 min-width: 91px;
             }
             .switch-button:hover {
-                background-color: #3a7bc8;
+                background-color: var(--hover);
             }
             .overflow-menu {
                 cursor: pointer;
                 font-size: 14px;
-                color: #7f8c8d;
+                color: var(--text-color);
                 transition: color 0.3s ease;
                 padding: 7px;
                 margin: -7px;
             }
             .overflow-menu:hover {
-                color: var(--primary-color);
+                color: var(--hover);
             }
 
             .current-brand, .brands-list {
@@ -123,13 +163,7 @@
             .current-brand h2, .brands-list h2 {
                 margin: 0 0 14px 0;
                 font-size: 1.26em;
-                color: var(--primary-color);
-            }
-            .section-title {
-                font-size: 1.05em;
-                color: var(--primary-color);
-                margin-bottom: 14px;
-                text-align: center;
+                color: var(--text-color);
             }
             .brands-list-header {
                 display: flex;
@@ -150,7 +184,7 @@
                 min-width: 91px;
             }
             .onboard-brand-button:hover {
-                background-color: #3a7bc8;
+                background-color: var(--hover);
             }
             .onboard-brand-form {
                 display: flex;
@@ -172,6 +206,8 @@
                 border: 1px solid var(--border-color);
                 border-radius: 3.5px;
                 font-size: 11.2px;
+                background-color: var(--background-color);
+                color: var(--text-color);
             }
             .question-icon {
                 margin-left: 3.5px;
@@ -194,13 +230,17 @@
                 align-items: center;
                 justify-content: center;
             }
+            .header-content {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
 
             header {
                 background-color: var(--primary-color);
                 color: white;
                 text-align: center;
                 padding: 7px 0;
-                box-shadow: 0 1.4px 7px rgba(0, 0, 0, 0.1);
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -217,21 +257,6 @@
             .scroll-down header {
                 transform: translateY(-100%);
             }
-            .logo {
-                width: 35px;
-                height: 35px;
-                margin-right: 14px;
-                filter: drop-shadow(2.1px 2.1px 2.1px rgba(0, 0, 0, 0.3));
-                transition: transform 0.3s ease;
-            }
-            .logo:hover {
-                transform: scale(1.07);
-            }
-            h1 {
-                margin: 0;
-                font-size: 1.75em;
-            }
-
             .search-container {
                 margin-top: 14px;
                 margin-bottom: 14px;
@@ -245,13 +270,8 @@
                 font-size: 11.2px;
                 width: 100%;
                 max-width: 469px;
-            }
-
-            .brands-list-header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin-bottom: 14px;
+                background-color: var(--background-color);
+                color: var(--text-color);
             }
 
             #error-button {
@@ -268,7 +288,7 @@
                 cursor: pointer;
                 justify-content: center;
                 align-items: center;
-                box-shadow: 0 1.4px 7px rgba(0, 0, 0, 0.2);
+                box-shadow: var(--section-shadow);
                 transition: transform 0.2s;
                 display: none;
             }
@@ -295,14 +315,18 @@
         </style>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
     </head>
-    <body>
+    <body class="dark-mode">
 
         <header>
             <div class="header-container">
-                <img class="logo" src="../solara.png" alt="Splash Image">
-                <h1>Solara Dashboard</h1>
+                <div class="header-content">
+                    <img class="logo" src="../solara.png" alt="Splash Image">
+                    <h1>Solara Dashboard</h1>
+                    <button id="modeToggle" class="mode-toggle" aria-label="Toggle dark/light mode">
+                        <i class="fas fa-sun"></i>
+                    </button>
+                </div>
             </div>
-
         </header>
 
         <button id="error-button">
@@ -311,14 +335,13 @@
         </button>
 
         <div class="container">
-            <div class="current-brand" id="currentBrandSection" style="display: none;">
+            <div class="current-brand" id="currentBrandSection" style="        display: none;">
                 <h2>Current Brand</h2>
                 <div id="currentBrandItem"></div>
             </div>
             <div class="brands-list">
                 <div class="brands-list-header">
                     <h2>All Brands</h2>
-
                     <button class="onboard-brand-button">
                         <i class="fas fa-plus"></i> Onboard
                     </button>
@@ -333,13 +356,9 @@
         </div>
 
         <brand-options-bottom-sheet id="bottomSheet"></brand-options-bottom-sheet>
-
         <confirmation-dialog id="confirmationDialog"></confirmation-dialog>
-
         <onboard-bottom-sheet id="onboardBottomSheet"></onboard-bottom-sheet>
-
         <message-bottom-sheet id="messageBottomSheet"></message-bottom-sheet>
-
         <aliases-bottom-sheet id="aliasesSheet"></aliases-bottom-sheet>
 
         <script type="module" src="Brands.js"></script>

data/solara/lib/core/dashboard/component/AliasesBottomSheet.js

@@ -1,7 +1,7 @@
 class AliasesBottomSheet extends HTMLElement {
     constructor() {
         super();
-        this.attachShadow({ mode: 'open' });
+        this.attachShadow({mode: 'open'});
         this.shadowRoot.innerHTML = `
           <style>
     .aliases-bottom-sheet {
@@ -10,7 +10,7 @@ class AliasesBottomSheet extends HTMLElement {
         bottom: 0;
         left: 0;
         right: 0;
-        background-color: white;
+        background-color: var(--background-color);
         border-top-left-radius: 14px;
         border-top-right-radius: 14px;
         box-shadow: 0 -1.4px 7px rgba(0, 0, 0, 0.1);
@@ -18,7 +18,7 @@ class AliasesBottomSheet extends HTMLElement {
         padding: 14px;
         transition: transform 0.3s ease-out;
         transform: translateY(100%);
-        max-width: 490px;
+        max-width: 50%;
         margin: 0 auto;
         width: 100%;
         max-height: 56vh;
@@ -42,7 +42,7 @@ class AliasesBottomSheet extends HTMLElement {
     .aliases-bottom-sheet li {
         margin-bottom: 7px;
         font-family: monospace;
-        background-color: #f1f1f1;
+        background-color: var(--card-item-bg);
         padding: 3.5px;
         border-radius: 3.5px;
         font-size: 11.2px;
@@ -69,13 +69,13 @@ class AliasesBottomSheet extends HTMLElement {
         margin-top: 14px;
     }
     .close-aliases:hover {
-        background-color: #3a7bc8;
+        background-color: var(--hover);
     }
 </style>
 
 <div class="overlay"></div>
 <div class="aliases-bottom-sheet" id="aliasesSheet">
-    <h3>Aliases</h3>
+    <h2>Aliases</h2>
     <div id="commonAliases">
         <h4>Common Aliases</h4>
         <ul id="commonAliasesList"></ul>

data/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js

@@ -4,7 +4,7 @@ class BrandOptionsBottomSheet extends HTMLElement {
         this.attachShadow({mode: 'open'});
 
         this.shadowRoot.innerHTML = `
-              <head>
+    <head>
     <style>
     .bottom-sheet {
         display: none;
@@ -12,7 +12,7 @@ class BrandOptionsBottomSheet extends HTMLElement {
         bottom: 0;
         left: 0;
         right: 0;
-        background-color: white;
+        background-color: var(--background-color);
         border-top-left-radius: 14px;
         border-top-right-radius: 14px;
         box-shadow: 0 -1.4px 7px rgba(0, 0, 0, 0.1);
@@ -20,7 +20,7 @@ class BrandOptionsBottomSheet extends HTMLElement {
         padding: 14px;
         transition: transform 0.3s ease-out;
         transform: translateY(100%);
-        max-width: 490px;
+        max-width: 50%;
         margin: 0 auto;
         width: 100%;
     }
@@ -41,7 +41,7 @@ class BrandOptionsBottomSheet extends HTMLElement {
         font-size: 12.6px;
     }
     .bottom-sheet li:hover {
-        background-color: var(--background-color);
+        background-color: var(--hover);
     }
     .bottom-sheet li i {
         margin-right: 10.5px;