dark mode people/ and profile/ (keybase#19689)

* use function form in all Styles.styled calls * went through files in people/ and profile/ * fix
SaltineChips · Sep 17, 2019 · 29179cc · 29179cc
1 parent 80aeced
commit 29179cc
Show file tree

Hide file tree

Showing 19 changed files with 166 additions and 172 deletions.
diff --git a/shared/chat/conversation/input-area/normal/platform-input.desktop.tsx b/shared/chat/conversation/input-area/normal/platform-input.desktop.tsx
@@ -487,10 +487,10 @@ const styles = Styles.styleSheetCreate(
     } as const)
 )
 
-const HoverBox = Styles.styled(Kb.Box)({
+const HoverBox = Styles.styled(Kb.Box)(() => ({
   ':hover .timer, &.expanded .timer': {
     color: Styles.globalColors.black,
   },
-})
+}))
 
 export default Kb.OverlayParentHOC(PlatformInput)
diff --git a/shared/chat/conversation/messages/account-payment/pending-background/index.desktop.tsx b/shared/chat/conversation/messages/account-payment/pending-background/index.desktop.tsx
@@ -10,7 +10,7 @@ const bgScroll = Styles.styledKeyframes({
 })
 
 // @ts-ignore
-const BackgroundBox = Styles.styled.div({
+const BackgroundBox = Styles.styled.div(() => ({
   animation: `${bgScroll} 2s linear infinite`,
   backgroundImage: patternImage,
   backgroundRepeat: 'repeat',
@@ -22,7 +22,7 @@ const BackgroundBox = Styles.styled.div({
   top: 0,
   willChange: 'transform',
   zIndex: -1,
-})
+}))
 
 const PendingBackground = (props: Props) => (
   <>

diff --git a/shared/chat/conversation/messages/react-button/emoji-row/index.stories.tsx b/shared/chat/conversation/messages/react-button/emoji-row/index.stories.tsx
@@ -12,11 +12,11 @@ const common = {
   onShowingEmojiPicker: Sb.action('onShowingEmojiPicker'),
 }
 
-const HideShowBox = Styles.styled(Kb.Box2)({
+const HideShowBox = Styles.styled(Kb.Box2)(() => ({
   '& .emoji-row': {visibility: 'hidden'},
   '&:hover .emoji-row': {visibility: 'visible'},
   position: 'relative',
-})
+}))
 
 const FakeMessage = () => (
   <HideShowBox direction="horizontal" style={{backgroundColor: 'pink', padding: 4, width: 500}}>

diff --git a/shared/chat/inbox/row/big-teams-divider/index.tsx b/shared/chat/inbox/row/big-teams-divider/index.tsx
@@ -9,7 +9,7 @@ type Props = {
   toggle: () => void
 }
 
-const DividerBox = Styles.styled(Kb.Box)({
+const DividerBox = Styles.styled(Kb.Box)(() => ({
   ...Styles.globalStyles.flexBoxRow,
   ...(Styles.isMobile
     ? {backgroundColor: Styles.globalColors.fastBlank}
@@ -29,7 +29,7 @@ const DividerBox = Styles.styled(Kb.Box)({
   paddingRight: Styles.globalMargins.tiny,
   position: 'relative',
   width: '100%',
-})
+}))
 
 const BigTeamsDivider = ({toggle, badgeCount}: Props) => (
   <Kb.ClickableBox title="Teams with multiple channels." onClick={toggle} style={styles.container}>

diff --git a/shared/chat/inbox/row/build-team/index.tsx b/shared/chat/inbox/row/build-team/index.tsx
@@ -7,7 +7,7 @@ type Props = {
   showBuildATeam: boolean
 }
 
-const DividerBox = Styles.styled(Kb.Box)({
+const DividerBox = Styles.styled(Kb.Box)(() => ({
   ...Styles.globalStyles.flexBoxRow,
   ...(Styles.isMobile
     ? {backgroundColor: Styles.globalColors.fastBlank}
@@ -27,7 +27,7 @@ const DividerBox = Styles.styled(Kb.Box)({
   paddingRight: Styles.globalMargins.tiny,
   position: 'relative',
   width: '100%',
-})
+}))
 
 const BuildTeam = ({showBuildATeam, onBuildTeam}: Props) =>
   showBuildATeam ? (

diff --git a/shared/chat/inbox/row/small-team/index.tsx b/shared/chat/inbox/row/small-team/index.tsx
@@ -48,11 +48,11 @@ type State = {
 
 const SmallTeamBox = Styles.isMobile
   ? Kb.ClickableBox
-  : Styles.styled(Kb.Box)({
+  : Styles.styled(Kb.Box)(() => ({
       '& .conversation-gear': {display: 'none'},
       ':hover .conversation-gear': {display: 'unset'},
       ':hover .conversation-timestamp': {display: 'none'},
-    })
+    }))
 
 class SmallTeam extends React.PureComponent<Props, State> {
   state = {

diff --git a/shared/chat/manage-channels/index.desktop.tsx b/shared/chat/manage-channels/index.desktop.tsx
@@ -4,10 +4,10 @@ import * as Styles from '../../styles'
 import {Props, RowProps} from './index'
 import {pluralize} from '../../util/string'
 
-const HoverBox = Styles.styled(Kb.Box)({
+const HoverBox = Styles.styled(Kb.Box)(() => ({
   '.channel-row:hover &': {opacity: 1},
   opacity: 0,
-})
+}))
 
 const Edit = ({onClick, style}: {onClick: () => void; style: Object}) => (
   <HoverBox style={style} onClick={onClick}>

diff --git a/shared/common-adapters/dropdown.tsx b/shared/common-adapters/dropdown.tsx
@@ -194,7 +194,7 @@ const styles = Styles.styleSheetCreate(() => ({
   }),
 }))
 
-const ItemBox = Styles.styled(Box)({
+const ItemBox = Styles.styled(Box)(() => ({
   ...Styles.globalStyles.flexBoxRow,
   ...(Styles.isMobile
     ? {}
@@ -208,7 +208,7 @@ const ItemBox = Styles.styled(Box)({
   borderStyle: 'solid',
   minHeight: Styles.isMobile ? 40 : 32,
   width: '100%',
-})
+}))
 
 // @ts-ignore styled can have more than one argument
 const ButtonBox = Styles.styled(Box, {shouldForwardProp: prop => prop !== 'inline'})(props => ({

diff --git a/shared/common-adapters/radio-button.desktop.tsx b/shared/common-adapters/radio-button.desktop.tsx
@@ -12,15 +12,15 @@ export const RADIOBUTTON_MARGIN = 8
 
 // @ts-ignore this type is wrong
 const StyledRadio = Styles.styled.div(
-  {
+  // @ts-ignore
+  () => ({
     ...Styles.transition('background'),
-    // @ts-ignore
     borderRadius: '100%',
     height: RADIOBUTTON_SIZE,
     marginRight: RADIOBUTTON_MARGIN,
     position: 'relative',
     width: RADIOBUTTON_SIZE,
-  },
+  }),
   ({disabled, selected}) => ({
     '&:hover': {border: (selected || !disabled) && `solid 1px ${Styles.globalColors.blue}`},
     backgroundColor: selected ? Styles.globalColors.blue : 'inherit',

diff --git a/shared/common-adapters/radio-button.native.tsx b/shared/common-adapters/radio-button.native.tsx
@@ -14,30 +14,30 @@ export const RADIOBUTTON_MARGIN = 8
 
 type ExtraProps = {disabled?: boolean; selected: boolean}
 const RadioOuterCircle = Styles.styled<typeof ClickableBox, ExtraProps>(ClickableBox)(
-  {
+  () => ({
     backgroundColor: Styles.globalColors.white,
     borderRadius: 100,
     borderWidth: 1,
     height: RADIOBUTTON_SIZE,
     marginRight: RADIOBUTTON_MARGIN,
     position: 'relative' as 'relative',
     width: RADIOBUTTON_SIZE,
-  },
+  }),
   ({disabled, selected}) => ({
     borderColor: selected ? Styles.globalColors.blue : Styles.globalColors.black_20,
     opacity: disabled ? 0.4 : 1,
   })
 )
 
 const RadioInnerCircle = Styles.styled<typeof ClickableBox, ExtraProps>(ClickableBox)(
-  {
+  () => ({
     borderColor: Styles.globalColors.white,
     borderRadius: 10,
     borderWidth: 5,
     left: 5,
     position: 'absolute',
     top: 5,
-  },
+  }),
   ({selected}) => ({
     borderColor: selected ? Styles.globalColors.blue : Styles.globalColors.white,
   })

diff --git a/shared/common-adapters/toast.desktop.tsx b/shared/common-adapters/toast.desktop.tsx
@@ -8,13 +8,13 @@ const Kb = {
 }
 
 // @ts-ignore codemod-issue
-const FadeBox = Styles.styled.div({
+const FadeBox = Styles.styled.div(() => ({
   ...Styles.transition('opacity'),
   // @ts-ignore
   '&.active': {opacity: 1},
   '&.visible': {display: 'flex', opacity: 1},
   opacity: 0,
-})
+}))
 
 export default (props: Props) => (
   <Kb.FloatingBox attachTo={props.attachTo} propagateOutsideClicks={true} position={props.position}>

diff --git a/shared/profile/edit-avatar/index.desktop.tsx b/shared/profile/edit-avatar/index.desktop.tsx
@@ -449,7 +449,7 @@ const hoverStyles = Styles.styleSheetCreate(
     } as const)
 )
 
-const HoverBox = Styles.styled(Kb.Box)({
+const HoverBox = Styles.styled(Kb.Box)(() => ({
   '&.filled': hoverStyles.filled,
   '&.filled:active': {cursor: '-webkit-grabbing'},
   '&.filled:hover': hoverStyles.filledHover,
@@ -458,7 +458,7 @@ const HoverBox = Styles.styled(Kb.Box)({
   '.dropping &': hoverStyles.dropping,
   '.dropping & .icon': hoverStyles.droppingIcon,
   ...hoverStyles.hoverContainer,
-})
+}))
 
 const styles = Styles.styleSheetCreate(() => ({
   container: {

diff --git a/shared/profile/generic/proofs-list/index.tsx b/shared/profile/generic/proofs-list/index.tsx
@@ -23,9 +23,9 @@ export type Props = {
 
 const HoverBox = Styles.isMobile
   ? Kb.ClickableBox
-  : Styles.styled(Kb.ClickableBox)({
+  : Styles.styled(Kb.ClickableBox)(() => ({
       ':hover': {backgroundColor: Styles.globalColors.blueLighter2},
-    })
+    }))
 
 type ProvidersProps = {
   filter: string