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

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
 

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')}

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;
+    }
+
+    h3.plans-v2-university-info-header-light {
+      margin: 0;
     }
 
-    p.plans-v2-university-info-text {
-      margin: 0 @margin-xl;
+    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;
       }
     }