From 09b6aa10e93099992eef92863d8694a70bb5175a Mon Sep 17 00:00:00 2001 From: Ritik Saxena Date: Wed, 10 Jan 2024 00:21:47 +0530 Subject: [PATCH 1/3] cards background updated Signed-off-by: Ritik Saxena --- .../PopOutCardCarousel.style.js | 14 ++++--------- .../mobile-swiper.style.js | 20 +++++-------------- 2 files changed, 9 insertions(+), 25 deletions(-) diff --git a/src/components/PopOutCardCarousel/PopOutCardCarousel.style.js b/src/components/PopOutCardCarousel/PopOutCardCarousel.style.js index dcb1ef03d490..33827a41abd6 100644 --- a/src/components/PopOutCardCarousel/PopOutCardCarousel.style.js +++ b/src/components/PopOutCardCarousel/PopOutCardCarousel.style.js @@ -9,13 +9,8 @@ const PopOutCardWrapper = styled.div` padding: 2.5rem 3rem; height: 360px; width: 350px; - box-shadow: rgb(38, 57, 77, 0.5) 0px 20px 30px -10px; - background: linear-gradient( - 266.65deg, - #00b39f 40.19%, - #477e96 74.31%, - #3c494f 92.89% - ); + background: linear-gradient(125deg, #02A08F 5%, #121212 95%); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); transform: translate3d(0, 0, 0); border-radius: 20px; cursor: pointer; @@ -31,7 +26,7 @@ const PopOutCardWrapper = styled.div` align-items: center ; h3 { - opacity: 0.5; + opacity: 0.8; color: white !important; font-weight: bold; padding-bottom: 0.6rem; @@ -59,8 +54,7 @@ const PopOutCardWrapper = styled.div` //dynamic css ${(props) => css` z-index: ${100 - props.index}; - ${props.index % 2 ? "" : "background: #00B39F;"} - // ${props.index % 2 ? "" : "background: #00B39F;"} + ${props.index % 2 ? "" : "background: linear-gradient(250deg, #02A08F 2.93%, #121212 98.2%);"} transform: rotateZ(${-4 - 6 * props.index}deg) translate(-${props.index * 36}px, ${props.index * 5}px); `} diff --git a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js index a336e13d5f4c..94b2a3314f60 100644 --- a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js @@ -10,23 +10,13 @@ const SwiperContainer = styled.div` } .card.light { - box-shadow: none; - - background: linear-gradient( - 266.65deg, - #00b39f 40.19%, - #00b39f 74.31%, - #3c494f 92.89% - ); + background: linear-gradient(125deg, #02A08F 5%, #121212 95%); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } - + .card.dark { - background: linear-gradient( - 266.65deg, - #00584e 40.19%, - #2e5363 74.31%, - #212529 92.89% - ); + background: linear-gradient(250deg, #02A08F 2.93%, #121212 98.2%); + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); } .card { From 022dd383bddc807db32361d83b42a149e568159f Mon Sep 17 00:00:00 2001 From: Ritik Saxena Date: Wed, 10 Jan 2024 16:12:15 +0530 Subject: [PATCH 2/3] gradient updated Signed-off-by: Ritik Saxena --- .../PopOutCardCarousel.style.js | 6 ++++-- .../MeshmapMobileSwiper.js | 8 ++++++-- .../mobile-swiper.style.js | 19 +++++++++++++------ 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/src/components/PopOutCardCarousel/PopOutCardCarousel.style.js b/src/components/PopOutCardCarousel/PopOutCardCarousel.style.js index 33827a41abd6..7d1a2b8532bd 100644 --- a/src/components/PopOutCardCarousel/PopOutCardCarousel.style.js +++ b/src/components/PopOutCardCarousel/PopOutCardCarousel.style.js @@ -9,7 +9,7 @@ const PopOutCardWrapper = styled.div` padding: 2.5rem 3rem; height: 360px; width: 350px; - background: linear-gradient(125deg, #02A08F 5%, #121212 95%); + background: linear-gradient(222deg, #077165 2.76%, #1D2827 117.91%); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); transform: translate3d(0, 0, 0); border-radius: 20px; @@ -54,7 +54,9 @@ const PopOutCardWrapper = styled.div` //dynamic css ${(props) => css` z-index: ${100 - props.index}; - ${props.index % 2 ? "" : "background: linear-gradient(250deg, #02A08F 2.93%, #121212 98.2%);"} + ${props.index === 1 ? "background: linear-gradient(134deg, #252E31 -16.51%, #0D997F 101%);" : ""}; + ${props.index === 2 ? "background: linear-gradient(125deg, #137771 -16.81%, #252E31 104.15%);" : ""}; + ${props.index === 3 ? " background: linear-gradient(180deg, #202020 -32.18%, #18433F 52.35%, #0B7E71 106.65%, #00B39F 142.23%);" : ""}; transform: rotateZ(${-4 - 6 * props.index}deg) translate(-${props.index * 36}px, ${props.index * 5}px); `} diff --git a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js index ece7418043f9..1cb1e20f7a42 100644 --- a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js +++ b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js @@ -17,24 +17,28 @@ const CONTENT = [ img: dragDrop, description: "MeshMap automatically catalogs and provides insight into all of your services, datastores and the connections between them, allowing teams to deeply understand application architecture.", + gradient: "one", }, { title: "Understand your infrastructure with visualization and automation", img: mergeDesign, description: "MeshMap helps your team automate infrastructure understanding from the architecture to a single PR so your team can ship, refactor and onboard to legacy or existing applications faster.", + gradient: "two", }, { title: "Make working across services as easy as working across files", img: connectComponents, description: "Get automatic visibility into how your services interact in your application so you can confidently change, update or migrate to microservices.", + gradient: "three", }, { title: "Stop finger-pointing", img: shareDesign, description: "Share your designs publically or in private to collaborate with others in real-time.", + gradient: "four", }, ]; @@ -73,9 +77,9 @@ export const MeshmapMobileSwiper = () => { navigation={false} className="mySwiper" > - {CONTENT.map(({ title, description, img, readMoreLink }, index) => ( + {CONTENT.map(({ title, description, img, readMoreLink, gradient }) => ( -
+
diff --git a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js index 94b2a3314f60..3ceb0f49e0f7 100644 --- a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js @@ -9,14 +9,20 @@ const SwiperContainer = styled.div` border-radius: 20px; } - .card.light { - background: linear-gradient(125deg, #02A08F 5%, #121212 95%); - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + .card.one { + background: linear-gradient(222deg, #077165 2.76%, #1D2827 117.91%); } - .card.dark { - background: linear-gradient(250deg, #02A08F 2.93%, #121212 98.2%); - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + .card.two { + background: linear-gradient(134deg, #252E31 -16.51%, #0D997F 101%); + } + + .card.three { + background: linear-gradient(125deg, #137771 -16.81%, #252E31 104.15%); + } + + .card.four { + background: linear-gradient(180deg, #202020 -32.18%, #18433F 52.35%, #0B7E71 106.65%, #00B39F 142.23%); } .card { @@ -31,6 +37,7 @@ const SwiperContainer = styled.div` ); */ + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); height: 70vh; padding: 1rem; border-radius: 20px; From df4fbaeda4bc6f3fe1ad106fd8f1c0e358ee0342 Mon Sep 17 00:00:00 2001 From: Ritik Saxena Date: Fri, 12 Jan 2024 15:48:56 +0530 Subject: [PATCH 3/3] box-shadow removed Signed-off-by: Ritik Saxena --- .../Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js index 3ceb0f49e0f7..b3d60b5fda6f 100644 --- a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js +++ b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/mobile-swiper.style.js @@ -37,7 +37,6 @@ const SwiperContainer = styled.div` ); */ - box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); height: 70vh; padding: 1rem; border-radius: 20px;