diff --git a/src/components/home/HealthScoreModal/HealthScoreModal.css b/src/components/home/HealthScoreModal/HealthScoreModal.css index 9dded73..33c9197 100644 --- a/src/components/home/HealthScoreModal/HealthScoreModal.css +++ b/src/components/home/HealthScoreModal/HealthScoreModal.css @@ -451,9 +451,60 @@ color: white; } -.rule-desc-group p { - margin: 0; - font-size: 0.875rem; - color: var(--health-text-sub); +margin: 0; +font-size: 0.875rem; +color: var(--health-text-sub); +line-height: 1.5; +} + +/* AI Advice & Tips Styling */ +.tip-item { + margin-bottom: 0.75rem; + font-size: 0.9rem; + color: rgba(255, 255, 255, 0.9); line-height: 1.5; + padding-left: 0.5rem; + border-left: 2px solid rgba(255, 255, 255, 0.2); +} + +.ai-advice-container { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.ai-advice-box { + background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent); + border-left: 3px solid #60a5fa; + padding: 1rem; + border-radius: 0 12px 12px 0; + font-size: 0.9rem; + line-height: 1.6; + color: #93c5fd; + position: relative; +} + +.ai-advice-icon { + position: absolute; + top: 1rem; + left: 1rem; + color: #60a5fa; +} + +.ai-advice-text { + display: block; + margin-left: 0; + /* Adjusted layout */ + text-align: justify; +} + +.ai-loading { + margin-top: 1rem; + font-size: 0.85rem; + opacity: 0.7; + font-style: italic; + display: flex; + align-items: center; + gap: 8px; + padding-left: 0.5rem; } \ No newline at end of file diff --git a/src/components/home/HealthScoreModal/HealthScoreModal.tsx b/src/components/home/HealthScoreModal/HealthScoreModal.tsx index 3c8f3a9..d903648 100644 --- a/src/components/home/HealthScoreModal/HealthScoreModal.tsx +++ b/src/components/home/HealthScoreModal/HealthScoreModal.tsx @@ -85,7 +85,7 @@ export const HealthScoreModal: React.FC = ({ setShowRules(false); // Reset view on close } return () => { isMounted = false; }; - }, [isOpen, aiAdvice, loadingAdvice, score, totalAssets, totalLiabilities, metrics, tips]); + }, [isOpen, score, totalAssets, totalLiabilities, metrics, tips]); if (!isOpen) return null;