Skip to content

UI: Fix incorrect cursor style on Filter options and RESET button (#436) #447

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Biswas-Samrat wants to merge 3 commits into
base: main
Choose a base branch
from
+59 −95
Open

UI: Fix incorrect cursor style on Filter options and RESET button (#436) #447

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e98f330
UI: Add pointer cursor to filter options and reset button #436
Biswas-Samrat Dec 17, 2025
140e7bf
Update: Added pointer cursor to Overview chips
Biswas-Samrat Dec 22, 2025
5deac82
refactor: use theme variable for reset-button hover color
Biswas-Samrat Dec 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 32 additions & 16 deletions src/app/pages/circular-heatmap/circular-heatmap.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.margin30 {
margin-bottom: 30px;
}

.axis path,
.axis line {
fill: none;
Expand Down Expand Up @@ -38,6 +39,7 @@
justify-items: center;
align-content: space-between;
}

#chart {
width: 100%;
max-width: min(100vh - 60px, 100vw - 60px);
Expand All @@ -46,6 +48,7 @@
.downloadButtonClass {
margin: 10px 0;
}

.overlay-details {
z-index: 2;
background-color: rgba(0, 0, 0, 0.555);
Expand All @@ -56,6 +59,7 @@
width: 60%;
min-height: 100%;
}

.overlay-modal {
/* border: 1px solid black; */
margin: 1em;
Expand Down Expand Up @@ -106,40 +110,50 @@
.filter-toggle .hidden {
display: none;
}

.team-list {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}

.team-list li {
display: grid;
grid-template-columns: minmax(100px, auto) 1fr;
gap: 16px;
align-items: center;
margin-bottom: 8px;
}

.team-label {
white-space: nowrap;
text-align: right;
font-size: smaller;
}

app-progress-slider {
width: 100%;
}

.mat-chip-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 1rem;
padding: 1rem;
}

.filter-container {
position: relative;
}

.smaller-italics {
font-size: smaller;
font-style: italic;
font-size: smaller;
font-style: italic;
}

mat-chip {
cursor: pointer;
}

button.filter-toggle {
Expand Down Expand Up @@ -175,31 +189,33 @@ button.filter-toggle {

@media only screen and (max-width: 750px) {
.heatmapClass {
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 1fr;
}

.team-filter, .heatmapChart, .footer-buttons {
grid-column: 1;

.team-filter,
.heatmapChart,
.footer-buttons {
grid-column: 1;
}

.team-filter {
grid-row: 1;
padding: 0.4rem;
grid-row: 1;
padding: 0.4rem;
}

.mat-chip-list {
padding: 0.4rem;
padding: 0.4rem;
}

.heatmapChart {
grid-row: 2;
grid-row: 2;
}

#chart {
max-width: max(60vh, 60vw);
max-width: max(60vh, 60vw);
}

.overlay-details {
width: 100%;
}
Expand Down
21 changes: 19 additions & 2 deletions src/app/pages/matrix/matrix.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,12 @@
margin-bottom: 1em;
position: relative;
}

.mat-cell-activity a.activity-title {
text-decoration: unset;
margin: 0;
}

.mat-cell-activity a::after {
content: "";
position: absolute;
Expand All @@ -49,6 +51,7 @@
width: 100%;
height: 100%;
}

.mat-cell-activity a.activity-title:link {
color: inherit;
}
Expand All @@ -57,8 +60,9 @@
display: flex;
align-items: center;
gap: 8px;

}

.mat-cell .dim-icon mat-icon {
font-size: 45px;
width: 45px;
Expand All @@ -75,6 +79,7 @@
font-style: italic;
font-size: 12px;
}

/*tag activity - light */
:host-context(body.light-theme) .tags-activity,
:host-context(body.light-theme) .tags-activity span {
Expand All @@ -89,11 +94,23 @@

.reset-button {
background-color: #66bb6a;
color: rgb(28, 28, 28);
display: block;
margin: 0 20px;
padding: 7px 12px;
border-radius: 16px;
font: 500 14px / 20px Roboto, 'Helvetica Neue', sans-serif;
cursor: pointer;
border: none;
transition: background-color 0.3s ease;
}

.reset-button:hover {
background-color: #4caf50;
Copy link
Collaborator

@vbakke vbakke Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a number of "green colours" scattered around the CSS, but let's try to reduce the numbers. Please base the colours on the var()s defined in custom-theme.scss, whenever possible.

Copy link
Author

@Biswas-Samrat Biswas-Samrat Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @vbakke Done thate

Copy link
Collaborator

@vbakke vbakke Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Biswas-Samrat: You have created a new variable that is prefixed heatmap and used it on the Matrix page.
What was wrong with `--primary-color'? I don't see any benefits with #4caf50 over #43a047. Why two?
Please try to grasp the overall context in the app as well before adding local improvements.

}

.mat-chip {
cursor: pointer;
}

.mat-mdc-row .mat-mdc-cell {
Expand Down Expand Up @@ -126,4 +143,4 @@
font-size: 16px;
color: rgba(0, 0, 0, 0.54);
padding: 24px;
}
}