Selectable List in place

website/src/ui/style.js

@@ -6,9 +6,11 @@ let colorInfo = {
   grayText: '#B0B0B0',
   buttonBackground: '#3498DB',
   buttonBackgroundHover: '#3CB0FD',
+  buttonBackgroundActive: '#1A72AC',
   headerButtonBackground: '#FAFAFA',
   headerButtonBackgroundHover: '#DADADA',
   headerButtonBackgroundActive: '#AAAAAA',
+  headerBorder: '#B2B2B2',
   disabledButtonBackground: '#E0E0E0',
   modalBackground: '#FFFFFF',
   uncheckedCheckbox: '#A0A0A0',
@@ -20,6 +22,10 @@ Object.assign(colorInfo, {
   panelButtonBackgroundHover: colorInfo.headerButtonBackgroundHover,
   panelButtonBackgroundActive: colorInfo.headerButtonBackgroundActive,
   disabledPanelButtonBackground: colorInfo.disabledButtonBackground,
+  listBackground: '#FFFFFF',
+  listBackgroundHover: colorInfo.headerButtonBackgroundHover,
+  listBackgroundActive: '#E7E5E5',
+  listBorder: colorInfo.headerBorder,
 })
 
 const sizeInfo = {
@@ -27,12 +33,15 @@ const sizeInfo = {
   imageMargin: 5, // The margin around images
   iconMargin: 10, // The margin around icons
   headerBorderWidth: 1,
+  listBorderWidth: 1,
   buttonHeight: 40,
   minButtonWidth: 100,
   checkboxSize: 25,
   panelButtonSize: 200,
   panelIconSize: 170,
-  panelTextOffset: 130,
+  panelTextOffset: 120,
+  formBoxRadius: 5,
+  listTopBottomGap: 10,
 }
 
 const fontInfo = {