From 27595c4b1b2f7bd4d9270bd39df0d960151c5e82 Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <subhajitstd07@gmail.com>
Date: Sun, 12 Nov 2023 10:17:53 +0000
Subject: [PATCH 1/3] Replaced all the css into tailwind css on SuccessStory
 component

---
 components/SuccessStory/SuccessStory.js       |  9 ++--
 .../SuccessStory/SuccessStory.module.css      | 51 -------------------
 .../__snapshots__/SuccessStory.test.js.snap   |  8 +--
 3 files changed, 8 insertions(+), 60 deletions(-)
 delete mode 100644 components/SuccessStory/SuccessStory.module.css

diff --git a/components/SuccessStory/SuccessStory.js b/components/SuccessStory/SuccessStory.js
index 2e91722ea..2bed95694 100644
--- a/components/SuccessStory/SuccessStory.js
+++ b/components/SuccessStory/SuccessStory.js
@@ -1,6 +1,5 @@
 import { string } from 'prop-types';
 import Image from 'next/image';
-import styles from './SuccessStory.module.css';
 
 SuccessStory.propTypes = {
   imageSource: string.isRequired,
@@ -10,8 +9,8 @@ SuccessStory.propTypes = {
 
 function SuccessStory({ imageSource, quote, title }) {
   return (
-    <div className={styles.SuccessStory}>
-      <div className={styles.imageWrapper}>
+    <div className="box-border flex flex-col flex-nowrap items-center my-12 mx-4 pt-14 relative max-w-[320px] h-[940px] md:h-[748px] sm:h-auto">
+      <div className="absolute top-0 h-48  shadow-[1px_2px_5p_3px_rgba(0, 0, 0, 0.35)]">
         <Image
           alt={`${title} headshot`}
           src={imageSource}
@@ -21,8 +20,8 @@ function SuccessStory({ imageSource, quote, title }) {
         />
       </div>
 
-      <div className={styles.quote}>
-        <h6 className={styles.title}>{title}</h6>
+      <div className="flex flex-1 flex-col flex-nowrap items-center p-8  pt-40 border-2 border-solid border-primary [&blockquote]:my-4 [&blockquote]:mx-0 [&blockquote]:text-base">
+        <h6 className="text-center text-base">{title}</h6>
         <blockquote>{`"${quote}"`}</blockquote>
       </div>
     </div>
diff --git a/components/SuccessStory/SuccessStory.module.css b/components/SuccessStory/SuccessStory.module.css
deleted file mode 100644
index 126769bec..000000000
--- a/components/SuccessStory/SuccessStory.module.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.SuccessStory {
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  margin: 3rem 1rem;
-  padding-top: 60px;
-  position: relative;
-  max-width: 320px;
-  height: 940px;
-}
-
-.imageWrapper {
-  position: absolute;
-  top: 0;
-  height: 200px;
-  box-shadow: 1px 2px 5px 3px rgba(0, 0, 0, 0.35);
-}
-
-.quote {
-  display: flex;
-  flex: 1;
-  flex-flow: column nowrap;
-  align-items: center;
-  padding: 2rem;
-  padding-top: 160px;
-  border: 3px solid var(--primary);
-}
-
-.quote > blockquote {
-  margin: 1rem 0;
-  font-style: italic;
-  font-size: 1rem;
-}
-
-.title {
-  text-align: center;
-  font-size: 1rem;
-}
-
-@media screen and (--medium-viewport) {
-  .SuccessStory {
-    height: 748px;
-  }
-}
-
-@media screen and (--small-viewport) {
-  .SuccessStory {
-    height: auto;
-  }
-}
diff --git a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
index ecd925c4e..5ff26517a 100644
--- a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
+++ b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`SuccessStory should render with required props 1`] = `
 <div
-  className="SuccessStory"
+  className="box-border flex flex-col flex-nowrap items-center my-12 mx-4 pt-14 relative max-w-[320px] h-[940px] md:h-[748px] sm:h-auto"
 >
   <div
-    className="imageWrapper"
+    className="absolute top-0 h-48  shadow-[1px_2px_5p_3px_rgba(0, 0, 0, 0.35)]"
   >
     <MockedNextImage
       alt="Great testing culture headshot"
@@ -16,10 +16,10 @@ exports[`SuccessStory should render with required props 1`] = `
     />
   </div>
   <div
-    className="quote"
+    className="flex flex-1 flex-col flex-nowrap items-center p-8  pt-40 border-2 border-solid border-primary [&blockquote]:my-4 [&blockquote]:mx-0 [&blockquote]:text-base"
   >
     <h6
-      className="title"
+      className="text-center text-base"
     >
       Great testing culture
     </h6>

From 62c63829bb768caba989fb951f709091bdde9fa2 Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <subhajitstd07@gmail.com>
Date: Mon, 13 Nov 2023 16:16:36 +0000
Subject: [PATCH 2/3] Replaced all the css into tailwind css on SuccessStory
 component

---
 components/SuccessStory/SuccessStory.js                       | 4 ++--
 .../__tests__/__snapshots__/SuccessStory.test.js.snap         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/SuccessStory/SuccessStory.js b/components/SuccessStory/SuccessStory.js
index 2bed95694..6b69807a8 100644
--- a/components/SuccessStory/SuccessStory.js
+++ b/components/SuccessStory/SuccessStory.js
@@ -10,7 +10,7 @@ SuccessStory.propTypes = {
 function SuccessStory({ imageSource, quote, title }) {
   return (
     <div className="box-border flex flex-col flex-nowrap items-center my-12 mx-4 pt-14 relative max-w-[320px] h-[940px] md:h-[748px] sm:h-auto">
-      <div className="absolute top-0 h-48  shadow-[1px_2px_5p_3px_rgba(0, 0, 0, 0.35)]">
+      <div className="absolute top-0 h-48 shadow-[1px_2px_5p_3px_rgba(0, 0, 0, 0.35)]">
         <Image
           alt={`${title} headshot`}
           src={imageSource}
@@ -20,7 +20,7 @@ function SuccessStory({ imageSource, quote, title }) {
         />
       </div>
 
-      <div className="flex flex-1 flex-col flex-nowrap items-center p-8  pt-40 border-2 border-solid border-primary [&blockquote]:my-4 [&blockquote]:mx-0 [&blockquote]:text-base">
+      <div className="flex flex-1 flex-col flex-nowrap items-center p-8 pt-40 border-2 border-solid border-primary [&blockquote]:my-4 [&blockquote]:mx-0 [&blockquote]:text-base">
         <h6 className="text-center text-base">{title}</h6>
         <blockquote>{`"${quote}"`}</blockquote>
       </div>
diff --git a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
index 5ff26517a..2fcaeff93 100644
--- a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
+++ b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
@@ -5,7 +5,7 @@ exports[`SuccessStory should render with required props 1`] = `
   className="box-border flex flex-col flex-nowrap items-center my-12 mx-4 pt-14 relative max-w-[320px] h-[940px] md:h-[748px] sm:h-auto"
 >
   <div
-    className="absolute top-0 h-48  shadow-[1px_2px_5p_3px_rgba(0, 0, 0, 0.35)]"
+    className="absolute top-0 h-48 shadow-[1px_2px_5p_3px_rgba(0, 0, 0, 0.35)]"
   >
     <MockedNextImage
       alt="Great testing culture headshot"
@@ -16,7 +16,7 @@ exports[`SuccessStory should render with required props 1`] = `
     />
   </div>
   <div
-    className="flex flex-1 flex-col flex-nowrap items-center p-8  pt-40 border-2 border-solid border-primary [&blockquote]:my-4 [&blockquote]:mx-0 [&blockquote]:text-base"
+    className="flex flex-1 flex-col flex-nowrap items-center p-8 pt-40 border-2 border-solid border-primary [&blockquote]:my-4 [&blockquote]:mx-0 [&blockquote]:text-base"
   >
     <h6
       className="text-center text-base"

From f03d708bb94a1fc85e15d65fb3ad9641d17d049f Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <subhajitstd07@gmail.com>
Date: Tue, 14 Nov 2023 05:41:50 +0000
Subject: [PATCH 3/3] Replaced all the css into tailwind css on SuccessStory
 component

---
 components/SuccessStory/SuccessStory.js                         | 2 +-
 .../__tests__/__snapshots__/SuccessStory.test.js.snap           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/SuccessStory/SuccessStory.js b/components/SuccessStory/SuccessStory.js
index 6b69807a8..440576559 100644
--- a/components/SuccessStory/SuccessStory.js
+++ b/components/SuccessStory/SuccessStory.js
@@ -20,7 +20,7 @@ function SuccessStory({ imageSource, quote, title }) {
         />
       </div>
 
-      <div className="flex flex-1 flex-col flex-nowrap items-center p-8 pt-40 border-2 border-solid border-primary [&blockquote]:my-4 [&blockquote]:mx-0 [&blockquote]:text-base">
+      <div className="flex flex-1 flex-col flex-nowrap items-center p-8 pt-40 border-2 border-solid border-primary [&>blockquote]:my-4 [&>blockquote]:mx-0 [&>blockquote]:text-base">
         <h6 className="text-center text-base">{title}</h6>
         <blockquote>{`"${quote}"`}</blockquote>
       </div>
diff --git a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
index 2fcaeff93..7bd8c91a0 100644
--- a/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
+++ b/components/SuccessStory/__tests__/__snapshots__/SuccessStory.test.js.snap
@@ -16,7 +16,7 @@ exports[`SuccessStory should render with required props 1`] = `
     />
   </div>
   <div
-    className="flex flex-1 flex-col flex-nowrap items-center p-8 pt-40 border-2 border-solid border-primary [&blockquote]:my-4 [&blockquote]:mx-0 [&blockquote]:text-base"
+    className="flex flex-1 flex-col flex-nowrap items-center p-8 pt-40 border-2 border-solid border-primary [&>blockquote]:my-4 [&>blockquote]:mx-0 [&>blockquote]:text-base"
   >
     <h6
       className="text-center text-base"