remove-w2ui: replace w2ui-scroll-wrapper

And add self made ui-scroll-reight/left items with
primary color tiangle. We should replace it at some
point with something more pretty.

Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: I67530c6352b8356214399f324b55bbf9bc24f876

21 files changed, 95 insertions, 59 deletions

diff --git a/browser/css/device-mobile.css b/browser/css/device-mobile.css
index 6ab4e7f228..4d83d52853 100644
--- a/browser/css/device-mobile.css
+++ b/browser/css/device-mobile.css
@@ -221,15 +221,16 @@ nav:not(.spreadsheet-color-indicator) ~ #toolbar-wrapper #toolbar-up.w2ui-toolba
 #toolbar-down {
 	border-top: 1px solid var(--color-border) !important;
 }
-#toolbar-down > .w2ui-scroll-wrapper {
+.ui-scroll-wrapper {
 	overflow-x: scroll !important;
 	scrollbar-width: none; /*css draft (firefox only)*/
 	-ms-scrollbar: none; /*ie*/
 }
-#toolbar-down > .w2ui-scroll-wrapper::-webkit-scrollbar { /*webkit only*/
+.ui-scroll-wrapper::-webkit-scrollbar { /*webkit only*/
 	display: none;
 }
-#toolbar-down .w2ui-scroll-left, #toolbar-down .w2ui-scroll-right{
+.ui-scroll-left,
+.ui-scroll-right {
 	background: none;
 	height: 100%;
 	width: 0px;
@@ -237,7 +238,7 @@ nav:not(.spreadsheet-color-indicator) ~ #toolbar-wrapper #toolbar-up.w2ui-toolba
 	box-shadow: 8px 0 13px 2px #0b87e7, -6px 0px 6px 6px #007cdc;
 	border-radius: 0px;
 }
-#toolbar-down .w2ui-scroll-right{
+.ui-scroll-right {
 	display: block !important;
 	right: 0;
 	-webkit-transform: rotate(180deg);
diff --git a/browser/css/device-tablet.css b/browser/css/device-tablet.css
index 5e041db56c..4162812ab9 100644
--- a/browser/css/device-tablet.css
+++ b/browser/css/device-tablet.css
@@ -6,15 +6,16 @@
 }
 
 /* Make the upper toolbar scrollable using swipe as on phones. */
-#toolbar-up > .w2ui-scroll-wrapper {
+.ui-scroll-wrapper {
 	overflow-x: scroll !important;
 	scrollbar-width: none; /*css draft (firefox only)*/
 	-ms-scrollbar: none; /*ie*/
 }
-#toolbar-up > .w2ui-scroll-wrapper::-webkit-scrollbar { /*webkit only*/
+.ui-scroll-wrapper::-webkit-scrollbar { /*webkit only*/
 	display: none;
 }
-#toolbar-up .w2ui-scroll-left, #toolbar-up .w2ui-scroll-right{
+.ui-scroll-left,
+.ui-scroll-right {
 	background: none;
 	height: 100%;
 	width: 0px;
@@ -22,7 +23,7 @@
 	box-shadow: 8px 0 13px 2px var(--color-primary), -6px 0px 6px 6px var(--color-primary);
 	border-radius: 0px;
 }
