diff options
Diffstat (limited to 'gui/src')
7 files changed, 50 insertions, 46 deletions
diff --git a/gui/src/renderer/components/cell/SideButton.tsx b/gui/src/renderer/components/cell/SideButton.tsx new file mode 100644 index 0000000000..6c30922b5f --- /dev/null +++ b/gui/src/renderer/components/cell/SideButton.tsx @@ -0,0 +1,25 @@ +import styled from 'styled-components'; + +import { colors } from '../../../config.json'; +import { measurements } from '../common-styles'; +import { buttonColor, ButtonColors } from './styles'; + +export const SideButton = styled.button<ButtonColors>(buttonColor, { + position: 'relative', + alignSelf: 'stretch', + paddingLeft: measurements.viewMargin, + paddingRight: measurements.viewMargin, + border: 0, + + '&&::before': { + content: '""', + position: 'absolute', + margin: 'auto', + top: 0, + left: 0, + bottom: 0, + height: '50%', + width: '1px', + backgroundColor: colors.darkBlue, + }, +}); diff --git a/gui/src/renderer/components/cell/index.ts b/gui/src/renderer/components/cell/index.ts index 4e98c9ef3d..2bbd56167a 100644 --- a/gui/src/renderer/components/cell/index.ts +++ b/gui/src/renderer/components/cell/index.ts @@ -6,3 +6,4 @@ export * from './Label'; export * from './Section'; export * from './Group'; export * from './Row'; +export * from './SideButton'; diff --git a/gui/src/renderer/components/cell/styles.ts b/gui/src/renderer/components/cell/styles.ts new file mode 100644 index 0000000000..a2d20b03f6 --- /dev/null +++ b/gui/src/renderer/components/cell/styles.ts @@ -0,0 +1,13 @@ +export interface ButtonColors { + $backgroundColor: string; + $backgroundColorHover: string; +} + +export const buttonColor = (props: ButtonColors) => { + return { + backgroundColor: props.$backgroundColor, + '&&:not(:disabled):hover': { + backgroundColor: props.$backgroundColorHover, + }, + }; +}; diff --git a/gui/src/renderer/components/select-location/CustomLists.tsx b/gui/src/renderer/components/select-location/CustomLists.tsx index f335f7ae87..1cbb692b1b 100644 --- a/gui/src/renderer/components/select-location/CustomLists.tsx +++ b/gui/src/renderer/components/select-location/CustomLists.tsx @@ -12,7 +12,6 @@ import * as Cell from '../cell'; import { measurements } from '../common-styles'; import { BackAction } from '../KeyboardNavigation'; import SimpleInput from '../SimpleInput'; -import { StyledLocationRowIcon } from './LocationRowStyles'; import { useRelayListContext } from './RelayListContext'; import RelayLocationList from './RelayLocationList'; import { useScrollPositionContext } from './ScrollPositionContext'; @@ -42,7 +41,7 @@ const StyledHeaderLabel = styled(Cell.Label)({ lineHeight: measurements.rowMinHeight, }); -const StyledCellButton = styled(StyledLocationRowIcon)({ +const StyledCellButton = styled(Cell.SideButton)({ border: 'none', }); diff --git a/gui/src/renderer/components/select-location/LocationRow.tsx b/gui/src/renderer/components/select-location/LocationRow.tsx index f76b5d3f61..41f3aa7152 100644 --- a/gui/src/renderer/components/select-location/LocationRow.tsx +++ b/gui/src/renderer/components/select-location/LocationRow.tsx @@ -22,7 +22,6 @@ import { StyledHoverIconButton, StyledLocationRowButton, StyledLocationRowContainer, - StyledLocationRowIcon, StyledLocationRowLabel, } from './LocationRowStyles'; import { @@ -183,7 +182,7 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) { {hasChildren || ('customList' in props.source.location && !('country' in props.source.location)) ? ( - <StyledLocationRowIcon + <Cell.SideButton as={ChevronButton} onClick={toggleCollapse} disabled={!hasChildren} diff --git a/gui/src/renderer/components/select-location/LocationRowStyles.tsx b/gui/src/renderer/components/select-location/LocationRowStyles.tsx index 6a159f4054..58e9ba9606 100644 --- a/gui/src/renderer/components/select-location/LocationRowStyles.tsx +++ b/gui/src/renderer/components/select-location/LocationRowStyles.tsx @@ -3,24 +3,11 @@ import { Styles } from 'styled-components/dist/types'; import { colors } from '../../../config.json'; import * as Cell from '../cell'; +import { buttonColor, ButtonColors } from '../cell/styles'; import { measurements, normalText } from '../common-styles'; import ImageView from '../ImageView'; import InfoButton from '../InfoButton'; -interface ButtonColorProps { - $backgroundColor: string; - $backgroundColorHover: string; -} - -export const buttonColor = (props: ButtonColorProps) => { - return { - backgroundColor: props.$backgroundColor, - '&&:not(:disabled):hover': { - backgroundColor: props.$backgroundColorHover, - }, - }; -}; - export const StyledLocationRowContainer = styled(Cell.Container)({ display: 'flex', padding: 0, @@ -41,7 +28,7 @@ export const StyledLocationRowLabel = styled(Cell.Label)(normalText, { whiteSpace: 'nowrap', }); -export const StyledLocationRowButton = styled(Cell.Row)<ButtonColorProps & { $level: number }>( +export const StyledLocationRowButton = styled(Cell.Row)<ButtonColors & { $level: number }>( buttonColor, (props) => { const paddingLeft = (props.$level + 1) * 16 + 2; @@ -57,32 +44,12 @@ export const StyledLocationRowButton = styled(Cell.Row)<ButtonColorProps & { $le }, ); -export const StyledLocationRowIcon = styled.button<ButtonColorProps>(buttonColor, { - position: 'relative', - alignSelf: 'stretch', - paddingLeft: measurements.viewMargin, - paddingRight: measurements.viewMargin, - border: 0, - - '&&::before': { - content: '""', - position: 'absolute', - margin: 'auto', - top: 0, - left: 0, - bottom: 0, - height: '50%', - width: '1px', - backgroundColor: colors.darkBlue, - }, -}); - interface HoverButtonProps { $isLast?: boolean; } const hoverButton = ( - props: ButtonColorProps & HoverButtonProps, + props: ButtonColors & HoverButtonProps, ): Styles< React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> > => ({ @@ -110,7 +77,7 @@ const hoverButton = ( }, }); -export const StyledHoverIconButton = styled.button<ButtonColorProps & HoverButtonProps>( +export const StyledHoverIconButton = styled.button<ButtonColors & HoverButtonProps>( buttonColor, hoverButton, ); @@ -126,7 +93,7 @@ export const StyledHoverIcon = styled(ImageView).attrs({ }, }); -export const StyledHoverInfoButton = styled(InfoButton)<ButtonColorProps & HoverButtonProps>( +export const StyledHoverInfoButton = styled(InfoButton)<ButtonColors & HoverButtonProps>( buttonColor, hoverButton, ); diff --git a/gui/src/renderer/components/select-location/SpecialLocationList.tsx b/gui/src/renderer/components/select-location/SpecialLocationList.tsx index a347638b0e..f4ccf13ec2 100644 --- a/gui/src/renderer/components/select-location/SpecialLocationList.tsx +++ b/gui/src/renderer/components/select-location/SpecialLocationList.tsx @@ -6,6 +6,7 @@ import { messages } from '../../../shared/gettext'; import { useHistory } from '../../lib/history'; import { RoutePath } from '../../lib/routes'; import { useSelector } from '../../redux/store'; +import * as Cell from '../cell'; import ImageView from '../ImageView'; import InfoButton from '../InfoButton'; import { SpecialLocationIndicator } from '../RelayStatusIndicator'; @@ -14,7 +15,6 @@ import { StyledHoverInfoButton, StyledLocationRowButton, StyledLocationRowContainerWithMargin, - StyledLocationRowIcon, StyledLocationRowLabel, } from './LocationRowStyles'; import { SpecialBridgeLocationType, SpecialLocation } from './select-location-types'; @@ -74,7 +74,7 @@ export function AutomaticLocationRow( <SpecialLocationIndicator /> <StyledLocationRowLabel>{props.source.label}</StyledLocationRowLabel> </StyledLocationRowButton> - <StyledLocationRowIcon + <Cell.SideButton as={StyledSpecialLocationInfoButton} title={messages.gettext('Automatic')} message={messages.pgettext( @@ -136,7 +136,7 @@ export function CustomBridgeLocationRow( 'A custom bridge server can be used to circumvent censorship when regular Mullvad bridge servers don’t work.', )} /> - <StyledLocationRowIcon + <Cell.SideButton {...background} aria-label={ bridgeConfigured @@ -150,7 +150,7 @@ export function CustomBridgeLocationRow( tintColor={colors.white} tintHoverColor={colors.white80} /> - </StyledLocationRowIcon> + </Cell.SideButton> </StyledLocationRowContainerWithMargin> ); } |