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

refactor: Clean up LogList component by removing unused TickIcon; enhance footer and logs styles for better layout and readability

This commit is contained in:
Vishnu 2025-05-02 18:31:00 +05:30
parent 0f41f3f845
commit 78c228aba6
4 changed files with 155 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/components/ui/log/LogList.tsx
View File

@ -69,9 +69,6 @@ const LogList: React.FC = () => {
<div className="log-entry-wrapper">
{filteredLogs.map((log) => (
<div key={log.id} className={`log-entry ${log.type}`}>
<div className="tick">
<TickIcon />
</div>
<div className="log-icon">{getLogIcon(log.type)}</div>
<div className="log-entry-message">
[{formatTimestamp(log.timestamp)}] [{log.type.toUpperCase()}]{" "}

27
app/src/styles/abstracts/variables.scss
View File

@ -22,7 +22,11 @@ $text-button-color-dark: #f3f3fd;
// background colors
// ---------- light mode ----------
$background-color: linear-gradient(-45deg, #fcfdfd71 0%, #fcfdfd79 100%);
$background-color-solid-gradient: linear-gradient(-45deg, #fcfdfd 0%, #fcfdfd 100%);
$background-color-solid-gradient: linear-gradient(
-45deg,
#fcfdfd 0%,
#fcfdfd 100%
);
$background-color-solid: #fcfdfd;
$background-color-secondary: #fcfdfd4d;
$background-color-accent: #6f42c1;
@ -45,7 +49,11 @@ $background-radial-gray-gradient: radial-gradient(
// ---------- dark mode ----------
$background-color-dark: linear-gradient(-45deg, #333333b3 0%, #2d2437b3 100%);
$background-color-solid-gradient-dark: linear-gradient(-45deg, #333333 0%, #2d2437 100%);
$background-color-solid-gradient-dark: linear-gradient(
-45deg,
#333333 0%,
#2d2437 100%
);
$background-color-solid-dark: #19191d;
$background-color-secondary-dark: #19191d99;
$background-color-accent-dark: #6f42c1;
@ -104,6 +112,21 @@ $color3: #b186ff;
$color4: #8752e8;
$color5: #c7a8ff;
// log indication colors
// ------------ text -------------
$log-default-text-color: #6f42c1;
$log-info-text-color: #488ef6;
$log-warn-text-color: #f3a50c;
$log-error-text-color: #f65648;
$log-success-text-color: #43c06d;
// ------------ background -------------
$log-default-backgroung-color: #6e42c133;
$log-info-background-color: #488ef633;
$log-warn-background-color: #f3a50c33;
$log-error-background-color: #f6564833;
$log-success-background-color: #43c06d33;
// old variables
$accent-color: #6f42c1;
$accent-color-dark: #c4abf1;

106
app/src/styles/components/footer/footer.scss
View File

@ -1,57 +1,67 @@
@use "../../abstracts/variables" as *;
@use "../../abstracts/mixins" as *;
.footer-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1;
display: flex;
justify-content: space-between;
padding: 2px 12px;
.selection-wrapper {
display: flex;
justify-content: space-between;
padding: 12px 24px;
gap: 6px;
.selection-wrapper {
display: flex;
gap: 6px;
.selector-wrapper {
display: flex;
gap: 6px;
align-items: center;
background: var(--background-color);
padding: 3px 6px;
border-radius: 12px;
color: var(--text-color);
.selector-wrapper {
display: flex;
gap: 6px;
align-items: center;
background: var(--background-color);
padding: 3px 6px;
border-radius: 12px;
color: var(--text-color);
.selector {
color: var(--text-color);
}
}
}
.selector {
color: var(--text-color);
}
}
.logs-wrapper {
display: flex;
gap: 6px;
.logs-detail,
.version {
border-radius: 12px;
background: var(--background-color);
padding: 3px 6px;
color: var(--text-color);
display: flex;
align-items: center;
gap: 6px;
}
.logs-wrapper {
display: flex;
gap: 6px;
.logs-detail,
.version {
border-radius: 12px;
background: var(--background-color);
padding: 3px 6px;
color: var(--text-color);
display: flex;
align-items: center;
gap: 6px;
}
.logs-detail {
// background-color: #fff;
cursor: pointer;
}
.version {
display: flex;
gap: 6px;
}
.logs-detail {
padding: 2px 12px;
cursor: pointer;
.log-icon {
@include flex-center;
}
.log-message {
max-width: 40vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.version {
display: flex;
gap: 6px;
}
}
}

141
app/src/styles/components/logs/logs.scss
View File

@ -1,77 +1,76 @@
.log-list-container {
width: 100vw;
height: 100vh;
// background: var(--background-color-secondary);
// backdrop-filter: blur(2px);
width: 100vw;
height: 100vh;
// background: var(--background-color-secondary);
// backdrop-filter: blur(2px);
.log-list-wrapper {
height: 50%;
min-width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
background: var(--background-color);
padding: 14px 12px;
border-radius: 15px;
.log-list-wrapper {
height: 50%;
min-width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
background: var(--background-color);
padding: 14px 12px;
border-radius: 15px;
display: flex;
flex-direction: column;
gap: 12px;
backdrop-filter: blur(50px);
.log-header {
display: flex;
justify-content: space-between;
.log-header-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
backdrop-filter: blur(50px);
align-items: center;
gap: 6px;
}
.log-header {
display: flex;
justify-content: space-between;
.log-header-wrapper {
display: flex;
align-items: center;
gap: 6px;
}
.close {
// transform: scale(1.5);
cursor: pointer;
}
}
.log-nav-wrapper {
display: flex;
gap: 6px;
.log-nav {
padding: 8px 16px;
border-radius: 19px;
}
.log-nav.active {
background-color: var(--accent-color);
color: var(--text-button-color);
}
}
.log-entry-wrapper {
height: 100%;
display: flex;
flex-direction: column;
gap: 4px;
background: var(--background-color);
padding: 18px 10px;
border-radius: 16px;
.log-entry {
padding: 4px;
border-radius: 4px;
font-size: var(--font-size-small);
display: flex;
align-items: center;
gap: 6px;
&:nth-child(odd) {
background: var(--background-color);
}
}
}
.close {
cursor: pointer;
}
}
.log-nav-wrapper {
display: flex;
gap: 6px;
.log-nav {
padding: 8px 16px;
border-radius: 19px;
}
.log-nav.active {
background-color: var(--background-color-accent);
color: var(--text-button-color);
}
}
.log-entry-wrapper {
height: 100%;
display: flex;
flex-direction: column;
gap: 4px;
background: var(--background-color);
padding: 18px 10px;
border-radius: 16px;
.log-entry {
padding: 4px;
border-radius: 4px;
font-size: var(--font-size-small);
display: flex;
align-items: center;
gap: 6px;
&:nth-child(odd) {
background: var(--background-color);
}
}
}
}
}