From 2f4728a499f90bda1de6a06fd1d4646f69d4ff36 Mon Sep 17 00:00:00 2001
From: sumita <sumita.k@canopas.com>
Date: Sat, 29 Jan 2022 09:58:44 +0530
Subject: [PATCH 1/3] Refactor 404 UI

---
 vue-frontend/src/components/Error404Page.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/vue-frontend/src/components/Error404Page.vue b/vue-frontend/src/components/Error404Page.vue
index 750471dda..675612e24 100644
--- a/vue-frontend/src/components/Error404Page.vue
+++ b/vue-frontend/src/components/Error404Page.vue
@@ -63,7 +63,7 @@ export default {
   justify-content: center;
   flex: 1;
   flex-direction: column;
-  margin: 16px 48px;
+  margin: 16px;
 }
 
 .image-404 {
@@ -96,6 +96,7 @@ export default {
   display: flex;
   justify-content: space-around !important;
   align-items: center;
+  text-decoration: none;
 }
 
 .back-btn > span {

From 06de24d629bfccc5e10daf28e74e003de06160f2 Mon Sep 17 00:00:00 2001
From: sumita <sumita.k@canopas.com>
Date: Sat, 29 Jan 2022 15:49:53 +0530
Subject: [PATCH 2/3] Add hover effect on buttons

---
 vue-frontend/src/App.vue                      |  2 +-
 vue-frontend/src/components/Error404Page.vue  | 21 +++++++++++++++---
 .../src/components/contact/ContactForm.vue    | 22 +++++++++++++++++--
 .../src/components/contact/ContactLanding.vue |  3 +--
 vue-frontend/src/components/home/HomeCTA.vue  | 18 +++++++++++++++
 .../src/components/partials/ScreenHeader.vue  | 13 ++++++++++-
 6 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/vue-frontend/src/App.vue b/vue-frontend/src/App.vue
index 191505666..c3e323aea 100644
--- a/vue-frontend/src/App.vue
+++ b/vue-frontend/src/App.vue
@@ -57,7 +57,7 @@ body::-webkit-scrollbar {
   font-style: normal;
   font-weight: 400;
   font-size: 1.1rem;
-  line-height: 1.3rem;
+  line-height: 1.5rem;
   color: rgba(0, 0, 0, 0.5);
 }
 
diff --git a/vue-frontend/src/components/Error404Page.vue b/vue-frontend/src/components/Error404Page.vue
index 675612e24..9546824d3 100644
--- a/vue-frontend/src/components/Error404Page.vue
+++ b/vue-frontend/src/components/Error404Page.vue
@@ -16,7 +16,7 @@
         onclick="window.location.replace('/')"
       >
         <font-awesome-icon class="arrow" icon="arrow-left" id="leftArrow" />
-        <span class="black">Back to Home page</span>
+        <span class="canopas-gradient-text">Back to Home page</span>
       </a>
     </div>
     <ScreenFooter />
@@ -103,7 +103,6 @@ export default {
   text-align: center !important;
   font-weight: 700;
   font-size: 1.1rem !important;
-  line-height: 0.5rem;
 }
 
 .black {
@@ -123,7 +122,23 @@ export default {
 .gradient-border-btn {
   background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
     linear-gradient(to top, #ff9472, #f2709c);
-  box-shadow: 2px 1000px 1px #fff inset !important;
+  box-shadow: 2px 1000px 1px #fff inset;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .gradient-border-btn:hover{
+    background: linear-gradient(91.53deg, #f2709c 3.91%, #ff9472 100%);
+    border: 2px solid transparent;
+    box-shadow: none;
+  }
+
+  .gradient-border-btn:hover > span{
+    -webkit-text-fill-color: white;
+  }
+
+  .gradient-border-btn:hover > .arrow{
+    color: white;
+  }
 }
 
 @include media-breakpoint-up(md) {
diff --git a/vue-frontend/src/components/contact/ContactForm.vue b/vue-frontend/src/components/contact/ContactForm.vue
index 527bce415..df1a76414 100644
--- a/vue-frontend/src/components/contact/ContactForm.vue
+++ b/vue-frontend/src/components/contact/ContactForm.vue
@@ -261,7 +261,7 @@
             <button
               type="submit"
               v-if="contactType == 1"
-              class="gradient-btn gradient-bg-btn chat-email-btn"
+              class="gradient-btn chat-email-btn"
               @click.prevent="submitApplication()"
             >
               <font-awesome-icon
@@ -274,7 +274,7 @@
             <button
               type="submit"
               v-if="contactType == 0"
-              class="gradient-btn gradient-bg-btn call-now-btn"
+              class="gradient-btn call-now-btn"
               @click.prevent="submitApplication()"
             >
               <font-awesome-icon
@@ -881,6 +881,24 @@ input:-webkit-autofill:active {
   font-size: 1.1rem;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .gradient-btn:hover {
+    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
+      linear-gradient(to top, #ff9472, #f2709c);
+    box-shadow: 2px 1000px 1px #fff inset;
+  }
+
+  .gradient-btn:hover > span{
+    background: linear-gradient(89.88deg, #f2709c -1.25%, #ff9472 108.15%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .gradient-btn:hover > .fas{
+    color: #f2709c !important;
+  }
+}
+
 // calendly iframe
 
 .calendly-iframe-modal-content {
diff --git a/vue-frontend/src/components/contact/ContactLanding.vue b/vue-frontend/src/components/contact/ContactLanding.vue
index 4eb629a4b..7c5a9516f 100644
--- a/vue-frontend/src/components/contact/ContactLanding.vue
+++ b/vue-frontend/src/components/contact/ContactLanding.vue
@@ -41,8 +41,7 @@ export default {
 }
 
 .contact-description {
-  text-align: justify;
-  line-height: 2rem;
+  line-height: 1.5rem;
 }
 
 .contact-description > p {
diff --git a/vue-frontend/src/components/home/HomeCTA.vue b/vue-frontend/src/components/home/HomeCTA.vue
index 1308f2a2f..fd3ed0cea 100644
--- a/vue-frontend/src/components/home/HomeCTA.vue
+++ b/vue-frontend/src/components/home/HomeCTA.vue
@@ -140,6 +140,24 @@ export default {
   font-weight: 700;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .gradient-btn:hover {
+    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
+      linear-gradient(to top, #ff9472, #f2709c);
+    box-shadow: 2px 1000px 1px #fff inset;
+  }
+
+  .gradient-btn:hover > span{
+    background: linear-gradient(89.88deg, #f2709c -1.25%, #ff9472 108.15%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .gradient-btn:hover > .fa{
+    color: #f2709c !important;
+  }
+}
+
 .communication .fa {
   font-size: 1.5rem;
 }
diff --git a/vue-frontend/src/components/partials/ScreenHeader.vue b/vue-frontend/src/components/partials/ScreenHeader.vue
index d782aca8a..ef0613988 100644
--- a/vue-frontend/src/components/partials/ScreenHeader.vue
+++ b/vue-frontend/src/components/partials/ScreenHeader.vue
@@ -154,7 +154,7 @@ export default {
 .gradient-border-btn {
   background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
     linear-gradient(to top, #ff9472, #f2709c);
-  box-shadow: 2px 1000px 1px #fff inset !important;
+  box-shadow: 2px 1000px 1px #fff inset;
 }
 
 .header-logo-image {
@@ -169,6 +169,17 @@ export default {
 .start-btn {
   display: none;
 }
+@media (hover: hover) and (pointer: fine) {
+  .gradient-border-btn:hover{
+    background: linear-gradient(91.53deg, #f2709c 3.91%, #ff9472 100%);
+    border: 2px solid transparent;
+    box-shadow: none;
+  }
+
+  .gradient-border-btn:hover > span > span{
+    -webkit-text-fill-color: white;
+  }
+}
 
 @include media-breakpoint-up(md) {
   .navbar-nav .nav-item-margin .nav-link {

From 2d878d56ebe9b7163a1fae9b170184160492c523 Mon Sep 17 00:00:00 2001
From: sumita <sumita.k@canopas.com>
Date: Sat, 29 Jan 2022 15:52:24 +0530
Subject: [PATCH 3/3] Remove important from css

---
 vue-frontend/src/components/contact/ContactForm.vue | 2 +-
 vue-frontend/src/components/home/HomeCTA.vue        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/vue-frontend/src/components/contact/ContactForm.vue b/vue-frontend/src/components/contact/ContactForm.vue
index df1a76414..973d9fddb 100644
--- a/vue-frontend/src/components/contact/ContactForm.vue
+++ b/vue-frontend/src/components/contact/ContactForm.vue
@@ -895,7 +895,7 @@ input:-webkit-autofill:active {
   }
 
   .gradient-btn:hover > .fas{
-    color: #f2709c !important;
+    color: #f2709c;
   }
 }
 
diff --git a/vue-frontend/src/components/home/HomeCTA.vue b/vue-frontend/src/components/home/HomeCTA.vue
index fd3ed0cea..5aa43fd7d 100644
--- a/vue-frontend/src/components/home/HomeCTA.vue
+++ b/vue-frontend/src/components/home/HomeCTA.vue
@@ -154,7 +154,7 @@ export default {
   }
 
   .gradient-btn:hover > .fa{
-    color: #f2709c !important;
+    color: #f2709c;
   }
 }