Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Vishnu 2025-05-02 18:16:22 +05:30
parent 44e3f5c207
commit 6a1bf7f769
5 changed files with 277 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/components/ui/analysis/ROISummary.tsx
View File

@ -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

6
app/src/styles/base/base.scss
View File

@ -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);

1
app/src/styles/base/global.scss
View File

@ -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;

67
app/src/styles/components/analysis/ROISummary.scss
View File

@ -3,6 +3,7 @@
.roiSummary-container {
.roiSummary-wrapper {
max-width: 470px;
background-color: var(--background-color);
.product-info {
@ -20,7 +21,7 @@
font-size: var(--font-size-xlarge);
&:first-child {
color: #31C756;
color: #31c756;
}
&:last-child {
@ -65,19 +66,21 @@
.metric-item {
width: 100%;
border-radius: 6px;
border: 1px solid #00FF56;
background: #17eb5d65;
border-radius: #{$border-radius-xxx};
border: 1px solid #00ff56;
background: #17eb5e42;
display: flex;
flex-direction: column;
padding: 4px 6px;
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;
@ -94,8 +97,9 @@
gap: 6px;
.metric-item {
border-radius: #{$border-radius-large};
background-color: var(--background-color);
border: 1px solid var(--Grays-Gray-6, #F2F2F7);
border: 1px solid var(--border-color);
}
}
}
@ -103,8 +107,8 @@
.cost-breakdown {
background-color: var(--background-color);
border: 1px solid var(--text-disabled);
border-radius: 8px;
border: 1px solid var(--border-color);
border-radius: #{$border-radius-extra-large};
padding: 16px;
.breakdown-header {
@ -112,7 +116,6 @@
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 16px;
.section-wrapper {
display: flex;
@ -121,7 +124,6 @@
}
.section-number {
font-size: 20px;
color: #00aaff;
}
@ -140,7 +142,6 @@
.expand-icon.open {
transform: rotate(0deg);
}
}
@ -148,41 +149,28 @@
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-top: 1px solid var(--text-disabled);
border-bottom: 1px solid var(--text-disabled);
border: 1px solid var(--border-color);
}
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;
border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 6px;
@ -201,14 +189,14 @@
.tip-description {
span {
font-size: var(--font-size-xlarge);
color: #34C759;
color: #34c759;
&:first-child {
color: #34C759;
color: #34c759;
}
&:nth-child(2) {
color: #488EF6;
color: #488ef6;
}
}
}
@ -257,8 +245,6 @@
}
}
.label-wrapper {
.label {
font-size: var(--font-size-xxxlarge);
@ -290,10 +276,6 @@
max-height: 500px;
}
.breakdown-table {
width: 100%;
border-collapse: collapse;
@ -304,8 +286,5 @@
border: 1px solid #ddd;
text-align: left;
}
}
}

7
app/src/styles/components/analysis/analysis.scss
View File

@ -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%;