SWED-2275 fix style UI tweaks cards

SwedbankPay · Mar 14, 2024 · 51821c6 · 51821c6
1 parent a1e187d
commit 51821c6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 18 deletions.
diff --git a/src/App/Home/index.js b/src/App/Home/index.js
@@ -59,21 +59,23 @@ const Home = () => {
 									<Link
 										to={route.path}
 										className={`cards ${
-											route.wideCard
-												? " cards-wide w-100 max-w-initial m-3"
-												: ""
+											route.wideCard ? " cards-wide max-w-initial m-3" : "w-100"
 										}`}
 									>
 										<div className="cards-icon">
 											<i
-												className={`${route.icon.name} small mr-3`}
+												className={`${route.icon.name} mr-3`}
 												aria-hidden="true"
 											></i>
 										</div>
-										<span className="h4">{route.entryCardText}</span>
-										<div className="cards-content">
-											<span>{route.entryCardText}</span>
-										</div>
+										<span className="h4">
+											{!route.wideCard ? route.title : route.entryCardText}
+										</span>
+										{!route.wideCard && (
+											<div className="cards-content">
+												<span>{route.entryCardText}</span>
+											</div>
+										)}
 										<div className="cards-cta">
 											<span className="arrow"></span>
 										</div>
@@ -82,9 +84,9 @@ const Home = () => {
 							</React.Fragment>
 						))}
 					<div className="col-12 col-sm-6 col-lg-3 d-flex">
-						<Link to={"/utilities"} className="cards">
+						<Link to={"/utilities"} className="cards w-100">
 							<div className="cards-icon">
-								<i className="at-build-wall small" aria-hidden="true"></i>
+								<i className="at-build-wall" aria-hidden="true"></i>
 							</div>
 							<span className="h4">Utilities</span>
 							<div className="cards-content">

diff --git a/src/less/components/card.less b/src/less/components/card.less
@@ -1,15 +1,13 @@
 @import "../global.less";
 
 // TODO: sera que el card title TIENE que llevar la clase .h4 ? or ponemos un title mas abstracto?
-// provide fallback style pa support a los que no han hecho la migracion, chequeando si llevas unas de las nuevas clases (e.g. .cards-cta) -> pa ellos provide un fallback style as close as possible, until next Major release
 
 .cards:has(.cards-cta) {
 	--border-radius: 16px;
 	--cards-light-gray: var(--base-5);
 	--cards-dark-gray: var(--base-2);
 	--min-width: 240px;
 	--max-width: 700px;
-	--transition-duration: 0.1s;
 	--padding-outer: 1.5rem;
 	--grid-min-gap: 0.5rem;
 
@@ -33,12 +31,11 @@
 	text-decoration: none;
 	background-color: var(--cards-light-gray);
 	cursor: pointer;
-	transition: var(--transition-duration);
 	overflow: clip;
 
 	&:hover {
 		.cards-cta span.arrow:before {
-			animation: scroll 0.5s ease-in-out;
+			animation: scroll 0.6s cubic-bezier(0.46, 0.06, 0, 1.02);
 		}
 	}
 
@@ -289,11 +286,9 @@
 	&:hover {
 		background-color: var(--cards-dark-gray);
 		color: var(--white);
-		transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
 
 		.h4 {
 			color: inherit;
-			transition: inherit;
 		}
 	}
 
@@ -318,7 +313,6 @@
 
 		& span.arrow {
 			width: 40px;
-			transition: all 0.5s ease;
 			display: grid;
 			overflow: clip;
 
@@ -345,7 +339,6 @@
 		font-family: var(--brand-headline);
 		text-align: start;
 		margin-block: 0;
-		transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
 	}
 
 	@keyframes scroll {