From 56b69a743b5241ee68d8d92aa01483156af2e162 Mon Sep 17 00:00:00 2001
From: Davinder Singh <davibaweja@gmail.com>
Date: Wed, 4 Sep 2024 13:02:24 +0100
Subject: [PATCH] Plans page redesign - [light-design] Use the new "request
 overleaf common" UI on the student tab (#20199)

* making the university info section in students tab to follow the new design.

* adding the left alignment of the button

* adding light keyword for the classes that are being used in the light design version for this university info card

* removing text-capitalize class

* deleting the comment

GitOrigin-RevId: 641613cf6ab73edef57b917b58ebf10b698572d3
---
 .../subscriptions/plans-light-design.pug      |  4 +-
 .../plans/_university_info_light_design.pug   | 17 ++++++++
 .../app/plans/plans-light-touch-redesign.less | 39 ++++++++++---------
 3 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 services/web/app/views/subscriptions/plans/_university_info_light_design.pug

diff --git a/services/web/app/views/subscriptions/plans-light-design.pug b/services/web/app/views/subscriptions/plans-light-design.pug
index 1a754b5f26..f9e2ba0423 100644
--- a/services/web/app/views/subscriptions/plans-light-design.pug
+++ b/services/web/app/views/subscriptions/plans-light-design.pug
@@ -40,8 +40,6 @@ block content
 					
 				+currency_and_payment_methods()
 
-				include ./plans/_university_info
-
 				//- TODO: changing .plans-page-quote-row-hidden causes flickering on page load
 				.plans-page-quote-row(data-ol-show-for-plan-type="individual")
 					+collinsQuote1()
@@ -51,6 +49,8 @@ block content
 
 				.plans-page-quote-row.plans-page-quote-row-hidden(data-ol-show-for-plan-type="student")
 					+collinsQuote2()
+				
+				include ./plans/_university_info_light_design
 
 				include ./plans/_faq_new
 
diff --git a/services/web/app/views/subscriptions/plans/_university_info_light_design.pug b/services/web/app/views/subscriptions/plans/_university_info_light_design.pug
new file mode 100644
index 0000000000..476594f667
--- /dev/null
+++ b/services/web/app/views/subscriptions/plans/_university_info_light_design.pug
@@ -0,0 +1,17 @@
+.row.row-spaced-large(
+	data-ol-plans-university-info-container
+	hidden
+)
+	.col-xs-12
+		.card.plans-v2-university-info-light
+			div
+				h3.plans-v2-university-info-header-light #{translate('would_you_like_to_see_a_university_subscription')}
+				p.plans-v2-university-info-text-light #{translate('student_and_faculty_support_make_difference')}
+			a.btn.btn-secondary.plans-v2-btn-header-light(
+				target="_blank"
+				href="/for/support-an-overleaf-university-subscription"
+				event-tracking="plans-page-click"
+				event-tracking-mb="true"
+				event-tracking-trigger="click"
+				event-segmentation='{"button": "university-support"}'
+			) #{translate('show_your_support')}
diff --git a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less
index 7f9a0cdbb5..9e799d9fc7 100644
--- a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less
+++ b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less
@@ -213,17 +213,9 @@
     }
   }
 
-  a.btn.plans-v2-btn-header,
-  button.plans-v2-btn-header {
+  a.btn.plans-v2-btn-header-light,
+  button.plans-v2-btn-header-light {
     font-family: @font-family-sans-serif;
-    margin-top: @margin-sm;
-    text-shadow: 0 0 0;
-    background-color: @ol-blue;
-    color: @white;
-
-    &:hover {
-      color: @white;
-    }
   }
 
   .monthly-annual-switch {
@@ -1213,17 +1205,28 @@
     }
   }
 
-  .plans-v2-university-info {
+  .plans-v2-university-info-light {
     padding: @padding-lg @padding-xxl;
-    background-color: var(--neutral-20);
+    background-color: var(--white);
     border-radius: 20px;
+    max-width: @screen-sm-max; // 991px
+    margin: auto;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-07); // 20px
 
-    h3.plans-v2-university-info-header {
-      margin: 0 @margin-xl @margin-md @margin-xl;
+    @media (max-width: @screen-sm-max) {
+      flex-direction: column;
+      align-items: start;
     }
 
-    p.plans-v2-university-info-text {
-      margin: 0 @margin-xl;
+    h3.plans-v2-university-info-header-light {
+      margin: 0;
+    }
+
+    p.plans-v2-university-info-text-light {
+      margin: 0;
+      margin-top: @margin-sm;
     }
 
     a.plans-v2-btn-university-info {
@@ -1231,11 +1234,11 @@
     }
 
     @media (max-width: @screen-sm-max) {
-      h3.plans-v2-university-info-header {
+      h3.plans-v2-university-info-header-light {
         margin: 0 0 @margin-md 0;
       }
 
-      p.plans-v2-university-info-text {
+      p.plans-v2-university-info-text-light {
         margin: 0;
       }
     }