feat(product-card): update title color for better visibility and readability

feat(quantity-selector): change background to inherit for consistent styling
This commit is contained in:
2026-07-17 13:45:16 -03:00
parent 40cc2b840d
commit 9a4e2a03e9
4 changed files with 7 additions and 7 deletions

View File

@@ -73,4 +73,4 @@
} }
} }
} }
} }

View File

@@ -1,7 +1,7 @@
<div class="product-row-card border rounded bg-white shadow-sm d-flex justify-content-between p-3 gap-3"> <div class="product-row-card border rounded bg-white shadow-sm d-flex justify-content-between p-3 gap-3">
<!-- Left Side: Title and Description --> <!-- Left Side: Title and Description -->
<div class="product-row-card__info d-flex flex-column justify-content-center flex-grow-1"> <div class="product-row-card__info d-flex flex-column justify-content-center flex-grow-1">
<h3 class="product-row-card__title text-uppercase text-black mb-1 m-0"> <h3 class="product-row-card__title text-uppercase mb-1 m-0">
{{ title() }} {{ title() }}
</h3> </h3>
@if (description()) { @if (description()) {

View File

@@ -11,7 +11,7 @@
&__title { &__title {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #555; /* dark grey matching screenshot */ color: #666666;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }

View File

@@ -7,7 +7,7 @@
width: 78px; width: 78px;
height: 40px; height: 40px;
min-height: 40px; min-height: 40px;
background: #f6f6f6; background: inherit;
box-sizing: border-box; box-sizing: border-box;
&__button { &__button {
@@ -15,7 +15,7 @@
height: 100%; height: 100%;
font-size: 20px; font-size: 20px;
color: #6f6f6f; color: #6f6f6f;
background: #f6f6f6; background: inherit;
transition: background-color 0.2s ease, color 0.2s ease; transition: background-color 0.2s ease, color 0.2s ease;
cursor: pointer; cursor: pointer;
@@ -41,12 +41,12 @@
height: 21px; height: 21px;
min-height: 21px; min-height: 21px;
border: 1px solid #cfcfcf; border: 1px solid #cfcfcf;
background: #ffffff; background: inherit;
.quantity-selector__button { .quantity-selector__button {
width: 15px; width: 15px;
font-size: 10px; font-size: 10px;
background: #ffffff; background: inherit;
color: #666666; color: #666666;
&:not(:disabled):hover { &:not(:disabled):hover {