Skip to content

Commit 819df89

Browse files
odeimaizodeimaiz
authored
🎨 [Frontend] Make the Light Theme less white (#6681)
1 parent 0981f49 commit 819df89

File tree

12 files changed

+100
-151
lines changed

12 files changed

+100
-151
lines changed

‎services/static-webserver/client/source/class/osparc/Application.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -222,18 +222,13 @@ qx.Class.define("osparc.Application", {
222222
__setDeviceSpecificIcons: function() {
223223
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
224224
const isAndroid = /android/i.test(navigator.userAgent);
225-
const isWindows = /windows/i.test(navigator.userAgent);
226-
// const productColor = qx.theme.manager.Color.getInstance().resolve("product-color");
227-
// const backgroundColor = qx.theme.manager.Color.getInstance().resolve("primary-background-color");
228225
// default icons
229226
this.__updateMetaTags();
230227
this.__setDefaultIcons()
231228
if (isIOS) {
232229
this.__setIOSpIcons();
233230
} else if (isAndroid) {
234231
this.__setGoogleIcons();
235-
} else if (isWindows) {
236-
// this.__updateBrowserConfig(this.__getProductMetaData().productColor);
237232
}
238233
},
239234

@@ -246,16 +241,14 @@ qx.Class.define("osparc.Application", {
246241
}
247242

248243
const productColor = qx.theme.manager.Color.getInstance().resolve("product-color");
249-
const backgroundColor = qx.theme.manager.Color.getInstance().resolve("primary-background-color");
250244
return {
251245
productName: productName,
252246
productColor: productColor,
253-
backgroundColor: backgroundColor
254247
}
255248
},
256249

257250
__updateMetaTags: function() {
258-
// check device type and only set the icons for the divice type
251+
// check device type and only set the icons for the device type
259252
// i.e iOS, Android or windows etc
260253
const themeColorMeta = document.querySelector("meta[name='theme-color']");
261254
const tileColorMeta = document.querySelector("meta[name='msapplication-TileColor']");

‎services/static-webserver/client/source/class/osparc/auth/LoginPageS4L.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ qx.Class.define("osparc.auth.LoginPageS4L", {
2929
const layout = new qx.ui.layout.HBox();
3030
this._setLayout(layout);
3131

32-
this.setBackgroundColor("primary-background-color");
32+
this.setBackgroundColor("rgba(0, 20, 46, 1)");
3333

3434
this._removeAll();
3535

‎services/static-webserver/client/source/class/osparc/desktop/SlideshowView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ qx.Class.define("osparc.desktop.SlideshowView", {
2424
this._setLayout(new qx.ui.layout.VBox());
2525

2626
const slideshowToolbar = this.__slideshowToolbar = new osparc.desktop.SlideshowToolbar().set({
27-
backgroundColor: "tab_navigation_bar_background_color"
27+
backgroundColor: "workbench-view-navbar"
2828
});
2929

3030
const collapseWithUserMenu = this.__collapseWithUserMenu = new osparc.desktop.CollapseWithUserMenu();

‎services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,10 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
4040
TAB_BUTTON_HEIGHT: 46,
4141

4242
decorateSplitter: function(splitter) {
43-
const colorManager = qx.theme.manager.Color.getInstance();
44-
const binaryColor = osparc.utils.Utils.getRoundedBinaryColor(colorManager.resolve("background-main"));
4543
splitter.set({
4644
width: 2,
47-
backgroundColor: binaryColor
45+
backgroundColor: "workbench-view-splitter"
4846
});
49-
colorManager.addListener("changeTheme", () => {
50-
const newBinaryColor = osparc.utils.Utils.getRoundedBinaryColor(colorManager.resolve("background-main"));
51-
splitter.setBackgroundColor(newBinaryColor);
52-
}, this);
5347
},
5448

5549
decorateSlider: function(slider) {
@@ -202,7 +196,6 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
202196
control = new qx.ui.tabview.TabView().set({
203197
contentPadding: osparc.widget.CollapsibleViewLight.CARET_WIDTH + 2, // collapse bar + padding
204198
contentPaddingRight: 2,
205-
backgroundColor: this.self().PRIMARY_COL_BG_COLOR,
206199
barPosition: "top"
207200
});
208201
const collapsibleViewLeft = this.getChildControl("collapsible-view-left");
@@ -322,7 +315,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
322315
const topBar = tabViewPrimary.getChildControl("bar");
323316
topBar.set({
324317
height: this.self().TAB_BUTTON_HEIGHT,
325-
backgroundColor: "tab_navigation_bar_background_color"
318+
backgroundColor: "workbench-view-navbar"
326319
});
327320
this.__addTopBarSpacer(topBar);
328321

@@ -392,7 +385,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
392385
const topBar = tabViewSecondary.getChildControl("bar");
393386
topBar.set({
394387
height: this.self().TAB_BUTTON_HEIGHT,
395-
backgroundColor: "tab_navigation_bar_background_color"
388+
backgroundColor: "workbench-view-navbar"
396389
});
397390
this.__addTopBarSpacer(topBar);
398391

@@ -427,7 +420,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
427420
topBar.set({
428421
height: this.self().TAB_BUTTON_HEIGHT,
429422
alignY: "top",
430-
backgroundColor: "tab_navigation_bar_background_color"
423+
backgroundColor: "workbench-view-navbar"
431424
});
432425
this.__addTopBarSpacer(topBar);
433426

@@ -483,7 +476,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
483476

484477
__addTopBarSpacer: function(tabViewTopBar) {
485478
const spacer = new qx.ui.core.Widget().set({
486-
backgroundColor: "tab_navigation_bar_background_color"
479+
backgroundColor: "workbench-view-navbar"
487480
});
488481
tabViewTopBar.add(spacer, {
489482
flex: 1
@@ -492,7 +485,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
492485

493486
__createCollapsibleViewSpacer: function() {
494487
const spacer = new qx.ui.core.Widget().set({
495-
backgroundColor: "tab_navigation_bar_background_color",
488+
backgroundColor: "workbench-view-navbar",
496489
height: this.self().TAB_BUTTON_HEIGHT
497490
});
498491
return spacer;
@@ -1079,13 +1072,6 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
10791072

10801073
const nodeOptions = new osparc.widget.NodeOptions(node);
10811074
nodeOptions.buildLayout();
1082-
[
1083-
"versionChanged",
1084-
"bootModeChanged",
1085-
"limitsChanged"
1086-
].forEach(eventName => {
1087-
nodeOptions.addListener(eventName, () => this.__populateSecondaryColumn(node));
1088-
});
10891075

10901076
return nodeOptions;
10911077
},

‎services/static-webserver/client/source/class/osparc/node/BootOptionsView.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@
1818
qx.Class.define("osparc.node.BootOptionsView", {
1919
extend: osparc.node.ServiceOptionsView,
2020

21-
events: {
22-
"bootModeChanged": "qx.event.type.Event"
23-
},
24-
2521
members: {
2622
_applyNode: function(node) {
2723
if (node.hasBootModes()) {
@@ -61,7 +57,6 @@ qx.Class.define("osparc.node.BootOptionsView", {
6157
setTimeout(() => {
6258
buttonsLayout.setEnabled(true);
6359
node.requestStartNode();
64-
this.fireEvent("bootModeChanged");
6560
}, osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL);
6661
}
6762
}, this);

‎services/static-webserver/client/source/class/osparc/node/LifeCycleView.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@
1818
qx.Class.define("osparc.node.LifeCycleView", {
1919
extend: osparc.node.ServiceOptionsView,
2020

21-
events: {
22-
"versionChanged": "qx.event.type.Event"
23-
},
24-
2521
members: {
2622
_applyNode: function(node) {
2723
if (node.isUpdatable() || node.isDeprecated() || node.isRetired()) {
@@ -125,7 +121,6 @@ qx.Class.define("osparc.node.LifeCycleView", {
125121
setTimeout(() => {
126122
updateButton.setFetching(false);
127123
node.requestStartNode();
128-
this.fireEvent("versionChanged");
129124
}, osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL);
130125
});
131126

‎services/static-webserver/client/source/class/osparc/node/UpdateResourceLimitsView.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@
1818
qx.Class.define("osparc.node.UpdateResourceLimitsView", {
1919
extend: osparc.node.ServiceOptionsView,
2020

21-
events: {
22-
"limitsChanged": "qx.event.type.Event"
23-
},
24-
2521
members: {
2622
__resourceFields: null,
2723
__saveBtn: null,
@@ -159,7 +155,6 @@ qx.Class.define("osparc.node.UpdateResourceLimitsView", {
159155
osparc.data.Resources.fetch("nodesInStudyResources", "put", params)
160156
.then(() => {
161157
osparc.FlashMessenger.getInstance().logAs(this.tr("Limits successfully updated"));
162-
this.fireEvent("limitsChanged");
163158
})
164159
.catch(err => {
165160
console.error(err);

‎services/static-webserver/client/source/class/osparc/notification/RibbonNotifications.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,15 +97,14 @@ qx.Class.define("osparc.notification.RibbonNotifications", {
9797

9898
if (notification.getType() === "announcement") {
9999
const dontShowButton = new qx.ui.form.Button(this.tr("Don't show again")).set({
100-
backgroundColor: "transparent",
101-
textColor: "strong-text",
100+
appearance: "strong-button",
102101
alignY: "middle",
103102
padding: 4,
104103
allowGrowX: false,
105104
allowGrowY: false,
106105
marginLeft: 15
107106
});
108-
osparc.utils.Utils.addBorder(dontShowButton, 1, qx.theme.manager.Color.getInstance().resolve("strong-text"));
107+
osparc.utils.Utils.addBorder(dontShowButton, 1, qx.theme.manager.Color.getInstance().resolve("text"));
109108
dontShowButton.addListener("tap", () => {
110109
this.removeNotification(notification);
111110
osparc.utils.Utils.localCache.setDontShowAnnouncement(notification.announcementId);

‎services/static-webserver/client/source/class/osparc/theme/ColorDark.js‎

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,27 @@ qx.Theme.define("osparc.theme.ColorDark", {
22
include: osparc.theme.mixin.Color,
33

44
colors: {
5+
// 105-0
56
"c00": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105),
6-
"c01": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 100),
7-
"c02": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 95),
8-
"c03": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 85),
9-
"c04": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 80),
10-
"c05": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 70),
11-
"c06": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 55),
12-
"c07": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 45),
13-
"c08": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 35),
14-
"c09": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 30),
15-
"c10": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 25),
16-
"c11": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 20),
17-
"c12": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 15),
18-
"c13": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 8),
19-
"c14": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 0),
7+
"c01": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-5),
8+
"c02": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-10),
9+
"c03": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-20),
10+
"c04": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-25),
11+
"c05": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-35),
12+
"c06": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-50),
13+
"c07": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-60),
14+
"c08": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-70),
15+
"c09": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-75),
16+
"c10": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-80),
17+
"c12": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-90),
18+
"c14": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-105),
2019

2120
"product-color": "rgba(0, 144, 208, 1)", // override in product
2221
"strong-main": "product-color",
23-
"strong-text": "rgba(255, 255, 255, 1)",
2422
"a-bit-transparent": "rgba(0, 0, 0, 0.4)",
2523

2624
// main
27-
"background-main": "#222",
25+
"background-main": "c01",
2826
"background-main-1": "c02",
2927
"background-main-2": "c03",
3028
"background-main-3": "c04",
@@ -34,10 +32,7 @@ qx.Theme.define("osparc.theme.ColorDark", {
3432
"background-card-overlay": "rgba(25, 33, 37, 0.8)",
3533
"background-workspace-card-overlay": "rgb(35, 93, 122)",
3634

37-
"primary-background-color": "rgba(0, 20, 46, 1)",
3835
"navigation_bar_background_color": "rgba(1, 18, 26, 0.8)",
39-
"tab_navigation_bar_background_color": "c00",
40-
"modal-backdrop": "rgba(8, 9, 13, 1)",
4136
"fab_text": "contrasted-text-dark",
4237
"fab-background": "rgba(255, 255, 255, 0.2)",
4338
"input_background": "#213248",
@@ -58,18 +53,18 @@ qx.Theme.define("osparc.theme.ColorDark", {
5853
"link": "rgba(10, 182, 255, 1)",
5954

6055
// shadows
61-
"bg-shadow": "background-main-5",
62-
"box-shadow": "rgba(0,0,0, 0.15)",
56+
"bg-shadow": "background-main-5",
57+
"box-shadow": "rgba(0, 0, 0, 0.15)",
6358
"shadow": qx.core.Environment.get("css.rgba") ? "a-bit-transparent" : "bg-shadow",
6459

6560
// window
6661
"window-popup-background": "rgba(66, 66, 66, 1)",
6762
"window-caption-background": "background-main",
68-
"window-caption-background-active": "background-main-3",
63+
"window-caption-background-active": "background-main-3",
6964
"window-caption-text": "text",
7065
"window-caption-text-active": "c12",
71-
"window-border": "background-main-2",
72-
"window-border-inner": "background-main-1",
66+
"window-border": "background-main-2",
67+
"window-border-inner": "background-main-1",
7368

7469
// material-button
7570
"material-button-background": "fab-background",
@@ -88,10 +83,10 @@ qx.Theme.define("osparc.theme.ColorDark", {
8883

8984
// backgrounds
9085
"background-selected": "default-button-background",
91-
"background-selected-disabled": "default-button-disabled",
92-
"background-selected-dark": "product-color",
86+
"background-selected-disabled": "default-button-disabled",
87+
"background-selected-dark": "product-color",
9388
"background-disabled": "background-main",
94-
"background-disabled-checked": "background-main-1",
89+
"background-disabled-checked": "background-main-1",
9590
"background-pane": "background-main",
9691

9792
// tabview
@@ -102,23 +97,23 @@ qx.Theme.define("osparc.theme.ColorDark", {
10297
"tabview-button-background": "transparent",
10398

10499
// scrollbar
105-
"scrollbar-passive": "background-main-4",
106-
"scrollbar-active": "background-main-5",
100+
"scrollbar-passive": "background-main-4",
101+
"scrollbar-active": "background-main-5",
107102

108103
// form
109104
"button": "background-main-4",
110-
"button-border": "background-main-5",
105+
"button-border": "background-main-5",
111106
"button-border-hovered": "c07",
112-
"button-box": "background-main-3",
113-
"button-box-pressed": "background-main-4",
107+
"button-box": "background-main-3",
108+
"button-box-pressed": "background-main-4",
114109
"border-lead": "c07",
115110

116111
// group box
117-
"white-box-border": "background-main-2",
112+
"white-box-border": "background-main-2",
118113

119114
// borders
120115
// 'border-main' is an alias of 'background-selected' (compatibility reasons)
121-
"border": "background-main-3",
116+
"border": "background-main-3",
122117
"border-focused": "c09",
123118
"border-invalid": "failed-red",
124119
"border-disabled": "background-main",
@@ -134,13 +129,13 @@ qx.Theme.define("osparc.theme.ColorDark", {
134129
"table-header": "background-main",
135130
"table-header-foreground": "c09",
136131
"table-header-border": "c07",
137-
"table-focus-indicator": "background-main-5",
132+
"table-focus-indicator": "background-main-5",
138133

139134
// used in table code
140135
"table-header-cell": "background-main",
141-
"table-row-background-focused-selected": "background-main-4",
142-
"table-row-background-focused": "background-main-3",
143-
"table-row-background-selected": "background-main-4",
136+
"table-row-background-focused-selected": "background-main-4",
137+
"table-row-background-focused": "background-main-3",
138+
"table-row-background-selected": "background-main-4",
144139
"table-row-background-even": "background-main",
145140
"table-row-background-odd": "background-main",
146141

@@ -156,18 +151,20 @@ qx.Theme.define("osparc.theme.ColorDark", {
156151
"progressive-table-header": "c08",
157152
"progressive-table-row-background-even": "background-main",
158153
"progressive-table-row-background-odd": "background-main",
159-
"progressive-progressbar-background": "background-main",
154+
"progressive-progressbar-background": "background-main",
160155
"progressive-progressbar-indicator-done": "background-main",
161-
"progressive-progressbar-indicator-undone": "background-main-1",
162-
"progressive-progressbar-percent-background": "background-main",
163-
"progressive-progressbar-percent-text": "background-main-1",
156+
"progressive-progressbar-indicator-undone": "background-main-1",
157+
"progressive-progressbar-percent-background": "background-main",
158+
"progressive-progressbar-percent-text": "background-main-1",
164159

165160

166161

167162
// OSPARC
168163
"workbench-edge-comp-active": "#777777",
169164
"workbench-edge-api-active": "#BBBBBB",
170165
"workbench-start-hint": "#505050",
166+
"workbench-view-navbar": "c00",
167+
"workbench-view-splitter": "#000000",
171168

172169
"node-background": "rgba(113, 157, 181, 0.5)",
173170
"node-selected-background": "strong-main",

0 commit comments

Comments
 (0)