Replaced all the css into tailwind css on SuccessStory component (#1769)

OperationCode · Nov 14, 2023 · f6f3a81 · f6f3a81 · vercel · Nov 14, 2023
1 parent 2b5ad41
commit f6f3a81
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 60 deletions.
diff --git 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
diff --git 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>