agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-14 06:03:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15901 from overleaf/tm-design-system-updates-teardown

Browse Source 
Design system updates test tear down and clean up

GitOrigin-RevId: 743423f7c31c0ba89093bba0107d7e6799e1c309
This commit is contained in:
Thomas
2023-11-28 09:04:06 +00:00
committed by Copybot
parent 295daf80b6
commit 0c3418fcfb
31 changed files with 39 additions and 840 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/app/src/Features/StaticPages/HomeController.js
-16
View File
@@ -43,21 +43,6 @@ module.exports = HomeController = {
async home(req, res) {
if (Features.hasFeature('homepage') && homepageExists) {
let designSystemUpdatesAssignment = { variant: 'default' }
try {
designSystemUpdatesAssignment =
await SplitTestHandler.promises.getAssignment(
req,
res,
'design-system-updates'
)
} catch (error) {
logger.error(
{ err: error },
'failed to get "design-system-updates" split test assignment'
)
}
const websiteRedesignVariant =
res.locals.splitTestVariants?.['website-redesign']
const websiteRedesignActive =
@@ -77,7 +62,6 @@ module.exports = HomeController = {
})
} else {
return res.render('external/home/v2', {
designSystemUpdatesVariant: designSystemUpdatesAssignment.variant,
onboardingFlowVariant: onboardingFlowAssignment.variant,
hideNewsletterCheckbox:
onboardingFlowAssignment.variant === 'token-confirmation-odc',
services/web/app/src/Features/Subscription/RecurlyEventHandler.js
-16
View File
@@ -1,8 +1,6 @@
const AnalyticsManager = require('../Analytics/AnalyticsManager')
const SubscriptionEmailHandler = require('./SubscriptionEmailHandler')
const { ObjectID } = require('mongodb')
const SplitTestHandler = require('../SplitTests/SplitTestHandler')
const logger = require('@overleaf/logger')
const INVOICE_SUBSCRIPTION_LIMIT = 10
@@ -101,25 +99,11 @@ async function _sendSubscriptionUpdatedEvent(userId, eventData) {
async function _sendSubscriptionCancelledEvent(userId, eventData) {
const { planCode, quantity, state, isTrial, subscriptionId } =
_getSubscriptionData(eventData)
let designSystemUpdatesAssignment = { variant: 'default' }
try {
designSystemUpdatesAssignment =
await SplitTestHandler.promises.getAssignmentForUser(
userId,
'design-system-updates'
)
} catch (error) {
logger.error(
{ err: error },
'failed to get "design-system-updates" split test assignment'
)
}
AnalyticsManager.recordEventForUser(userId, 'subscription-cancelled', {
plan_code: planCode,
quantity,
is_trial: isTrial,
subscriptionId,
'split-test-design-system-updates': designSystemUpdatesAssignment.variant,
})
AnalyticsManager.setUserPropertyForUser(userId, 'subscription-state', state)
AnalyticsManager.setUserPropertyForUser(
services/web/app/src/Features/Subscription/SubscriptionController.js
+1 -21
View File
@@ -207,28 +207,8 @@ async function userSubscriptionPage(req, res) {
SubscriptionViewModelBuilder.buildPlansListForSubscriptionDash(
personalSubscription?.plan
)
let designSystemUpdatesAssignment = { variant: 'default' }
try {
designSystemUpdatesAssignment =
await SplitTestHandler.promises.getAssignment(
req,
res,
'design-system-updates'
)
} catch (error) {
logger.error(
{ err: error },
'failed to get "design-system-updates" split test assignment'
)
}
AnalyticsManager.recordEventForSession(
req.session,
'subscription-page-view',
{
'split-test-design-system-updates': designSystemUpdatesAssignment.variant,
}
)
AnalyticsManager.recordEventForSession(req.session, 'subscription-page-view')
const cancelButtonAssignment = await SplitTestHandler.promises.getAssignment(
req,
services/web/app/src/Features/User/UserCreator.js
-15
View File
@@ -37,20 +37,6 @@ async function _addAffiliation(user, affiliationOptions) {
}
async function recordRegistrationEvent(user) {
let designSystemUpdatesAssignment = { variant: 'default' }
try {
designSystemUpdatesAssignment =
await SplitTestHandler.promises.getAssignmentForUser(
user._id,
'design-system-updates'
)
} catch (error) {
logger.error(
{ err: error },
'failed to get "design-system-updates" split test assignment'
)
}
const onboardingFlowAssignment =
await SplitTestHandler.promises.getAssignmentForUser(
user._id,
@@ -60,7 +46,6 @@ async function recordRegistrationEvent(user) {
try {
const segmentation = {
'home-registration': 'default',
'split-test-design-system-updates': designSystemUpdatesAssignment.variant,
'onboarding-flow': onboardingFlowAssignment.variant,
}
if (user.thirdPartyIdentifiers && user.thirdPartyIdentifiers.length > 0) {
services/web/app/src/infrastructure/ExpressLocals.js
+2 -10
View File
@@ -81,10 +81,7 @@ function getWebpackAssets(entrypoint, section) {
module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
webRouter.use(
expressify(
SplitTestMiddleware.loadAssignmentsInLocals([
'design-system-updates',
'website-redesign',
])
SplitTestMiddleware.loadAssignmentsInLocals(['website-redesign'])
)
)
@@ -224,12 +221,7 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
}
res.locals.buildCssPath = function (themeModifier = '') {
if (
res.locals.splitTestVariants?.['design-system-updates'] === 'enabled'
) {
themeModifier = `main-${themeModifier}`
}
return res.locals.buildStylesheetPath(`${themeModifier}style.css`)
return res.locals.buildStylesheetPath(`main-${themeModifier}style.css`)
}
res.locals.buildImgPath = function (imgFile) {
services/web/cypress/support/component.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import 'cypress-plugin-tab'
import '../../frontend/stylesheets/style.less'
import '../../frontend/stylesheets/main-style.less'
import './ct/window' // needs to be before i18n
import '../../frontend/js/i18n'
import './shared/commands'
services/web/frontend/js/features/subscription/components/dashboard/states/active/active.tsx
+1 -11
View File
@@ -14,7 +14,6 @@ import { ChangePlanModal } from './change-plan/modals/change-plan-modal'
import { ConfirmChangePlanModal } from './change-plan/modals/confirm-change-plan-modal'
import { KeepCurrentPlanModal } from './change-plan/modals/keep-current-plan-modal'
import { ChangeToGroupModal } from './change-plan/modals/change-to-group-modal'
import { isSplitTestEnabled } from '../../../../../../../../frontend/js/utils/splitTestUtils'
export function ActiveSubscription({
subscription,
@@ -25,10 +24,6 @@ export function ActiveSubscription({
const { recurlyLoadError, setModalIdShown, showCancellation } =
useSubscriptionDashboardContext()
const isDesignSystemUpdatesEnabled = isSplitTestEnabled(
'design-system-updates'
)
if (showCancellation) return <CancelSubscription />
return (
@@ -125,7 +120,7 @@ export function ActiveSubscription({
>
{t('view_your_invoices')}
</a>
{!recurlyLoadError && isDesignSystemUpdatesEnabled && (
{!recurlyLoadError && (
<CancelSubscriptionButton className="btn btn-danger-ghost ms-1" />
)}
</p>
@@ -133,11 +128,6 @@ export function ActiveSubscription({
{!recurlyLoadError && (
<>
<br />
{!isDesignSystemUpdatesEnabled && (
<p>
<CancelSubscriptionButton className="btn btn-danger" />
</p>
)}
<p>
<i>
<SubscriptionRemainder subscription={subscription} />
services/web/frontend/js/features/subscription/components/dashboard/states/active/cancel-subscription-button.tsx
+1 -9
View File
@@ -1,7 +1,6 @@
import { useTranslation } from 'react-i18next'
import * as eventTracking from '../../../../../../infrastructure/event-tracking'
import { useSubscriptionDashboardContext } from '../../../../context/subscription-dashboard-context'
import { getSplitTestVariant } from '../../../../../../../../frontend/js/utils/splitTestUtils'
export function CancelSubscriptionButton(
props: React.ComponentProps<'button'>
@@ -10,15 +9,8 @@ export function CancelSubscriptionButton(
const { recurlyLoadError, setShowCancellation } =
useSubscriptionDashboardContext()
const designSystemUpdatesVariant = getSplitTestVariant(
'design-system-updates',
'default'
)
function handleCancelSubscriptionClick() {
eventTracking.sendMB('subscription-page-cancel-button-click', {
'split-test-design-system-updates': designSystemUpdatesVariant,
})
eventTracking.sendMB('subscription-page-cancel-button-click', {})
setShowCancellation(true)
}
services/web/frontend/stylesheets/_ol_style_includes.less
-13
View File
@@ -1,13 +0,0 @@
@import 'app/sidebar-v2-dash-pane.less';
@import 'app/front-chat-widget.less';
@import 'app/ol-chat.less';
@import 'app/templates-v2.less';
@import 'app/login-register.less';
@import 'app/review-features-page.less';
@import 'app/institution-hub.less';
@import 'app/publisher-hub.less';
@import 'app/admin-hub.less';
@import 'app/import.less';
@import 'components/lists.less';
@import 'components/overbox.less';
@import 'components/container.less';
services/web/frontend/stylesheets/_style_includes.less
-118
View File
@@ -1,118 +0,0 @@
@import (less) '../fonts/font-awesome.css';
@import 'core/mixins.less';
// Reset
@import 'core/normalize.less';
@import 'core/print.less';
// Vendor CSS
@import (less) 'vendor/select/select.css';
// Core CSS
@import 'core/scaffolding.less';
@import 'core/type.less';
@import 'core/grid.less';
@import 'core/accessibility.less';
@import 'core/spacing.less';
// Components
@import 'components/tables.less';
@import 'components/forms.less';
@import 'components/badge.less';
@import 'components/buttons.less';
@import 'components/card.less';
//@import "components/code.less";
@import 'components/component-animations.less';
@import 'components/dev-toolbar.less';
@import 'components/dropdowns.less';
@import 'components/button-groups.less';
@import 'components/input-groups.less';
@import 'components/navs.less';
@import 'components/navbar.less';
@import 'components/footer.less';
//@import "components/breadcrumbs.less";
//@import "components/pagination.less";
@import 'components/notifications.less';
@import 'components/pager.less';
@import 'components/labels.less';
@import 'components/loading-spinner';
//@import "components/jumbotron.less";
@import 'components/thumbnails.less';
@import 'components/alerts.less';
@import 'components/progress-bars.less';
@import 'components/select.less';
@import 'components/switch.less';
@import 'components/switcher.less';
// @import "components/media.less";
@import 'components/list-group.less';
// @import "components/panels.less";
// @import "components/wells.less";
@import 'components/close.less';
@import 'components/hover.less';
@import 'components/ui-select.less';
@import 'components/input-suggestions.less';
@import 'components/nvd3.less';
@import 'components/nvd3_override.less';
@import 'components/infinite-scroll.less';
@import 'components/expand-collapse.less';
@import 'components/beta-badges.less';
@import 'components/divider.less';
@import 'components/split-menu.less';
@import 'components/group-members.less';
@import 'components/stepper.less';
@import 'components/radio-chip.less';
// Components w/ JavaScript
@import 'components/modals.less';
@import 'components/tooltip.less';
@import 'components/popovers.less';
@import 'components/carousel.less';
@import 'components/daterange-picker';
@import 'components/vertical-resizable-panes.less';
// ngTagsInput
@import 'components/tags-input.less';
// Utility classes
@import 'core/utilities.less';
@import 'core/responsive-utilities.less';
// ShareLaTeX app classes
@import 'app/base.less';
@import 'app/account-settings.less';
@import 'app/beta-program.less';
@import 'app/about-page.less';
@import 'app/project-list.less';
@import 'app/project-list-react.less';
@import 'app/editor.less';
@import 'app/homepage.less';
@import 'app/plans.less';
@import 'app/plans-v2.less';
@import 'app/recurly.less';
@import 'app/bonus.less';
@import 'app/register.less';
@import 'app/blog.less';
@import 'app/features.less';
@import 'app/templates.less';
@import 'app/wiki.less';
@import 'app/translations.less';
@import 'app/contact-us.less';
@import 'app/subscription.less';
@import 'app/sprites.less';
@import 'app/invite.less';
@import 'app/error-pages.less';
@import 'app/editor/history-v2.less';
@import 'app/metrics.less';
@import 'app/open-in-overleaf.less';
@import 'app/primary-email-check';
@import 'app/project-url-lookup';
@import 'app/grammarly';
// module styles
// TODO: find a way for modules to add styles dynamically
@import 'modules/symbol-palette.less';
@import 'modules/group-settings.less';
@import 'modules/git-bridge-modal.less';
@import 'modules/admin-panel.less';
@import 'modules/overleaf-integration.less';
services/web/frontend/stylesheets/app/editor/compile-button.less
+2 -16
View File
@@ -15,12 +15,8 @@
// only apply for legacy editor
.toolbar-pdf-right {
.detach-compile-button-container when (@is-new-css = false) {
margin-right: -5px;
}
// because 2px border on :active state
.detach-compile-button-container when (@is-new-css = true) {
.detach-compile-button-container {
margin-right: -3px;
}
}
@@ -32,16 +28,6 @@
.animation(pdf-toolbar-stripes 2s linear infinite);
}
.detach-compile-button when (@is-new-css = false) {
&[disabled],
&[disabled].active,
&[disabled]:hover,
&[disabled]:focus {
background-color: mix(@btn-primary-bg, @toolbar-alt-bg-color, 65%);
.opacity(1);
}
}
.detach-compile-button {
height: 28px;
padding-top: 0;
@@ -56,7 +42,7 @@
}
}
.detach-compile-button when (@is-new-css = true) {
.detach-compile-button {
border: none;
}
services/web/frontend/stylesheets/app/editor/pdf.less
+3 -11
View File
@@ -24,7 +24,7 @@
flex: 1 1 100%;
}
.toolbar-pdf-left when (@is-new-css = true) {
.toolbar-pdf-left {
margin-left: 2px;
}
@@ -236,19 +236,11 @@
}
}
i.fa-arrows-h when(@is-new-css = false) {
border-right: 2px solid white;
border-left: 2px solid white;
}
i.fa-arrows-h when(@is-new-css = true) {
i.fa-arrows-h {
border-right: 2px solid @content-primary;
border-left: 2px solid @content-primary;
}
i.fa-arrows-v when(@is-new-css = false) {
border-top: 2px solid white;
border-bottom: 2px solid white;
}
i.fa-arrows-v when(@is-new-css = true) {
i.fa-arrows-v {
border-top: 2px solid @content-primary;
border-bottom: 2px solid @content-primary;
}
services/web/frontend/stylesheets/app/homepage.less
+1 -14
View File
@@ -183,20 +183,7 @@
}
}
.hp-login-btn when(@is-new-css = false) {
.login-btn;
min-width: 220px;
background-color: @ol-blue-gray-3;
&:hover,
&:focus,
&:active {
background-color: darken(@ol-blue-gray-3, 8%);
}
}
.hp-login-btn when(@is-new-css = true) {
.hp-login-btn {
.login-btn;
min-width: 220px;
}
services/web/frontend/stylesheets/app/project-list-react.less
-5
View File
@@ -960,11 +960,6 @@
}
}
.custom-picker when(@is-new-css = false) {
// to prevent the primary button from overlapping when disabled due to the opacity property
z-index: 100 !important;
}
.popover-backdrop {
position: fixed;
top: 0;
services/web/frontend/stylesheets/app/recurly.less
+1 -9
View File
@@ -2,15 +2,7 @@
&:extend(.form-control);
}
.recurly-element-card when (@is-new-css = false) {
&:extend(.form-control);
padding: 4px 4px;
border: 1px #cccccc solid;
border-radius: 20px;
height: 50px;
}
.recurly-element-card when (@is-new-css = true) {
.recurly-element-card {
&:extend(.form-control);
padding: 4px 4px;
border: @input-border-size @input-border solid;
services/web/frontend/stylesheets/app/subscription.less
+1 -1
View File
@@ -177,7 +177,7 @@
left: 10px;
}
.recurly-hosted-field-input when (@is-new-css = true) {
.recurly-hosted-field-input {
&:extend(.form-control);
}
services/web/frontend/stylesheets/components/button-groups.less
+1 -9
View File
@@ -120,15 +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 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.
&.btn-link {
.box-shadow(none);
}
}
.btn-group.open .dropdown-toggle when (@is-new-css = true) {
.btn-group.open .dropdown-toggle {
&.btn-secondary {
background-color: @btn-secondary-hover-bg-color;
}
services/web/frontend/stylesheets/components/buttons.less
+11 -105
View File
@@ -5,54 +5,7 @@
// Base styles
// --------------------------------------------------
.btn when(@is-new-css = false) {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: @btn-font-weight;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: @btn-border-width solid transparent;
border-bottom: @btn-border-bottom-width 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 {
outline: 0;
background-image: none;
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
.opacity(0.65);
.box-shadow(none);
}
}
.btn when(@is-new-css = true) {
.btn {
display: inline-block;
margin-bottom: 0; // For input.btn
font-weight: @btn-font-weight;
@@ -119,10 +72,7 @@
.btn-default-outline {
.button-outline-variant(@btn-default-bg);
}
.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-primary {
.btn-borderless();
}
.btn-primary-on-primary-bg {
@@ -142,66 +92,30 @@
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger when(@is-new-css = false) {
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
.btn-danger when(@is-new-css = true) {
.btn-danger {
.btn-borderless(@white, @red, @red-60);
}
// Danger Ghost and error appear as light red with no border
.btn-danger-ghost when (@is-new-css = false) {
.button-variant(@btn-danger-ghost-color; @btn-danger-ghost-bg; @btn-danger-ghost-border);
// hover for ghost acts different from typical variants, as it's default state has no bg
&:hover {
background-color: @red-10;
}
}
.btn-info-ghost when (@is-new-css = true) {
.btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10);
.btn-danger-ghost {
.btn-borderless(@red-50, @btn-danger-ghost-bg, @red-10);
}
// Info Ghost appear as info blue with no border
.btn-info-ghost when (@is-new-css = false) {
.button-variant(@btn-info-ghost-color; @btn-info-ghost-bg; @btn-info-ghost-border);
// hover for ghost acts different from typical variants, as it's default state has no bg
&:hover {
background-color: @blue-10;
}
.btn-info-ghost {
.btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10);
}
// Inline button to fit text, without link styling.
// TODO: generic class for other styles
.btn-info-ghost-inline when (@is-new-css = true) {
.btn-info-ghost-inline {
.btn-borderless(@blue-50, @btn-info-ghost-bg, @blue-10);
padding: 0 !important;
font-size: inherit !important;
vertical-align: inherit;
}
.btn-info-ghost-inline when (@is-new-css = false) {
.button-variant(@btn-info-ghost-color; @btn-info-ghost-bg; @btn-info-ghost-border);
// hover for ghost acts different from typical variants, as it's default state has no bg
&:hover {
background-color: @blue-10;
}
padding: 0 !important;
font-size: inherit !important;
vertical-align: inherit;
}
.btn-danger-ghost when (@is-new-css = true) {
.btn-borderless(@red-50, @btn-danger-ghost-bg, @red-10);
}
// btn-secondary
.btn-secondary when(@is-new-css = false) {
&:not(.btn-secondary-info) {
.btn-default;
}
}
.btn-secondary when(@is-new-css = true) {
.btn-secondary {
.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-info {
.btn-secondary;
}
@@ -349,7 +263,7 @@ input[type='button'] {
}
}
.login-btn when(@is-new-css = true) {
.login-btn {
.btn;
.btn-secondary;
position: relative;
@@ -357,14 +271,6 @@ input[type='button'] {
padding-right: 0;
}
.login-btn when(@is-new-css = false) {
.btn;
.btn-default;
position: relative;
padding-left: 20px;
padding-right: 0;
}
.login-expand-more-btn {
display: list-item;
}
services/web/frontend/stylesheets/components/forms.less
+4 -65
View File
@@ -118,51 +118,7 @@ output {
// input[type="tel"]
// input[type="color"]
.form-control when (@is-new-css = false) {
display: block;
width: 100%;
height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
background-color: @input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: @input-border-size solid @input-border;
border-radius: @input-border-radius;
.box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
.transition(~'border-color ease-in-out .15s, box-shadow ease-in-out .15s');
// Customize the `:focus` state to imitate native WebKit styles.
.form-control-focus();
// Placeholder
.placeholder();
// Disabled and read-only inputs
//
// HTML5 says that controls under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty, we
// don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content
}
// Reset height for `textarea`s, and smaller border-radius
textarea& {
height: auto;
border-radius: @border-radius-base;
}
// Smaller border-radius for `select` inputs
select& {
border-radius: @border-radius-base;
}
}
.form-control when (@is-new-css = true) {
.form-control {
display: block;
width: 100%;
height: @input-height-base;
@@ -362,30 +318,13 @@ input[type='checkbox'],
}
// Feedback states
.has-success when(@is-new-css = false) {
.form-control-validation(
@state-success-text; @state-success-text; @state-success-bg
);
}
.has-warning when(@is-new-css = false) {
.form-control-validation(
@state-warning-text; @state-warning-text; @state-warning-bg
);
}
.has-error when(@is-new-css = false) {
.form-control-validation(
@state-danger-text; @state-danger-text; @state-danger-bg
);
color: @red;
}
.has-success when(@is-new-css = true) {
.has-success {
.form-control-validation(@brand-success);
}
.has-warning when(@is-new-css = true) {
.has-warning {
.form-control-validation(@brand-warning);
}
.has-error when(@is-new-css = true) {
.has-error {
.form-control-validation(@brand-danger);
}
services/web/frontend/stylesheets/components/labels.less
+1 -1
View File
@@ -36,7 +36,7 @@
}
}
.label when(@is-new-css = true) {
.label {
padding: 0.3em 0.6em;
}
services/web/frontend/stylesheets/components/split-menu.less
+2 -11
View File
@@ -47,26 +47,17 @@
border-right: 1px solid fade(@neutral-90, 16%);
}
// on new css, btn-secondary already has a border
&.btn-secondary when (@is-new-css = false) {
border-right: 1px solid fade(@ol-blue-gray-6, 16%);
}
&.btn-danger {
border-right: 1px solid fade(@neutral-90, 16%);
}
&[disabled] when (@is-new-css = false) {
opacity: 1;
}
&.no-left-radius {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
.split-menu-button when (@is-new-css = true) {
.split-menu-button {
// workaround for for the blue 2x border on the new css
// if z-index rule is not added, the border will overlap under the `split-menu-dropdown-toggle` since margin between both component is only 1px
z-index: 1;
@@ -87,7 +78,7 @@
// on new css, btn-secondary has a border
// since the border between both buttons already been defined in the `split-menu-button`
// we will remove the rule from the dropdown toggle
&.btn-secondary when (@is-new-css = true) {
&.btn-secondary {
border-left: none;
}
}
services/web/frontend/stylesheets/components/tags-input.less
+2 -17
View File
@@ -31,17 +31,7 @@
display: flex;
flex-wrap: wrap;
}
.tags-input .tags when(@is-new-css = false) {
padding: 3px;
border-radius: 3px; /* overriding .form-control */
}
.tags-input .tags:focus-within when(@is-new-css = false) {
outline: none;
-webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
-moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
box-shadow: 0 0 3px 1px rgba(5, 139, 242, 0.6);
}
.tags-input .tags:focus-within when(@is-new-css = true) {
.tags-input .tags:focus-within {
&:extend(.input-focus-style);
}
.tags-input .tags .tag-list {
@@ -83,12 +73,7 @@
overflow: hidden;
text-overflow: ellipsis;
}
.tags-input .tags .input when(@is-new-css = false) {
margin: 2px;
padding: 0;
padding-left: 5px;
}
.tags-input .tags .input when(@is-new-css = true) {
.tags-input .tags .input {
.placeholder();
}
.tags-input .tags .input.invalid-tag {
services/web/frontend/stylesheets/core/mixins.less
+4 -65
View File
@@ -27,14 +27,7 @@
}
// WebKit-style 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) {
.tab-focus() {
outline: none;
}
@@ -851,16 +844,7 @@
// Button sizes
// -------------------------
.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) {
.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
padding: @padding-vertical - @border-size @padding-horizontal;
font-size: @font-size;
line-height: @line-height;
@@ -1181,43 +1165,7 @@
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5)
when(@is-new-css = false) {
// Color the label and help text
.help-block,
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match
.form-control {
border-color: @border-color;
.box-shadow(
inset 0 1px 1px rgba(0, 0, 0, 0.075)
); // Redeclare so transitions work
&:focus {
border-color: darken(@border-color, 10%);
@shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 6px lighten(@border-color, 20%);
.box-shadow(@shadow);
}
}
// Set validation states also for addons
.input-group-addon {
color: @text-color;
border-color: @border-color;
background-color: @background-color;
}
// Optional feedback icon
.form-control-feedback {
color: @text-color;
}
}
.form-control-validation(@color) when(@is-new-css = true) {
.form-control-validation(@color) {
color: @color;
// Color the label and help text
@@ -1257,15 +1205,6 @@
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.
.form-control-focus(@color: @input-border-focus) when (@is-new-css = false) {
@color-rgba: rgba(red(@color), green(@color), blue(@color), 0.6);
&:focus {
border-color: @color;
outline: 0;
.box-shadow(~'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}');
}
}
.input-focus-style {
// need to define as class for recurly UI
border-color: @input-border-focus;
@@ -1273,7 +1212,7 @@
.box-shadow-button-input();
}
.form-control-focus() when (@is-new-css = true) {
.form-control-focus() {
&:focus {
&:extend(.input-focus-style);
}
services/web/frontend/stylesheets/core/ol-ieee-variables.less
-52
View File
@@ -1,52 +0,0 @@
@ieee-blue: #00629b;
@ieee-dark-blue: #002855;
@ieee-cyan: #00b5e2;
@ieee-dark-cyan: #009ca6;
@ieee-red: #ba0c2f;
@ieee-orange: #ffa300;
@ieee-yellow: #ffd100;
@ieee-light-green: #78be20;
@ieee-dark-green: #00843d;
@ieee-purple: #981d97;
@ol-blue-gray-0: #f4f5f8;
@ol-blue-gray-1: #d8e0e6;
@ol-blue-gray-2: #8195a1;
@ol-blue-gray-3: #425e6e;
@ol-blue-gray-4: #26425f;
@ol-blue-gray-5: #1e3048;
@ol-blue-gray-6: #112437;
@ol-green: @ieee-dark-green;
@ol-dark-green: darken(@ieee-dark-green, 15%);
@ol-blue: @ieee-blue;
@ol-dark-blue: @ieee-dark-blue;
@ol-red: @ieee-red;
@ol-dark-red: darken(@ieee-red, 15%);
@brand-primary: @ieee-blue;
@brand-secondary: @ieee-dark-blue;
@brand-success: @ol-blue;
@brand-info: @ieee-dark-cyan;
@brand-warning: @ieee-orange;
@brand-danger: @ol-red;
@btn-primary-bg: @ieee-blue;
@link-color: @ieee-blue;
@link-hover-color: @ieee-dark-blue;
@toolbar-btn-active-bg-color: @ieee-blue;
@file-tree-item-selected-bg: @ieee-blue;
@file-tree-multiselect-bg: @ieee-cyan;
@editor-toggler-hover-bg-color: @ieee-blue;
@toggle-switch-highlight-color: @ieee-blue;
@footer-link-color: @link-color;
@footer-link-hover-color: @link-hover-color;
@navbar-subdued-hover-color: @ieee-blue;
@navbar-default-link-hover-bg: @ieee-blue;
@navbar-default-link-hover-color: @ieee-blue;
@navbar-default-link-active-bg: @ieee-blue;
services/web/frontend/stylesheets/core/ol-light-variables.less
-141
View File
@@ -1,141 +0,0 @@
// Styleguide colors
@ol-green: #138a07;
@ol-dark-green: #004a0e;
@ol-blue: #3e70bb;
@ol-dark-blue: #2857a1;
@ol-red: #c9453e;
@ol-dark-red: #a6312b;
@ol-type-color: @ol-blue-gray-3;
// Sidebar
@sidebar-bg: #fff;
@sidebar-color: @ol-blue-gray-2;
@sidebar-active-bg: @ol-green;
@sidebar-active-color: #fff;
@sidebar-hover-bg: @ol-blue-gray-1;
@sidebar-active-font-weight: normal;
@sidebar-hover-text-decoration: none;
@v2-dash-pane-bg: @ol-blue-gray-1;
@v2-dash-pane-link-color: @ol-blue;
@v2-dash-pane-toggle-color: @ol-blue-gray-3;
@v2-dash-pane-btn-bg: @ol-blue-gray-5;
@v2-dash-pane-btn-hover-bg: @ol-blue-gray-6;
@v2-dash-pane-color: @ol-blue-gray-3;
@progress-bar-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
@progress-bg: @ol-blue-gray-0;
@input-border: @ol-blue-gray-1;
// Editor file-tree
@file-tree-bg: #fff;
@file-tree-line-height: 2.05;
@file-tree-item-color: @ol-blue-gray-3;
@file-tree-item-focus-color: @file-tree-item-color;
@file-tree-item-selected-color: #fff;
@file-tree-item-input-color: @ol-blue-gray-2;
@file-tree-item-toggle-color: @ol-blue-gray-2;
@file-tree-item-icon-color: @ol-blue-gray-2;
@file-tree-item-folder-color: @ol-blue-gray-2;
@file-tree-item-hover-bg: @ol-blue-gray-1;
@file-tree-item-selected-bg: @ol-green;
@file-tree-multiselect-bg: @ol-blue;
@file-tree-multiselect-hover-bg: @ol-dark-blue;
@file-tree-droppable-bg-color: @ol-blue-gray-2;
@content-alt-bg-color: @ol-blue-gray-0;
// File outline
@outline-line-guide-color: @ol-blue-gray-1;
@outline-header-hover-bg: @file-tree-item-hover-bg;
@outline-highlight-bg: mix(@file-tree-bg, @ol-blue-gray-1);
@vertical-resizable-resizer-bg: @ol-blue-gray-1;
@vertical-resizable-resizer-hover-bg: @file-tree-item-hover-bg;
// Editor resizers
@editor-resizer-bg-color: @ol-blue-gray-1;
@editor-resizer-bg-color-dragging: @ol-blue-gray-1;
@editor-toggler-bg-color: @ol-blue-gray-2;
@editor-toggler-hover-bg-color: @ol-green;
@synctex-controls-z-index: 6;
@synctex-controls-padding: 0;
@editor-border-color: @ol-blue-gray-1;
@toolbar-border-color: @ol-blue-gray-1;
@toolbar-alt-bg-color: #fff;
@editor-toolbar-bg: @toolbar-alt-bg-color;
@toolbar-header-bg-color: #fff;
@toolbar-header-btn-border-color: @ol-blue-gray-1;
@toolbar-btn-color: @ol-blue-gray-3;
@toolbar-btn-hover-color: @ol-blue-gray-3;
@toolbar-btn-hover-bg-color: @ol-blue-gray-0;
@toolbar-icon-btn-color: @ol-blue-gray-3;
@toolbar-icon-btn-hover-color: @ol-blue-gray-3;
@editor-header-logo-background: url(../../../public/img/ol-brand/overleaf-o.svg)
center / contain no-repeat;
@project-name-color: @ol-blue-gray-3;
@project-rename-link-color: @ol-blue-gray-3;
@project-rename-link-color-hover: @ol-blue-gray-4;
@pdf-bg: @ol-blue-gray-0;
@logs-pane-bg: @ol-blue-gray-1;
// Navbar
@navbar-default-bg: #fff;
@navbar-default-border: @ol-blue-gray-1;
@navbar-default-link-bg: @ol-green;
@navbar-default-link-color: #fff;
@navbar-default-link-border-color: transparent;
@navbar-default-link-hover-bg: @ol-green;
@navbar-default-link-active-bg: @ol-green;
@navbar-default-link-hover-color: @ol-green;
@navbar-title-color: @ol-blue-gray-1;
@navbar-title-color-hover: @ol-blue-gray-2;
@navbar-default-color: @ol-blue-gray-3;
@navbar-brand-image-url: url(../../../public/img/ol-brand/overleaf.svg);
@navbar-subdued-color: @ol-blue-gray-3;
@navbar-subdued-hover-bg: @ol-blue-gray-1;
@navbar-subdued-hover-color: @ol-blue-gray-3;
// v2 History
@history-toolbar-color: @ol-blue-gray-3;
@history-base-bg: @ol-blue-gray-0;
@history-file-badge-bg: rgba(0, 0, 0, 0.25);
@history-file-badge-color: #fff;
// Formatting buttons
@formatting-btn-color: @toolbar-icon-btn-color;
@formatting-btn-bg: transparent;
@formatting-btn-border: @ol-blue-gray-1;
@formatting-menu-bg: #fff;
// Chat
@chat-bg: #fff;
@chat-instructions-color: @ol-blue-gray-3;
@chat-message-color: #fff;
@chat-message-name-color: @ol-blue-gray-3;
@chat-message-date-color: @ol-blue-gray-3;
@chat-new-message-bg: @ol-blue-gray-0;
@chat-new-message-textarea-bg: #fff;
@chat-new-message-textarea-color: @ol-blue-gray-6;
@chat-new-message-border-color: @ol-blue-gray-1;
// Symbol Palette
@symbol-palette-bg: #fff;
@symbol-palette-color: @ol-blue-gray-3;
@symbol-palette-header-background: @ol-blue-gray-1;
@symbol-palette-item-bg: @ol-blue-gray-1;
@symbol-palette-item-color: @ol-blue-gray-3;
@symbol-palette-selected-tab-bg: #fff;
@symbol-palette-selected-tab-color: @ol-blue;
@symbol-palette-text-shadow-color: @ol-blue-gray-1;
// React History
@history-react-header-bg: #fff;
@history-react-header-color: @ol-blue-gray-3;
@history-react-separator-color: @neutral-20;
services/web/frontend/stylesheets/ieee-style.less
-42
View File
@@ -1,42 +0,0 @@
@import 'style.less';
@import 'core/ol-ieee-variables.less';
@is-overleaf-light: false;
@ieee-wedge: 30px;
body > .portal-ieee {
padding-top: @header-height;
}
.portal-ieee {
.ieee-header {
background-color: @ieee-blue;
margin-bottom: @margin-xl;
padding-bottom: @padding-sm;
padding-top: @padding-sm;
h1 {
margin: 0;
}
.ieee-logo {
width: @navbar-brand-width;
}
}
.ieee-subheader {
background-color: @ieee-blue;
color: #ffffff;
line-height: 1;
padding: @padding-md @ieee-wedge;
position: relative;
&:after {
content: '';
display: block;
position: absolute;
border-style: solid;
left: -1px;
top: -1px;
border-color: @content-alt-bg-color transparent;
border-width: @ieee-wedge @ieee-wedge 0 0;
}
}
}
services/web/frontend/stylesheets/light-style.less
-4
View File
@@ -1,4 +0,0 @@
@import 'style.less';
@import 'core/ol-light-variables.less';
@is-overleaf-light: true;
services/web/frontend/stylesheets/main-style.less
-1
View File
@@ -6,7 +6,6 @@
@import (less) '../fonts/material-symbols.css';
@is-overleaf-light: false;
@is-new-css: true;
// Core variables and mixins
@import 'variables/all.less';
services/web/frontend/stylesheets/style.less
-32
View File
@@ -1,32 +0,0 @@
@import (less) '../fonts/lato.css';
@import (less) '../fonts/merriweather.css';
@import (less) '../fonts/source-code-pro.css';
@import (less) '../fonts/stix-two-math.css';
@import (less) '../fonts/noto-serif.css';
@import (less) '../fonts/material-symbols.css';
@is-overleaf-light: false;
@is-new-css: false;
// Core variables and mixins
@import 'core/variables.less';
@import 'core/css-variables.less';
@import 'core/page.less';
@import 'app/ol-style-guide.less';
@import '_style_includes.less';
@import '_ol_style_includes.less';
@import 'components/embed-responsive.less';
@import 'components/icons.less';
@import 'components/images.less';
@import 'components/navs-ol.less';
@import 'components/pagination.less';
@import 'components/tabs.less';
@import 'components/input-switch.less';
// Pages
@import 'app/about.less';
@import 'app/blog-posts.less';
@import 'app/cms-page.less';
@import 'app/content_page.less';
@import 'app/plans-ol.less';
@import 'app/portals.less';
services/web/test/unit/src/Subscription/RecurlyEventHandlerTests.js
-6
View File
@@ -172,11 +172,6 @@ describe('RecurlyEventHandler', function () {
'canceled_subscription_notification',
this.eventData
)
sinon.assert.calledWith(
this.SplitTestHandler.promises.getAssignmentForUser,
this.userId,
'design-system-updates'
)
sinon.assert.calledWith(
this.AnalyticsManager.recordEventForUser,
this.userId,
@@ -186,7 +181,6 @@ describe('RecurlyEventHandler', function () {
quantity: 1,
is_trial: true,
subscriptionId: this.eventData.subscription.uuid,
'split-test-design-system-updates': 'default',
}
)
sinon.assert.calledWith(
services/web/webpack.config.js
-3
View File
@@ -18,9 +18,6 @@ const entryPoints = {
ide: './frontend/js/ide.js',
'ide-detached': './frontend/js/ide-detached.js',
marketing: './frontend/js/marketing.js',
style: './frontend/stylesheets/style.less',
'ieee-style': './frontend/stylesheets/ieee-style.less',
'light-style': './frontend/stylesheets/light-style.less',
'main-style': './frontend/stylesheets/main-style.less',
'main-ieee-style': './frontend/stylesheets/main-ieee-style.less',
'main-light-style': './frontend/stylesheets/main-light-style.less',