feat: moved appearance section and slider for zoom factor

Author: Bilb

package.json

@@ -90,7 +90,6 @@
     "pino": "^9.6.0",
     "protobufjs": "^7.4.0",
     "punycode": "^2.3.1",
-    "rc-slider": "^11.1.8",
     "react": "18.3.1",
     "react-contexify": "^6.0.0",
     "react-dom": "18.3.1",

stylesheets/_session_slider.scss

@@ -28,5 +28,4 @@
 @import 'session_theme';
 @import 'session_left_pane';
 
-@import 'session_slider';
 @import 'session_conversation';

stylesheets/manifest.scss

@@ -4,6 +4,8 @@ export const SessionContextMenuContainer = styled.div.attrs({
   // custom props
 })`
   .contexify {
+    --contexify-activeItem-bgColor: var(--context-menu-background-hover-color);
+    --contexify-activeItem-color: var(--context-menu-text-hover-color);
     // be sure it is more than the one set for the More Information screen of messages
     z-index: 30;
     min-width: 200px;
@@ -36,3 +38,17 @@ export const SessionContextMenuContainer = styled.div.attrs({
     }
   }
 `;
+
+export const SessionContextMenuContainerItemsCentered = styled(SessionContextMenuContainer)`
+  .contexify {
+    .contexify_item {
+      width: 100%;
+      place-items: center;
+    }
+
+    .contexify_itemContent {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+`;

ts/components/SessionContextMenuContainer.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, SessionDataTestId, type MouseEventHandler } from 'react';
+import { SessionDataTestId, type MouseEventHandler } from 'react';
 
 import styled, { CSSProperties } from 'styled-components';
 import { Flex } from './Flex';
@@ -38,7 +38,11 @@ const StyledRadioOuter = styled.div<{
   }
 `;
 
-function RadioButton({
+/**
+ * The dot part of the radio button. Unless for the Theme switcher, it shouldn't be used directly.
+ * Instead, use `SessionRadio`.
+ */
+export function RadioDot({
   disabled,
   onClick,
   selected,
@@ -143,7 +147,7 @@ export const SessionRadio = (props: SessionRadioProps) => {
           </StyledLabel>
         ) : null}
 
-        <RadioButton
+        <RadioDot
           selected={active}
           onClick={clickHandler}
           disabled={disabled}
@@ -154,47 +158,3 @@ export const SessionRadio = (props: SessionRadioProps) => {
     </StyledContainer>
   );
 };
-
-/**
- * This is slightly different that the classic SessionRadio as this one has
- *  - no padding between the selected background and the border,
- *  - they all have a background color (even when not selected), but the border is present on the selected one
- *
- * Keeping it here so we don't have to export
- */
-export const SessionRadioPrimaryColors = (props: {
-  value: string;
-  active: boolean;
-  onClick: (value: string) => void;
-  ariaLabel: string;
-  color: string; // by default, we use the theme accent color but for the settings screen we need to be able to force it
-}) => {
-  const { value, active, onClick, color, ariaLabel } = props;
-
-  function clickHandler(e: ChangeEvent<any>) {
-    e.stopPropagation();
-    onClick(value);
-  }
-
-  // this component has no padding between the selected background and the border
-  const diameterRadioBorder = 26;
-
-  const overriddenColorsVars = {
-    '--primary-color': color,
-    '--text-primary-color': active ? undefined : 'transparent',
-  } as React.CSSProperties;
-
-  return (
-    <Flex $container={true} padding="0 0 5px 0">
-      <RadioButton
-        selected={true}
-        onClick={clickHandler}
-        disabled={false}
-        dataTestId={undefined}
-        diameterRadioBorder={diameterRadioBorder}
-        style={overriddenColorsVars}
-        ariaLabel={ariaLabel}
-      />
-    </Flex>
-  );
-};

ts/components/basic/SessionRadio.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, SessionDataTestId } from 'react';
+import type { MouseEvent, ReactNode, SessionDataTestId } from 'react';
 import styled from 'styled-components';
 import { useIsDarkTheme } from '../../../state/theme/selectors/theme';
 import { StyledPanelButton, StyledContent } from './PanelButton';
@@ -7,13 +7,14 @@ import { StyledPanelButtonSeparator } from './StyledPanelButtonGroupSeparator';
 const StyledActionContainer = styled.div`
   display: flex;
   align-items: center;
+  flex-shrink: 0;
   pointer-events: none; // let the container handle the event (otherwise we get 2 onClick events, cancelling each others)
 `;
 
 export type GenericPanelButtonProps = {
   textElement: ReactNode;
   actionElement: ReactNode;
-  onClick: undefined | (() => void | Promise<void>);
+  onClick: undefined | ((e: MouseEvent<any>) => void | Promise<void>);
   rowDataTestId: SessionDataTestId;
 };