lesson css try

phase/Student_view/lesson.py

@@ -273,14 +273,12 @@ def _render_catalog():
         margin-bottom: 1rem;
         height: 100%;
     }
-    
     .card-header {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         margin-bottom: 1rem;
     }
-    
     .level-badge {
         background: #f8f9fa;
         color: #6c757d;
@@ -289,26 +287,18 @@ def _render_catalog():
         font-size: 0.875rem;
         font-weight: 500;
     }
-    
-    .card-icon {
-        font-size: 1.5rem;
-        color: #28a745;
-    }
-    
     .card-title {
         font-size: 1.25rem;
         font-weight: 600;
         color: #212529;
         margin: 0.5rem 0;
     }
-    
     .card-description {
         color: #6c757d;
         font-size: 0.95rem;
         line-height: 1.4;
         margin-bottom: 1rem;
     }
-    
     .card-meta {
         display: flex;
         justify-content: space-between;
@@ -317,17 +307,14 @@ def _render_catalog():
         color: #6c757d;
         font-size: 0.875rem;
     }
-    
     .meta-item {
         display: flex;
         align-items: center;
         gap: 0.25rem;
     }
-    
     .learn-section {
         margin: 1rem 0;
     }
-    
     .learn-title {
         font-size: 0.75rem;
         font-weight: 600;
@@ -336,96 +323,92 @@ def _render_catalog():
         letter-spacing: 0.5px;
         margin-bottom: 0.5rem;
     }
-    
     .learn-item {
         color: #28a745;
         font-size: 0.9rem;
         margin-bottom: 0.25rem;
     }
-    
-    .primary-button {
-        background: #28a745 !important;
-        color: white !important;
+    .primary-button, .secondary-button {
+        width: 100% !important;
         border: none !important;
         border-radius: 6px !important;
         padding: 0.75rem 1.5rem !important;
         font-weight: 500 !important;
-        width: 100% !important;
         margin-top: 1rem !important;
     }
-    
+    .primary-button {
+        background: #28a745 !important;
+        color: white !important;
+    }
     .secondary-button {
         background: #f8f9fa !important;
         color: #495057 !important;
         border: 1px solid #dee2e6 !important;
-        border-radius: 6px !important;
-        padding: 0.75rem 1.5rem !important;
-        font-weight: 500 !important;
-        width: 100% !important;
-        margin-top: 1rem !important;
     }
     </style>
     """, unsafe_allow_html=True)
 
     level = st.session_state.get("level", "beginner")
     
-    # Create columns for cards
     cols = st.columns(2, gap="large")
     
     for i, mod in enumerate(MODULES_META[level]):
         with cols[i % 2]:
-            # Create card container
             with st.container():
                 st.markdown(f"""
                 <div class="card">
                     <div class="card-header">
                         <span class="level-badge">{mod['difficulty']}</span>
-                        <span class="card-icon">{mod['icon']}</span>
                     </div>
-                    
                     <h3 class="card-title">{mod['title']}</h3>
                     <p class="card-description">{mod['description']}</p>
-                    
                     <div class="card-meta">
-                        <div class="meta-item">
-                            <span>🕒</span>
-                            <span>{mod['duration']}</span>
-                        </div>
-                
+                        <div class="meta-item">🕒 {mod['duration']}</div>
+                        <div class="meta-item">👥 {2500 - i * 350}</div>
                     </div>
-                    
                     <div class="learn-section">
-                        <div class="learn-title">YOU'LL LEARN</div>
+                        <div class="learn-title">You'll Learn</div>
                 """, unsafe_allow_html=True)
-                
-                # Add learning objectives
-                for topic in mod['topics']:
+
+                for topic in mod['topics'][:2]:
                     st.markdown(f'<div class="learn-item">• {topic}</div>', unsafe_allow_html=True)
-                
+
                 st.markdown("</div>", unsafe_allow_html=True)
-                
-                # Keep the expander as requested
+
                 with st.expander("📋 All Topics"):
                     for topic in mod['topics']:
                         st.write(f"• {topic}")
+
+                # Dynamic button styling based on completion
+                is_completed = mod.get("completed", False)
+                btn_label = "Review Module →" if is_completed else "Start Learning →"
+                btn_style = "secondary-button" if is_completed else "primary-button"
+
+                # Create unique key
+                btn_key = f"start_{level}_{mod['id']}"
                 
-                # Action button
-                button_class = mod.get('button_style', 'primary')
-                button_text = "Start Learning" if button_class == 'primary' else "Review Module"
-                
-                if st.button(
-                    f"{button_text} →", 
-                    key=f"start_{level}_{mod['id']}",
-                    help=f"Begin the {mod['title']} module"
-                ):
-                    # Your existing button logic here
+                # Render button with custom style
+                st.markdown(f"""
+                <form action="#">
+                    <button class="{btn_style}" type="submit">{btn_label}</button>
+                </form>
+                """, unsafe_allow_html=True)
+
+                # Actual hidden Streamlit button to handle clicks
+                if st.button("", key=btn_key, help=f"Go to {mod['title']}"):
+                    st.session_state.topics_cache.pop((level, mod["id"]), None)
+                    try:
+                        st.cache_data.clear()
+                    except Exception:
+                        pass
                     st.session_state.module_id = mod["id"]
                     st.session_state.topic_idx = 0
                     st.session_state.mode = "lesson"
                     st.rerun()
-                
+
                 st.markdown("</div>", unsafe_allow_html=True)
 
+
 def _get_topics(level: str, module_id: int) -> List[Tuple[str, str]]:
     """
     Build the six-topic plan from metadata titles, try backend for each,