Merge pull request #21477 from overleaf/ii-bs5-table-generator

[web] BS5 table generator

GitOrigin-RevId: 3fe10c05fa36f026c47ff4f54b15f5d76f7c509e

services/web/frontend/js/features/source-editor/extensions/visual/table-generator.ts

@@ -1,4 +1,5 @@
 import { EditorView } from '@codemirror/view'
+import { isBootstrap5 } from '@/features/utils/bootstrap-5'
 
 export const tableGeneratorTheme = EditorView.baseTheme({
   '&dark .table-generator': {
@@ -309,14 +310,14 @@ export const tableGeneratorTheme = EditorView.baseTheme({
 
   '.table-generator-button-menu-popover': {
     'background-color': 'var(--table-generator-toolbar-background) !important',
-    '& .popover-content': {
+    '& .popover-content, & .popover-body': {
       padding: '4px',
     },
     '& .list-group': {
       margin: '0',
       padding: '0',
     },
-    '& > .arrow': {
+    '& > .arrow, & > .popover-arrow': {
       display: 'none',
     },
   },
@@ -348,7 +349,7 @@ export const tableGeneratorTheme = EditorView.baseTheme({
     gap: '6px',
     'align-items': 'flex-start',
     'max-width': '240px',
-    'font-family': 'Lato',
+    'font-family': isBootstrap5() ? 'var(--bs-body-font-family)' : 'Lato',
 
     '& .info-icon': {
       flex: ' 0 0 24px',
@@ -369,7 +370,7 @@ export const tableGeneratorTheme = EditorView.baseTheme({
     display: 'flex',
     'align-items': 'center',
     'justify-content': 'space-between',
-    'font-family': 'Lato',
+    'font-family': isBootstrap5() ? 'var(--bs-body-font-family)' : 'Lato',
     height: '36px',
 
     '&:not(:first-child)': {
@@ -387,11 +388,11 @@ export const tableGeneratorTheme = EditorView.baseTheme({
     'max-width': '300px',
     background: 'var(--table-generator-toolbar-background) !important',
 
-    '& .popover-content': {
+    '& .popover-content, & .popover-body': {
       padding: '0',
     },
 
-    '& > .arrow': {
+    '& > .arrow, & > .popover-arrow': {
       display: 'none',
     },
   },
@@ -416,7 +417,7 @@ export const tableGeneratorTheme = EditorView.baseTheme({
       'column-gap': '8px',
       'align-self': 'stretch',
       padding: '12px 8px',
-      'font-family': 'Lato',
+      'font-family': isBootstrap5() ? 'var(--bs-body-font-family)' : 'Lato',
 
       '& .table-generator-button-label': {
         'align-self': 'stretch',
@@ -482,32 +483,9 @@ export const tableGeneratorTheme = EditorView.baseTheme({
   '.ol-cm-environment-table.table-generator-error-container, .ol-cm-environment-table.ol-cm-tabular':
     {
       background: 'rgba(125, 125, 125, 0.05)',
+      'font-family': isBootstrap5() ? 'var(--bs-body-font-family)' : 'Lato',
     },
 
-  '.table-generator-error': {
-    background: 'var(--table-generator-error-background)',
-    display: 'flex',
-    'justify-content': 'space-between',
-    color: 'var(--table-generator-error-color)',
-    border: '1px solid var(--table-generator-error-border-color)',
-    'font-family': 'Lato',
-    margin: '0 16px 0 16px',
-    '& .table-generator-error-message': {
-      flex: '1 1 auto',
-    },
-    '& .table-generator-error-message-header': {
-      fontWeight: 'bold',
-      marginBottom: '2px',
-    },
-    '& .table-generator-error-show-code-button': {
-      alignSelf: 'baseline',
-    },
-    '& .table-generator-error-icon': {
-      color: '#3265B2',
-      'margin-right': '12px',
-    },
-  },
-
   '.table-generator-filler-row': {
     border: 'none !important',
     '& td': {

services/web/frontend/js/features/source-editor/extensions/visual/visual-widgets/table-rendering-error.ts

@@ -10,28 +10,34 @@ export class TableRenderingErrorWidget extends WidgetType {
 
   toDOM(view: EditorView): HTMLElement {
     const warning = document.createElement('div')
-    warning.classList.add('table-generator-error', 'alert')
+    warning.classList.add('notification', 'notification-type-info')
     warning.role = 'alert'
-    const icon = document.createElement('span')
-    icon.classList.add('table-generator-error-icon')
-    const iconType = document.createElement('i')
-    iconType.classList.add('fa', 'fa-info-circle')
+    const icon = document.createElement('div')
+    icon.classList.add('notification-icon')
+    const iconType = document.createElement('span')
+    iconType.classList.add('material-symbols')
+    iconType.setAttribute('aria-hidden', 'true')
+    iconType.textContent = 'info'
     icon.appendChild(iconType)
     warning.appendChild(icon)
+    const messageWrapper = document.createElement('div')
+    messageWrapper.classList.add('notification-content-and-cta')
     const message = document.createElement('div')
-    message.classList.add('table-generator-error-message')
+    message.classList.add('notification-content')
     const messageHeader = document.createElement('p')
-    messageHeader.classList.add('table-generator-error-message-header')
-    messageHeader.textContent = view.state.phrase(
+    const messageHeaderInner = document.createElement('strong')
+    messageHeaderInner.textContent = view.state.phrase(
       'sorry_your_table_cant_be_displayed_at_the_moment'
     )
+    messageHeader.appendChild(messageHeaderInner)
     const messageBody = document.createElement('p')
     messageBody.textContent = view.state.phrase(
       'this_could_be_because_we_cant_support_some_elements_of_the_table'
     )
     message.appendChild(messageHeader)
     message.appendChild(messageBody)
-    warning.appendChild(message)
+    messageWrapper.appendChild(message)
+    warning.appendChild(messageWrapper)
     const element = document.createElement('div')
     element.classList.add('table-generator', 'table-generator-error-container')
     element.appendChild(warning)