[#26] Fix swiper and pagination bullets layout. Add button for upcomi…

…ng survey detail link

src/App.tsx

@@ -10,7 +10,7 @@ const App = (): JSX.Element => {
 
   return (
     <div>
-      <main className="m-0 flex h-screen flex-col items-center justify-center p-0">{appRoutes}</main>
+      <main className="m-0 flex h-screen w-full flex-col items-center justify-center p-0">{appRoutes}</main>
     </div>
   );
 };

src/assets/stylesheets/application.scss

@@ -35,9 +35,6 @@ body {
 }
 
 .survey-swiper {
-  width: 820px;
-  height: 100%;
-
   .swiper-pagination-bullet {
     width: 0.5rem;
 
@@ -48,4 +45,20 @@ body {
   .swiper-pagination-bullet-active {
     opacity: 1;
   }
+
+  &.swiper-pagination {
+    bottom: 2rem !important;
+  }
+}
+
+.arrow-button {
+  width: 56px;
+  height: 56px;
+
+  border-radius: 9999px;
+
+  background-color: #fff;
+  background-image: url('../images/arrow.svg');
+  background-repeat: no-repeat;
+  background-position: center;
 }

src/components/Survey/index.tsx

@@ -7,9 +7,17 @@ type SurveyProps = {
 function Survey({ title, description, coverImageUrl }: SurveyProps) {
   return (
     <div>
-      <img className="h-80 w-full" src={coverImageUrl} alt="cover" />
-      <p className="text-white"> {title}</p>
-      <p className="text-white opacity-60"> {description}</p>
+      <img className="my-4 max-h-80 w-full rounded-xl" src={coverImageUrl} alt="cover" />
+      <div className="mt-8 flex items-center justify-between">
+        <div>
+          <p className="text-white"> {title}</p>
+          <p className="text-white opacity-60"> {description}</p>
+        </div>
+        <div>
+          {/* TODO: Convert to Link for Survey Detail page */}
+          <button className="arrow-button"></button>
+        </div>
+      </div>
     </div>
   );
 }

src/components/SurveyList/index.tsx

@@ -1,8 +1,6 @@
 import { Pagination } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
-// Styles
-// import 'swiper/swiper.min.css';
 import 'swiper/swiper-bundle.min.css';
 
 import SurveyComponent from 'components/Survey';
@@ -12,21 +10,27 @@ type SurveyListProps = { surveys: Survey[] };
 
 function SurveyList({ surveys }: SurveyListProps) {
   return (
-    <Swiper
-      className="survey-swiper"
-      modules={[Pagination]}
-      speed={800}
-      pagination={{ clickable: true, dynamicBullets: true }}
-      slidesPerView={1}
-    >
-      {surveys.map((survey) => {
-        return (
-          <SwiperSlide key={survey.id}>
-            <SurveyComponent {...survey} />
-          </SwiperSlide>
-        );
-      })}
-    </Swiper>
+    <>
+      <Swiper
+        className="survey-swiper"
+        modules={[Pagination]}
+        speed={800}
+        spaceBetween={100}
+        pagination={{ el: '.swiper-pagination', clickable: true, dynamicBullets: true }}
+        slidesPerView={1}
+      >
+        {surveys.map((survey) => {
+          return (
+            <>
+              <SwiperSlide key={survey.id}>
+                <SurveyComponent {...survey} />
+              </SwiperSlide>
+            </>
+          );
+        })}
+      </Swiper>
+      <div className="survey-swiper swiper-pagination"></div>
+    </>
   );
 }
 

src/screens/Home/index.test.tsx

@@ -6,9 +6,9 @@ describe('HomeScreen', () => {
   test('renders learn react link', () => {
     render(<HomeScreen />);
 
-    const mainHeadingElement = screen.getByTestId('app-main-heading');
+    const surveyLoadingElement = screen.getByTestId('loading-surveys');
 
-    expect(mainHeadingElement).toBeInTheDocument();
-    expect(mainHeadingElement).toHaveTextContent('Home Screen');
+    expect(surveyLoadingElement).toBeInTheDocument();
+    expect(surveyLoadingElement).toHaveTextContent('Loading Surveys');
   });
 });

src/screens/Home/index.tsx

@@ -36,7 +36,7 @@ const HomeScreen = (): JSX.Element => {
   }, []);
 
   if (!loaded) {
-    return <h3>Loading Surveys</h3>;
+    return <h3 data-test-id="loading-surveys">Loading Surveys</h3>;
   }
 
   return (
@@ -46,9 +46,9 @@ const HomeScreen = (): JSX.Element => {
         <p className="text-3xl font-extrabold">Today</p>
       </div>
 
-      <section className="h-full">
+      <div className="w-screen max-w-3xl">
         <SurveyList surveys={surveys} />
-      </section>
+      </div>
     </section>
   );
 };