From d551241ff02fbcca48d4e5a402a8d0966c76e5f4 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Sat, 3 May 2025 18:12:13 +0530
Subject: [PATCH] style: Update styles in analysis component for improved
 consistency and appearance; adjust colors, padding, and border-radius

---
 .../components/simulation/analysis.scss       | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/app/src/styles/components/simulation/analysis.scss b/app/src/styles/components/simulation/analysis.scss
index 91bc66a..b838b0b 100644
--- a/app/src/styles/components/simulation/analysis.scss
+++ b/app/src/styles/components/simulation/analysis.scss
@@ -45,7 +45,8 @@
         .sub-header {
           font-weight: 300;
           font-size: var(--font-size-tiny);
-          color: var(--text-button-color);
+          color: var(--text-color);
+          opacity: 0.8;
         }
       }
 
@@ -97,7 +98,7 @@
 
       .metrics-section {
         padding-top: 16px;
-        border-top: 1px solid var(--background-color-gray);
+        border-top: 1px solid var(--border-color);
 
         .metric {
           display: flex;
@@ -144,7 +145,7 @@
           max-width: 200px;
           height: 100px;
           position: relative;
-          background-image: radial-gradient(#d3d3d3 1px, transparent 1px);
+          background-image: radial-gradient(#8d8d8da4 1px, transparent 1px);
           background-size: 10px 10px;
           border-radius: 8px;
 
@@ -174,8 +175,8 @@
         .footer-card {
           width: 100%;
           background: var(--background-color);
-          border-radius: 6px;
-          padding: 8px;
+          border-radius: #{$border-radius-large};
+          padding: 12px;
           display: flex;
           flex-direction: column;
           gap: 12px;
@@ -262,7 +263,8 @@
                 }
 
                 label {
-                  font-size: var(--font-size-small);
+                  font-weight: 200;
+                  font-size: var(--font-size-tiny);
                   position: relative;
                 }
 
@@ -299,6 +301,10 @@
       padding: 6px 12px;
       border: 1px solid var(--border-color);
 
+      svg {
+        scale: 0.8;
+      }
+
       .info {
         span {
           font-size: var(--font-size-xlarge);
@@ -394,7 +400,7 @@
     .cost-breakdown {
       background: var(--background-color);
       border: 1px solid var(--border-color);
-      border-radius: #{$border-radius-large};
+      border-radius: #{$border-radius-extra-large};
       max-height: 20vh;
       padding: 16px;
       overflow: auto;
@@ -407,7 +413,7 @@
 
         .section-wrapper {
           display: flex;
-          gap: 4px;
+          gap: 6px;
           align-items: center;
         }
 
@@ -458,7 +464,7 @@
 
     .tips-section {
       background: var(--background-color);
-      border-radius: #{$border-radius-large};
+      border-radius: #{$border-radius-extra-large};
       outline: 1px solid var(--border-color);
       display: flex;
       flex-direction: column;
@@ -468,7 +474,10 @@
       .tip-header {
         display: flex;
         align-items: center;
-
+        gap: 4px;
+        .lightbulb-icon{
+          @include flex-center;
+        }
         .tip-title {
           color: var(--text-color);
           font-weight: 600;
@@ -555,4 +564,4 @@
   }
 }
 
-// Breakdown Table Open/Close Logic
\ No newline at end of file
+// Breakdown Table Open/Close Logic