Refactor chore tracker UI: Adjust button dimensions, colors, and positions for improved layout and readability

esphome/chore-tracker/chores_config.yaml

@@ -41,8 +41,8 @@ settings:
 kids:
   - name: Jordyn
     avatar: "\U000F011B"       # mdi:cat
-    color: "4D96FF"
-    color_dark: "2A6FCC"
+    color: "5F5980" # #5F5980 is a nice light blue, but it's a bit hard to read when used as a background colour for the sidebar. So I use a darker version of the same colour for the sidebar background.
+    color_dark: "2F3061" # #2F3061 is a darker version of #5F5980, and is easier to read when used as a background colour for the sidebar.
     chores:
       - name: Put on underwear
         icon: "\U000F02E3"     # mdi:bed
@@ -55,8 +55,8 @@ kids:
 
   - name: Declan
     avatar: "\U000F1477"       # mdi:wizard-hat
-    color: "C77DFF"
-    color_dark: "8B42CC"
+    color: "720026" # #720026 is a deep red, used for the kid's sidebar background.
+    color_dark: "4F000B" # #4F000B is a darker version of #720026, easier to read when used as a background colour for the sidebar.
     chores:
       - name: Take morning pill
         icon: "\U000F0402"     # mdi:pill
@@ -65,8 +65,8 @@ kids:
 
   - name: Chloe
     avatar: "\U000F16A3"       # mdi:robot-excited
-    color: "FF6B9D"
-    color_dark: "CC3A6F"
+    color: "73683B" # #73683B is a light brown, used for the kid's sidebar background.
+    color_dark: "583E23" # #583E23 is a darker version of #73683B, easier to read when used as a background colour for the sidebar.
     chores:
       - name: Fill kitty feeders
         icon: "\U000F02A9"     # mdi:bowl-outline