diff --git a/services/web/app/views/_mixins/back_to_btns.pug b/services/web/app/views/_mixins/back_to_btns.pug new file mode 100644 index 0000000000..da1c9c09db --- /dev/null +++ b/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')} \ No newline at end of file diff --git a/services/web/app/views/beta_program/opt_in.pug b/services/web/app/views/beta_program/opt_in.pug index 07be27c338..bc26ae94a5 100644 --- a/services/web/app/views/beta_program/opt_in.pug +++ b/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')} - | - a.btn.btn-default.text-capitalize(href='/project') #{translate('back_to_your_projects')} + +back-to-btns() diff --git a/services/web/app/views/general/400.pug b/services/web/app/views/general/400.pug index aa9af91c66..92301293a0 100644 --- a/services/web/app/views/general/400.pug +++ b/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 diff --git a/services/web/app/views/project/invite/not-valid.pug b/services/web/app/views/project/invite/not-valid.pug index a3fc5acf20..b26e580a04 100644 --- a/services/web/app/views/project/invite/not-valid.pug +++ b/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")} diff --git a/services/web/app/views/project/list/side-bar.pug b/services/web/app/views/project/list/side-bar.pug index fde0461346..be7b5e9ab7 100644 --- a/services/web/app/views/project/list/side-bar.pug +++ b/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 diff --git a/services/web/app/views/user/email-preferences.pug b/services/web/app/views/user/email-preferences.pug index c06fb48fdc..d4eeda4c1e 100644 --- a/services/web/app/views/user/email-preferences.pug +++ b/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')} - | - a.btn.btn-default.text-capitalize(href='/project') #{translate('back_to_your_projects')} + +back-to-btns() diff --git a/services/web/app/views/user/sessions.pug b/services/web/app/views/user/sessions.pug index 1aa5d312ce..78445e71cf 100644 --- a/services/web/app/views/user/sessions.pug +++ b/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')} diff --git a/services/web/frontend/js/features/project-list/components/sidebar/add-affiliation.tsx b/services/web/frontend/js/features/project-list/components/sidebar/add-affiliation.tsx index 057aae94b2..51711df5bb 100644 --- a/services/web/frontend/js/features/project-list/components/sidebar/add-affiliation.tsx +++ b/services/web/frontend/js/features/project-list/components/sidebar/add-affiliation.tsx @@ -24,7 +24,11 @@ function AddAffiliation() { return (

{t('are_you_affiliated_with_an_institution')}

-
diff --git a/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx b/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx index 9bb03ada8b..998a6fac68 100644 --- a/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx +++ b/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx @@ -108,7 +108,8 @@ function ActionButton({ if (!hasFeature) { return ( ) @@ -166,7 +172,12 @@ function UnlinkConfirmationModal({
- + diff --git a/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx b/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx index 2e1868dcf2..d0c20df4b1 100644 --- a/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx +++ b/services/web/frontend/js/features/settings/components/linking/sso-widget.tsx @@ -124,7 +124,10 @@ function ActionButton({ ) } else { return ( - + {t('link')} ) @@ -159,7 +162,11 @@ function UnlinkConfirmModal({ -

-

Our secondary button is blue:

-

- -

-

All button styles

-

+ +

Secondary Button

+ {theme.includes('main') ? ( + <> +

+ +

+

Deprecated Styles

+

+ These are being transitioned to the new secondary style above +

+ + ) : ( + '' + )} +

Our secondary button is blue or dark gray:

+
+ + +
+ +

All button styles

+ {theme.includes('main') ? ( +

Includes styles being deprecated

+ ) : ( + '' + )}
- + {theme.includes('main') ? ( + + ) : ( + '' + )} +
-

+ +

Sizes

+
+ + + + + +
+

Hyperlinks

Hyperlinks are highlighted as shown. diff --git a/services/web/frontend/stylesheets/app/login-register.less b/services/web/frontend/stylesheets/app/login-register.less index 307556ba51..4734e0b3f4 100644 --- a/services/web/frontend/stylesheets/app/login-register.less +++ b/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, diff --git a/services/web/frontend/stylesheets/components/button-groups.less b/services/web/frontend/stylesheets/components/button-groups.less index 4cef4b6a1e..ed95d18a0c 100755 --- a/services/web/frontend/stylesheets/components/button-groups.less +++ b/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; } diff --git a/services/web/frontend/stylesheets/components/buttons.less b/services/web/frontend/stylesheets/components/buttons.less index 1dbaacd034..e659572d76 100755 --- a/services/web/frontend/stylesheets/components/buttons.less +++ b/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 diff --git a/services/web/frontend/stylesheets/components/theme.less b/services/web/frontend/stylesheets/components/theme.less index 28e1914e75..bd85c49991 100755 --- a/services/web/frontend/stylesheets/components/theme.less +++ b/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); diff --git a/services/web/frontend/stylesheets/core/mixins.less b/services/web/frontend/stylesheets/core/mixins.less index 11f0ab2f44..28746e23e5 100755 --- a/services/web/frontend/stylesheets/core/mixins.less +++ b/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) { diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less index 4d16729e5f..22e8e45371 100644 --- a/services/web/frontend/stylesheets/core/variables.less +++ b/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; diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less index 5515e13db1..31289cee8f 100644 --- a/services/web/frontend/stylesheets/variables/all.less +++ b/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 ``s @input-color: @neutral-90; //** `` border color -@input-border: @neutral-40; +@input-border: @border-color-base; //** `` 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;