Define consistent background colors

project-robius · Aug 21, 2024 · 3c0f782 · 3c0f782
1 parent a92baa5
commit 3c0f782
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 16 deletions.
diff --git a/src/home/home_screen.rs b/src/home/home_screen.rs
@@ -7,16 +7,17 @@ live_design! {
 
     import crate::home::rooms_list::RoomsList;
     import crate::home::main_content::MainContent;
+    import crate::shared::styles::*;
 
     ICON_COLLAPSE = dep("crate://self/resources/icons/collapse.svg")
 
-    Spaces = <View> {c
+    Spaces = <View> {
         padding: {top: 40.}
         width: 60.
         flow: Down
         show_bg: true
         draw_bg: {
-            color: #E8
+            color: (COLOR_SECONDARY)
         }
         filler_y = <View> {
             height: Fill,
@@ -55,14 +56,24 @@ live_design! {
         }
     }
 
-    SideBar = <RoundedView> {
+    SideBar = <View> {
         padding: {top: 40., left: 20., right: 20.}
         width: 400, height: Fill
         flow: Down, spacing: 20.
         show_bg: true,
         draw_bg: {
-            radius: 2.0
-            border_color: #x0
+            instance bg_color: (COLOR_PRIMARY)
+            instance border_color: #f2f2f2
+            instance border_width: 0.003
+
+            // Draws a right-side border
+            fn pixel(self) -> vec4 {            
+                if self.pos.x > 1.0 - self.border_width {
+                    return self.border_color;
+                } else {
+                    return self.bg_color;
+                }
+            }
         }
         <View> {
             width: Fill, height: Fit
@@ -93,10 +104,6 @@ live_design! {
 
     HomeScreen = <View> {
         flow: Right
-        show_bg: true,
-        draw_bg: {
-            color: #EEEEEE,
-        }
         <Spaces> {}
         <SideBar> {}
         <MainContent> {}

diff --git a/src/home/main_content.rs b/src/home/main_content.rs
@@ -10,16 +10,16 @@ live_design! {
     import makepad_widgets::theme_desktop_dark::*;
     import makepad_draw::shader::std::*;
 
+    import crate::shared::styles::*;
     import crate::home::room_screen::RoomScreen;
     import crate::shared::search_bar::SearchBar;
 
     MainContent = {{MainContent}} {
-        padding: {top: 10.}
         width: Fill, height: Fill
-        flow: Down, spacing: 10.
+        flow: Down, 
         show_bg: true
         draw_bg: {
-            color: #E
+            color: (COLOR_PRIMARY_DARKER)
         }
         align: {x: 0.5, y: 0.5}
 

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
@@ -420,17 +420,18 @@ live_design! {
         width: Fill, height: Fill,
         show_bg: true,
         draw_bg: {
-            color: #E
+            color: (COLOR_SECONDARY)
         }
         flow: Down, spacing: 0.0
 
         tab_title = <View> {
             width: Fit, height: Fit,
             align: {x: 0.0, y: 0.5},
+            margin: {top: 10.0}
             padding: 10.
             show_bg: true
             draw_bg: {
-                color: #f
+                color: (COLOR_PRIMARY)
             }
             room_name = <Label> {
                 draw_text: {
@@ -447,7 +448,7 @@ live_design! {
             flow: Overlay,
             show_bg: true
             draw_bg: {
-                color: #f
+                color: (COLOR_PRIMARY_DARKER)
             }
 
             <KeyboardView> {
@@ -463,7 +464,7 @@ live_design! {
                     flow: Right, align: {y: 1.0}, padding: 10.
                     show_bg: true,
                     draw_bg: {
-                        color: #fff
+                        color: (COLOR_PRIMARY)
                     }
 
                     message_input = <TextInput> {

diff --git a/src/shared/styles.rs b/src/shared/styles.rs
@@ -59,4 +59,8 @@ live_design! {
     COLOR_DIVIDER_DARK = #x00000044
 
     COLOR_DANGER_RED = #xDC0005
+
+    COLOR_PRIMARY = #ffffff
+    COLOR_PRIMARY_DARKER = #fefefe
+    COLOR_SECONDARY = #eef2f4
 }