Merge pull request #16254 from overleaf/tm-website-redesign-navbar-footer-base

Implement navbar and footer changes for website redesign, and for existing pages for treatment users

GitOrigin-RevId: d91328e3928bc0e249e19eff34c6f9423784ccbf

services/web/app/views/layout/fat-footer-website-redesign.pug

@@ -1,4 +1,4 @@
-footer.fat-footer.hidden-print.website-redesign
+footer.fat-footer.hidden-print.website-redesign-fat-footer
 	.fat-footer-container(role="navigation" aria-label=translate('footer_navigation'))
 		.fat-footer-sections(class=hideFatFooter ? 'hidden' : undefined)
 			.footer-section#footer-brand
@@ -45,7 +45,7 @@ footer.fat-footer.hidden-print.website-redesign
 					li
 						a(href="/user/subscription/plans?itm_referrer=footer-for-indv-groups") !{translate('for_individuals_and_groups')}
 					li
-						a(href="/for/enterprises") #{translate('for_enterprise')}
+						a(href="/for/enterprises") #{translate('for_business')}
 					li
 						a(href="/for/universities") #{translate('for_universities')}
 					li
@@ -69,6 +69,8 @@ footer.fat-footer.hidden-print.website-redesign
 				h2.footer-section-heading #{translate('help')}
 		
 				ul.list-unstyled
+					li
+						a(href="/about/why-latex") #{translate('why_latex')}
 					li
 						a(href="/learn") #{translate('Documentation')} 
 					li

services/web/app/views/layout/fat-footer.pug

@@ -1,3 +1,5 @@
+- var websiteRedesignActive = splitTestVariants && (splitTestVariants['website-redesign'] === 'new-design' || splitTestVariants['website-redesign'] === 'new-design-registration')
+
 footer.fat-footer.hidden-print
 	.fat-footer-container(role="navigation" aria-label=translate('footer_navigation'))
 		.fat-footer-sections(class=hideFatFooter ? 'hidden' : undefined)
@@ -69,6 +71,9 @@ footer.fat-footer.hidden-print
 				h2.footer-section-heading #{translate('help')}
 		
 				ul.list-unstyled
+					if websiteRedesignActive
+						li
+							a(href="/about/why-latex") #{translate('why_latex')}
 					li
 						a(href="/learn") #{translate('Documentation')} 
 					li

services/web/app/views/layout/navbar-marketing.pug

@@ -1,3 +1,5 @@
+- var websiteRedesignActive = splitTestVariants && (splitTestVariants['website-redesign'] === 'new-design' || splitTestVariants['website-redesign'] === 'new-design-registration')
+
 nav.navbar.navbar-default.navbar-main
 	.container-fluid
 		.navbar-header
@@ -64,7 +66,8 @@ nav.navbar.navbar-default.navbar-main
 										a(href="/admin/survey") Manage Surveys
 
 					// loop over header_extras
-					each item in nav.header_extras
+					- var headerExtras = websiteRedesignActive ? nav.header_extras_website_redesign : nav.header_extras
+					each item in headerExtras
 						-
 							if ((item.only_when_logged_in && getSessionUser())
 											|| (item.only_when_logged_out && (!getSessionUser()))
@@ -127,26 +130,48 @@ nav.navbar.navbar-default.navbar-main
 					if !getSessionUser()
 						// register link
 						if hasFeature('registration-page')
+							if websiteRedesignActive
+								li.primary
+									a(
+										href="/register"
+										event-tracking="menu-clicked-register"
+										event-tracking-action="clicked"
+										event-tracking-trigger="click"
+										event-tracking-mb="true"
+										event-segmentation={ page: currentUrl }
+									) #{translate('sign_up')}
+							else
+								li
+									a(
+										href="/register"
+										event-tracking="menu-clicked-register"
+										event-tracking-action="clicked"
+										event-tracking-trigger="click"
+										event-tracking-mb="true"
+										event-segmentation={ page: currentUrl }
+									) #{translate('Register')}
+
+						// login link
+						if websiteRedesignActive
 							li
 								a(
-									href="/register"
-									event-tracking="menu-clicked-register"
+									href="/login"
+									event-tracking="menu-clicked-login"
 									event-tracking-action="clicked"
 									event-tracking-trigger="click"
 									event-tracking-mb="true"
 									event-segmentation={ page: currentUrl }
-								) #{translate('register')}
-
-						// login link
-						li
-							a(
-								href="/login"
-								event-tracking="menu-clicked-login"
-								event-tracking-action="clicked"
-								event-tracking-trigger="click"
-								event-tracking-mb="true"
-								event-segmentation={ page: currentUrl }
-							).text-capitalize #{translate('log_in')}
+								) #{translate('log_in')}
+						else
+							li
+								a(
+									href="/login"
+									event-tracking="menu-clicked-login"
+									event-tracking-action="clicked"
+									event-tracking-trigger="click"
+									event-tracking-mb="true"
+									event-segmentation={ page: currentUrl }
+								).text-capitalize #{translate('log_in')}
 
 					// projects link and account menu
 					if getSessionUser()

