refactor(settings): replace MUI Slider with a native range input

packages/fxa-settings/src/components/Settings/PageAvatar/index.test.tsx

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { act, fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Account, AppContext } from '../../../models';
 import { mockAppContext, renderWithRouter } from '../../../models/mocks';
@@ -185,3 +186,29 @@ it('PageAddAvatar | renders rotateBtn and calls onclick correctly', async () =>
   });
   expect(onClick).toHaveBeenCalled();
 });
+
+it('PageAddAvatar | reflects zoom changes from the slider and the zoom buttons', async () => {
+  const user = userEvent.setup();
+  renderWithRouter(
+    <AppContext.Provider value={mockAppContext({ account })}>
+      <PageAvatar />
+    </AppContext.Provider>
+  );
+
+  await user.upload(
+    screen.getByTestId('avatar-image-upload-input'),
+    new File(['image'], 'avatar.png', { type: 'image/png' })
+  );
+
+  // FileReader resolves asynchronously, so wait for the edit view to appear.
+  const slider = await screen.findByRole('slider', { name: 'zoom-slider' });
+  expect(slider).toHaveValue('1');
+
+  await user.click(screen.getByTestId('zoom-in-btn'));
+  expect(slider).toHaveValue('1.1');
+
+  // jsdom has no default action for a range input, so a drag or an arrow key
+  // cannot move the thumb.
+  fireEvent.change(slider, { target: { value: '2.5' } });
+  expect(slider).toHaveValue('2.5');
+});

packages/fxa-settings/src/components/Settings/PageAvatar/index.tsx

@@ -37,6 +37,15 @@ import {
 
 const PROFILE_FILE_IMAGE_MAX_UPLOAD_SIZE = 2 * 1024 * 1024;
 const frameClass = `rounded-full m-auto w-40 object-cover`;
+// Range inputs need per-vendor track and thumb rules. The negative margin
+// centers the WebKit thumb on the track; Firefox centers its own.
+const zoomSliderClass = [
+  'appearance-none w-full bg-transparent cursor-pointer rounded-full focus-visible-default outline-offset-4',
+  '[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-grey-300',
+  '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-mt-1.5 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-500',
+  '[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-grey-300',
+  '[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-blue-500',
+].join(' ');
 
 export const PageAddAvatar = () => {
   usePageViewEvent('settings.avatar.change');
@@ -146,7 +155,7 @@ export const PageAddAvatar = () => {
     return null;
   }, [croppedAreaPixels, rotation, capturedImgSrc]);
 
-  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSliderChange = (event: ChangeEvent<HTMLInputElement>) => {
     setZoom(Number(event.target.value));
   };
 
@@ -235,14 +244,14 @@ export const PageAddAvatar = () => {
             return setZoom(zoom - 0.1);
           }}
         />
-        <div className="w-32 ml-2 mr-4 flex items-center">
+        <div className="w-32 ml-2 mr-4">
           <input
             type="range"
             min={1}
             max={3}
             step={0.1}
             value={zoom}
-            className="w-full"
+            className={zoomSliderClass}
             aria-label="zoom-slider"
             onChange={handleSliderChange}
           />

packages/fxa-settings/src/styles/tailwind.css

@@ -10,7 +10,6 @@
 @import 'fxa-react/styles/index';
 @import './unit-row';
 @import './drop-down-menu';
-@import './slider';
 @import './switch';
 @import './brand-banner.css';