-
- )
-}
-Type.args = {
- type: 'tasks',
-}
-
-export const Spinner = args => {
- return
-}
-Spinner.args = {
- type: 'spinner',
- spin: true,
-}
-
-export const FixedWidth = args => {
- return
-}
-FixedWidth.args = {
- type: 'tasks',
- fw: true,
-}
-
-export const AccessibilityLabel = args => {
- return
-}
-AccessibilityLabel.args = {
- type: 'check',
- accessibilityLabel: 'Check',
-}
-
-export default {
- title: 'Shared / Components / Icon',
- component: Icon,
-}
diff --git a/services/web/frontend/stories/ui/badge.stories.tsx b/services/web/frontend/stories/ui/badge.stories.tsx
index be4d3a84ab..1b551d3254 100644
--- a/services/web/frontend/stories/ui/badge.stories.tsx
+++ b/services/web/frontend/stories/ui/badge.stories.tsx
@@ -1,5 +1,5 @@
import Badge from '@/features/ui/components/bootstrap-5/badge'
-import Icon from '@/shared/components/icon'
+import MaterialIcon from '@/shared/components/material-icon'
import type { Meta, StoryObj } from '@storybook/react'
import classnames from 'classnames'
@@ -49,7 +49,7 @@ export const BadgePrepend: Story = {
return (
}
+ prepend={}
{...args}
/>
)
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
index 639f6b4ff5..a0237b47f0 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
@@ -46,3 +46,4 @@
@import 'upgrade-prompt';
@import 'integrations-panel';
@import 'group-members';
+@import 'upgrade-benefits';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/upgrade-benefits.scss b/services/web/frontend/stylesheets/bootstrap-5/components/upgrade-benefits.scss
new file mode 100644
index 0000000000..d9702c3f64
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/upgrade-benefits.scss
@@ -0,0 +1,3 @@
+.upgrade-benefits li {
+ display: flex;
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/main-style.scss b/services/web/frontend/stylesheets/bootstrap-5/main-style.scss
index eb705b461d..73294452ef 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/main-style.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/main-style.scss
@@ -7,7 +7,6 @@
@import '../../fonts/noto-serif/noto-serif.css';
@import '../../fonts/open-dyslexic-mono/open-dyslexic-mono.css';
@import '../../fonts/material-symbols/material-symbols.css';
-@import '../../fonts/font-awesome/font-awesome.css';
// Vendor CSS
// TODO Bootstrap 5: Check whether this works with Bootstrap 5, and whether we can replace it
diff --git a/services/web/frontend/stylesheets/bootstrap-5/modals/contact-us-modal.scss b/services/web/frontend/stylesheets/bootstrap-5/modals/contact-us-modal.scss
index 7ac5e62cbc..a0a373c94b 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/modals/contact-us-modal.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/modals/contact-us-modal.scss
@@ -60,15 +60,6 @@
span {
text-decoration: underline;
}
-
- .fa {
- color: inherit;
- text-decoration: none;
- }
- }
-
- .fa {
- color: var(--neutral-30);
}
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/modules/symbol-palette.scss b/services/web/frontend/stylesheets/bootstrap-5/modules/symbol-palette.scss
index dd6d5f64f8..a0a1d4b716 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/modules/symbol-palette.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/symbol-palette.scss
@@ -199,9 +199,5 @@
.upgrade-benefits {
column-count: 2;
-
- li {
- display: flex;
- }
}
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
index 8fe5ced008..a60298a53f 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
@@ -248,6 +248,15 @@ $editor-toggler-bg-dark-color: color.adjust(
top: 50%;
background-color: var(--editor-toggler-bg-color);
+ .material-symbols {
+ font-size: var(--font-size-02);
+ -moz-osx-font-smoothing: grayscale;
+ font-weight: bold;
+ color: var(--white);
+ user-select: none;
+ pointer-events: none;
+ }
+
&:hover,
&:focus {
outline: none;
@@ -262,37 +271,11 @@ $editor-toggler-bg-dark-color: color.adjust(
inset: 0 -3px;
}
- &::after {
- font-family: FontAwesome; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
- -moz-osx-font-smoothing: grayscale;
- font-size: 65%;
- font-weight: bold;
- color: var(--white);
- user-select: none;
- pointer-events: none;
- }
-
&:hover {
background-color: var(--bg-accent-01);
}
}
-.custom-toggler-east::after {
- content: '\f105';
-}
-
-.custom-toggler-west::after {
- content: '\f104';
-}
-
-.custom-toggler-closed.custom-toggler-east::after {
- content: '\f104';
-}
-
-.custom-toggler-closed.custom-toggler-west::after {
- content: '\f105';
-}
-
.vertical-resize-handle {
height: 6px;
background-color: var(--editor-resizer-bg-color);
diff --git a/services/web/frontend/stylesheets/core/utilities.less b/services/web/frontend/stylesheets/core/utilities.less
index 227ebad4b1..3e9e2dbc33 100755
--- a/services/web/frontend/stylesheets/core/utilities.less
+++ b/services/web/frontend/stylesheets/core/utilities.less
@@ -11,10 +11,12 @@
.center-block {
.center-block();
}
-.pull-right {
+.pull-right,
+.float-end {
float: right !important;
}
-.pull-left {
+.pull-left,
+.float-start {
float: left !important;
}
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 9f7a97449c..adfb33d8f8 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -355,6 +355,7 @@
"collaborator_chat": "Collaborator chat",
"collabratec_account_not_registered": "IEEE Collabratec™ account not registered. Please connect to Overleaf from IEEE Collabratec™ or log in with a different account.",
"collabs_per_proj": "__collabcount__ collaborators per project",
+ "collabs_per_proj_multiple": "Multiple collaborators per project",
"collabs_per_proj_single": "__collabcount__ collaborator per project",
"collapse": "Collapse",
"column_width": "Column width",
@@ -1475,7 +1476,6 @@
"notification_features_upgraded_by_affiliation": "Good news! Your affiliated organization __institutionName__ has an Overleaf subscription, and you now have access to all of Overleaf’s Professional features.",
"notification_personal_and_group_subscriptions": "We’ve spotted that you’ve got <0>more than one active __appName__ subscription. To avoid paying more than you need to, <1>review your subscriptions.",
"notification_personal_subscription_not_required_due_to_affiliation": " Good news! Your affiliated organization __institutionName__ has an Overleaf subscription, and you now have access to Overleaf’s Professional features through your affiliation. You can cancel your individual subscription without losing access to any features.",
- "notification_project_invite": "__userName__ would like you to join __projectName__Join Project",
"notification_project_invite_accepted_message": "You’ve joined __projectName__",
"notification_project_invite_message": "__userName__ would like you to join __projectName__",
"november": "November",
diff --git a/services/web/modules/user-activate/frontend/js/components/register-form.jsx b/services/web/modules/user-activate/frontend/js/components/register-form.jsx
index 7008781631..ec4a91f7e5 100644
--- a/services/web/modules/user-activate/frontend/js/components/register-form.jsx
+++ b/services/web/modules/user-activate/frontend/js/components/register-form.jsx
@@ -63,7 +63,7 @@ function RegisterForm({
aria-label="emails to register"
aria-describedby="input-details"
/>
-
+
Enter the emails you would like to register and separate them using
commas
diff --git a/services/web/test/frontend/features/source-editor/components/codemirror-editor-figure-modal.spec.tsx b/services/web/test/frontend/features/source-editor/components/codemirror-editor-figure-modal.spec.tsx
index e9896699c3..22a99e1fc7 100644
--- a/services/web/test/frontend/features/source-editor/components/codemirror-editor-figure-modal.spec.tsx
+++ b/services/web/test/frontend/features/source-editor/components/codemirror-editor-figure-modal.spec.tsx
@@ -126,9 +126,11 @@ describe('', function () {
matchUrl(`/project/test-project/upload?folder_id=${rootFolderId}`)
)
+ // Note that we have to include the 'edit' text from the edit button's
+ // icon, which is literal text in the document
cy.get('.cm-content').should(
'have.text',
- '\\begin{figure} \\centering \\caption{Enter Caption} 🏷fig:enter-label\\end{figure}'
+ '\\begin{figure} \\centeringedit \\caption{Enter Caption} 🏷fig:enter-label\\end{figure}'
)
})
@@ -172,9 +174,12 @@ describe('', function () {
cy.findByText('frog.jpg').click()
})
cy.findByRole('button', { name: 'Insert figure' }).click()
+
+ // Note that we have to include the 'edit' text from the edit button's
+ // icon, which is literal text in the document
cy.get('.cm-content').should(
'have.text',
- '\\begin{figure} \\centering \\caption{Enter Caption} 🏷fig:enter-label\\end{figure}'
+ '\\begin{figure} \\centeringedit \\caption{Enter Caption} 🏷fig:enter-label\\end{figure}'
)
})
})
@@ -258,9 +263,11 @@ describe('', function () {
},
})
+ // Note that we have to include the 'edit' text from the edit button's
+ // icon, which is literal text in the document
cy.get('.cm-content').should(
'have.text',
- '\\begin{figure} \\centering \\caption{Enter Caption} 🏷fig:enter-label\\end{figure}'
+ '\\begin{figure} \\centeringedit \\caption{Enter Caption} 🏷fig:enter-label\\end{figure}'
)
})
@@ -285,9 +292,11 @@ describe('', function () {
},
})
+ // Note that we have to include the 'edit' text from the edit button's
+ // icon, which is literal text in the document
cy.get('.cm-content').should(
'have.text',
- '\\begin{figure} \\centering \\caption{Enter Caption} 🏷fig:enter-label\\end{figure}'
+ '\\begin{figure} \\centeringedit \\caption{Enter Caption} 🏷fig:enter-label\\end{figure}'
)
})
})
@@ -429,9 +438,11 @@ describe('', function () {
},
})
+ // Note that we have to include the 'edit' text from the edit button's
+ // icon, which is literal text in the document
cy.get('.cm-content').should(
'have.text',
- '\\begin{figure} \\centering \\caption{Enter Caption} 🏷fig:enter-label\\end{figure}'
+ '\\begin{figure} \\centeringedit \\caption{Enter Caption} 🏷fig:enter-label\\end{figure}'
)
})
@@ -455,9 +466,12 @@ describe('', function () {
// If caption is selected then typing will replace the whole caption
cy.focused().type('My caption')
+
+ // Note that we have to include the 'edit' text from the edit button's
+ // icon, which is literal text in the document
cy.get('.cm-content').should(
'have.text',
- '\\begin{figure} \\centering \\caption{My caption} 🏷fig:enter-label\\end{figure}'
+ '\\begin{figure} \\centeringedit \\caption{My caption} 🏷fig:enter-label\\end{figure}'
)
})
@@ -482,9 +496,12 @@ describe('', function () {
// If label is selected then typing will replace the whole label
cy.focused().type('fig:my-label')
+
+ // Note that we have to include the 'edit' text from the edit button's
+ // icon, which is literal text in the document
cy.get('.cm-content').should(
'have.text',
- '\\begin{figure} \\centering \\label{fig:my-label}\\end{figure}'
+ '\\begin{figure} \\centeringedit \\label{fig:my-label}\\end{figure}'
)
})
@@ -504,16 +521,18 @@ describe('', function () {
},
})
+ // Note that we have to include the 'edit' text from the edit button's
+ // icon, which is literal text in the document
cy.get('.cm-content').should(
'have.text',
- '\\begin{figure} \\centering\\end{figure}'
+ '\\begin{figure} \\centeringedit\\end{figure}'
)
cy.focused().type('Some more text')
cy.get('.cm-content').should(
'have.text',
- '\\begin{figure} \\centering\\end{figure}Some more text'
+ '\\begin{figure} \\centeringedit\\end{figure}Some more text'
)
})
})
diff --git a/services/web/test/frontend/shared/components/icon.test.jsx b/services/web/test/frontend/shared/components/icon.test.jsx
deleted file mode 100644
index b10bf0c7c8..0000000000
--- a/services/web/test/frontend/shared/components/icon.test.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { expect } from 'chai'
-import { screen, render } from '@testing-library/react'
-
-import Icon from '../../../../frontend/js/shared/components/icon'
-
-describe('', function () {
- it('renders basic fa classes', function () {
- const { container } = render()
- const element = container.querySelector('i.fa.fa-angle-down')
- expect(element).to.exist
- })
-
- it('renders with aria-hidden', function () {
- const { container } = render()
- const element = container.querySelector('i[aria-hidden="true"]')
- expect(element).to.exist
- })
-
- it('renders accessible label', function () {
- render()
- screen.getByText('Accessible Foo')
- })
-
- it('renders with spin', function () {
- const { container } = render()
- const element = container.querySelector('i.fa.fa-angle-down.fa-spin')
- expect(element).to.exist
- })
-
- it('renders with fw', function () {
- const { container } = render()
- const element = container.querySelector('i.fa.fa-angle-down.fa-fw')
- expect(element).to.exist
- })
-
- it('renders with modifier', function () {
- const { container } = render()
- const element = container.querySelector('i.fa.fa-angle-down.fa-2x')
- expect(element).to.exist
- })
-
- it('renders with custom clases', function () {
- const { container } = render(
-
- )
- const element = container.querySelector(
- 'i.fa.fa-angle-down.custom-icon-class'
- )
- expect(element).to.exist
- })
-})
diff --git a/services/web/test/frontend/shared/components/processing.test.jsx b/services/web/test/frontend/shared/components/processing.test.jsx
deleted file mode 100644
index a053193721..0000000000
--- a/services/web/test/frontend/shared/components/processing.test.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { expect } from 'chai'
-import { render } from '@testing-library/react'
-import Processing from '../../../../frontend/js/shared/components/processing'
-
-describe('', function () {
- it('renders processing UI when isProcessing is true', function () {
- const { container } = render()
- const element = container.querySelector('i.fa.fa-refresh')
- expect(element).to.exist
- })
- it('does not render processing UI when isProcessing is false', function () {
- const { container } = render()
- const element = container.querySelector('i.fa.fa-refresh')
- expect(element).to.not.exist
- })
-})