scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-2626-error-message-multiroom-reward (pull request #2299)

Browse Source 
fix(SW-2626): add multiroom reward error message for mobile

* fix(SW-2626): add multiroom reward error message for mobile

* fix(SW-2626): error message to red color

* fix(SW-2626): fix errorContainer

* fix(SW-2626): fix button fullwidth

* fix(SW-2626): fix button fullwidth

* fix(SW-2626): add design

* fix(SW-2626): add new colors for checkbox

* fix(SW-2626): new color for input

* fix(SW-2626): fix pr comment

* fix(SW-2626): final ui for desktop and mobile


Approved-by: Hrishikesh Vaipurkar
This commit is contained in:
Bianca Widstam
2025-06-12 12:51:37 +00:00
parent 2dd07eb6b8
commit 5b90e15746
15 changed files with 213 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/scandic-web/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
+1 -1
View File
@@ -7,7 +7,7 @@
.container[data-selected] .checkbox {
border: none;
background: var(--UI-Input-Controls-Fill-Selected);
background: var(--Surface-UI-Fill-Active);
}
.container[data-disabled] .checkbox {
apps/scandic-web/components/TempDesignSystem/Form/Switch/switch.module.css
+6 -6
View File
@@ -10,8 +10,8 @@
.switch {
width: 40px;
height: 24px;
border: 2px solid var(--UI-Input-Controls-Border-Normal);
background: var(--UI-Input-Controls-Surface-Normal);
border: 2px solid var(--Surface-Secondary-Default-dark);
background: var(--Surface-Secondary-Default-dark);
border-radius: 24px;
transition: all 200ms;
display: block;
@@ -22,7 +22,7 @@
margin: 2px;
width: 16px;
height: 16px;
background: var(--UI-Input-Controls-Border-Normal);
background: var(--Surface-UI-Fill-Default);
border-radius: 100%;
transition: all 200ms;
}
@@ -30,11 +30,11 @@
.container[data-selected] {
.switch {
border-color: var(--UI-Input-Controls-Fill-Selected);
background: var(--UI-Input-Controls-Fill-Selected);
border-color: var(--Surface-UI-Fill-Active);
background: var(--Surface-UI-Fill-Active);
&:before {
background: var(--UI-Input-Controls-Surface-Normal);
background: var(--Surface-UI-Fill-Default);
transform: translateX(100%);
}
}
apps/scandic-web/components/TempDesignSystem/Select/select.module.css
+1 -1
View File
@@ -121,7 +121,7 @@
}
.listBoxItem[data-selected="true"].showRadioButton:before {
box-shadow: inset 0 0 0 8px var(--UI-Input-Controls-Fill-Selected);
box-shadow: inset 0 0 0 8px var(--Surface-UI-Fill-Active);
}
/* Use global react aria classnames here since setting a css modules classname overrides
apps/scandic-web/components/TempDesignSystem/Tooltip/tooltip.module.css
+26 -14
View File
@@ -5,8 +5,8 @@
.tooltip {
padding: var(--Spacing-x1);
background-color: var(--UI-Text-Active);
border: 0.5px solid var(--UI-Border-Active);
background-color: var(--Surface-UI-Fill-Intense);
border: 0.5px solid var(--Border-Interactive-Focus);
border-radius: var(--Corner-radius-md);
color: var(--Base-Text-Inverted);
position: absolute;
@@ -54,7 +54,8 @@
top: -8px;
left: 16px;
border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent;
border-color: transparent transparent var(--Border-Interactive-Focus)
transparent;
}
.bottom.arrowCenter::before {
@@ -62,21 +63,24 @@
left: 50%;
transform: translateX(-50%);
border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent;
border-color: transparent transparent var(--Border-Interactive-Focus)
transparent;
}
.bottom.arrowRight::before {
top: -8px;
right: 16px;
border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent;
border-color: transparent transparent var(--Border-Interactive-Focus)
transparent;
}
.top.arrowLeft::before {
bottom: -8px;
left: 16px;
border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent;
border-color: var(--Border-Interactive-Focus) transparent transparent
transparent;
}
.top.arrowCenter::before {
@@ -84,14 +88,16 @@
left: 50%;
transform: translateX(-50%);
border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent;
border-color: var(--Border-Interactive-Focus) transparent transparent
transparent;
}
.top.arrowRight::before {
bottom: -8px;
right: 16px;
border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent;
border-color: var(--Border-Interactive-Focus) transparent transparent
transparent;
}
.left.arrowTop::before {
@@ -99,7 +105,8 @@
right: -8px;
transform: translateY(-50%);
border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active);
border-color: transparent transparent transparent
var(--Border-Interactive-Focus);
}
.left.arrowCenter::before {
@@ -107,7 +114,8 @@
right: -8px;
transform: translateY(-50%);
border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active);
border-color: transparent transparent transparent
var(--Border-Interactive-Focus);
}
.left.arrowBottom::before {
@@ -115,7 +123,8 @@
right: -8px;
transform: translateY(50%);
border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active);
border-color: transparent transparent transparent
var(--Border-Interactive-Focus);
}
.right.arrowTop::before {
@@ -123,7 +132,8 @@
left: -8px;
transform: translateY(-50%);
border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent;
border-color: transparent var(--Border-Interactive-Focus) transparent
transparent;
}
.right.arrowCenter::before {
@@ -131,7 +141,8 @@
left: -8px;
transform: translateY(-50%);
border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent;
border-color: transparent var(--Border-Interactive-Focus) transparent
transparent;
}
.right.arrowBottom::before {
@@ -139,7 +150,8 @@
left: -8px;
transform: translateY(50%);
border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent;
border-color: transparent var(--Border-Interactive-Focus) transparent
transparent;
}
@media screen and (max-width: 767px) {