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

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

@ -37,11 +37,9 @@
// old colors // old colors
--accent-color: #{$accent-color}; --accent-color: #{$accent-color};
--highlight-accent-color: #{$highlight-accent-color};
--accent-gradient-color: #{$acent-gradient}; --accent-gradient-color: #{$acent-gradient};
--faint-gradient-color: #{$faint-gradient}; --faint-gradient-color: #{$faint-gradient};
--background-color-gray: #{$background-color-gray}; --background-color-gray: #{$background-color-gray};
--border-color: #{$border-color};
--shadow-main-light: #{$shadow-color}; --shadow-main-light: #{$shadow-color};
--box-shadow-light: 0px 2px 4px var(--shadow-main-light); --box-shadow-light: 0px 2px 4px var(--shadow-main-light);
--box-shadow-medium: 0px 4px 8px 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}; --background-radial-gray-gradient: #{$background-radial-gray-gradient-dark};
// border colors // border colors
--border-color: #{$border-color}; --border-color: #{$border-color-dark};
--input-border-color: #{$input-border-color-dark}; --input-border-color: #{$input-border-color-dark};
--border-color-accent: #{$border-color-accent-dark}; --border-color-accent: #{$border-color-accent-dark};
@ -89,11 +87,9 @@
// old colors // old colors
--accent-color: #{$accent-color-dark}; --accent-color: #{$accent-color-dark};
--highlight-accent-color: #{$highlight-accent-color-dark};
--accent-gradient-color: #{$acent-gradient-dark}; --accent-gradient-color: #{$acent-gradient-dark};
--faint-gradient-color: #{$faint-gradient-dark}; --faint-gradient-color: #{$faint-gradient-dark};
--background-color-gray: #{$background-color-gray-dark}; --background-color-gray: #{$background-color-gray-dark};
--border-color: #{$border-color-dark};
--shadow-main-dark: #{$shadow-color}; --shadow-main-dark: #{$shadow-color};
--box-shadow-light: 0px 2px 4px var(--shadow-main-dark); --box-shadow-light: 0px 2px 4px var(--shadow-main-dark);
--box-shadow-medium: 0px 4px 8px 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%); transform: translate(0, -50%);
transition: all 0.2s; transition: all 0.2s;
box-shadow: $box-shadow-medium; box-shadow: $box-shadow-medium;
background: var(--background-color-solid);
canvas { canvas {
outline: none; outline: none;
border: none; border: none;

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

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

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

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