Function to load component children

nbcl/panel/panel_section.nbcl

@@ -1,22 +1,17 @@
 # 3 Sections of the panel
+import "nbcl/panel/panel_section_right.nbcl" as panel_section_right { * }
 
 component PanelSection (section_side, widg_align) {
-  Box {
-    orinetation = "horizontal"
-    halign = "center"
-	class = "panel_section panel_section_" + section_side
-	height = config.panel_height
-	width = config.panel_width/3
-	space_evenly = true
-
-	Label {
-		class = "panel_section_widg"
-		text = "panel_section_" + section_side
-		halign = widg_align
+	Box {
+		orinetation = "horizontal"
+		halign = "center"
+		class = "panel_section panel_section_" + section_side
 		height = config.panel_height
-        width = "100%"
-    }
-  }
+		width = config.panel_width/3
+		space_evenly = true
+		
+		panel_section_right.panel_right()
+		}
 }
 
 fn panel_section(section_side, widg_align) {

nbcl/panel/panel_section_right.nbcl

@@ -0,0 +1,19 @@
+# Right-hand side of the top bar
+
+fn panel_right() {
+    Box {
+        space_evenly = false
+        halign = "end"
+        
+        # Display current date
+        DateTimeWidg "paneldatewidg" {
+            widgname = "paneldatewidg"
+            widgtextvar = "date_ddM"
+        }
+        # Display current time
+        DateTimeWidg "paneltimewidg" {
+            widgname = "paneltimewidg"
+            widgtextvar = "time_hhmm"
+        }
+    }
+}

scss/colors/_glass.scss

@@ -6,7 +6,9 @@
 $primary_bg: rgba(95, 95, 95, 0.404);
 $primary_text_col: #ffffff;
 
-$panel_sections_bg: rgba(110, 150, 72, 0.733);
-$panel_section_left_bg: rgba(72, 134, 150, 0.733);
-$panel_section_center_bg: rgba(150, 114, 72, 0.733);
-$panel_section_right_bg: rgba(57, 148, 95, 0.733);
+$panel_sections_bg: transparent;
+$panel_section_left_bg: transparent;
+$panel_section_center_bg: transparent;
+$panel_section_right_bg: transparent;
+
+$panel_textwidg_bg: transparent;

scss/panel/_panel.scss

@@ -1,6 +1,7 @@
 @use "../colors/glass" as *;
 @use "./panelwidgs" as *;
 @use "./panelsection" as *;
+@use "../test/test" as *;
 
 /* Top bar */
 .ewwii_panel {

scss/panel/_panelsection.scss

@@ -1,4 +1,5 @@
 @use "../colors/glass" as *;
+@use "../test/test" as *;
 
 @mixin panelsection() {
 	.panel_section {

scss/panel/_panelwidgs.scss

@@ -1,8 +1,9 @@
 @use "../colors/glass" as *;
+@use "../test/test" as *;
 
 @mixin textwidgets() {
 	.textwidg {
-		background-color: rgba(72, 150, 98, 0.733);
+		background-color: $panel_textwidg_bg;
 		padding: 0 0.2em;
 		font-size: 14px;
 		font-family: "Fragment Mono";