Merge pull request #10262 from overleaf/jel-ds-btn-secondary

[web] Buttons for new CSS build

GitOrigin-RevId: 9ae4284ba89296b77c37d61ba9b221bcab2f6458

services/web/app/views/_mixins/back_to_btns.pug

@@ -0,0 +1,4 @@
+mixin back-to-btns(settingsAnchor)
+	a.btn.btn-secondary.text-capitalize(href=`/user/settings${settingsAnchor ? '#' + settingsAnchor : '' }`) #{translate('back_to_account_settings')}
+	| 
+	a.btn.btn-secondary.text-capitalize(href='/project') #{translate('back_to_your_projects')}

services/web/app/views/beta_program/opt_in.pug

@@ -1,4 +1,5 @@
 extends ../layout-marketing
+include ../_mixins/back_to_btns
 
 block content
 	main.content.content-alt#main-content
@@ -47,7 +48,7 @@ block content
 														rel="noopener noreferrer"
 													).btn.btn-primary.btn-lg #{translate("give_feedback")}
 												.form-group
-													button.btn.btn-info.btn-sm(
+													button.btn.btn-secondary-info.btn-secondary.btn-sm(
 														type="submit"
 														data-ol-disabled-inflight
 													)
@@ -68,6 +69,4 @@ block content
 														span(data-ol-inflight="idle") #{translate("beta_program_opt_in_action")}
 														span(hidden data-ol-inflight="pending") #{translate("joining")}…
 							.page-separator
-							a.btn.btn-default.text-capitalize(href='/user/settings') #{translate('back_to_account_settings')}
+							+back-to-btns()
-							| 
-							a.btn.btn-default.text-capitalize(href='/project') #{translate('back_to_your_projects')}

services/web/app/views/general/400.pug

@@ -27,4 +27,4 @@ block body
 						p.error-actions
 							a.error-btn(href="javascript:history.back()") Back
 							|  
-							a.btn.btn-default(href="/") Home
+							a.btn.btn-secondary(href="/") Home

services/web/app/views/project/invite/not-valid.pug

@@ -14,5 +14,5 @@ block content
 									| #{translate("invite_not_valid_description")}.
 						.row.text-center.actions
 							.col-md-12
-								a.btn.btn-info(href="/project") #{translate("back_to_your_projects")}
+								a.btn.btn-secondary-info.btn-secondary(href="/project") #{translate("back_to_your_projects")}
 							

services/web/app/views/project/list/side-bar.pug

@@ -130,6 +130,6 @@ if (isOverleaf)
 				.text-centered.user-profile
 					p Are you affiliated with an institution?
 					
-					a.btn.btn-info(
+					a.btn.btn-secondary-info.btn-secondary(
 						href="/user/settings"
 					) Add Affiliation

services/web/app/views/user/email-preferences.pug

@@ -1,4 +1,5 @@
 extends ../layout-marketing
+include ../_mixins/back_to_btns
 
 block content
 	main.content.content-alt#main-content
@@ -42,6 +43,4 @@ block content
 							p #{translate("newsletter_info_note")}
 
 						.page-separator
-						a.btn.btn-default.text-capitalize(href='/user/settings') #{translate('back_to_account_settings')}
+						+back-to-btns()
-						| 
-						a.btn.btn-default.text-capitalize(href='/project') #{translate('back_to_your_projects')}

services/web/app/views/user/sessions.pug

@@ -68,6 +68,6 @@ block content
 								p.text-success.text-center
 									| #{translate('clear_sessions_success')}
 						.page-separator
-						a.btn.btn-default.text-capitalize(href='/user/settings') #{translate('back_to_account_settings')}
+						a.btn.btn-secondary.text-capitalize(href='/user/settings') #{translate('back_to_account_settings')}
 						| 
-						a.btn.btn-default.text-capitalize(href='/project') #{translate('back_to_your_projects')}
+						a.btn.btn-secondary.text-capitalize(href='/project') #{translate('back_to_your_projects')}

services/web/frontend/js/features/project-list/components/sidebar/add-affiliation.tsx

@@ -24,7 +24,11 @@ function AddAffiliation() {
   return (
     <div className="text-centered user-profile">
       <p>{t('are_you_affiliated_with_an_institution')}</p>
-      <Button bsStyle="info" href="/user/settings">
+      <Button
+        bsStyle={null}
+        className="btn-secondary-info btn-secondary"
+        href="/user/settings"
+      >
         {t('add_affiliation')}
       </Button>
     </div>

services/web/frontend/js/features/settings/components/linking/integration-widget.tsx

@@ -108,7 +108,8 @@ function ActionButton({
   if (!hasFeature) {
     return (
       <Button
-        bsStyle="info"
+        bsStyle={null}
+        className="btn-secondary-info btn-secondary"
         href="/user/subscription/plans"
         onClick={trackUpgradeClick}
       >
@@ -123,7 +124,12 @@ function ActionButton({
     )
   } else {
     return (
-      <Button bsStyle="info" href={linkPath} disabled={disabled}>
+      <Button
+        bsStyle={null}
+        className="btn-secondary-info btn-secondary"
+        href={linkPath}
+        disabled={disabled}
+      >
         <span className="text-capitalize">{t('link')}</span>
       </Button>
     )
@@ -166,7 +172,12 @@ function UnlinkConfirmationModal({
       <Modal.Footer>
         <form action={unlinkPath} method="POST" className="form-inline">
           <input type="hidden" name="_csrf" value={getMeta('ol-csrfToken')} />
-          <Button onClick={handleCancel}>{t('cancel')}</Button>
+          <Button
+            className="btn-secondary-info btn-secondary"
+            onClick={handleCancel}
+          >
+            {t('cancel')}
+          </Button>
           <Button type="submit" bsStyle="danger">
             {t('unlink')}
           </Button>

services/web/frontend/js/features/settings/components/linking/sso-widget.tsx

@@ -124,7 +124,10 @@ function ActionButton({
     )
   } else {
     return (
-      <a href={linkPath} className="btn btn-info text-capitalize">
+      <a
+        href={linkPath}
+        className="btn btn-secondary-info btn-secondary text-capitalize"
+      >
         {t('link')}
       </a>
     )
@@ -159,7 +162,11 @@ function UnlinkConfirmModal({
       </Modal.Body>
 
       <Modal.Footer>
-        <Button bsStyle="default" onClick={handleHide}>
+        <Button
+          bsStyle={null}
+          className="btn-secondary-info btn-secondary"
+          onClick={handleHide}
+        >
           {t('cancel')}
         </Button>
         <Button bsStyle="danger" onClick={handleConfirmation}>

services/web/frontend/stories/style-guide.stories.js

@@ -151,32 +151,70 @@ export const Headings = () => {
   )
 }
 
-export const Buttons = () => {
+export const Buttons = (args, { globals: { theme } }) => {
   return (
     <div className="content content-alt">
       <Grid>
         <Row>
           <Col md={8} mdOffset={2}>
             <h2>Buttons</h2>
-            <p>Our primary button is green:</p>
+
+            <h3>Primary Button</h3>
             <p>
               <Button bsStyle="primary">Primary Button</Button>
             </p>
-            <p>Our secondary button is blue:</p>
+
+            <h3>Secondary Button</h3>
+            {theme.includes('main') ? (
+              <>
                 <p>
-              <Button bsStyle="info">Secondary Button</Button>
+                  <button className="btn btn-secondary">
+                    Secondary Button
+                  </button>
                 </p>
-            <p>All button styles</p>
+                <h3>Deprecated Styles</h3>
-            <p />
+                <p>
+                  These are being transitioned to the new secondary style above
+                </p>
+              </>
+            ) : (
+              ''
+            )}
+            <p>Our secondary button is blue or dark gray:</p>
+            <div className="btn-toolbar">
+              <Button bsStyle="info">Info Button</Button>
+              <Button bsStyle="default">Default Button</Button>
+            </div>
+
+            <h3>All button styles</h3>
+            {theme.includes('main') ? (
+              <p>Includes styles being deprecated</p>
+            ) : (
+              ''
+            )}
             <div className="btn-toolbar">
               <Button bsStyle="primary">Primary</Button>
-              <Button bsStyle="info">Info (secondary)</Button>
+              {theme.includes('main') ? (
+                <button className="btn btn-secondary">Secondary</button>
+              ) : (
+                ''
+              )}
+              <Button bsStyle="info">Info</Button>
               <Button bsStyle="default">Default</Button>
               <Button bsStyle="success">Success</Button>
               <Button bsStyle="warning">Warning</Button>
               <Button bsStyle="danger">Danger</Button>
             </div>
-            <p />
+
+            <h3>Sizes</h3>
+            <div className="btn-toolbar">
+              <button className="btn btn-primary btn-xs">Extra Small</button>
+              <button className="btn btn-primary btn-sm">Small</button>
+              <button className="btn btn-primary">Default</button>
+              <button className="btn btn-primary btn-lg">Large</button>
+              <button className="btn btn-primary btn-xl">Extra Large</button>
+            </div>
+
             <h2>Hyperlinks</h2>
             <p>
               Hyperlinks are highlighted <a href="#">as shown</a>.

services/web/frontend/stylesheets/app/login-register.less

@@ -94,7 +94,7 @@
   }
 }
 
-.login-btn {
+.login-btn when(@is-new-css = false) {
   .btn;
   .btn-default;
   position: relative;
@@ -102,6 +102,14 @@
   padding-right: 0;
 }
 
+.login-btn when(@is-new-css = true) {
+  .btn;
+  .btn-secondary;
+  position: relative;
+  padding-left: 20px;
+  padding-right: 0;
+}
+
 .login-btn-sharelatex {
   background-color: @brand-sharelatex-color;
   &:focus,

services/web/frontend/stylesheets/components/button-groups.less

@@ -120,7 +120,7 @@
 
 // The clickable button for toggling the menu
 // Remove the gradient and set the same inset shadow as the :active state
-.btn-group.open .dropdown-toggle {
+.btn-group.open .dropdown-toggle when (@is-new-css = false) {
   .box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
 
   // Show no shadow for `.btn-link` since it has no other button styles.
@@ -128,6 +128,15 @@
     .box-shadow(none);
   }
 }
+.btn-group.open .dropdown-toggle when (@is-new-css = true) {
+  &.btn-secondary {
+    background-color: @btn-secondary-hover-bg-color;
+  }
+  &.btn-primary {
+    border-color: @btn-primary-hover-bg-color;
+    background-color: @btn-primary-hover-bg-color;
+  }
+}
 .btn-form-cross {
   display: block;
 }

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

@@ -5,7 +5,7 @@
 // Base styles
 // --------------------------------------------------
 
-.btn {
+.btn when(@is-new-css = false) {
   display: inline-block;
   margin-bottom: 0; // For input.btn
   font-weight: @btn-font-weight;
@@ -52,6 +52,53 @@
     .box-shadow(none);
   }
 }
+.btn when(@is-new-css = true) {
+  display: inline-block;
+  margin-bottom: 0; // For input.btn
+  font-weight: @btn-font-weight;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: @border-size solid transparent;
+  white-space: nowrap;
+  .button-size(
+    @padding-base-vertical; @padding-base-horizontal; @font-size-base;
+      @line-height-base; @btn-border-radius-base
+  );
+  .user-select(none);
+
+  &,
+  &:active,
+  &.active {
+    &:focus {
+      .tab-focus();
+    }
+  }
+
+  &:hover,
+  &:focus {
+    color: @btn-default-color;
+    text-decoration: none;
+  }
+
+  // &:active,
+  // &.active {
+  // }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      cursor: not-allowed;
+      opacity: 1; //needed to override deprecated styling in individual classes
+      .box-shadow(none);
+    }
+  }
+}
 
 // Alternate buttons
 // --------------------------------------------------
@@ -62,16 +109,20 @@
 .btn-default-outline {
   .button-outline-variant(@btn-default-bg);
 }
-.btn-primary {
+.btn-primary when (@is-new-css = false) {
   .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
 }
+.btn-primary when (@is-new-css = true) {
+  .btn-borderless();
+}
 .btn-primary-on-primary-bg {
   .button-variant(@white; @ol-dark-green; @ol-dark-green);
 }
 // Success appears as green
 .btn-success {
-  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
+  .btn-primary;
 }
+
 // Info appears as blue-green
 .btn-info {
   .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
@@ -84,6 +135,22 @@
 .btn-danger {
   .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
+// btn-secondary
+.btn-secondary when(@is-new-css = false) {
+  &:not(.btn-secondary-info) {
+    .btn-default;
+  }
+}
+.btn-secondary when(@is-new-css = true) {
+  .btn-bordered();
+}
+// btn-info for old and btn-secondary for new
+.btn-secondary-info when(@is-new-css = false) {
+  .btn-info;
+}
+.btn-secondary-info when(@is-new-css = true) {
+  .btn-secondary;
+}
 
 .reset-btns {
   // reset all buttons back to their original colors
@@ -108,6 +175,9 @@
   .btn-warning {
     .btn-warning;
   }
+  .btn-secondary {
+    .btn-secondary;
+  }
 }
 
 // Link buttons

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

@@ -71,7 +71,7 @@
   .btn-styles(@btn-primary-bg);
 }
 .btn-success {
-  .btn-styles(@btn-success-bg);
+  .btn-styles(@btn-primary-bg);
 }
 .btn-info {
   .btn-styles(@btn-info-bg);

services/web/frontend/stylesheets/core/mixins.less

@@ -27,13 +27,16 @@
 }
 
 // WebKit-style focus
-.tab-focus() {
+.tab-focus() when (@is-new-css = false) {
   // Default
   outline: thin dotted;
   // WebKit
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
+.tab-focus() when (@is-new-css = true) {
+  outline: none;
+}
 
 // Center-align a block level element
 .center-block() {
@@ -125,6 +128,9 @@
   -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
   box-shadow: @shadow;
 }
+.box-shadow-button-input() {
+  box-shadow: 0px 0px 0px 2px rgba(50, 101, 178, 0.56);
+}
 
 // Transitions
 .transition(@transition) {
@@ -543,6 +549,91 @@
   border-radius: @btn-border-radius-base;
 }
 
+.btn-bordered() {
+  color: @content-primary;
+  background-color: @white;
+  border-color: @border-color-base;
+
+  &:hover {
+    background-color: @btn-secondary-hover-bg-color;
+  }
+
+  &:focus {
+    color: @content-primary;
+    outline: none;
+  }
+
+  &:focus-visible,
+  &:active {
+    .box-shadow-button-input();
+    outline: none;
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:active {
+    color: @content-primary;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus-visible,
+    &:active,
+    &.active {
+      background-color: @color-disabled;
+      border-color: @border-color-disabled;
+      color: @content-disabled;
+    }
+  }
+}
+
+.btn-borderless(@color: @white; @background: @green; @background-hover: @btn-primary-hover-bg-color) {
+  color: @color;
+  background-color: @background;
+  border-color: @background; // add a border that is same as background color so that the height matches the btn-bordered style
+
+  &:hover {
+    background-color: @background-hover;
+    border-color: @background-hover;
+  }
+
+  &:focus {
+    color: @color;
+    outline: none;
+  }
+
+  &:focus-visible,
+  &:active {
+    background-color: @background;
+    border-color: @background;
+    .box-shadow-button-input();
+    outline: none;
+  }
+
+  &:hover,
+  &:focus-visible,
+  &:active {
+    color: @color;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus-visible,
+    &:active,
+    &.active {
+      background-color: @color-disabled;
+      border-color: @color-disabled;
+      color: @content-disabled;
+    }
+  }
+}
+
 // Tables
 // -------------------------
 .table-row-variant(@state; @background) {
@@ -706,13 +797,21 @@
 
 // Button sizes
 // -------------------------
-.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius)
+  when(@is-new-css = false) {
   // Remove 1px to make up for the extra px of border-bottom we've added
   padding: @padding-vertical - 1 @padding-horizontal @padding-vertical;
   font-size: @font-size;
   line-height: @line-height;
   border-radius: @border-radius;
 }
+.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius)
+  when(@is-new-css = true) {
+  padding: @padding-vertical - @border-size @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+}
 
 // Pagination
 // -------------------------
@@ -1117,7 +1216,7 @@
   // need to define as class for recurly UI
   border-color: @input-border-focus;
   outline: 0;
-  box-shadow: 0px 0px 0px 2px rgba(50, 101, 178, 0.56);
+  .box-shadow-button-input();
 }
 
 .form-control-focus() when (@is-new-css = true) {

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

@@ -202,10 +202,6 @@
 @btn-primary-bg: @ol-green;
 @btn-primary-border: transparent;
 
-@btn-success-color: #fff;
-@btn-success-bg: @ol-green;
-@btn-success-border: transparent;
-
 @btn-info-color: #fff;
 @btn-info-bg: @ol-blue;
 @btn-info-border: transparent;

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

@@ -91,7 +91,7 @@
 @padding-small-vertical: 5px;
 @padding-small-horizontal: 10px;
 
-@padding-xs-vertical: 1px;
+@padding-xs-vertical: 1.5px;
 @padding-xs-horizontal: 8px;
 
 @padding-xs: 5px;
@@ -110,6 +110,7 @@
 @border-width-base: 3px; // only used by plans and cards
 @border-size: 1.5px;
 @border-color-base: @neutral-40;
+@border-color-disabled: @color-disabled;
 
 //** Horizontal line color.
 @hr-border: @neutral-20;
@@ -161,10 +162,6 @@
 @btn-primary-bg: @green;
 @btn-primary-border: transparent;
 
-@btn-success-color: #fff;
-@btn-success-bg: @green;
-@btn-success-border: transparent;
-
 @btn-info-color: #fff;
 @btn-info-bg: @blue;
 @btn-info-border: transparent;
@@ -191,7 +188,7 @@
 //** Text color for `<input>`s
 @input-color: @neutral-90;
 //** `<input>` border color
-@input-border: @neutral-40;
+@input-border: @border-color-base;
 //** `<input>` border radius
 @input-border-radius: 4px;
 //** Border color for inputs on focus
@@ -710,6 +707,8 @@
 @btn-border-radius-small: 9999px;
 @btn-border-width: 0;
 @btn-border-bottom-width: 0;
+@btn-primary-hover-bg-color: @green-dark;
+@btn-secondary-hover-bg-color: @neutral-20;
 
 // Cards
 @card-box-shadow: none;