Skip to content

task: Clean-up .card mixin #102

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

Merged
ianpaschal merged 1 commit into from
Jun 30, 2025
Merged

task: Clean-up .card mixin #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 1 addition & 4 deletions src/components/AccountMenu/AccountMenu.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,11 @@

.Content {
@include flex.column($gap: 0.25rem);
@include variants.card($elevated: true);
@include animate.duration-quick;
@include corners.normal;
@include shadows.elevated;
@include variants.card;

margin: 0.25rem 0;
padding: 0.25rem;
background-color: var(--card-bg);

@include animate.style-pop; // Must list last because it contains nested declarations
}
Expand Down
5 changes: 1 addition & 4 deletions src/components/AvatarEditable/AvatarEditable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,11 @@
.ActionsMenu {
@include flex.column($gap: 0.25rem);
@include animate.duration-quick;
@include corners.normal;
@include shadows.elevated;
@include variants.card;
@include variants.card($elevated: true);

z-index: 10000;
margin: 0.25rem 0;
padding: 0.25rem;
background-color: var(--card-bg);

@include animate.style-pop; // Must list last because it contains nested declarations
}
Expand Down
3 changes: 0 additions & 3 deletions src/components/MatchResultCard/MatchResultCard.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,7 @@

.MatchResultCard {
@include flex.column($gap: 0);

@include variants.card;
@include shadows.surface;
@include corners.normal;

position: relative;
overflow: hidden;
Expand Down
5 changes: 1 addition & 4 deletions src/components/MatchResultPlayers/MatchResultPlayers.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,13 +109,10 @@
}

.FactionDetails {
@include variants.card;
@include shadows.elevated;
@include variants.card($elevated: true);
@include animate.duration-quick;
@include animate.style-pop;
@include flex.column($gap: 0);

margin: 0.25rem 0;
background-color: var(--card-bg);
border-radius: variables.$corner-radius;
}
3 changes: 1 addition & 2 deletions src/components/ToastProvider/ToastProvider.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@
.Root {
--icon-size: 1.25rem;

@include corners.wide;
@include variants.card;
@include variants.card($elevated: true);
@include text.small;

display: flex;
Expand Down
2 changes: 0 additions & 2 deletions src/components/TournamentCard/TournamentCard.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@
--banner-wide-size: 14rem;

@include variants.card;
@include shadows.surface;
@include corners.normal;
@include text.ui;

position: relative;
Expand Down
3 changes: 0 additions & 3 deletions src/components/generic/Card/Card.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,8 @@
.Card {
@include flex.column($gap: 0);
@include variants.card;
@include shadows.surface;
@include corners.normal;
@include flex.stretchy;

min-height: 0;
max-height: 100%;
background-color: var(--card-bg);
}
5 changes: 1 addition & 4 deletions src/components/generic/DataTable/DataTable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,11 @@ $row-height: 3rem;
}

.PopoverContent {
@include shadows.elevated;
@include animate.duration-quick;
@include variants.card;
@include variants.card($elevated: true);

margin: 0.25rem 0;
padding: 1rem;
background-color: var(--card-bg);
border-radius: variables.$corner-radius;

@include animate.style-pop; // Must list last because it contains nested declarations
}
Expand Down
3 changes: 1 addition & 2 deletions src/components/generic/InputDateTime/InputDateTime.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@
}

.Content {
@include variants.card;
@include shadows.elevated;
@include variants.card($elevated: true);
@include animate.duration-quick;
@include animate.style-pop;
@include flex.column($gap: 0);
Expand Down
3 changes: 1 addition & 2 deletions src/components/generic/InputLocation/InputLocation.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
@use "/src/style/flex";

.InputDatePopoverContent {
@include variants.card;
@include shadows.elevated;
@include variants.card($elevated: true);
@include animate.duration-quick;
@include animate.style-pop;

Expand Down
4 changes: 1 addition & 3 deletions src/components/generic/PopoverMenu/PopoverMenu.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@
.PopoverContent {
@include flex.column($gap: 0.25rem);
@include animate.duration-quick;
@include corners.normal;
@include shadows.elevated;
@include variants.card;
@include variants.card($elevated: true);

z-index: 1;
margin: 0.25rem 0;
Expand Down
5 changes: 1 addition & 4 deletions src/pages/TournamentsPage/TournamentsPage.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,12 @@
}

.FilterPopover {
@include variants.card;
@include shadows.elevated;
@include variants.card($elevated: true);
@include animate.duration-quick;
@include animate.style-pop;

margin: 0.25rem 0;
padding: 1rem;
background-color: var(--card-bg);
border-radius: variables.$corner-radius;
}

.List {
Expand Down
11 changes: 9 additions & 2 deletions src/style/_variants.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@use "variables";
@use "/src/style/borders";
@use "/src/style/corners";
@use "/src/style/shadows";

// TODO: Move to utils
@mixin reset {
Expand Down Expand Up @@ -190,9 +192,14 @@
}
}

@mixin card {
@mixin card($elevated: false) {
@include borders.normal;
@include corners.normal;
@include shadows.surface;

background-color: var(--card-bg);
border-color: var(--border-color-default);

@if $elevated {
@include shadows.elevated;
}
}
Comment on lines +195 to 205
Copy link

@coderabbitai coderabbitai bot Jun 30, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

card() applies both surface and elevated shadows – likely unintended

Because @include shadows.surface; is unconditional and @include shadows.elevated; is appended when $elevated is true, the elevated version overrides the surface box-shadow only if the shadows.* mixins both set box-shadow.
If either mixin appends to box-shadow (comma-separated shadows) you’ll end up with two shadows instead of one, which wasn’t the behaviour of the previous code.

A safer pattern is to choose exactly one shadow set:

  @include borders.normal;
  @include corners.normal;

- @include shadows.surface;
-
- @if $elevated {
-   @include shadows.elevated;
- }
+ @if $elevated {
+   @include shadows.elevated;
+ } @else {
+   @include shadows.surface;
+ }

This preserves the original visual intent and avoids accidental double shadows.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@mixin card($elevated: false) {
@include borders.normal;
@include corners.normal;
@include shadows.surface;
background-color: var(--card-bg);
border-color: var(--border-color-default);
@if $elevated {
@include shadows.elevated;
}
}
@mixin card($elevated: false) {
@include borders.normal;
@include corners.normal;
@if $elevated {
@include shadows.elevated;
} @else {
@include shadows.surface;
}
background-color: var(--card-bg);
}
🤖 Prompt for AI Agents 
In src/style/_variants.scss around lines 195 to 205, the card mixin currently
includes both surface and elevated shadows when $elevated is true, causing
double shadows if shadows.* mixins append rather than override box-shadow. To
fix this, remove the unconditional @include shadows.surface and instead use a
conditional to include either shadows.surface or shadows.elevated based on the
$elevated flag, ensuring only one shadow style is applied at a time.