solara 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/solara/lib/.DS_Store +0 -0
- data/solara/lib/core/.DS_Store +0 -0
- data/solara/lib/core/brands/brand_switcher.rb +58 -1
- data/solara/lib/core/dashboard/brand/BrandDetail.js +34 -2
- data/solara/lib/core/dashboard/brand/BrandDetailController.js +23 -233
- data/solara/lib/core/dashboard/brand/BrandDetailModel.js +13 -5
- data/solara/lib/core/dashboard/brand/BrandDetailView.js +16 -200
- data/solara/lib/core/dashboard/brand/SectionsFormManager.js +232 -0
- data/solara/lib/core/dashboard/brand/brand.html +187 -177
- data/solara/lib/core/dashboard/brand/source/BrandLocalSource.js +2 -5
- data/solara/lib/core/dashboard/brand/source/BrandRemoteSource.js +36 -133
- data/solara/lib/core/dashboard/brands/Brands.js +31 -0
- data/solara/lib/core/dashboard/brands/BrandsController.js +0 -5
- data/solara/lib/core/dashboard/brands/BrandsView.js +2 -2
- data/solara/lib/core/dashboard/brands/brands.html +71 -52
- data/solara/lib/core/dashboard/component/AliasesBottomSheet.js +6 -6
- data/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js +4 -4
- data/solara/lib/core/dashboard/component/ConfirmationDialog.js +15 -10
- data/solara/lib/core/dashboard/component/EditJsonSheet.js +160 -0
- data/solara/lib/core/dashboard/component/MessageBottomSheet.js +5 -5
- data/solara/lib/core/dashboard/component/OnboardBrandBottomSheet.js +5 -3
- data/solara/lib/core/dashboard/handler/base_handler.rb +1 -0
- data/solara/lib/core/dashboard/handler/edit_section_handler.rb +1 -5
- data/solara/lib/core/doctor/schema/brand_configurations.json +0 -8
- data/solara/lib/core/doctor/schema/platform/global/resources_manifest.json +30 -0
- data/solara/lib/core/doctor/schema/platform/json_manifest.json +57 -0
- data/solara/lib/core/doctor/validator/template/android_template_validation_config.yml +35 -1
- data/solara/lib/core/doctor/validator/template/flutter_template_validation_config.yml +30 -1
- data/solara/lib/core/doctor/validator/template/ios_template_validation_config.yml +35 -1
- data/solara/lib/core/doctor/validator/template/template_validator.rb +9 -9
- data/solara/lib/core/scripts/brand_config_manager.rb +1 -1
- data/solara/lib/core/scripts/brand_configurations_manager.rb +41 -0
- data/solara/lib/core/scripts/code_generator.rb +342 -118
- data/solara/lib/core/scripts/file_path.rb +21 -1
- data/solara/lib/core/scripts/gitignore_manager.rb +11 -3
- data/solara/lib/core/scripts/json_manifest_processor.rb +95 -0
- data/solara/lib/core/scripts/platform/ios/infoplist_string_catalog_manager.rb +11 -1
- data/solara/lib/core/scripts/resource_manifest_processor.rb +151 -0
- data/solara/lib/core/scripts/solara_status_manager.rb +1 -1
- data/solara/lib/core/scripts/theme_generator.rb +21 -242
- data/solara/lib/core/solara_configurator.rb +1 -1
- data/solara/lib/core/template/brands/global/resources_manifest.json +10 -0
- data/solara/lib/core/template/brands/json/Json-Manifest.md +61 -0
- data/solara/lib/core/template/brands/json/json_manifest.json +18 -0
- data/solara/lib/core/template/brands/shared/theme.json +213 -29
- data/solara/lib/core/template/config/android_template_config.json +50 -0
- data/solara/lib/core/template/config/flutter_template_config.json +35 -0
- data/solara/lib/core/template/config/ios_template_config.json +50 -0
- data/solara/lib/core/template/configurations.json +46 -0
- data/solara/lib/core/template/project_template_generator.rb +2 -0
- data/solara/lib/solara/version.rb +1 -1
- data/solara/lib/solara.rb +19 -0
- metadata +13 -4
- data/solara/lib/core/dashboard/component/AddFieldSheet.js +0 -175
- data/solara/lib/core/dashboard/handler/brand_configurations_manager.rb +0 -73
@@ -4,124 +4,36 @@ class BrandRemoteSource {
|
|
4
4
|
constructor() {
|
5
5
|
}
|
6
6
|
|
7
|
-
async
|
8
|
-
const
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
"large": 20,
|
37
|
-
"extraLarge": 24
|
7
|
+
async createNewBrandConfigurations() {
|
8
|
+
const url = 'https://raw.githubusercontent.com/Solara-Kit/Solara/refs/heads/develop/solara/lib/core/template/configurations.json';
|
9
|
+
|
10
|
+
try {
|
11
|
+
const response = await fetch(url);
|
12
|
+
if (!response.ok) {
|
13
|
+
throw new Error('Network response was not ok: ' + response.statusText);
|
14
|
+
}
|
15
|
+
|
16
|
+
const configurations = await response.json();
|
17
|
+
const contentPromises = configurations.configurations.map(async (config) => {
|
18
|
+
const contentResponse = await fetch(config.url);
|
19
|
+
if (!contentResponse.ok) {
|
20
|
+
throw new Error('Failed to fetch content for ' + config.key);
|
21
|
+
}
|
22
|
+
const content = await contentResponse.json();
|
23
|
+
return {
|
24
|
+
key: config.key,
|
25
|
+
name: config.name,
|
26
|
+
content: content
|
27
|
+
};
|
28
|
+
});
|
29
|
+
|
30
|
+
// Wait for all content fetch promises to resolve
|
31
|
+
return await Promise.all(contentPromises);
|
32
|
+
|
33
|
+
} catch (error) {
|
34
|
+
console.error('There was a problem with the fetch operation:', error);
|
35
|
+
return null; // Return null in case of error
|
38
36
|
}
|
39
|
-
},
|
40
|
-
"spacing": {
|
41
|
-
"small": 8,
|
42
|
-
"medium": 16,
|
43
|
-
"large": 24,
|
44
|
-
"extraLarge": 32
|
45
|
-
},
|
46
|
-
"borderRadius": {
|
47
|
-
"small": 4,
|
48
|
-
"medium": 8,
|
49
|
-
"large": 12
|
50
|
-
},
|
51
|
-
"elevation": {
|
52
|
-
"none": 0,
|
53
|
-
"low": 2,
|
54
|
-
"medium": 4,
|
55
|
-
"high": 8
|
56
|
-
}
|
57
|
-
}
|
58
|
-
},
|
59
|
-
{
|
60
|
-
"key": "brand_config.json",
|
61
|
-
"name": "Brand Configuration",
|
62
|
-
"inputType": "text",
|
63
|
-
"content": {}
|
64
|
-
},
|
65
|
-
{
|
66
|
-
"key": "android_config.json",
|
67
|
-
"name": "Android Configuration",
|
68
|
-
"inputType": "text",
|
69
|
-
"content": {
|
70
|
-
"applicationId": "",
|
71
|
-
"versionName": "1.0.0",
|
72
|
-
"versionCode": 1,
|
73
|
-
"sourceSets": []
|
74
|
-
}
|
75
|
-
},
|
76
|
-
{
|
77
|
-
"key": "android_signing.json",
|
78
|
-
"name": "Android Signing",
|
79
|
-
"inputType": "text",
|
80
|
-
"content": {
|
81
|
-
"storeFile": "",
|
82
|
-
"keyAlias": "",
|
83
|
-
"storePassword": "",
|
84
|
-
"keyPassword": ""
|
85
|
-
}
|
86
|
-
},
|
87
|
-
{
|
88
|
-
"key": "ios_config.json",
|
89
|
-
"name": "iOS Configuration",
|
90
|
-
"inputType": "text",
|
91
|
-
"content": {
|
92
|
-
"PRODUCT_BUNDLE_IDENTIFIER": "",
|
93
|
-
"MARKETING_VERSION": "1.0.0",
|
94
|
-
"BUNDLE_VERSION": 1,
|
95
|
-
"APL_MRCH_ID": ""
|
96
|
-
}
|
97
|
-
},
|
98
|
-
{
|
99
|
-
"key": "ios_signing.json",
|
100
|
-
"name": "iOS Signing",
|
101
|
-
"inputType": "text",
|
102
|
-
"content": {
|
103
|
-
"CODE_SIGN_IDENTITY": "",
|
104
|
-
"DEVELOPMENT_TEAM": "",
|
105
|
-
"PROVISIONING_PROFILE_SPECIFIER": "",
|
106
|
-
"CODE_SIGN_STYLE": "Automatic",
|
107
|
-
"CODE_SIGN_ENTITLEMENTS": ""
|
108
|
-
}
|
109
|
-
},
|
110
|
-
{
|
111
|
-
"key": "ios_signing.json",
|
112
|
-
"name": "iOS Signing",
|
113
|
-
"inputType": "text",
|
114
|
-
"content": {
|
115
|
-
"CODE_SIGN_IDENTITY": "",
|
116
|
-
"DEVELOPMENT_TEAM": "",
|
117
|
-
"PROVISIONING_PROFILE_SPECIFIER": "",
|
118
|
-
"CODE_SIGN_STYLE": "Automatic",
|
119
|
-
"CODE_SIGN_ENTITLEMENTS": ""
|
120
|
-
}
|
121
|
-
}
|
122
|
-
]
|
123
|
-
`;
|
124
|
-
return JSON.parse(configurations_template);
|
125
37
|
}
|
126
38
|
|
127
39
|
async getBrandConfigurationsJsonFromDirectory(dirHandle) {
|
@@ -161,9 +73,7 @@ class BrandRemoteSource {
|
|
161
73
|
if (!response.ok) {
|
162
74
|
throw new Error('Network response was not ok: ' + response.statusText);
|
163
75
|
}
|
164
|
-
|
165
|
-
console.log(data);
|
166
|
-
return data; // Return the data instead of null
|
76
|
+
return await response.json();
|
167
77
|
} catch (error) {
|
168
78
|
console.error('There was a problem with the fetch operation:', error);
|
169
79
|
return null; // Return null in case of error
|
@@ -175,33 +85,27 @@ class BrandRemoteSource {
|
|
175
85
|
const expectedFiles = [
|
176
86
|
{
|
177
87
|
key: 'theme.json',
|
178
|
-
name: 'Theme Configuration'
|
179
|
-
input_type: 'color'
|
88
|
+
name: 'Theme Configuration'
|
180
89
|
},
|
181
90
|
{
|
182
91
|
key: 'brand_config.json',
|
183
|
-
name: 'Brand Configuration'
|
184
|
-
input_type: 'text'
|
92
|
+
name: 'Brand Configuration'
|
185
93
|
},
|
186
94
|
{
|
187
95
|
key: 'android_config.json',
|
188
|
-
name: 'Android Configuration'
|
189
|
-
input_type: 'text'
|
96
|
+
name: 'Android Configuration'
|
190
97
|
},
|
191
98
|
{
|
192
99
|
key: 'android_signing.json',
|
193
|
-
name: 'Android Signing'
|
194
|
-
input_type: 'text'
|
100
|
+
name: 'Android Signing'
|
195
101
|
},
|
196
102
|
{
|
197
103
|
key: 'ios_config.json',
|
198
|
-
name: 'iOS Configuration'
|
199
|
-
input_type: 'text'
|
104
|
+
name: 'iOS Configuration'
|
200
105
|
},
|
201
106
|
{
|
202
107
|
key: 'ios_signing.json',
|
203
|
-
name: 'iOS Signing'
|
204
|
-
input_type: 'text'
|
108
|
+
name: 'iOS Signing'
|
205
109
|
}
|
206
110
|
];
|
207
111
|
|
@@ -212,7 +116,6 @@ class BrandRemoteSource {
|
|
212
116
|
configList.push({
|
213
117
|
key: file.key,
|
214
118
|
name: file.name,
|
215
|
-
inputType: file.input_type,
|
216
119
|
content: JSON.parse(fileContent)
|
217
120
|
});
|
218
121
|
}
|
@@ -2,6 +2,37 @@ import BrandsModel from './BrandsModel.js';
|
|
2
2
|
import BrandsView from './BrandsView.js';
|
3
3
|
import BrandsController from './BrandsController.js';
|
4
4
|
|
5
|
+
const modeToggle = document.getElementById('modeToggle');
|
6
|
+
const body = document.body;
|
7
|
+
const icon = modeToggle.querySelector('i');
|
8
|
+
|
9
|
+
function applyMode(mode) {
|
10
|
+
if (mode === 'dark') {
|
11
|
+
body.classList.add('dark-mode');
|
12
|
+
icon.classList.remove('fa-sun');
|
13
|
+
icon.classList.add('fa-moon');
|
14
|
+
} else {
|
15
|
+
body.classList.remove('dark-mode');
|
16
|
+
icon.classList.remove('fa-moon');
|
17
|
+
icon.classList.add('fa-sun');
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
const savedMode = localStorage.getItem('mode');
|
22
|
+
if (savedMode) {
|
23
|
+
applyMode(savedMode);
|
24
|
+
} else {
|
25
|
+
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
26
|
+
applyMode(systemPrefersDark ? 'dark' : 'light');
|
27
|
+
}
|
28
|
+
|
29
|
+
modeToggle.addEventListener('click', () => {
|
30
|
+
const currentMode = body.classList.contains('dark-mode') ? 'dark' : 'light';
|
31
|
+
const newMode = currentMode === 'dark' ? 'light' : 'dark';
|
32
|
+
applyMode(newMode);
|
33
|
+
localStorage.setItem('mode', newMode);
|
34
|
+
});
|
35
|
+
|
5
36
|
document.addEventListener('DOMContentLoaded', async () => {
|
6
37
|
const model = new BrandsModel();
|
7
38
|
const view = new BrandsView(model.source);
|
@@ -24,27 +24,22 @@ class BrandsController {
|
|
24
24
|
.addEventListener('input', (e) => this.filterBrands(e.target.value));
|
25
25
|
|
26
26
|
this.view.brandOptionsSheet.addEventListener('clone', (event) => {
|
27
|
-
console.log('Clone', event.detail);
|
28
27
|
this.handleCloneOption(event)
|
29
28
|
});
|
30
29
|
|
31
30
|
this.view.brandOptionsSheet.addEventListener('offboard', (event) => {
|
32
|
-
console.log('Offboard', event.detail);
|
33
31
|
this.handleOffboardOption(event)
|
34
32
|
});
|
35
33
|
|
36
34
|
this.view.brandOptionsSheet.addEventListener('doctor', (event) => {
|
37
|
-
console.log('Doctor', event.detail);
|
38
35
|
this.handleDoctorOption(event)
|
39
36
|
});
|
40
37
|
|
41
38
|
this.view.brandOptionsSheet.addEventListener('aliases', (event) => {
|
42
|
-
console.log('Aliases', event.detail);
|
43
39
|
this.handleAliasesOption(event)
|
44
40
|
});
|
45
41
|
|
46
42
|
this.view.brandOptionsSheet.addEventListener('settings', (event) => {
|
47
|
-
console.log('Settings', event.detail);
|
48
43
|
this.handleSettingsOption(event)
|
49
44
|
});
|
50
45
|
}
|
@@ -40,8 +40,8 @@ class BrandsView {
|
|
40
40
|
});
|
41
41
|
|
42
42
|
const switchButton = brandItem.querySelector('.switch-button');
|
43
|
-
if (isCurrent
|
44
|
-
switchButton.textContent = "
|
43
|
+
if (isCurrent) {
|
44
|
+
switchButton.textContent = "Sync";
|
45
45
|
switchButton.style.display = "block";
|
46
46
|
} else if (isCurrent && !brand.content_changed) {
|
47
47
|
switchButton.style.display = "none";
|
@@ -12,9 +12,34 @@
|
|
12
12
|
--background-color: #F5F7FA;
|
13
13
|
--text-color: #333;
|
14
14
|
--border-color: #E1E4E8;
|
15
|
-
--
|
15
|
+
--delete-color: #dc3545;
|
16
16
|
--field-shadow: 0 1.4px 3.5px rgba(0, 0, 0, 0.1);
|
17
|
+
--card-item-bg: rgba(255, 255, 255, 0.05);
|
18
|
+
--card-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
19
|
+
--section-shadow: 0 1.4px 7px rgba(0, 0, 0, 0.1);
|
20
|
+
--delete-btn-color: #ff6b6b;
|
21
|
+
--delete-btn-hover: #ff4757;
|
22
|
+
--add-property-btn-color: #5ecd73;
|
23
|
+
--logo-shadow-color: rgba(255, 255, 255, 0.2);
|
24
|
+
--hover: rgba(0, 123, 255, 0.5);
|
17
25
|
}
|
26
|
+
|
27
|
+
body.dark-mode {
|
28
|
+
--primary-color: #2C3E50;
|
29
|
+
--secondary-color: #34495E;
|
30
|
+
--background-color: #1A1A1A;
|
31
|
+
--text-color: #F5F5F5;
|
32
|
+
--border-color: #4A4A4A;
|
33
|
+
--delete-color: #E74C3C;
|
34
|
+
--field-shadow: 0 1.4px 3.5px rgba(255, 255, 255, 0.1);
|
35
|
+
--card-item-bg: rgba(255, 255, 255, 0.1);
|
36
|
+
--section-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
|
37
|
+
--delete-btn-color: #ff8f8f;
|
38
|
+
--delete-btn-hover: #ff6b6b;
|
39
|
+
--add-property-btn-color: #7eed8e;
|
40
|
+
--hover: rgba(255, 255, 255, 0.2);
|
41
|
+
}
|
42
|
+
|
18
43
|
body {
|
19
44
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
20
45
|
background-color: var(--background-color);
|
@@ -33,14 +58,29 @@
|
|
33
58
|
margin: 0;
|
34
59
|
font-size: 1.75em;
|
35
60
|
}
|
61
|
+
|
62
|
+
.mode-toggle {
|
63
|
+
background: none;
|
64
|
+
border: none;
|
65
|
+
color: white;
|
66
|
+
font-size: 1.5em;
|
67
|
+
cursor: pointer;
|
68
|
+
margin-left: 15px;
|
69
|
+
transition: color 0.3s;
|
70
|
+
}
|
71
|
+
|
72
|
+
.mode-toggle:hover {
|
73
|
+
color: var(--hover);
|
74
|
+
}
|
75
|
+
|
36
76
|
.brand-list {
|
37
77
|
max-width: 490px;
|
38
78
|
margin: 0 auto;
|
39
79
|
}
|
40
80
|
.brand-item {
|
41
|
-
background-color:
|
81
|
+
background-color: var(--card-item-bg);
|
42
82
|
border-radius: 8.4px;
|
43
|
-
box-shadow:
|
83
|
+
box-shadow: var(--card-shadow);
|
44
84
|
padding: 14px;
|
45
85
|
display: flex;
|
46
86
|
align-items: center;
|
@@ -52,7 +92,6 @@
|
|
52
92
|
}
|
53
93
|
.brand-item:hover {
|
54
94
|
transform: translateY(-3.5px);
|
55
|
-
box-shadow: 0 4.2px 8.4px rgba(0, 0, 0, 0.15);
|
56
95
|
}
|
57
96
|
.brand-image {
|
58
97
|
width: 56px;
|
@@ -63,7 +102,8 @@
|
|
63
102
|
margin-right: 14px;
|
64
103
|
border-radius: 8.4px;
|
65
104
|
overflow: hidden;
|
66
|
-
box-shadow:
|
105
|
+
box-shadow: var(--field-shadow);
|
106
|
+
padding: 5px;
|
67
107
|
}
|
68
108
|
.brand-image img {
|
69
109
|
width: 100%;
|
@@ -77,11 +117,11 @@
|
|
77
117
|
font-size: 14px;
|
78
118
|
font-weight: bold;
|
79
119
|
margin-bottom: 3.5px;
|
80
|
-
color: var(--
|
120
|
+
color: var(--text-color);
|
81
121
|
}
|
82
122
|
.brand-key {
|
83
123
|
font-size: 9.8px;
|
84
|
-
color:
|
124
|
+
color: var(--text-color);
|
85
125
|
}
|
86
126
|
.brand-actions {
|
87
127
|
display: flex;
|
@@ -100,18 +140,18 @@
|
|
100
140
|
min-width: 91px;
|
101
141
|
}
|
102
142
|
.switch-button:hover {
|
103
|
-
background-color:
|
143
|
+
background-color: var(--hover);
|
104
144
|
}
|
105
145
|
.overflow-menu {
|
106
146
|
cursor: pointer;
|
107
147
|
font-size: 14px;
|
108
|
-
color:
|
148
|
+
color: var(--text-color);
|
109
149
|
transition: color 0.3s ease;
|
110
150
|
padding: 7px;
|
111
151
|
margin: -7px;
|
112
152
|
}
|
113
153
|
.overflow-menu:hover {
|
114
|
-
color: var(--
|
154
|
+
color: var(--hover);
|
115
155
|
}
|
116
156
|
|
117
157
|
.current-brand, .brands-list {
|
@@ -123,13 +163,7 @@
|
|
123
163
|
.current-brand h2, .brands-list h2 {
|
124
164
|
margin: 0 0 14px 0;
|
125
165
|
font-size: 1.26em;
|
126
|
-
color: var(--
|
127
|
-
}
|
128
|
-
.section-title {
|
129
|
-
font-size: 1.05em;
|
130
|
-
color: var(--primary-color);
|
131
|
-
margin-bottom: 14px;
|
132
|
-
text-align: center;
|
166
|
+
color: var(--text-color);
|
133
167
|
}
|
134
168
|
.brands-list-header {
|
135
169
|
display: flex;
|
@@ -150,7 +184,7 @@
|
|
150
184
|
min-width: 91px;
|
151
185
|
}
|
152
186
|
.onboard-brand-button:hover {
|
153
|
-
background-color:
|
187
|
+
background-color: var(--hover);
|
154
188
|
}
|
155
189
|
.onboard-brand-form {
|
156
190
|
display: flex;
|
@@ -172,6 +206,8 @@
|
|
172
206
|
border: 1px solid var(--border-color);
|
173
207
|
border-radius: 3.5px;
|
174
208
|
font-size: 11.2px;
|
209
|
+
background-color: var(--background-color);
|
210
|
+
color: var(--text-color);
|
175
211
|
}
|
176
212
|
.question-icon {
|
177
213
|
margin-left: 3.5px;
|
@@ -194,13 +230,17 @@
|
|
194
230
|
align-items: center;
|
195
231
|
justify-content: center;
|
196
232
|
}
|
233
|
+
.header-content {
|
234
|
+
display: flex;
|
235
|
+
align-items: center;
|
236
|
+
justify-content: center;
|
237
|
+
}
|
197
238
|
|
198
239
|
header {
|
199
240
|
background-color: var(--primary-color);
|
200
241
|
color: white;
|
201
242
|
text-align: center;
|
202
243
|
padding: 7px 0;
|
203
|
-
box-shadow: 0 1.4px 7px rgba(0, 0, 0, 0.1);
|
204
244
|
display: flex;
|
205
245
|
justify-content: center;
|
206
246
|
align-items: center;
|
@@ -217,21 +257,6 @@
|
|
217
257
|
.scroll-down header {
|
218
258
|
transform: translateY(-100%);
|
219
259
|
}
|
220
|
-
.logo {
|
221
|
-
width: 35px;
|
222
|
-
height: 35px;
|
223
|
-
margin-right: 14px;
|
224
|
-
filter: drop-shadow(2.1px 2.1px 2.1px rgba(0, 0, 0, 0.3));
|
225
|
-
transition: transform 0.3s ease;
|
226
|
-
}
|
227
|
-
.logo:hover {
|
228
|
-
transform: scale(1.07);
|
229
|
-
}
|
230
|
-
h1 {
|
231
|
-
margin: 0;
|
232
|
-
font-size: 1.75em;
|
233
|
-
}
|
234
|
-
|
235
260
|
.search-container {
|
236
261
|
margin-top: 14px;
|
237
262
|
margin-bottom: 14px;
|
@@ -245,13 +270,8 @@
|
|
245
270
|
font-size: 11.2px;
|
246
271
|
width: 100%;
|
247
272
|
max-width: 469px;
|
248
|
-
|
249
|
-
|
250
|
-
.brands-list-header {
|
251
|
-
display: flex;
|
252
|
-
justify-content: space-between;
|
253
|
-
align-items: center;
|
254
|
-
margin-bottom: 14px;
|
273
|
+
background-color: var(--background-color);
|
274
|
+
color: var(--text-color);
|
255
275
|
}
|
256
276
|
|
257
277
|
#error-button {
|
@@ -268,7 +288,7 @@
|
|
268
288
|
cursor: pointer;
|
269
289
|
justify-content: center;
|
270
290
|
align-items: center;
|
271
|
-
box-shadow:
|
291
|
+
box-shadow: var(--section-shadow);
|
272
292
|
transition: transform 0.2s;
|
273
293
|
display: none;
|
274
294
|
}
|
@@ -295,14 +315,18 @@
|
|
295
315
|
</style>
|
296
316
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
|
297
317
|
</head>
|
298
|
-
<body>
|
318
|
+
<body class="dark-mode">
|
299
319
|
|
300
320
|
<header>
|
301
321
|
<div class="header-container">
|
302
|
-
<
|
303
|
-
|
322
|
+
<div class="header-content">
|
323
|
+
<img class="logo" src="../solara.png" alt="Splash Image">
|
324
|
+
<h1>Solara Dashboard</h1>
|
325
|
+
<button id="modeToggle" class="mode-toggle" aria-label="Toggle dark/light mode">
|
326
|
+
<i class="fas fa-sun"></i>
|
327
|
+
</button>
|
328
|
+
</div>
|
304
329
|
</div>
|
305
|
-
|
306
330
|
</header>
|
307
331
|
|
308
332
|
<button id="error-button">
|
@@ -311,14 +335,13 @@
|
|
311
335
|
</button>
|
312
336
|
|
313
337
|
<div class="container">
|
314
|
-
<div class="current-brand" id="currentBrandSection" style="display: none;">
|
338
|
+
<div class="current-brand" id="currentBrandSection" style=" display: none;">
|
315
339
|
<h2>Current Brand</h2>
|
316
340
|
<div id="currentBrandItem"></div>
|
317
341
|
</div>
|
318
342
|
<div class="brands-list">
|
319
343
|
<div class="brands-list-header">
|
320
344
|
<h2>All Brands</h2>
|
321
|
-
|
322
345
|
<button class="onboard-brand-button">
|
323
346
|
<i class="fas fa-plus"></i> Onboard
|
324
347
|
</button>
|
@@ -333,13 +356,9 @@
|
|
333
356
|
</div>
|
334
357
|
|
335
358
|
<brand-options-bottom-sheet id="bottomSheet"></brand-options-bottom-sheet>
|
336
|
-
|
337
359
|
<confirmation-dialog id="confirmationDialog"></confirmation-dialog>
|
338
|
-
|
339
360
|
<onboard-bottom-sheet id="onboardBottomSheet"></onboard-bottom-sheet>
|
340
|
-
|
341
361
|
<message-bottom-sheet id="messageBottomSheet"></message-bottom-sheet>
|
342
|
-
|
343
362
|
<aliases-bottom-sheet id="aliasesSheet"></aliases-bottom-sheet>
|
344
363
|
|
345
364
|
<script type="module" src="Brands.js"></script>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
class AliasesBottomSheet extends HTMLElement {
|
2
2
|
constructor() {
|
3
3
|
super();
|
4
|
-
this.attachShadow({
|
4
|
+
this.attachShadow({mode: 'open'});
|
5
5
|
this.shadowRoot.innerHTML = `
|
6
6
|
<style>
|
7
7
|
.aliases-bottom-sheet {
|
@@ -10,7 +10,7 @@ class AliasesBottomSheet extends HTMLElement {
|
|
10
10
|
bottom: 0;
|
11
11
|
left: 0;
|
12
12
|
right: 0;
|
13
|
-
background-color:
|
13
|
+
background-color: var(--background-color);
|
14
14
|
border-top-left-radius: 14px;
|
15
15
|
border-top-right-radius: 14px;
|
16
16
|
box-shadow: 0 -1.4px 7px rgba(0, 0, 0, 0.1);
|
@@ -18,7 +18,7 @@ class AliasesBottomSheet extends HTMLElement {
|
|
18
18
|
padding: 14px;
|
19
19
|
transition: transform 0.3s ease-out;
|
20
20
|
transform: translateY(100%);
|
21
|
-
max-width:
|
21
|
+
max-width: 50%;
|
22
22
|
margin: 0 auto;
|
23
23
|
width: 100%;
|
24
24
|
max-height: 56vh;
|
@@ -42,7 +42,7 @@ class AliasesBottomSheet extends HTMLElement {
|
|
42
42
|
.aliases-bottom-sheet li {
|
43
43
|
margin-bottom: 7px;
|
44
44
|
font-family: monospace;
|
45
|
-
background-color:
|
45
|
+
background-color: var(--card-item-bg);
|
46
46
|
padding: 3.5px;
|
47
47
|
border-radius: 3.5px;
|
48
48
|
font-size: 11.2px;
|
@@ -69,13 +69,13 @@ class AliasesBottomSheet extends HTMLElement {
|
|
69
69
|
margin-top: 14px;
|
70
70
|
}
|
71
71
|
.close-aliases:hover {
|
72
|
-
background-color:
|
72
|
+
background-color: var(--hover);
|
73
73
|
}
|
74
74
|
</style>
|
75
75
|
|
76
76
|
<div class="overlay"></div>
|
77
77
|
<div class="aliases-bottom-sheet" id="aliasesSheet">
|
78
|
-
<
|
78
|
+
<h2>Aliases</h2>
|
79
79
|
<div id="commonAliases">
|
80
80
|
<h4>Common Aliases</h4>
|
81
81
|
<ul id="commonAliasesList"></ul>
|
@@ -4,7 +4,7 @@ class BrandOptionsBottomSheet extends HTMLElement {
|
|
4
4
|
this.attachShadow({mode: 'open'});
|
5
5
|
|
6
6
|
this.shadowRoot.innerHTML = `
|
7
|
-
|
7
|
+
<head>
|
8
8
|
<style>
|
9
9
|
.bottom-sheet {
|
10
10
|
display: none;
|
@@ -12,7 +12,7 @@ class BrandOptionsBottomSheet extends HTMLElement {
|
|
12
12
|
bottom: 0;
|
13
13
|
left: 0;
|
14
14
|
right: 0;
|
15
|
-
background-color:
|
15
|
+
background-color: var(--background-color);
|
16
16
|
border-top-left-radius: 14px;
|
17
17
|
border-top-right-radius: 14px;
|
18
18
|
box-shadow: 0 -1.4px 7px rgba(0, 0, 0, 0.1);
|
@@ -20,7 +20,7 @@ class BrandOptionsBottomSheet extends HTMLElement {
|
|
20
20
|
padding: 14px;
|
21
21
|
transition: transform 0.3s ease-out;
|
22
22
|
transform: translateY(100%);
|
23
|
-
max-width:
|
23
|
+
max-width: 50%;
|
24
24
|
margin: 0 auto;
|
25
25
|
width: 100%;
|
26
26
|
}
|
@@ -41,7 +41,7 @@ class BrandOptionsBottomSheet extends HTMLElement {
|
|
41
41
|
font-size: 12.6px;
|
42
42
|
}
|
43
43
|
.bottom-sheet li:hover {
|
44
|
-
background-color: var(--
|
44
|
+
background-color: var(--hover);
|
45
45
|
}
|
46
46
|
.bottom-sheet li i {
|
47
47
|
margin-right: 10.5px;
|