From ae852a71826aec6da847a6d07c02b7226d2a3fa5 Mon Sep 17 00:00:00 2001
From: sumita <sumita.k@canopas.com>
Date: Fri, 4 Mar 2022 13:46:15 +0530
Subject: [PATCH] Fixes in jobs page

---
 vue-frontend/src/App.vue                      |  19 ++--
 vue-frontend/src/components/CareerDetails.vue |   1 +
 .../src/components/jobs/FaqSection.vue        |   3 +-
 .../src/components/jobs/PerksAndBenifits.vue  | 101 ++++++++++--------
 .../src/components/jobs/VirtuesView.vue       |  58 +++++-----
 .../src/components/partials/ScreenFooter2.vue |   5 -
 6 files changed, 94 insertions(+), 93 deletions(-)

diff --git a/vue-frontend/src/App.vue b/vue-frontend/src/App.vue
index 65edb52d8..d3e1f8d61 100644
--- a/vue-frontend/src/App.vue
+++ b/vue-frontend/src/App.vue
@@ -86,17 +86,17 @@ a {
 .jobs-normal-text {
   font-style: normal;
   font-weight: 400;
-  font-size: 1.1rem;
+  font-size: 1.15rem;
   line-height: 1.5rem;
   color: rgba(61, 61, 61, 0.8);
-  letter-spacing: 0.5px;
+  letter-spacing: 0.3px;
 }
 
 .normal-2-text {
   font-style: normal;
   font-weight: 400;
-  font-size: 0.9rem;
-  line-height: 1rem;
+  font-size: 1.1rem;
+  line-height: 1.3rem;
   color: rgba(61, 61, 61, 0.8);
 }
 
@@ -111,7 +111,7 @@ a {
   font-weight: bold;
   font-size: 1.25rem;
   line-height: 1.6rem;
-  letter-spacing: 0.1rem;
+  letter-spacing: 0.5px;
 }
 
 .underline-text {
@@ -219,15 +219,10 @@ a {
 
   .normal-text,
   .jobs-normal-text {
-    font-size: 1.125rem;
+    font-size: 1.2rem;
     line-height: 1.375rem;
   }
 
-  .normal-2-text {
-    font-size: 1rem;
-    line-height: 1.18rem;
-  }
-
   .underline-text {
     text-decoration: underline solid rgba(61, 61, 61, 0.8) 3px;
   }
@@ -252,7 +247,7 @@ a {
 
   .normal-2-text {
     font-size: 1.1875rem;
-    line-height: 1.437rem;
+    line-height: 1.4rem;
   }
 
   .gradient-btn {
diff --git a/vue-frontend/src/components/CareerDetails.vue b/vue-frontend/src/components/CareerDetails.vue
index d16d53c13..e4fcaca63 100644
--- a/vue-frontend/src/components/CareerDetails.vue
+++ b/vue-frontend/src/components/CareerDetails.vue
@@ -364,6 +364,7 @@ export default {
   font-size: 1.5rem !important;
   line-height: 2rem !important;
   letter-spacing: 0.05rem;
+  padding: 12px 0;
 }
 
 :deep(h2 > .bullet) {
diff --git a/vue-frontend/src/components/jobs/FaqSection.vue b/vue-frontend/src/components/jobs/FaqSection.vue
index ceee80545..fc5a1ae97 100644
--- a/vue-frontend/src/components/jobs/FaqSection.vue
+++ b/vue-frontend/src/components/jobs/FaqSection.vue
@@ -201,7 +201,7 @@ export default {
           : this.sliceTo - TOTAL_FAQ_IN_SLIDE;
 
       this.isActivePrev = this.sliceFrom >= TOTAL_FAQ_IN_SLIDE;
-      this.isActiveNext = this.sliceTo <= this.faqs.length;
+      this.isActiveNext = this.sliceTo < this.faqs.length;
       this.current = this.getRoundedIndex(dir);
     },
     getRoundedIndex(diff) {
@@ -248,6 +248,7 @@ export default {
 .faq-header {
   display: flex;
   flex-direction: row;
+  align-items: center;
 }
 
 .faq-icon {
diff --git a/vue-frontend/src/components/jobs/PerksAndBenifits.vue b/vue-frontend/src/components/jobs/PerksAndBenifits.vue
index 506011c8f..08a6e015a 100644
--- a/vue-frontend/src/components/jobs/PerksAndBenifits.vue
+++ b/vue-frontend/src/components/jobs/PerksAndBenifits.vue
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="flex-div">
-      <div v-for="perk in perks" :key="perk.id" class="padding flex-elements">
+      <div v-for="perk in perks" :key="perk.id" class="flex-elements">
         <aspect-ratio height="120%" v-if="perk.image">
           <img
             class="image"
@@ -20,18 +20,13 @@
             alt="perks-and-benefits-image"
           />
         </aspect-ratio>
-        <aspect-ratio
-          height="90%"
-          v-else
-          class="padding"
-          :style="{ backgroundColor: perk.bgColor }"
-        >
-          <div class="details padding">
+        <aspect-ratio v-else :style="{ backgroundColor: perk.bgColor }">
+          <div class="details">
             <div class="normal-2-text title">
               <img :src="perk.icon" loading="lazy" />
               <span>{{ perk.title }}</span>
             </div>
-            <div class="normal-2-text desc-text">
+            <div class="normal-2-text text-center">
               <div v-html="perk.description" @click="scrollToCareer"></div>
             </div>
           </div>
@@ -193,6 +188,7 @@ export default {
 <style lang="scss" scoped>
 .container {
   margin: 100px auto;
+  padding: 0 10%;
 }
 
 .description {
@@ -200,10 +196,6 @@ export default {
   color: rgba(61, 61, 61, 0.8);
 }
 
-.padding {
-  padding: 10px;
-}
-
 .flex-div {
   display: flex;
   flex-direction: column;
@@ -215,8 +207,14 @@ export default {
   border-radius: 10px;
 }
 
+.flex-elements {
+  padding: 20px;
+}
+
 .flex-elements:nth-child(even) {
-  padding: 10px 30px;
+  .vue-aspect-ratio {
+    padding-top: 120% !important;
+  }
 }
 
 .image {
@@ -229,36 +227,65 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   height: 100%;
+  padding: 16px;
+
+  div {
+    flex: none !important;
+  }
+
+  .text-center {
+    margin-top: 10px;
+  }
 }
 
 .title {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
   color: #3d3d3d;
   font-weight: 700;
 
   span {
     margin-left: 10px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
 }
 
-.desc-text {
-  text-align: center;
-  padding-top: 10px;
-}
-
-@include media-breakpoint-up(sm) {
+@media (min-width: 440px) {
   .flex-elements:nth-child(even) {
-    padding: 10px 35px;
+    padding: 10px 40px;
   }
+
   .details {
     padding: 40px;
   }
+
+  .flex-elements:nth-child(even) {
+    .vue-aspect-ratio {
+      padding-top: 100% !important;
+    }
+  }
+}
+
+@include media-breakpoint-only(md) {
+  .container {
+    max-width: 760px;
+  }
+
+  .flex-elements:nth-child(even) {
+    .vue-aspect-ratio {
+      padding-top: 120% !important;
+    }
+  }
 }
 
 @include media-breakpoint-up(md) {
+  .container {
+    padding: 0;
+  }
+
   .description {
     margin: 50px 80px;
   }
@@ -273,38 +300,28 @@ export default {
     }
   }
 
-  .flex-elements:nth-child(even),
-  .details {
-    padding: 9px;
+  .flex-elements,
+  .flex-elements:nth-child(even) {
+    padding: 10px;
   }
 
   .details {
-    height: auto;
-  }
-
-  .title {
-    justify-content: unset;
-  }
-
-  .desc-text {
-    text-align: left;
+    padding: 16px;
   }
 }
 
 @include media-breakpoint-up(lg) {
-  .padding {
+  .flex-elements,
+  .flex-elements:nth-child(even) {
     padding: 20px;
   }
-}
 
-@include media-breakpoint-up(xl) {
-  .title,
-  .desc-text {
-    padding-top: 20px;
+  .details {
+    padding: 30px;
   }
 }
 
-@include media-breakpoint-up(xxl) {
+@include media-breakpoint-up(xl) {
   .details {
     padding: 40px;
   }
diff --git a/vue-frontend/src/components/jobs/VirtuesView.vue b/vue-frontend/src/components/jobs/VirtuesView.vue
index 8816d0c6c..24f8f497f 100644
--- a/vue-frontend/src/components/jobs/VirtuesView.vue
+++ b/vue-frontend/src/components/jobs/VirtuesView.vue
@@ -12,7 +12,7 @@
             <div class="image">
               <img :src="virtue.image" :alt="virtue.title" loading="lazy" />
             </div>
-            <div class="virtue-text red-text">
+            <div class="virtue-text red-text jobs-normal-text">
               {{ virtue.title }}
             </div>
           </div>
@@ -20,7 +20,7 @@
             class="description"
             :class="activeIndex == virtue.id ? 'active' : ''"
           >
-            <div class="red-text">
+            <div class="red-text jobs-normal-text">
               {{ virtue.title }}
             </div>
             <div class="normal-2-text">
@@ -39,7 +39,7 @@
             <div class="image">
               <img :src="virtue.image" :alt="virtue.title" loading="lazy" />
             </div>
-            <div class="virtue-text red-text">
+            <div class="virtue-text red-text jobs-normal-text">
               {{ virtue.title }}
             </div>
           </div>
@@ -47,7 +47,7 @@
             class="description"
             :class="activeIndex == virtue.id ? 'active' : ''"
           >
-            <div class="red-text">
+            <div class="red-text jobs-normal-text">
               {{ virtue.title }}
             </div>
             <div class="normal-2-text">
@@ -66,7 +66,7 @@
             <div class="image">
               <img :src="virtue.image" :alt="virtue.title" loading="lazy" />
             </div>
-            <div class="virtue-text red-text">
+            <div class="virtue-text red-text jobs-normal-text">
               {{ virtue.title }}
             </div>
           </div>
@@ -74,7 +74,7 @@
             class="description"
             :class="activeIndex == virtue.id ? 'active' : ''"
           >
-            <div class="red-text">
+            <div class="red-text jobs-normal-text">
               {{ virtue.title }}
             </div>
             <div class="normal-2-text">
@@ -93,7 +93,7 @@
             <div class="image">
               <img :src="virtue.image" :alt="virtue.title" loading="lazy" />
             </div>
-            <div class="virtue-text red-text">
+            <div class="virtue-text red-text jobs-normal-text">
               {{ virtue.title }}
             </div>
           </div>
@@ -101,7 +101,7 @@
             class="description"
             :class="activeIndex == virtue.id ? 'active' : ''"
           >
-            <div class="red-text">
+            <div class="red-text jobs-normal-text">
               {{ virtue.title }}
             </div>
             <div class="normal-2-text">
@@ -213,10 +213,6 @@ export default {
 }
 
 .red-text {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.5rem;
   color: #e8505b;
 }
 
@@ -228,6 +224,7 @@ export default {
 .flex-div {
   display: flex;
   flex-flow: wrap;
+  margin: auto;
 }
 
 .flex-div > div {
@@ -239,7 +236,8 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 5% 0;
+  margin: 5% auto;
+  padding: 0 10%;
 
   div {
     margin-bottom: 5%;
@@ -252,8 +250,8 @@ export default {
 
 .description {
   position: absolute;
-  height: 100%;
-  width: 75%;
+  height: auto;
+  width: 290px;
   left: 50%;
   top: 0;
   bottom: 0;
@@ -272,7 +270,7 @@ export default {
   transition: all 0.4s ease-in-out 0s;
 
   div {
-    margin-bottom: 5%;
+    margin-bottom: 3%;
     width: 100%;
   }
 }
@@ -281,10 +279,6 @@ export default {
   opacity: 1;
 }
 
-.normal-2-text {
-  margin-top: 20px;
-}
-
 @media (hover: hover) and (pointer: fine) {
   .flex-div > div:hover .description {
     opacity: 1;
@@ -308,6 +302,10 @@ export default {
 }
 
 @include media-breakpoint-up(sm) {
+  .container {
+    padding: 0%;
+  }
+
   .background {
     border-radius: 150px 0;
   }
@@ -318,6 +316,7 @@ export default {
 
   .details {
     margin: 2% 0;
+    padding: 0;
   }
 
   .image {
@@ -331,13 +330,8 @@ export default {
     border-radius: 200px 0;
   }
 
-  .flex-div {
-    width: 90%;
-    margin: auto;
-  }
-
   .flex-div:nth-of-type(even) {
-    width: 60%;
+    width: 70%;
   }
 
   .flex-div > div {
@@ -345,8 +339,7 @@ export default {
   }
 
   .description {
-    width: 100%;
-    padding: 1%;
+    width: 90%;
 
     div {
       margin-bottom: 0;
@@ -362,9 +355,8 @@ export default {
     padding-bottom: 50%;
   }
 
-  .red-text {
-    font-size: 1.18rem;
-    line-height: 1.25rem;
+  .normal-2-text {
+    margin-top: 10px;
   }
 }
 
@@ -382,8 +374,8 @@ export default {
   }
 
   .red-text {
-    font-size: 1.3rem;
-    line-height: 1.56rem;
+    font-size: 1.3125rem;
+    line-height: 1.5918rem;
   }
 }
 
diff --git a/vue-frontend/src/components/partials/ScreenFooter2.vue b/vue-frontend/src/components/partials/ScreenFooter2.vue
index e6717d5b6..3f94f155d 100644
--- a/vue-frontend/src/components/partials/ScreenFooter2.vue
+++ b/vue-frontend/src/components/partials/ScreenFooter2.vue
@@ -152,11 +152,6 @@ export default {
   font-weight: bold;
 }
 
-.normal-2-text {
-  font-size: 0.9375rem;
-  line-height: 1.125rem;
-}
-
 .mb-24 {
   margin-bottom: 1.5rem;
 }