services/web/app/views/layout/navbar-website-redesign.pug

@@ -1,4 +1,4 @@
-nav.navbar.navbar-default.navbar-main.website-redesign
+nav.navbar.navbar-default.navbar-main.website-redesign-navbar
 	.container-fluid
 		.navbar-header
 			if (typeof(suppressNavbarRight) == "undefined")
@@ -64,7 +64,7 @@ nav.navbar.navbar-default.navbar-main.website-redesign
 										a(href="/admin/survey") Manage Surveys
 
 					// loop over header_extras
-					each item in nav.header_extras
+					each item in nav.header_extras_website_redesign
 						-
 							if ((item.only_when_logged_in && getSessionUser())
 											|| (item.only_when_logged_out && (!getSessionUser()))
@@ -127,7 +127,7 @@ nav.navbar.navbar-default.navbar-main.website-redesign
 					if !getSessionUser()
 						// register link
 						if hasFeature('registration-page')
-							li
+							li.primary
 								a(
 									href="/register"
 									event-tracking="menu-clicked-register"
@@ -135,10 +135,10 @@ nav.navbar.navbar-default.navbar-main.website-redesign
 									event-tracking-trigger="click"
 									event-tracking-mb="true"
 									event-segmentation={ page: currentUrl }
-								) #{translate('register')}
+								) #{translate('sign_up')}
 
 						// login link
