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.
Files changed (56) hide show
  1. checksums.yaml +4 -4
  2. data/solara/lib/.DS_Store +0 -0
  3. data/solara/lib/core/.DS_Store +0 -0
  4. data/solara/lib/core/brands/brand_switcher.rb +58 -1
  5. data/solara/lib/core/dashboard/brand/BrandDetail.js +34 -2
  6. data/solara/lib/core/dashboard/brand/BrandDetailController.js +23 -233
  7. data/solara/lib/core/dashboard/brand/BrandDetailModel.js +13 -5
  8. data/solara/lib/core/dashboard/brand/BrandDetailView.js +16 -200
  9. data/solara/lib/core/dashboard/brand/SectionsFormManager.js +232 -0
  10. data/solara/lib/core/dashboard/brand/brand.html +187 -177
  11. data/solara/lib/core/dashboard/brand/source/BrandLocalSource.js +2 -5
  12. data/solara/lib/core/dashboard/brand/source/BrandRemoteSource.js +36 -133
  13. data/solara/lib/core/dashboard/brands/Brands.js +31 -0
  14. data/solara/lib/core/dashboard/brands/BrandsController.js +0 -5
  15. data/solara/lib/core/dashboard/brands/BrandsView.js +2 -2
  16. data/solara/lib/core/dashboard/brands/brands.html +71 -52
  17. data/solara/lib/core/dashboard/component/AliasesBottomSheet.js +6 -6
  18. data/solara/lib/core/dashboard/component/BrandOptionsBottomSheet.js +4 -4
  19. data/solara/lib/core/dashboard/component/ConfirmationDialog.js +15 -10
  20. data/solara/lib/core/dashboard/component/EditJsonSheet.js +160 -0
  21. data/solara/lib/core/dashboard/component/MessageBottomSheet.js +5 -5
  22. data/solara/lib/core/dashboard/component/OnboardBrandBottomSheet.js +5 -3
  23. data/solara/lib/core/dashboard/handler/base_handler.rb +1 -0
  24. data/solara/lib/core/dashboard/handler/edit_section_handler.rb +1 -5
  25. data/solara/lib/core/doctor/schema/brand_configurations.json +0 -8
  26. data/solara/lib/core/doctor/schema/platform/global/resources_manifest.json +30 -0
  27. data/solara/lib/core/doctor/schema/platform/json_manifest.json +57 -0
  28. data/solara/lib/core/doctor/validator/template/android_template_validation_config.yml +35 -1
  29. data/solara/lib/core/doctor/validator/template/flutter_template_validation_config.yml +30 -1
  30. data/solara/lib/core/doctor/validator/template/ios_template_validation_config.yml +35 -1
  31. data/solara/lib/core/doctor/validator/template/template_validator.rb +9 -9
  32. data/solara/lib/core/scripts/brand_config_manager.rb +1 -1
  33. data/solara/lib/core/scripts/brand_configurations_manager.rb +41 -0
  34. data/solara/lib/core/scripts/code_generator.rb +342 -118
  35. data/solara/lib/core/scripts/file_path.rb +21 -1
  36. data/solara/lib/core/scripts/gitignore_manager.rb +11 -3
  37. data/solara/lib/core/scripts/json_manifest_processor.rb +95 -0
  38. data/solara/lib/core/scripts/platform/ios/infoplist_string_catalog_manager.rb +11 -1
  39. data/solara/lib/core/scripts/resource_manifest_processor.rb +151 -0
  40. data/solara/lib/core/scripts/solara_status_manager.rb +1 -1
  41. data/solara/lib/core/scripts/theme_generator.rb +21 -242
  42. data/solara/lib/core/solara_configurator.rb +1 -1
  43. data/solara/lib/core/template/brands/global/resources_manifest.json +10 -0
  44. data/solara/lib/core/template/brands/json/Json-Manifest.md +61 -0
  45. data/solara/lib/core/template/brands/json/json_manifest.json +18 -0
  46. data/solara/lib/core/template/brands/shared/theme.json +213 -29
  47. data/solara/lib/core/template/config/android_template_config.json +50 -0
  48. data/solara/lib/core/template/config/flutter_template_config.json +35 -0
  49. data/solara/lib/core/template/config/ios_template_config.json +50 -0
  50. data/solara/lib/core/template/configurations.json +46 -0
  51. data/solara/lib/core/template/project_template_generator.rb +2 -0
  52. data/solara/lib/solara/version.rb +1 -1
  53. data/solara/lib/solara.rb +19 -0
  54. metadata +13 -4
  55. data/solara/lib/core/dashboard/component/AddFieldSheet.js +0 -175
  56. 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 createNewBrandConfogurations() {
8
- const configurations_template = `
9
- [
10
- {
11
- "key": "theme.json",
12
- "name": "Theme Configuration",
13
- "inputType": "color",
14
- "content": {
15
- "colors": {
16
- "primary": "#CAAC16",
17
- "secondary": "#5AC8FA",
18
- "background": "#FFFFFF",
19
- "surface": "#F2F2F7",
20
- "error": "#FF3B30",
21
- "onPrimary": "#FFFFFF",
22
- "onSecondary": "#000000",
23
- "onBackground": "#000000",
24
- "onSurface": "#000000",
25
- "onError": "#FFFFFF"
26
- },
27
- "typography": {
28
- "fontFamily": {
29
- "regular": "",
30
- "medium": "",
31
- "bold": ""
32
- },
33
- "fontSize": {
34
- "small": 12,
35
- "medium": 16,
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
- const data = await response.json();
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 && brand.content_changed) {
44
- switchButton.textContent = "Apply Changes";
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
- --offboard-color: #dc3545;
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: #fff;
81
+ background-color: var(--card-item-bg);
42
82
  border-radius: 8.4px;
43
- box-shadow: 0 2.8px 4.2px rgba(0, 0, 0, 0.1);
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: 0 1.4px 3.5px rgba(0, 0, 0, 0.1);
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(--primary-color);
120
+ color: var(--text-color);
81
121
  }
82
122
  .brand-key {
83
123
  font-size: 9.8px;
84
- color: #7f8c8d;
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: #3a7bc8;
143
+ background-color: var(--hover);
104
144
  }
105
145
  .overflow-menu {
106
146
  cursor: pointer;
107
147
  font-size: 14px;
108
- color: #7f8c8d;
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(--primary-color);
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(--primary-color);
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: #3a7bc8;
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: 0 1.4px 7px rgba(0, 0, 0, 0.2);
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
- <img class="logo" src="../solara.png" alt="Splash Image">
303
- <h1>Solara Dashboard</h1>
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({ mode: 'open' });
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: white;
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: 490px;
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: #f1f1f1;
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: #3a7bc8;
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
- <h3>Aliases</h3>
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
- <head>
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: white;
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: 490px;
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(--background-color);
44
+ background-color: var(--hover);
45
45
  }
46
46
  .bottom-sheet li i {
47
47
  margin-right: 10.5px;