Update my_pages/information_loss.py

my_pages/information_loss.py

@@ -3,10 +3,10 @@ import streamlit as st
 from utils import add_navigation, add_instruction_text
 
 ALL_FEATURES = [
-    ("Liquid Assets", "Liquid Assets", None), 
+    ("Liquid Assets", "Liquid Assets", "Added"), 
     ("Illiquid Assets", "Property appraisals, Insurance valuations, etc.", 
      "Sorry, it is not possible to get the precise value of illiquid assets. We will use some approximate alternatives instead."),
-    ("Current Debts", "Current Debts", None),
+    ("Current Debts", "Current Debts", "Added"),
     ("Income Stability", "Past Income Stability",
      "Sorry, it is not possible to know precisely how stable someone's income will be in future. Until someone invents a time machine (we're hopeful!), we will instead use past income stability."),
     ("Health Trajectory", "Current Health Indicators", 
@@ -26,54 +26,50 @@ def render():
         """
     )
     
-    st.markdown(
-        """
-        <style>
-        button[kind="primary"] {
-            background: green!important;
-        }
-        </style>
-        """,
-        unsafe_allow_html=True,
-    )
-
-    # Session state init
-    # if "available_features" not in st.session_state:
-    #     st.session_state.available_features = ALL_FEATURES.copy()
+    #### Setup Button Colors and Theme
+    sec_bg = st.get_option("theme.secondaryBackgroundColor")
+    text = st.get_option("theme.textColor")
+    
+    css = f"""
+    <style>
+    button[kind="tertiary"] {{
+        background-color: {sec_bg} !important;
+        color: {text} !important;
+        border: 1px solid {sec_bg} !important;
+        opacity: 0.2 !important;       /* faded look */
+        cursor: not-allowed !important;  /* shows it's inactive */
+        pointer-events: none !important; /* disable clicking */
+    }}
+    </style>
+    """
+    st.markdown(css, unsafe_allow_html=True)
 
+    
+    #### Add the icon and buttons at the top
     if "selected_features" not in st.session_state:
         st.session_state.selected_features = []
 
-    # Top left: applicant image
-    top_left, top_right = st.columns([1, 1])
+    cols_list = st.columns([1, 1, 1, 1])
 
-    with top_left:
+    with cols_list[0]:
         st.image(
             "loan.png",
             width=100,
         )
 
-    # Top right: simple clickable list of features
-    with top_right:
-        st.markdown("**All Features**")
-        for feature in ALL_FEATURES.copy():
+    for ite, feature in enumerate(ALL_FEATURES.copy()):
+        with cols_list[ite%3 + 1]:
             if feature in st.session_state.selected_features:
-                feature_name = feature[1]
-                if feature[2] is None:
-                    _ = st.button(feature_name, type="primary")
-                else:
-                    _ = st.button(feature_name, type="tertiary")
+                _ = st.button(feature[0], type="tertiary")
             else:
-                feature_name = feature[0]
-                if st.button(feature_name):
+                if st.button(feature[0]):
                     st.session_state.selected_features.append(feature)
-                    if feature[2] is not None:
-                        st.session_state.show_message = (feature[2])
+                    st.session_state.show_message = feature[2]
                     st.rerun()
 
     if "show_message" in st.session_state:
         st.markdown(
-            f"<div style='text-align:center; color:#c0392b; font-size:20px; font-weight:bold; margin:14px 0;'>{st.session_state.show_message}</div>",
+            f"<div style='text-align:center; color:#c0392b; font-size:20px; margin:14px 0;'>{st.session_state.show_message}</div>",
             unsafe_allow_html=True,
         )
         del st.session_state.show_message