Merge pull request #33 from canopas/sumita/refactoring-404-ui

Refactor 404 UI and add hovering effect
canopas · Jan 29, 2022 · 59125ad · 59125ad
2 parents e81e21f + 2d878d5
commit 59125ad
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 10 deletions.
diff --git 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
@@ -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 />
@@ -63,7 +63,7 @@ export default {
   justify-content: center;
   flex: 1;
   flex-direction: column;
-  margin: 16px 48px;
+  margin: 16px;
 }
 
 .image-404 {
@@ -96,13 +96,13 @@ export default {
   display: flex;
   justify-content: space-around !important;
   align-items: center;
+  text-decoration: none;
 }
 
 .back-btn > span {
   text-align: center !important;
   font-weight: 700;
   font-size: 1.1rem !important;
-  line-height: 0.5rem;
 }
 
 .black {
@@ -122,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
@@ -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;
+  }
+}
+
 // calendly iframe
 
 .calendly-iframe-modal-content {

diff --git 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
@@ -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;
+  }
+}
+
 .communication .fa {
   font-size: 1.5rem;
 }

diff --git 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 {