Merge pull request #24545 from overleaf/as-customerio-toolbar-placeholders

[web] Create placeholders for customer.io inline messages

GitOrigin-RevId: 862362cd9336e5c1899dfaeeabac9f3da181ccf9

services/web/frontend/js/features/editor-navigation-toolbar/components/history-toggle-button.jsx

@@ -11,6 +11,7 @@ function HistoryToggleButton({ onClick }) {
         <MaterialIcon type="history" className="align-middle" />
         <p className="toolbar-label">{t('history')}</p>
       </button>
+      <div id="toolbar-cio-history" className="toolbar-cio-tooltip" />
     </div>
   )
 }

services/web/frontend/js/features/editor-navigation-toolbar/components/share-project-button.jsx

@@ -11,6 +11,7 @@ function ShareProjectButton({ onClick }) {
         <MaterialIcon type="group_add" className="align-middle" />
         <p className="toolbar-label">{t('share')}</p>
       </button>
+      <div id="toolbar-cio-share" className="toolbar-cio-tooltip" />
     </div>
   )
 }

services/web/frontend/js/features/editor-navigation-toolbar/components/track-changes-toggle-button.jsx

@@ -25,6 +25,7 @@ function TrackChangesToggleButton({
         <MaterialIcon type="rate_review" className="align-middle" />
         <p className="toolbar-label">{t('review')}</p>
       </button>
+      <div id="toolbar-cio-review" className="toolbar-cio-tooltip" />
     </div>
   )
 }

services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss

@@ -248,6 +248,23 @@
 
   .toolbar-item {
     display: flex;
+    justify-content: center;
+  }
+
+  .toolbar-cio-tooltip {
+    position: absolute;
+    top: var(--toolbar-height);
+    width: 391px;
+  }
+
+  #toolbar-cio-history {
+    @include media-breakpoint-down(lg) {
+      right: 10px;
+
+      /* The iframe a message renders in isn't aware of the page width, so we
+         make it 1px narrower to enable max-width media queries */
+      width: 390px;
+    }
   }
 }