feat: adjust settings page to work for sidebar

apps/trading/client-pages/layout/layout.tsx

@@ -41,7 +41,7 @@ export const Layout = () => {
           <Sidebar />
         </div>
         {largeScreen && sidebarOpen && (
-          <div className="row-span-full row-start-4 col-start-2 p-4">
+          <div className="row-span-full row-start-4 col-start-2 p-4 overflow-y-auto">
             <SidebarContent />
           </div>
         )}

apps/trading/components/settings/settings.tsx

@@ -1,39 +1,46 @@
 import { t } from '@vegaprotocol/i18n';
-import { TelemetryApproval } from '../../components/welcome-dialog/telemetry-approval';
-import {
-  Divider,
-  Switch,
-  ThemeSwitcher,
-  ToastPositionSetter,
-} from '@vegaprotocol/ui-toolkit';
+import { Switch, ToastPositionSetter } from '@vegaprotocol/ui-toolkit';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
+import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
+import type { ReactNode } from 'react';
 
 export const Settings = () => {
   const { theme, setTheme } = useThemeSwitcher();
-  const text = t(theme === 'dark' ? 'Light mode' : 'Dark mode');
+  const [isApproved, setIsApproved] = useTelemetryApproval();
   return (
     <div>
-      <div className="flex justify-between py-3">
-        <div className="flex shrink">
-          <ThemeSwitcher />
-          <label htmlFor="theme-switcher" className="self-center text-lg">
-            {text}
-          </label>
-        </div>
+      <SettingsGroup label={t('Dark mode')}>
         <Switch
           name="settings-theme-switch"
           onCheckedChange={() => setTheme()}
           checked={theme === 'dark'}
         />
-      </div>
-      <Divider />
-      <TelemetryApproval
-        helpText={t(
-          'Help identify bugs and improve the service by sharing anonymous usage data.'
-        )}
-      />
-      <Divider />
-      <ToastPositionSetter />
+      </SettingsGroup>
+      <SettingsGroup label={t('Share usage data')}>
+        <Switch
+          name="settings-theme-switch"
+          onCheckedChange={(isOn) => setIsApproved(isOn)}
+          checked={isApproved}
+        />
+      </SettingsGroup>
+      <SettingsGroup label={t('Toast location')}>
+        <ToastPositionSetter />
+      </SettingsGroup>
+    </div>
+  );
+};
+
+const SettingsGroup = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: ReactNode;
+}) => {
+  return (
+    <div className="flex justify-between mb-4">
+      <label className="text-neutral-500 dark:text-neutral-400">{label}</label>
+      {children}
     </div>
   );
 };

libs/markets/src/lib/components/market-info/market-info-accordion.tsx

