refactor: Update ROISummary component to use ArrowIcon for expand functionality; enhance styles in ROISummary, global, and analysis components for improved layout and responsiveness

app/src/components/ui/analysis/ROISummary.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { ROISummaryIcon } from "../../icons/analysis";
 import SemiCircleProgress from "./SemiCircleProgress";
+import { ArrowIcon } from "../../icons/ExportCommonIcons";
 
 const ROISummary = ({
   roiSummaryData = {
@@ -121,7 +122,7 @@ const ROISummary = ({
             </div>
 
             <span className={`expand-icon ${isTableOpen ? "open" : ""}`}>
-              {isTableOpen ? "⌵" : "⌵"}
+              <ArrowIcon />
             </span>
           </div>
           <div

app/src/styles/base/base.scss

@@ -37,11 +37,9 @@
 
   // old colors
   --accent-color: #{$accent-color};
-  --highlight-accent-color: #{$highlight-accent-color};
   --accent-gradient-color: #{$acent-gradient};
   --faint-gradient-color: #{$faint-gradient};
   --background-color-gray: #{$background-color-gray};
-  --border-color: #{$border-color};
   --shadow-main-light: #{$shadow-color};
   --box-shadow-light: 0px 2px 4px var(--shadow-main-light);
   --box-shadow-medium: 0px 4px 8px var(--shadow-main-light);
@@ -75,7 +73,7 @@
   --background-radial-gray-gradient: #{$background-radial-gray-gradient-dark};
 
   // border colors
-  --border-color: #{$border-color};
+  --border-color: #{$border-color-dark};
   --input-border-color: #{$input-border-color-dark};
   --border-color-accent: #{$border-color-accent-dark};
 
@@ -89,11 +87,9 @@
 
   // old colors
   --accent-color: #{$accent-color-dark};
-  --highlight-accent-color: #{$highlight-accent-color-dark};
   --accent-gradient-color: #{$acent-gradient-dark};
   --faint-gradient-color: #{$faint-gradient-dark};
   --background-color-gray: #{$background-color-gray-dark};
-  --border-color: #{$border-color-dark};
   --shadow-main-dark: #{$shadow-color};
   --box-shadow-light: 0px 2px 4px var(--shadow-main-dark);
   --box-shadow-medium: 0px 4px 8px var(--shadow-main-dark);

app/src/styles/base/global.scss

@@ -22,6 +22,7 @@ section,
   transform: translate(0, -50%);
   transition: all 0.2s;
   box-shadow: $box-shadow-medium;
+  background: var(--background-color-solid);
   canvas {
     outline: none;
     border: none;

app/src/styles/components/analysis/ROISummary.scss

@@ -2,310 +2,289 @@
 @use "../../abstracts/mixins" as *;
 
 .roiSummary-container {
-    .roiSummary-wrapper {
+  .roiSummary-wrapper {
-        background-color: var(--background-color);
+    max-width: 470px;
+    background-color: var(--background-color);
 
-        .product-info {
+    .product-info {
-            display: flex;
+      display: flex;
-        }
-
-        .playBack {
-            display: flex;
-            background-color: var(--background-color);
-            border-radius: 12px;
-            padding: 6px;
-
-            .info {
-                span {
-                    font-size: var(--font-size-xlarge);
-
-                    &:first-child {
-                        color: #31C756;
-                    }
-
-                    &:last-child {
-                        color: var(--text-color);
-                    }
-                }
-            }
-        }
-
-        .roi-details {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-
-            .progress-wrapper {
-                width: 250px;
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-
-                .content {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 3px;
-                    align-items: center;
-
-                    .key {
-                        font-size: var(--font-size-xlarge);
-                        color: var(--accent-color);
-                    }
-                }
-            }
-
-            .roi-progress {
-                width: 100%;
-            }
-
-            .metrics {
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-
-                .metric-item {
-                    width: 100%;
-                    border-radius: 6px;
-                    border: 1px solid #00FF56;
-                    background: #17eb5d65;
-                    display: flex;
-                    flex-direction: column;
-                    padding: 4px 6px;
-
-                    &:last-child {
-                        align-items: center;
-                    }
-
-                    .metric-label {
-                        font-size: 10px;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                    }
-
-                    .metric-value {
-                        text-align: center;
-                        line-height: 20px;
-                    }
-                }
-
-                .metric-wrapper {
-                    display: flex;
-                    gap: 6px;
-
-                    .metric-item {
-                        background-color: var(--background-color);
-                        border: 1px solid var(--Grays-Gray-6, #F2F2F7);
-                    }
-                }
-            }
-        }
-
-        .cost-breakdown {
-            background-color: var(--background-color);
-            border: 1px solid var(--text-disabled);
-            border-radius: 8px;
-            padding: 16px;
-
-            .breakdown-header {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                gap: 8px;
-                margin-bottom: 16px;
-
-                .section-wrapper {
-                    display: flex;
-                    gap: 4px;
-                    align-items: center;
-                }
-
-                .section-number {
-                    font-size: 20px;
-                    color: #00aaff;
-                }
-
-                .section-title {
-                    font-size: var(--font-size-regular);
-                    color: var(--text-color);
-                }
-
-                .expand-icon {
-                    font-size: 16px;
-                    color: var(--text-color);
-                    cursor: pointer;
-                    transform: rotate(90deg);
-                    transition: transform 0.2s linear;
-                }
-
-                .expand-icon.open {
-                    transform: rotate(0deg);
-
-                }
-            }
-
-            .breakdown-table {
-                width: 100%;
-                border-collapse: collapse;
-                border-radius: 8px;
-
-                th,
-                td {
-                    padding: 8px;
-                    text-align: left;
-                    border-top: 1px solid var(--text-disabled);
-                    border-bottom: 1px solid var(--text-disabled);
-                }
-
-                th:first-child,
-                td:first-child {
-                    border-left: 1px solid var(--text-disabled);
-                }
-
-                th:last-child,
-                td:last-child {
-                    border-right: 1px solid var(--text-disabled);
-                }
-
-                th {
-                    background-color: var(--background-color);
-                    color: #333;
-                }
-
-                .total-row,
-                .net-profit-row {
-                    font-weight: bold;
-                    color: #333;
-                }
-            }
-        }
-
-        .tips-section {
-            background-color: var(--background-color);
-            border-radius: 8px;
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            padding: 12px;
-
-            .tip-header {
-                display: flex;
-                align-items: center;
-
-                .tip-title {
-                    color: var(--text-color);
-                    font-weight: 600;
-                }
-            }
-
-            .tip-description {
-                span {
-                    font-size: var(--font-size-xlarge);
-                    color: #34C759;
-
-                    &:first-child {
-                        color: #34C759;
-                    }
-
-                    &:nth-child(2) {
-                        color: #488EF6;
-                    }
-                }
-            }
-        }
-
-        .get-tips-button {
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 14px;
-            margin-top: 8px;
-            display: inline-block;
-            display: flex;
-            justify-content: flex-end;
-            background: none;
-
-            .btn {
-                color: var(--text-button-color);
-                background: var(--background-color-button);
-                padding: 4px 12px;
-                border-radius: #{$border-radius-large};
-                display: inline-block;
-                text-align: center;
-            }
-        }
     }
 
-    .semi-circle-wrapper {
+    .playBack {
-        width: 100%;
+      display: flex;
-        height: 125px;
+      background-color: var(--background-color);
-        overflow-y: hidden;
+      border-radius: 12px;
-        position: relative;
+      padding: 6px;
-        .semi-circle {
+
-            width: 100%;
+      .info {
-            height: 250px;
+        span {
-            border-radius: 50%;
+          font-size: var(--font-size-xlarge);
-            position: relative;
+
-        }
+          &:first-child {
-        .progress-cover {
+            color: #31c756;
-            position: absolute;
+          }
-            width: 75%;
+
-            height: 75%;
+          &:last-child {
-            top: 12.5%;
+            color: var(--text-color);
-            left: 12.5%;
+          }
-            border-radius: 50%;
         }
+      }
     }
 
+    .roi-details {
+      display: flex;
+      align-items: center;
+      gap: 12px;
 
-
+      .progress-wrapper {
-    .label-wrapper {
+        width: 250px;
-        .label {
-            font-size: var(--font-size-xxxlarge);
-        }
-
-        position: absolute;
-        bottom: 0%;
-        left: 50%;
-        transform: translate(-50%, 0%);
-        font-weight: bold;
-        font-size: 1.2rem;
-        color: #333;
         display: flex;
-        justify-content: center;
-        align-items: center;
         flex-direction: column;
+        gap: 6px;
+
+        .content {
+          display: flex;
+          flex-direction: column;
+          gap: 3px;
+          align-items: center;
+
+          .key {
+            font-size: var(--font-size-xlarge);
+            color: var(--accent-color);
+          }
+        }
+      }
+
+      .roi-progress {
+        width: 100%;
+      }
+
+      .metrics {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+
+        .metric-item {
+          width: 100%;
+          border-radius: #{$border-radius-xxx};
+          border: 1px solid #00ff56;
+          background: #17eb5e42;
+          display: flex;
+          flex-direction: column;
+          padding: 4px 8px;
+
+          &:last-child {
+            align-items: center;
+          }
+
+          .metric-label {
+            opacity: 0.8;
+            font-size: 10px;
+            font-weight: 300;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .metric-value {
+            text-align: center;
+            line-height: 20px;
+          }
+        }
+
+        .metric-wrapper {
+          display: flex;
+          gap: 6px;
+
+          .metric-item {
+            border-radius: #{$border-radius-large};
+            background-color: var(--background-color);
+            border: 1px solid var(--border-color);
+          }
+        }
+      }
     }
+
+    .cost-breakdown {
+      background-color: var(--background-color);
+      border: 1px solid var(--border-color);
+      border-radius: #{$border-radius-extra-large};
+      padding: 16px;
+
+      .breakdown-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+
+        .section-wrapper {
+          display: flex;
+          gap: 4px;
+          align-items: center;
+        }
+
+        .section-number {
+          color: #00aaff;
+        }
+
+        .section-title {
+          font-size: var(--font-size-regular);
+          color: var(--text-color);
+        }
+
+        .expand-icon {
+          font-size: 16px;
+          color: var(--text-color);
+          cursor: pointer;
+          transform: rotate(90deg);
+          transition: transform 0.2s linear;
+        }
+
+        .expand-icon.open {
+          transform: rotate(0deg);
+        }
+      }
+
+      .breakdown-table {
+        width: 100%;
+        border-collapse: collapse;
+        border-radius: 8px;
+        overflow: hidden;
+        outline: 1px solid var(--border-color);
+        outline-offset: -1px;
+        margin-top: 12px;
+
+        th,
+        td {
+          color: var(--text-color);
+          padding: 8px;
+          text-align: left;
+          border: 1px solid var(--border-color);
+        }
+        th {
+          background-color: var(--background-color);
+        }
+      }
+    }
+
+    .tips-section {
+      background-color: var(--background-color);
+      border-radius: #{$border-radius-large};
+      outline: 1px solid var(--border-color);
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 12px;
+
+      .tip-header {
+        display: flex;
+        align-items: center;
+
+        .tip-title {
+          color: var(--text-color);
+          font-weight: 600;
+        }
+      }
+
+      .tip-description {
+        span {
+          font-size: var(--font-size-xlarge);
+          color: #34c759;
+
+          &:first-child {
+            color: #34c759;
+          }
+
+          &:nth-child(2) {
+            color: #488ef6;
+          }
+        }
+      }
+    }
+
+    .get-tips-button {
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 14px;
+      margin-top: 8px;
+      display: inline-block;
+      display: flex;
+      justify-content: flex-end;
+      background: none;
+
+      .btn {
+        color: var(--text-button-color);
+        background: var(--background-color-button);
+        padding: 4px 12px;
+        border-radius: #{$border-radius-large};
+        display: inline-block;
+        text-align: center;
+      }
+    }
+  }
+
+  .semi-circle-wrapper {
+    width: 100%;
+    height: 125px;
+    overflow-y: hidden;
+    position: relative;
+    .semi-circle {
+      width: 100%;
+      height: 250px;
+      border-radius: 50%;
+      position: relative;
+    }
+    .progress-cover {
+      position: absolute;
+      width: 75%;
+      height: 75%;
+      top: 12.5%;
+      left: 12.5%;
+      border-radius: 50%;
+    }
+  }
+
+  .label-wrapper {
+    .label {
+      font-size: var(--font-size-xxxlarge);
+    }
+
+    position: absolute;
+    bottom: 0%;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    font-weight: bold;
+    font-size: 1.2rem;
+    color: #333;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
 }
 
 // Breakdown Table Open/Close Logic
 
 .breakdown-table-wrapper {
-    &.closed {
+  &.closed {
-        max-height: 0;
+    max-height: 0;
-        padding: 0;
+    padding: 0;
-    }
+  }
-
+
-    &.open {
+  &.open {
-        max-height: 500px;
+    max-height: 500px;
-    }
+  }
-
+
-
+  .breakdown-table {
-
+    width: 100%;
-
+    border-collapse: collapse;
-
+
-    .breakdown-table {
+    th,
-        width: 100%;
+    td {
-        border-collapse: collapse;
+      padding: 10px;
-
+      border: 1px solid #ddd;
-        th,
+      text-align: left;
-        td {
-            padding: 10px;
-            border: 1px solid #ddd;
-            text-align: left;
-        }
-
-
-
     }
+  }
 }

app/src/styles/components/analysis/analysis.scss

@@ -18,12 +18,8 @@
   }
   .analysis-card {
     min-width: 333px;
-    background: var(--background-color);
     border-radius: 20px;
     padding: 8px;
-    backdrop-filter: blur(10px);
-    outline: 1px solid var(--border-color);
-    outline-offset: -1px;
     pointer-events: all;
 
     .analysis-card-wrapper {
@@ -34,6 +30,9 @@
       display: flex;
       flex-direction: column;
       gap: 14px;
+      backdrop-filter: blur(10px);
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
 
       .card-header {
         width: 100%;