Merge branch 'cell-disabled-styles' into master

5 files changed, 41 insertions, 19 deletions

diff --git a/gui/src/renderer/components/Cell.tsx b/gui/src/renderer/components/Cell.tsx
index 085a18e3cc..8aa4ddde78 100644
--- a/gui/src/renderer/components/Cell.tsx
+++ b/gui/src/renderer/components/Cell.tsx
@@ -5,11 +5,15 @@ import {
   StyledAutoSizingTextInputFiller,
   StyledCellButton,
   StyledContainer,
-  StyledLabel,
+  StyledIconContainer,
   StyledInput,
+  StyledLabel,
   StyledSection,
+  StyledSubText,
+  StyledTintedIcon,
 } from './CellStyles';
-import { default as StandaloneSwitch } from './Switch';
+import ImageView, { IImageViewProps } from './ImageView';
+import StandaloneSwitch from './Switch';
 
 export {
   StyledFooter as Footer,
@@ -17,10 +21,7 @@ export {
   StyledFooterText as FooterText,
   StyledInputFrame as InputFrame,
   StyledSectionTitle as SectionTitle,
-  StyledSubText as SubText,
-  StyledTintedIcon as Icon,
 } from './CellStyles';
-export { default as UntintedIcon } from './ImageView';
 
 const CellSectionContext = React.createContext<boolean>(false);
 const CellDisabledContext = React.createContext<boolean>(false);
@@ -46,7 +47,11 @@ export const CellButton = React.forwardRef(function Button(
   ref: React.Ref<HTMLButtonElement>,
 ) {
   const containedInSection = useContext(CellSectionContext);
-  return <StyledCellButton ref={ref} containedInSection={containedInSection} {...props} />;
+  return (
+    <CellDisabledContext.Provider value={props.disabled ?? false}>
+      <StyledCellButton ref={ref} containedInSection={containedInSection} {...props} />
+    </CellDisabledContext.Provider>
+  );
 });
 
 interface ISectionProps {
@@ -67,6 +72,29 @@ export function Label(props: React.HTMLAttributes<HTMLDivElement>) {
   return <StyledLabel disabled={disabled} {...props} />;
 }
 
+export function SubText(props: React.HTMLAttributes<HTMLDivElement>) {
+  const disabled = useContext(CellDisabledContext);
+  return <StyledSubText disabled={disabled} {...props} />;
+}
+
+export function UntintedIcon(props: IImageViewProps) {
+  const disabled = useContext(CellDisabledContext);
+  return (
+    <StyledIconContainer disabled={disabled}>
+      <ImageView {...props} />
+    </StyledIconContainer>
+  );
+}
+
+export function Icon(props: IImageViewProps) {
+  const disabled = useContext(CellDisabledContext);
+  return (
+    <StyledIconContainer disabled={disabled}>
+      <StyledTintedIcon {...props} />
+    </StyledIconContainer>
+  );
+}
+
 export function Switch(props: StandaloneSwitch['props']) {
   const disabled = useContext(CellDisabledContext);
   return <StandaloneSwitch disabled={disabled} {...props} />;
diff --git a/gui/src/renderer/components/CellStyles.tsx b/gui/src/renderer/components/CellStyles.tsx
index 7c4d8c13bb..2bbfd5b928 100644
--- a/gui/src/renderer/components/CellStyles.tsx
+++ b/gui/src/renderer/components/CellStyles.tsx
@@ -54,14 +54,14 @@ export const StyledLabel = styled.div(buttonText, (props: { disabled: boolean })
   textAlign: 'left',
 }));
 
-export const StyledSubText = styled.span(smallText, {
-  color: colors.white60,
+export const StyledSubText = styled.span(smallText, (props: { disabled: boolean }) => ({
+  color: props.disabled ? colors.white20 : colors.white60,
   fontWeight: 800,
   flex: -1,
   textAlign: 'right',
   marginLeft: '8px',
   marginRight: '8px',
-});
+}));
 
 export const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({
   tintColor: props.tintColor ?? colors.white60,
@@ -126,3 +126,7 @@ export const StyledAutoSizingTextInputWrapper = styled.div({
   width: '100%',
   height: '100%',
 });
+
+export const StyledIconContainer = styled.div((props: { disabled: boolean }) => ({
+  opacity: props.disabled ? 0.4 : 1,
+}));
diff --git a/gui/src/renderer/components/CityRow.tsx b/gui/src/renderer/components/CityRow.tsx
index 2c14a731c0..e186898b52 100644
--- a/gui/src/renderer/components/CityRow.tsx
+++ b/gui/src/renderer/components/CityRow.tsx
@@ -38,9 +38,6 @@ const Label = styled(Cell.Label)({
   fontFamily: 'Open Sans',
   fontWeight: 'normal',
   fontSize: '16px',
-  '[disabled] &': {
-    color: colors.white20,
-  },
 });
 
 export default class CityRow extends Component<IProps> {
diff --git a/gui/src/renderer/components/CountryRow.tsx b/gui/src/renderer/components/CountryRow.tsx
index ed6844fc6e..c284aeb40c 100644
--- a/gui/src/renderer/components/CountryRow.tsx
+++ b/gui/src/renderer/components/CountryRow.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Component, Styles, View } from 'reactxp';
 import styled from 'styled-components';
-import { colors } from '../../config.json';
 import { compareRelayLocation, RelayLocation } from '../../shared/daemon-rpc-types';
 import Accordion from './Accordion';
 import * as Cell from './Cell';
@@ -45,9 +44,6 @@ const Label = styled(Cell.Label)({
   fontFamily: 'Open Sans',
   fontWeight: 'normal',
   fontSize: '16px',
-  '[disabled] &': {
-    color: colors.white20,
-  },
 });
 
 export default class CountryRow extends Component<IProps> {
diff --git a/gui/src/renderer/components/RelayRow.tsx b/gui/src/renderer/components/RelayRow.tsx
index 850290e4f6..e0a8dc04fc 100644
--- a/gui/src/renderer/components/RelayRow.tsx
+++ b/gui/src/renderer/components/RelayRow.tsx
@@ -24,9 +24,6 @@ const Label = styled(Cell.Label)({
   fontFamily: 'Open Sans',
   fontWeight: 'normal',
   fontSize: '16px',
-  '[disabled] &': {
-    color: colors.white20,
-  },
 });
 
 export default class RelayRow extends Component<IProps> {