-						li
+						li.secondary
 							a(
 								href="/login"
 								event-tracking="menu-clicked-login"
@@ -150,9 +150,9 @@ nav.navbar.navbar-default.navbar-main.website-redesign
 
 					// projects link and account menu
 					if getSessionUser()
-						li
+						li.secondary
 							a(href="/project") #{translate('Projects')}
-						li.dropdown
+						li.secondary.dropdown
 							a.dropdown-toggle(
 								href="#",
 								role="button",

services/web/frontend/stylesheets/components/footer.less

@@ -298,7 +298,7 @@ footer.site-footer {
   }
 }
 
-.website-redesign {
+.website-redesign-fat-footer {
   &.fat-footer {
     background: @white;
     color: @neutral-90;
@@ -306,9 +306,28 @@ footer.site-footer {
     a {
       color: @neutral-90;
     }
+
+    .footer-section-heading {
+      color: @neutral-90;
+    }
+
+    h2 {
+      font-weight: 400;
+    }
+
+    .fat-footer-base {
+      color: @neutral-90;
+    }
   }
 
   .footer-brand {
     background-image: @navbar-brand-image-url-website-redesign;
   }
+
+  @media (max-width: @screen-xs-max) {
+    .fat-footer-sections {
+      grid-template-columns: repeat(1, 1fr);
+      grid-template-rows: repeat(6, auto);
+    }
+  }
 }

services/web/frontend/stylesheets/components/navbar.less

@@ -488,6 +488,16 @@
       }
     }
 
+    > li.primary > a {
+      .btn-borderless();
+    }
+
+    > li.secondary > a {
+      .btn-bordered();
+
+      border-width: @border-radius-small;
+    }
+
     @media (min-width: @grid-float-breakpoint) {
       > li > a {
         border-color: @navbar-default-link-border-color;
@@ -615,7 +625,7 @@
   }
 }
 
-.website-redesign {
+.website-redesign-navbar {
   &.navbar-default {
     background-color: @navbar-default-bg-website-redesign;
 
@@ -627,51 +637,141 @@
       color: @navbar-default-color-website-redesign;
     }
 
+    // There is this -15px margin hack that is needed on the original
+    // This causes inconsistency with the website redesign navbar,
+    // so reset it to 0 for now
+    @media (min-width: @grid-float-breakpoint) {
+      .navbar-right:last-child {
+        margin-right: 0;
+      }
+    }
+
     .navbar-nav {
       > li > a {
         color: @navbar-default-link-color-website-redesign;
         // border: 2px solid transparent;
-        font-size: @navbar-btn-font-size; // TODO
-        font-weight: @navbar-btn-font-weight; // TODO
-        line-height: @navbar-btn-line-height; // TODO
-        background-color: @navbar-default-link-bg; // TODO
 
+        @media (min-width: @grid-float-breakpoint) {
+          border-radius: @navbar-btn-border-radius;
+          padding: @navbar-btn-padding;
+        }
+      }
+
+      > li.subdued > a {
+        color: @navbar-subdued-color-website-redesign;
         &:hover,
         &:focus {
-          color: #fff;
-          background-color: @navbar-default-link-hover-bg; // TODO
-          // border: 2px solid @navbar-default-link-hover-color; // TODO
+          color: @navbar-subdued-hover-color-website-redesign;
+          background-color: @navbar-subdued-hover-bg-website-redesign;
+        }
+        &:focus {
+          .tab-focus();
+        }
+        @media (min-width: @grid-float-breakpoint) {
+          padding: @navbar-subdued-padding;
         }
       }
-      > .active > a {
-        &,
+
+      > li.primary > a {
+        .btn-borderless();
+      }
+
+      > li.secondary > a {
+        .btn-bordered();
+
+        border-width: @border-radius-small;
+        border-color: transparent;
+
+        @media (min-width: @grid-float-breakpoint) {
+          border-color: @btn-bordered-border-color;
+        }
+      }
+    }
+
+    .navbar-toggle {
+      border-color: @navbar-default-toggle-border-color-website-redesign;
+      color: @navbar-default-link-color-website-redesign;
+      &:hover,
+      &.active {
+        background-color: @navbar-default-toggle-hover-bg-website-redesign;
+        border-color: @navbar-default-toggle-hover-bg-website-redesign;
+        color: #fff;
+      }
+    }
+
+    .navbar-collapse {
+      // Use absolute positioning to build the hamburger menu.
+      background-color: @navbar-default-bg-website-redesign;
+      border-bottom: solid 1px @navbar-default-border;
+    }
+
+    // Dropdown menu items
+    .navbar-nav {
+      .dropdown-menu-button,
+      .dropdown-menu > li > a {
         &:hover,
         &:focus {
-          color: @navbar-default-link-active-color; // TODO
-          background-color: @navbar-default-link-active-bg; // TODO
+          background-color: @navbar-default-link-active-bg-website-redesign;
         }
       }
-      > .disabled > a {
+
+      // Remove background color from open dropdown
+      > .open > a {
         &,
         &:hover,
         &:focus {
-          color: @navbar-default-link-disabled-color; // TODO
-          background-color: @navbar-default-link-disabled-bg; // TODO
+          background-color: @btn-secondary-hover-bg-color; // force secondary button style
+          color: @navbar-default-link-active-color-website-redesign;
         }
       }
 
-      > li.subdued > a {
-        color: @navbar-subdued-color-website-redesign;
+      > .open.subdued > a {
+        &,
         &:hover,
         &:focus {
           color: @navbar-subdued-hover-color-website-redesign;
           background-color: @navbar-subdued-hover-bg-website-redesign;
         }
-        &:focus {
-          .tab-focus();
-        }
-        @media (min-width: @grid-float-breakpoint) {
-          padding: @navbar-subdued-padding;
+      }
+
+      @media (max-width: @grid-float-breakpoint-max) {
+        // Dropdowns get custom display when collapsed
+        .open .dropdown-menu {
+          background-color: darken(@navbar-default-bg-website-redesign, 5%);
+          > li > div.subdued {
+            color: mix(
+              @navbar-default-link-color-website-redesign,
+              @navbar-default-bg-website-redesign
+            );
+          }
+          > li > a,
+          > li > form > button {
+            // padding: 12px 12px 13px 30px;
+            color: @navbar-default-link-color-website-redesign;
+            &:hover,
+            &:focus {
+              color: #fff;
+              background-color: @navbar-default-link-hover-bg-website-redesign;
+            }
+          }
+          > .active > a,
+          > .active > form > button {
+            &,
+            &:hover,
+            &:focus {
+              color: @navbar-default-link-active-color-website-redesign;
+              background-color: @navbar-default-link-active-bg-website-redesign;
+            }
+          }
+          > .disabled > a,
+          > .disabled > form > button {
+            &,
+            &:hover,
+            &:focus {
+              color: @navbar-default-link-disabled-color-website-redesign;
+              background-color: @navbar-default-link-disabled-bg;
+            }
+          }
         }
       }
     }

services/web/frontend/stylesheets/variables/all.less

@@ -400,9 +400,13 @@
 @navbar-default-link-border-color: @navbar-default-link-color;
 @navbar-default-link-hover-color: @green;
 @navbar-default-link-hover-bg: @green;
+@navbar-default-link-hover-bg-website-redesign: @neutral-90;
 @navbar-default-link-active-color: #fff;
+@navbar-default-link-active-color-website-redesign: @neutral-90;
 @navbar-default-link-active-bg: @green;
+@navbar-default-link-active-bg-website-redesign: @neutral-90;
 @navbar-default-link-disabled-color: #ccc;
+@navbar-default-link-disabled-color-website-redesign: @neutral-80;
 @navbar-default-link-disabled-bg: transparent;
 
 // Navbar brand label
@@ -412,7 +416,9 @@
 
 // Navbar toggle
 @navbar-default-toggle-hover-bg: @link-hover-color;
+@navbar-default-toggle-hover-bg-website-redesign: @neutral-90;
 @navbar-default-toggle-border-color: @link-color;
+@navbar-default-toggle-border-color-website-redesign: @neutral-90;
 
 //== Navs
 //
@@ -765,9 +771,9 @@
 @navbar-subdued-hover-bg: #fff;
 @navbar-subdued-hover-bg-website-redesign: @neutral-90;
 @navbar-subdued-hover-color: @green;
-@navbar-subdued-hover-color-website-redesign: @green; // TODO
+@navbar-subdued-hover-color-website-redesign: #fff;
 @navbar-brand-image-url: url(../../../public/img/ol-brand/overleaf-white.svg);
-@navbar-brand-image-url-website-redesign: url(../../../public/img/ol-brand/overleaf.svg);
+@navbar-brand-image-url-website-redesign: url(../../../public/img/ol-brand/overleaf-black.svg);
 
 @dropdown-divider-margin: 6px;
 @dropdown-item-padding: 4px 20px;

services/web/locales/en.json

@@ -609,6 +609,7 @@
   "footer_navigation": "Footer navigation",
   "footer_plans_and_pricing": "Plans & pricing",
   "for_american_express": "For <0>American Express</0>, the <1>4 digits</1> on the <2>front</2> of your card.",
+  "for_business": "For business",
   "for_enterprise": "For enterprise",
   "for_enterprises": "For Enterprises",
   "for_groups": "For Groups",
@@ -620,6 +621,7 @@
   "for_students_only": "For students only",
   "for_teaching": "For Teaching",
   "for_universities": "For Universities",
+  "for_universities_lowercase": "For universities",
   "for_visa_mastercard_and_discover": "For <0>Visa, MasterCard and Discover</0>, the <1>3 digits</1> on the <2>back</2> of your card.",
   "for_writing": "For Writing",
   "forgot_your_password": "Forgot your password",
@@ -1672,6 +1674,7 @@
   "showing_x_out_of_n_projects": "Showing __x__ out of __n__ projects.",
   "showing_x_results": "Showing __x__ results",
   "showing_x_results_of_total": "Showing __x__ results of __total__",
+  "sign_up": "Sign up",
   "sign_up_now": "Sign Up Now",
   "signature_algorithm": "Signature Algorithm",
   "single_sign_on_sso": "Single Sign-On (SSO)",
@@ -2104,6 +2107,7 @@
   "what_happens_when_sso_is_enabled": "What happens when SSO is enabled?",
   "what_should_we_call_you": "What should we call you?",
   "when_you_tick_the_include_caption_box": "When you tick the box “Include caption” the image will be inserted into your document with a placeholder caption. To edit it, you simply select the placeholder text and type to replace it with your own.",
+  "why_latex": "Why LaTeX?",
   "wide": "Wide",
   "will_need_to_log_out_from_and_in_with": "You will need to <b>log out</b> from your <b>__email1__</b> account and then log in with <b>__email2__</b>.",
   "with_premium_subscription_you_also_get": "With an Overleaf Premium subscription you also get",