Merge branch 'pre-custom-dns-fixes'

Author: raksooo

gui/src/renderer/components/Switch.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
+import { assignToRef } from '../lib/utilityHooks';
 
 interface IProps {
   id?: string;
@@ -10,6 +11,7 @@ interface IProps {
   onChange?: (isOn: boolean) => void;
   className?: string;
   disabled?: boolean;
+  forwardedRef?: React.Ref<HTMLDivElement>;
 }
 
 interface IState {
@@ -75,15 +77,16 @@ export default class Switch extends React.PureComponent<IProps, IState> {
   public render() {
     return (
       <SwitchContainer
+        ref={this.refCallback}
         id={this.props.id}
         role="checkbox"
         aria-labelledby={this.props['aria-labelledby']}
         aria-describedby={this.props['aria-describedby']}
         aria-checked={this.props.isOn}
-        ref={this.containerRef}
         onClick={this.handleClick}
         disabled={this.props.disabled ?? false}
         aria-disabled={this.props.disabled ?? false}
+        tabIndex={-1}
         className={this.props.className}>
         <Knob
           disabled={this.props.disabled ?? false}
@@ -95,6 +98,11 @@ export default class Switch extends React.PureComponent<IProps, IState> {
     );
   }
 
+  private refCallback = (element: HTMLDivElement | null) => {
+    assignToRef(element, this.containerRef);
+    assignToRef(element, this.props.forwardedRef);
+  };
+
   private handleClick = () => {
     if (this.props.disabled) {
       return;

gui/src/renderer/components/cell/CellButton.tsx

@@ -4,29 +4,34 @@ import { colors } from '../../../config.json';
 import { CellDisabledContext } from './Container';
 import { CellSectionContext } from './Section';
 
-interface IStyledCellButtonProps {
+interface IStyledCellButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   selected?: boolean;
   containedInSection: boolean;
 }
 
-const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => ({
-  display: 'flex',
-  padding: '0 16px 0 22px',
-  marginBottom: '1px',
-  flex: 1,
-  alignItems: 'center',
-  alignContent: 'center',
-  cursor: 'default',
-  border: 'none',
-  backgroundColor: props.selected
+export const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => {
+  const backgroundColor = props.selected
     ? colors.green
     : props.containedInSection
     ? colors.blue40
-    : colors.blue,
-  ':not(:disabled):hover': {
-    backgroundColor: props.selected ? colors.green : colors.blue80,
-  },
-}));
+    : colors.blue;
+  const backgroundColorHover = props.selected ? colors.green : colors.blue80;
+
+  return {
+    display: 'flex',
+    padding: '0 16px 0 22px',
+    marginBottom: '1px',
+    flex: 1,
+    alignItems: 'center',
+    alignContent: 'center',
+    cursor: 'default',
+    border: 'none',
+    backgroundColor,
+    ':not(:disabled):hover': {
+      backgroundColor: props.onClick ? backgroundColorHover : backgroundColor,
+    },
+  };
+});
 
 interface ICellButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   selected?: boolean;

gui/src/renderer/components/cell/Input.tsx

@@ -5,10 +5,13 @@ import { mediumText } from '../common-styles';
 import { CellDisabledContext } from './Container';
 import StandaloneSwitch from '../Switch';
 
-export function Switch(props: StandaloneSwitch['props']) {
+export const Switch = React.forwardRef(function SwitchT(
+  props: StandaloneSwitch['props'],
+  ref: React.Ref<HTMLDivElement>,
+) {
   const disabled = useContext(CellDisabledContext);
-  return <StandaloneSwitch disabled={disabled} {...props} />;
-}
+  return <StandaloneSwitch forwardedRef={ref} disabled={disabled} {...props} />;
+});
 
 export const InputFrame = styled.div({
   flexGrow: 0,

gui/src/renderer/components/cell/Label.tsx

@@ -30,7 +30,10 @@ const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({
   tintColor: props.tintColor ?? colors.white60,
   tintHoverColor: props.tintHoverColor ?? props.tintColor ?? colors.white60,
 }))((props: IImageViewProps) => ({
-  [CellButton + ':hover &']: {
+  ':hover': {
+    backgroundColor: props.tintColor,
+  },
+  [`${CellButton}:not(:disabled):hover &`]: {
     backgroundColor: props.tintHoverColor,
   },
 }));

gui/src/renderer/lib/utilityHooks.ts

@@ -18,7 +18,7 @@ export function useCombinedRefs<T>(...refs: (React.Ref<T> | undefined)[]): React
   return useCallback((element: T | null) => refs.forEach((ref) => assignToRef(element, ref)), []);
 }
 
-function assignToRef<T>(element: T | null, ref?: React.Ref<T>) {
+export function assignToRef<T>(element: T | null, ref?: React.Ref<T>) {
   if (typeof ref === 'function') {
     ref(element);
   } else if (ref && element) {