@@ -106,7 +106,7 @@ export const MarketInfoAccordion = ({
   };
 
   return (
-    <div className="p-4">
+    <div>
       <div className="mb-8">
         <h3 className={headerClassName}>{t('Market data')}</h3>
         <Accordion>

libs/ui-toolkit/src/components/switch/switch.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
 import * as RootSwitch from '@radix-ui/react-switch';
+import classNames from 'classnames';
 
 export interface SwitchProps {
   name?: string;
@@ -15,17 +16,32 @@ export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
     { name = 'switch', labelText, onCheckedChange, checked = false, disabled },
     ref
   ) => {
+    const wrapperClasses = classNames(
+      'rounded-full relative outline-none cursor-default',
+      'w-[41px] h-[18px]',
+      'bg-vega-light-200 dark:bg-neutral-700',
+      'data-[state=checked]:bg-vega-light-200 dark:data-[state=checked]:bg-neutral-700'
+    );
+
+    const thumbClasses = classNames(
+      'cursor-pointer',
+      'block w-[18px] h-[18px]',
+      'bg-black dark:bg-white',
+      'rounded-full transition-transform duration-100 translate-x-0.3 will-change-transform',
+      'data-[state=checked]:translate-x-[23px]'
+    );
+
     return (
       <div className="flex items-center justify-start">
         <RootSwitch.Root
-          className="w-[41px] h-[18px] rounded bg-vega-light-200 dark:bg-neutral-700 rounded-full relative data-[state=checked]:bg-vega-light-200 dark:data-[state=checked]:bg-neutral-700 outline-none cursor-default"
+          className={wrapperClasses}
           id={`switch-${name}`}
           onCheckedChange={onCheckedChange}
           checked={checked}
           disabled={disabled}
           ref={ref}
         >
-          <RootSwitch.Thumb className="block w-[18px] h-[18px] bg-black dark:bg-white rounded-full transition-transform duration-100 translate-x-0.3 will-change-transform data-[state=checked]:translate-x-[23px]" />
+          <RootSwitch.Thumb className={thumbClasses} />
         </RootSwitch.Root>
         {labelText && (
           <label htmlFor={`switch-${name}`} className="ml-2">

libs/ui-toolkit/src/components/toast/toast-position-setter.tsx

@@ -25,26 +25,21 @@ export const ToastPositionSetter = () => {
     },
     [setToast, setPostion]
   );
-  const iconCssClasses = 'absolute top-[4px] left-[4px]';
+  // const iconCssClasses = 'absolute top-[4px] left-[4px]';
+  const iconCssClasses = '';
   const buttonCssClasses =
-    'relative border-none bg-neutral-500/20 dark:bg-neutral-500/40';
+    'flex items-center px-1 py-1 relative rounded bg-neutral-500/20 dark:bg-neutral-500/40';
   const activeButton = 'bg-neutral-800/80 dark:bg-neutral-200/40';
   const activeIcon = 'fill-white dark:fill-black';
   return (
-    <div className="flex justify-between py-3 items-center">
-      <span>{t('Toast location')}</span>
-      <div
-        className={classNames(
-          'grid grid-cols-3 grid-rows-2 w-[64px] h-[42px] gap-[2px]'
-        )}
-      >
-        <Button
+    <div className="flex justify-between">
+      <div className={classNames('grid grid-cols-3 grid-rows-2 gap-1')}>
+        <button
           className={classNames(
             buttonCssClasses,
             position === ToastPosition.TopLeft && activeButton
           )}
           onClick={() => handleChange(ToastPosition.TopLeft)}
-          size="xs"
         >
           <Icon
             className={classNames(
@@ -54,14 +49,13 @@ export const ToastPositionSetter = () => {
             size={3}
             name={IconNames.ARROW_TOP_LEFT}
           />{' '}
-        </Button>
-        <Button
+        </button>
+        <button
           className={classNames(
             buttonCssClasses,
             position === ToastPosition.TopCenter && activeButton
           )}
           onClick={() => handleChange(ToastPosition.TopCenter)}
-          size="xs"
         >
           <Icon
             className={classNames(
@@ -71,14 +65,13 @@ export const ToastPositionSetter = () => {
             size={3}
             name={IconNames.ARROW_UP}
           />
-        </Button>
-        <Button
+        </button>
+        <button
           className={classNames(
             buttonCssClasses,
             position === ToastPosition.TopRight && activeButton
           )}
           onClick={() => handleChange(ToastPosition.TopRight)}
-          size="xs"
         >
           <Icon
             className={classNames(
@@ -88,14 +81,13 @@ export const ToastPositionSetter = () => {
             size={3}
             name={IconNames.ARROW_TOP_RIGHT}
           />
-        </Button>
-        <Button
+        </button>
+        <button
           className={classNames(
             buttonCssClasses,
             position === ToastPosition.BottomLeft && activeButton
           )}
           onClick={() => handleChange(ToastPosition.BottomLeft)}
-          size="xs"
         >
           <Icon
             className={classNames(
@@ -105,14 +97,13 @@ export const ToastPositionSetter = () => {
             size={3}
             name={IconNames.ARROW_BOTTOM_LEFT}
           />
-        </Button>
-        <Button
+        </button>
+        <button
           className={classNames(
             buttonCssClasses,
             position === ToastPosition.BottomCenter && activeButton
           )}
           onClick={() => handleChange(ToastPosition.BottomCenter)}
-          size="xs"
         >
           <Icon
             className={classNames(
@@ -122,14 +113,13 @@ export const ToastPositionSetter = () => {
             size={3}
             name={IconNames.ARROW_DOWN}
           />
-        </Button>
-        <Button
+        </button>
+        <button
           className={classNames(
             buttonCssClasses,
             position === ToastPosition.BottomRight && activeButton
           )}
           onClick={() => handleChange(ToastPosition.BottomRight)}
-          size="xs"
         >
           <Icon
             className={classNames(
@@ -139,7 +129,7 @@ export const ToastPositionSetter = () => {
             size={3}
             name={IconNames.ARROW_BOTTOM_RIGHT}
           />
-        </Button>
+        </button>
       </div>
     </div>
   );