-#toolbar-up .w2ui-scroll-right{
+.ui-scroll-right {
 	right: 0;
 	-webkit-transform: rotate(180deg);
 	-moz-transform: rotate(180deg);
diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index e779a37f4e..fa387eef64 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -194,26 +194,58 @@ w2ui-toolbar {
 	height: 100%;
 }
 
-.w2ui-scroll-left,
-.w2ui-scroll-right {
+/* scroll wrapper */
+.ui-scroll-wrapper {
+	overflow: hidden;
+}
+.ui-scroll-left {
+	left: 0;
+}
+.ui-scroll-right {
+	right: 0;
+}
+.ui-scroll-left,
+.ui-scroll-right {
+	display: none;
+	position: absolute;
+	top: 0px;
+	width: 18px;
+	height: 100%;
 	z-index: 1001;
 	background-color: var(--color-background-dark);
 	box-shadow: 0px 0px 7px var(--color-box-shadow);
 }
+.ui-scroll-left::before,
+.ui-scroll-right::after {
+	position: absolute;
+	display: block;
+	content: '';
+	border: 10px solid transparent;
+	border-top-color: var(--color-primary);
+	top: calc(50% - 10px);
+}
+.ui-scroll-left::before {
+	rotate: 90deg;
+	right: 0px;
+}
+.ui-scroll-right::after {
+	rotate: 270deg;
+}
+.ui-scroll-left:hover,
+.ui-scroll-right:hover {
+	background-color: var(--color-background-darker);
+}
+
 .notebookbar-scroll-wrapper {
 	height: 72px;
 }
-#toolbar-wrapper.hasnotebookbar .w2ui-scroll-left,
-#toolbar-wrapper.hasnotebookbar .w2ui-scroll-right {
+#toolbar-wrapper.hasnotebookbar .ui-scroll-left,
+#toolbar-wrapper.hasnotebookbar .ui-scroll-right {
 	/* .notebookbar-scroll-wrapper's height */
 	height: 72px;
 	/* #toolbar-wrapper:not(.mobile)'s top padding */
 	top: 3px;
 }
-.w2ui-scroll-left:hover,
-.w2ui-scroll-right:hover {
-	background-color: var(--color-background-darker);
-}
 
 /* center the toolbar */
 #tb_presentation-toolbar_item_left {
diff --git a/browser/src/control/jsdialog/Util.ScrollableBar.ts b/browser/src/control/jsdialog/Util.ScrollableBar.ts
index d2104772e0..21e5280a4b 100644
--- a/browser/src/control/jsdialog/Util.ScrollableBar.ts
+++ b/browser/src/control/jsdialog/Util.ScrollableBar.ts
@@ -18,8 +18,10 @@
 declare var JSDialog: any;
 
 function createScrollButtons(parent: Element, scrollable: Element) {
-	const left = L.DomUtil.create('div', 'w2ui-scroll-left', parent);
-	const right = L.DomUtil.create('div', 'w2ui-scroll-right', parent);
+	L.DomUtil.addClass(scrollable, 'ui-scroll-wrapper');
+
+	const left = L.DomUtil.create('div', 'ui-scroll-left', parent);
+	const right = L.DomUtil.create('div', 'ui-scroll-right', parent);
 
 	JSDialog.AddOnClick(left, () => {
 		const scroll = $(scrollable).scrollLeft() - 300;
@@ -44,8 +46,8 @@ function showArrow(arrow: HTMLElement, show: boolean) {
 }
 
 function setupResizeHandler(container: Element, scrollable: Element) {
-	const left = container.querySelector('.w2ui-scroll-left') as HTMLElement;
-	const right = container.querySelector('.w2ui-scroll-right') as HTMLElement;
+	const left = container.querySelector('.ui-scroll-left') as HTMLElement;
+	const right = container.querySelector('.ui-scroll-right') as HTMLElement;
 	const handler = function () {
 		const rootContainer = scrollable.querySelector('div');
 		if (!rootContainer) return;
diff --git a/cypress_test/integration_tests/common/desktop_helper.js b/cypress_test/integration_tests/common/desktop_helper.js
index fda1d0e2d6..3b1dafe179 100644
--- a/cypress_test/integration_tests/common/desktop_helper.js
+++ b/cypress_test/integration_tests/common/desktop_helper.js
@@ -184,7 +184,7 @@ function makeZoomItemsVisible() {
 	cy.cGet('#toolbar-down #zoomin')
 		.then(function(zoomInItem) {
 			if (!Cypress.dom.isVisible(zoomInItem)) {
-				cy.cGet('#toolbar-down .w2ui-scroll-right').click();
+				cy.cGet('#toolbar-down .ui-scroll-right').click();
 			}
 		});
 
@@ -267,12 +267,12 @@ function insertImage(docType) {
 
 	selectZoomLevel('50');
 
-	cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+	cy.cGet('#toolbar-up .ui-scroll-right').click();
 
 	const mode = Cypress.env('USER_INTERFACE');
 
 	if (mode === 'notebookbar')
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 
 	if (docType === 'calc' &&  mode === 'notebookbar') {
 		cy.cGet('#Insert-tab-label').click();
diff --git a/cypress_test/integration_tests/desktop/calc/cell_cursor_spec.js b/cypress_test/integration_tests/desktop/calc/cell_cursor_spec.js
index fecc97c572..262c507366 100644
--- a/cypress_test/integration_tests/desktop/calc/cell_cursor_spec.js
+++ b/cypress_test/integration_tests/desktop/calc/cell_cursor_spec.js
@@ -10,7 +10,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Test jumping on large cell
 	beforeEach(function() {
 		helper.beforeAll(testFileName, 'calc');
 		desktopHelper.switchUIToCompact();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#sidebar').click({force: true});
 	});
 
@@ -32,7 +32,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Test jumping on large cell
 	beforeEach(function() {
 		helper.beforeAll(testFileName, 'calc');
 		desktopHelper.switchUIToCompact();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#sidebar').click({force: true});
 	});
 
diff --git a/cypress_test/integration_tests/desktop/calc/delete_objects_spec.js b/cypress_test/integration_tests/desktop/calc/delete_objects_spec.js
index 0ca26eb046..062570ac6e 100644
--- a/cypress_test/integration_tests/desktop/calc/delete_objects_spec.js
+++ b/cypress_test/integration_tests/desktop/calc/delete_objects_spec.js
@@ -28,7 +28,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Delete Objects', function(
 	});
 
 	it('Delete Shapes', function() {
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 
 		cy.cGet('#insertshapes').click();
 		cy.cGet('.col.w2ui-icon.symbolshapes').should($el => { expect(Cypress.dom.isDetached($el)).to.eq(false); }).click();
@@ -44,7 +44,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Delete Objects', function(
 	});
 
 	it('Delete Chart' , function() {
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 		//insert
 		cy.cGet('#insertobjectchart').click();
 		cy.cGet('.ui-pushbutton.jsdialog.button-primary').should($el => { expect(Cypress.dom.isDetached($el)).to.eq(false); }).click();
diff --git a/cypress_test/integration_tests/desktop/calc/jsdialog_spec.js b/cypress_test/integration_tests/desktop/calc/jsdialog_spec.js
index bc38337445..5e286e180a 100644
--- a/cypress_test/integration_tests/desktop/calc/jsdialog_spec.js
+++ b/cypress_test/integration_tests/desktop/calc/jsdialog_spec.js
@@ -43,8 +43,8 @@ describe(['tagdesktop'], 'JSDialog unit test', function() {
 
 	it('JSDialog dropdown', function() {
 		// Open conditional format menu
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#toolbar-up #home-conditional-format-menu-button').click();
 
 		// Click on overlay to close
diff --git a/cypress_test/integration_tests/desktop/calc/row_column_operation_spec.js b/cypress_test/integration_tests/desktop/calc/row_column_operation_spec.js
index a2fb941582..af01a2eeeb 100644
--- a/cypress_test/integration_tests/desktop/calc/row_column_operation_spec.js
+++ b/cypress_test/integration_tests/desktop/calc/row_column_operation_spec.js
@@ -12,7 +12,7 @@ describe(['tagdesktop'], 'Row Column Operation', function() {
 		helper.setDummyClipboardForCopy();
 		calcHelper.assertSheetContents(['Hello','Hi','World','Bye'], true);
 		calcHelper.clickOnFirstCell(true,false);
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 	});
 
 	afterEach(function() {
diff --git a/cypress_test/integration_tests/desktop/calc/scrolling_spec.js b/cypress_test/integration_tests/desktop/calc/scrolling_spec.js
index 34e6b38fe9..513c9c0d68 100644
--- a/cypress_test/integration_tests/desktop/calc/scrolling_spec.js
+++ b/cypress_test/integration_tests/desktop/calc/scrolling_spec.js
@@ -9,7 +9,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Scroll through document',
 	beforeEach(function() {
 		helper.beforeAll(testFileName, 'calc');
 		desktopHelper.switchUIToCompact();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#sidebar').click({force: true});
 	});
 
diff --git a/cypress_test/integration_tests/desktop/calc/top_toolbar_spec.js b/cypress_test/integration_tests/desktop/calc/top_toolbar_spec.js
index 8b93a5289a..68616e5245 100644
--- a/cypress_test/integration_tests/desktop/calc/top_toolbar_spec.js
+++ b/cypress_test/integration_tests/desktop/calc/top_toolbar_spec.js
@@ -206,7 +206,7 @@ describe(['tagdesktop'], 'Top toolbar tests.', function() {
 	it('Add/Delete decimal places', function() {
 		helper.setDummyClipboardForCopy();
 		// Add decimal place
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#numberformatincdecimals').click();
 		calcHelper.selectEntireSheet();
 		helper.copy();
@@ -231,7 +231,7 @@ describe(['tagdesktop'], 'Top toolbar tests.', function() {
 
 	it('Format as currency.', function() {
 		helper.setDummyClipboardForCopy();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#numberformatcurrency').click();
 
 		calcHelper.selectEntireSheet();
@@ -245,7 +245,7 @@ describe(['tagdesktop'], 'Top toolbar tests.', function() {
 
 	it('Format as Percent.', function() {
 		helper.setDummyClipboardForCopy();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#numberformatpercent').click();
 
 		calcHelper.selectEntireSheet();
@@ -259,7 +259,7 @@ describe(['tagdesktop'], 'Top toolbar tests.', function() {
 
 	it('Apply left/right alignment', function() {
 		helper.setDummyClipboardForCopy();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		// Set right aligment first
 		cy.cGet('#textalign .arrowbackground').click();
 		cy.cGet('body').contains('.ui-combobox-entry', 'Align Right').click();
diff --git a/cypress_test/integration_tests/desktop/draw/navigator_spec.js b/cypress_test/integration_tests/desktop/draw/navigator_spec.js
index 0a4cba687b..c1bc1721c3 100644
--- a/cypress_test/integration_tests/desktop/draw/navigator_spec.js
+++ b/cypress_test/integration_tests/desktop/draw/navigator_spec.js
@@ -87,7 +87,7 @@ describe.skip(['tagdesktop'], 'Scroll through document, insert/delete items', fu
 		//create a new page
 		cy.cGet('#presentation-toolbar #insertpage').click();
 		cy.cGet('#tree').contains('.jsdialog.sidebar.ui-treeview-cell-text', 'Page 5').should('exist');
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 
 		//Insert Shape
 		cy.cGet('#insertshapes').click();
diff --git a/cypress_test/integration_tests/desktop/impress/apply_paragraph_props_text_spec.js b/cypress_test/integration_tests/desktop/impress/apply_paragraph_props_text_spec.js
index fe068dc241..340abf8cdd 100644
--- a/cypress_test/integration_tests/desktop/impress/apply_paragraph_props_text_spec.js
+++ b/cypress_test/integration_tests/desktop/impress/apply_paragraph_props_text_spec.js
@@ -11,7 +11,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Apply paragraph properties
 	beforeEach(function() {
 		testFileName = helper.beforeAll(origTestFileName, 'impress');
 		desktopHelper.switchUIToCompact();
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 		cy.cGet('#modifypage').click({force: true});
 		impressHelper.selectTextShapeInTheCenter();
 	});
diff --git a/cypress_test/integration_tests/desktop/impress/delete_objects_spec.js b/cypress_test/integration_tests/desktop/impress/delete_objects_spec.js
index c6d07fd9be..506e51ab60 100644
--- a/cypress_test/integration_tests/desktop/impress/delete_objects_spec.js
+++ b/cypress_test/integration_tests/desktop/impress/delete_objects_spec.js
@@ -30,7 +30,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Delete Objects', function(
 	});
 
 	it('Delete Shapes', function() {
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 		cy.wait(1000);
 		//insert
 		cy.cGet('#insertshapes').click();
@@ -43,7 +43,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Delete Objects', function(
 	});
 
 	it('Delete Chart' , function() {
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 		//insert
 		cy.cGet('#insertobjectchart').click();
 		cy.cGet('.leaflet-control-buttons-disabled path.leaflet-interactive').should('exist');
diff --git a/cypress_test/integration_tests/desktop/impress/editable_area_spec.js b/cypress_test/integration_tests/desktop/impress/editable_area_spec.js
index 2d62dab978..97c90fc4c5 100644
--- a/cypress_test/integration_tests/desktop/impress/editable_area_spec.js
+++ b/cypress_test/integration_tests/desktop/impress/editable_area_spec.js
@@ -34,7 +34,7 @@ describe(['taga11yenabled'], 'Editable area - Basic typing and caret moving', fu
     beforeEach(function () {
         helper.beforeAll(testFileName, 'impress');
         desktopHelper.switchUIToCompact();
-        cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+        cy.cGet('#toolbar-up > .ui-scroll-right').click();
         cy.cGet('#modifypage').click({force: true});
         cy.cGet('div.clipboard').as('clipboard');
     });
diff --git a/cypress_test/integration_tests/desktop/impress/navigator_spec.js b/cypress_test/integration_tests/desktop/impress/navigator_spec.js
index f1ac9635dc..37240f5567 100644
--- a/cypress_test/integration_tests/desktop/impress/navigator_spec.js
+++ b/cypress_test/integration_tests/desktop/impress/navigator_spec.js
@@ -87,7 +87,7 @@ describe.skip(['tagdesktop'], 'Scroll through document, insert/delete items', fu
 		//create a new sheet
 		cy.cGet('#presentation-toolbar #insertpage').click();
 		cy.cGet('#tree').contains('.jsdialog.sidebar.ui-treeview-cell-text', 'Slide 5').should('exist');
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 
 		//Insert Shape
 		cy.cGet('#insertshapes').click();
diff --git a/cypress_test/integration_tests/desktop/impress/open_different_file_types_spec.js b/cypress_test/integration_tests/desktop/impress/open_different_file_types_spec.js
index 9d2b72c8cb..4c6b25345e 100644
--- a/cypress_test/integration_tests/desktop/impress/open_different_file_types_spec.js
+++ b/cypress_test/integration_tests/desktop/impress/open_different_file_types_spec.js
@@ -14,7 +14,7 @@ describe.skip(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Open different file t
 
 		selectZoomLevel('50');
 
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 
 		cy.cGet('#modifypage').click();
 	}
diff --git a/cypress_test/integration_tests/desktop/impress/scrolling_spec.js b/cypress_test/integration_tests/desktop/impress/scrolling_spec.js
index a958a7ebf8..f9774bff32 100644
--- a/cypress_test/integration_tests/desktop/impress/scrolling_spec.js
+++ b/cypress_test/integration_tests/desktop/impress/scrolling_spec.js
@@ -9,7 +9,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Scroll through document',
 	beforeEach(function() {
 		helper.beforeAll(testFileName, 'impress');
 		desktopHelper.switchUIToCompact();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#modifypage').click({force: true});
 		desktopHelper.selectZoomLevel('200');
 	});
diff --git a/cypress_test/integration_tests/desktop/writer/help_dialog_update_spec.js b/cypress_test/integration_tests/desktop/writer/help_dialog_update_spec.js
index 4b478da0e3..95d9d5f544 100644
--- a/cypress_test/integration_tests/desktop/writer/help_dialog_update_spec.js
+++ b/cypress_test/integration_tests/desktop/writer/help_dialog_update_spec.js
@@ -56,7 +56,7 @@ describe(['tagscreenshot'], 'Help dialog screenshot updation', function() {
 	});
 
 	it('Document repair', function() {
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 		//insert
 		cy.cGet('#insertshapes').click();
 		cy.cGet('.col.w2ui-icon.symbolshapes').click();
@@ -71,7 +71,7 @@ describe(['tagscreenshot'], 'Help dialog screenshot updation', function() {
 	it('Comment', function() {
 		hideSidebar();
 
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 		cy.cGet('#insertannotation').click();
 		cy.cGet('#annotation-modify-textarea-new').type('comment added');
 		cy.cGet('#annotation-save-new').click(); // save button
@@ -93,7 +93,7 @@ describe(['tagscreenshot'], 'Help dialog screenshot updation', function() {
 	it('Table', function() {
 		hideSidebar();
 
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 		cy.cGet('#inserttable').click();
 		cy.cGet('.inserttable-grid > :nth-child(4) > :nth-child(4)').trigger('mouseover');
 
@@ -112,7 +112,7 @@ describe(['tagscreenshot'], 'Help dialog screenshot updation', function() {
 	});
 
 	it('Insert special', function() {
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 		cy.cGet('#insertsymbol').click();
 		cy.cGet('#SpecialCharactersDialog').should('exist');
 		cy.cGet('#SpecialCharactersDialog').screenshot('special-character');
@@ -126,7 +126,7 @@ describe(['tagscreenshot'], 'Help dialog screenshot updation', function() {
 
 		helper.typeIntoDocument('Hello World');
 
-		cy.cGet('#toolbar-up > .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up > .ui-scroll-right').click();
 		//insert
 		cy.cGet('#insertshapes').click();
 		cy.cGet('.col.w2ui-icon.symbolshapes').click();
diff --git a/cypress_test/integration_tests/desktop/writer/scrolling_spec.js b/cypress_test/integration_tests/desktop/writer/scrolling_spec.js
index b6c29ce149..71a233f264 100644
--- a/cypress_test/integration_tests/desktop/writer/scrolling_spec.js
+++ b/cypress_test/integration_tests/desktop/writer/scrolling_spec.js
@@ -10,7 +10,7 @@ describe(['tagdesktop', 'tagnextcloud', 'tagproxy'], 'Scroll through document',
 		helper.beforeAll(testFileName, 'writer');
 		desktopHelper.switchUIToCompact();
 
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#sidebar').click({force: true});
 	});
 
diff --git a/cypress_test/integration_tests/desktop/writer/top_toolbar_spec.js b/cypress_test/integration_tests/desktop/writer/top_toolbar_spec.js
index 4a47465ec6..2974cbfb41 100644
--- a/cypress_test/integration_tests/desktop/writer/top_toolbar_spec.js
+++ b/cypress_test/integration_tests/desktop/writer/top_toolbar_spec.js
@@ -224,10 +224,10 @@ describe(['tagdesktop'], 'Top toolbar tests.', function() {
 
 	it('Insert/delete table.', function() {
 		helper.setDummyClipboardForCopy();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#Home-container .unoInsertTable button').click();
 		cy.cGet('.inserttable-grid > .row > .col').eq(3).click();
 		helper.typeIntoDocument('{ctrl}a');
@@ -239,8 +239,8 @@ describe(['tagdesktop'], 'Top toolbar tests.', function() {
 	});
 
 	it('Insert image.', function() {
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#Home-container .unoInsertGraphic').click({force: true});
 		cy.cGet('#insertgraphic[type=file]').attachFile('/desktop/writer/image_to_insert.png');
 		cy.cGet('.leaflet-pane.leaflet-overlay-pane svg g.Graphic').should('exist');
@@ -321,7 +321,7 @@ describe(['tagdesktop'], 'Top toolbar tests.', function() {
 		cy.cGet('#copy-paste-container p i').should('exist');
 
 		//Undo
-		cy.cGet('#toolbar-up .w2ui-scroll-left').click();
+		cy.cGet('#toolbar-up .ui-scroll-left').click();
 		cy.cGet('#Home-container .unoUndo').should('not.be.disabled').click();
 		helper.copy();
 		cy.wait(500); // wait for new clipboard
@@ -378,8 +378,8 @@ describe(['tagdesktop'], 'Top toolbar tests.', function() {
 	});
 
 	it('Insert Special Character.', function() {
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.wait(500);
 		cy.cGet('#Home-container .unospan-CharmapControl').click({force: true});
 		cy.cGet('.jsdialog-container.ui-dialog.ui-widget-content.lokdialog_container').should('be.visible');
@@ -488,7 +488,7 @@ describe(['tagdesktop'], 'Top toolbar tests.', function() {
 	it('Insert/delete Fontwork', function() {
 		writerHelper.selectAllTextOfDoc();
 		cy.cGet('#Insert-tab-label').click();
-		cy.cGet('#toolbar-up .w2ui-scroll-right').click();
+		cy.cGet('#toolbar-up .ui-scroll-right').click();
 		cy.cGet('#Insert-container .unoFontworkGalleryFloater').click();
 		cy.cGet('#ok').click();
 		cy.cGet('.leaflet-control-buttons-disabled path.leaflet-interactive').should('exist');