Add initial dark mode styles. (keybase#19063)

* WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * WIP * Fix lint error. * Oh, right. * 🤔 * Review feedback. * WIP * WIP * Update storyshots. * Prettier.
SaltineChips · Aug 27, 2019 · 47b2b7f · 47b2b7f
1 parent ed73315
commit 47b2b7f
Show file tree

Hide file tree

Showing 39 changed files with 3,092 additions and 2,419 deletions.
diff --git a/shared/chat/conversation/conversation.css b/shared/chat/conversation/conversation.css
@@ -37,6 +37,14 @@
 .WrapperMessage-decorated.active {
   background-color: #f7f9fc;
 }
+.darkMode .WrapperMessage-hoverColor:hover {
+  background-color: #101010;
+  /* Using a second box shadow instead of a border to prevent changing the height of the box. */
+  box-shadow: none;
+}
+.darkMode .WrapperMessage-decorated.active {
+  background-color: #101010;
+}
 .WrapperMessage-author {
   padding-left: 0;
   padding-top: 8px;
@@ -47,6 +55,9 @@
 .WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton {
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 }
+.darkMode .WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton {
+  box-shadow: none;
+}
 .WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton.noShadow,
 .WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton:active {
   box-shadow: none;
@@ -63,6 +74,12 @@
 .WrapperMessage-centered {
   background-color: #fff75a;
 }
+.darkMode .WrapperMessage-centered .text_Body {
+  color: #101010;
+}
 .ReplyBox:hover {
   background-color: white;
 }
+.darkMode .ReplyBox:hover {
+  background-color: rgba(24, 45, 110, 0.5);
+}
diff --git a/shared/chat/conversation/input-area/normal/platform-input.desktop.tsx b/shared/chat/conversation/input-area/normal/platform-input.desktop.tsx
@@ -262,7 +262,7 @@ class _PlatformInput extends React.Component<PlatformInputPropsInternal, State>
                 autoFocus={false}
                 ref={this._inputSetRef}
                 placeholder={hintText}
-                style={styles.input}
+                style={Styles.collapseStyles([styles.input, this.props.isEditing && styles.inputEditing])}
                 onChangeText={this._onChangeText}
                 multiline={true}
                 rowsMin={1}
@@ -363,7 +363,7 @@ const styles = Styles.styleSheetCreate(() => ({
     common: {
       ...Styles.globalStyles.flexBoxColumn,
       alignSelf: 'stretch',
-      backgroundColor: Styles.globalColors.black,
+      backgroundColor: Styles.globalColors.blackOrWhite,
       borderRadius: 2,
       justifyContent: 'center',
       margin: 2,
@@ -376,7 +376,7 @@ const styles = Styles.styleSheetCreate(() => ({
     },
   }),
   cancelEditingText: {
-    color: Styles.globalColors.white,
+    color: Styles.globalColors.blackOrBlack,
   },
   container: {
     ...Styles.globalStyles.flexBoxColumn,
@@ -452,6 +452,9 @@ const styles = Styles.styleSheetCreate(() => ({
     paddingTop: Styles.globalMargins.tiny,
     textAlign: 'left',
   },
+  inputEditing: {
+    color: Styles.globalColors.blackOrWhite,
+  },
   inputWrapper: {
     ...Styles.globalStyles.flexBoxRow,
     alignItems: 'flex-end',

diff --git a/shared/chat/conversation/list-area/normal/jump-to-recent.tsx b/shared/chat/conversation/list-area/normal/jump-to-recent.tsx
@@ -43,7 +43,9 @@ const styles = Styles.styleSheetCreate({
     borderRadius: 28,
   },
   outerContainer: {
-    marginBottom: Styles.globalMargins.tiny,
+    backgroundImage: `linear-gradient(transparent, ${Styles.globalColors.white} 75%)`,
+    paddingBottom: Styles.globalMargins.small,
+    paddingTop: Styles.globalMargins.small,
     width: '100%',
   },
   text: {

diff --git a/shared/chat/conversation/messages/coinflip/errors.tsx b/shared/chat/conversation/messages/coinflip/errors.tsx
@@ -115,7 +115,7 @@ const CoinFlipCommitMismatchError = (props: CommitMismatchProps) => (
 
 const styles = Styles.styleSheetCreate({
   bordered: {
-    borderColor: Styles.globalColors.greyLight,
+    borderColor: Styles.globalColors.grey,
     borderLeftWidth: 4,
     borderStyle: 'solid',
     paddingLeft: Styles.globalMargins.tiny,

diff --git a/shared/chat/conversation/messages/coinflip/index.tsx b/shared/chat/conversation/messages/coinflip/index.tsx
@@ -150,7 +150,7 @@ class CoinFlip extends React.Component<Props, State> {
 const styles = Styles.styleSheetCreate({
   container: {
     alignSelf: 'flex-start',
-    borderColor: Styles.globalColors.greyLight,
+    borderColor: Styles.globalColors.grey,
     borderLeftWidth: 4,
     borderStyle: 'solid',
     marginTop: Styles.globalMargins.xtiny,
@@ -163,7 +163,7 @@ const styles = Styles.styleSheetCreate({
     paddingTop: Styles.globalMargins.tiny,
   },
   placeholder: {
-    backgroundColor: Styles.globalColors.greyLight,
+    backgroundColor: Styles.globalColors.grey,
   },
   progress: Styles.platformStyles({
     isElectron: {

diff --git a/shared/chat/conversation/messages/text/index.tsx b/shared/chat/conversation/messages/text/index.tsx
@@ -143,6 +143,7 @@ const getStyle = (type, isEditing) => {
 const editing = {
   backgroundColor: Styles.globalColors.yellowLight,
   borderRadius: 2,
+  color: Styles.globalColors.blackOrWhite,
   paddingLeft: Styles.globalMargins.tiny,
   paddingRight: Styles.globalMargins.tiny,
 }
@@ -170,7 +171,7 @@ const pendingFailEditing = {
   ...pendingFail,
   ...editing,
 }
-const styles = Styles.styleSheetCreate({
+const styles = Styles.styleSheetCreate(() => ({
   claimButton: {
     alignSelf: 'flex-start',
     marginTop: Styles.globalMargins.xtiny,
@@ -183,7 +184,7 @@ const styles = Styles.styleSheetCreate({
   pendingFailEditing,
   quoteContainer: {
     alignSelf: 'stretch',
-    backgroundColor: Styles.globalColors.greyLight,
+    backgroundColor: Styles.globalColors.grey,
     paddingLeft: Styles.globalMargins.xtiny,
   },
   replyContainer: {
@@ -221,6 +222,6 @@ const styles = Styles.styleSheetCreate({
   sent,
   sentEditing,
   wrapper: {alignSelf: 'flex-start', flex: 1},
-})
+}))
 
 export default MessageText
diff --git a/shared/chat/conversation/messages/wrapper/index.tsx b/shared/chat/conversation/messages/wrapper/index.tsx
@@ -519,6 +519,7 @@ class _WrapperMessage extends React.Component<Props & Kb.OverlayParentProps, Sta
                       ordinal={message.ordinal}
                       style={Styles.collapseStyles([
                         styles.emojiRow,
+                        !Styles.isDarkMode && styles.emojiRowBorder,
                         this.props.isLastInThread && styles.emojiRowLast,
                       ])}
                     />
@@ -649,11 +650,8 @@ const styles = Styles.styleSheetCreate({
   ellipsis: {marginLeft: Styles.globalMargins.tiny},
   emojiRow: Styles.platformStyles({
     isElectron: {
-      borderBottom: `1px solid ${Styles.globalColors.black_10}`,
       borderBottomLeftRadius: Styles.borderRadius,
       borderBottomRightRadius: Styles.borderRadius,
-      borderLeft: `1px solid ${Styles.globalColors.black_10}`,
-      borderRight: `1px solid ${Styles.globalColors.black_10}`,
       bottom: -Styles.globalMargins.mediumLarge,
       height: Styles.globalMargins.mediumLarge,
       paddingBottom: Styles.globalMargins.tiny,
@@ -664,6 +662,13 @@ const styles = Styles.styleSheetCreate({
       zIndex: 2,
     },
   }),
+  emojiRowBorder: Styles.platformStyles({
+    isElectron: {
+      borderBottom: `1px solid ${Styles.globalColors.black_10}`,
+      borderLeft: `1px solid ${Styles.globalColors.black_10}`,
+      borderRight: `1px solid ${Styles.globalColors.black_10}`,
+    },
+  }),
   emojiRowLast: Styles.platformStyles({
     isElectron: {
       border: 'none',

diff --git a/shared/chat/conversation/messages/wrapper/unfurl/generic/index.tsx b/shared/chat/conversation/messages/wrapper/unfurl/generic/index.tsx
@@ -139,7 +139,7 @@ const styles = Styles.styleSheetCreate({
       minWidth: 150,
     },
     isMobile: {
-      borderColor: Styles.globalColors.greyLight,
+      borderColor: Styles.globalColors.grey,
       borderRadius: Styles.borderRadius,
       borderWidth: 1,
       padding: Styles.globalMargins.xtiny,
@@ -148,7 +148,7 @@ const styles = Styles.styleSheetCreate({
   quoteContainer: Styles.platformStyles({
     common: {
       alignSelf: 'stretch',
-      backgroundColor: Styles.globalColors.greyLight,
+      backgroundColor: Styles.globalColors.grey,
       paddingLeft: Styles.globalMargins.xtiny,
     },
   }),

diff --git a/shared/chat/conversation/messages/wrapper/unfurl/giphy/index.tsx b/shared/chat/conversation/messages/wrapper/unfurl/giphy/index.tsx
@@ -95,15 +95,15 @@ const styles = Styles.styleSheetCreate({
       minWidth: 150,
     },
     isMobile: {
-      borderColor: Styles.globalColors.greyLight,
+      borderColor: Styles.globalColors.grey,
       borderRadius: Styles.borderRadius,
       borderWidth: 1,
       padding: Styles.globalMargins.xtiny,
     },
   }),
   quoteContainer: {
     alignSelf: 'stretch',
-    backgroundColor: Styles.globalColors.greyLight,
+    backgroundColor: Styles.globalColors.grey,
     paddingLeft: Styles.globalMargins.xtiny,
   },
   siteNameContainer: Styles.platformStyles({

diff --git a/shared/chat/manage-channels/index.desktop.tsx b/shared/chat/manage-channels/index.desktop.tsx
@@ -106,22 +106,22 @@ const ManageChannels = (props: Props) => {
     )
   }
   return (
-    <Kb.PopupDialog onClose={props.onClose} styleCover={_styleCover} styleContainer={_styleContainer}>
+    <Kb.PopupDialog onClose={props.onClose} styleCover={styles.cover} styleContainer={styles.container}>
       {props.canCreateChannels && (
-        <Kb.Box style={_createStyle}>
+        <Kb.Box style={styles.create}>
           <Kb.Icon
-            style={_createIcon}
+            style={styles.createIcon}
             type="iconfont-new"
             onClick={props.onCreate}
-            hoverColor={_hoverColor}
+            hoverColor={Styles.globalColors.blueLight}
             color={Styles.globalColors.blue}
           />
           <Kb.Text type="BodyBigLink" onClick={props.onCreate}>
             New chat channel
           </Kb.Text>
         </Kb.Box>
       )}
-      <Kb.Box style={_boxStyle}>
+      <Kb.Box style={styles.box}>
         <Kb.Avatar isTeam={true} teamname={props.teamname} size={32} />
         <Kb.Text type="BodySmallSemibold" style={{marginTop: Styles.globalMargins.xtiny}}>
           {props.teamname}
@@ -160,40 +160,36 @@ const ManageChannels = (props: Props) => {
   )
 }
 
-const _boxStyle = {
-  ...Styles.globalStyles.flexBoxColumn,
-  alignItems: 'center',
-  flex: 1,
-  paddingBottom: Styles.globalMargins.medium,
-  paddingLeft: Styles.globalMargins.large,
-  paddingRight: Styles.globalMargins.large,
-  paddingTop: Styles.globalMargins.medium,
-}
-
-const _createIcon = Styles.platformStyles({
-  common: {marginRight: Styles.globalMargins.xtiny},
-  isElectron: {display: 'block'},
-})
-
-const _hoverColor = Styles.globalColors.blueLight
-
-const _createStyle = {
-  ...Styles.globalStyles.flexBoxRow,
-  alignItems: 'center',
-  position: 'absolute',
-  right: 32,
-  top: 32,
-}
-
-const _styleCover = {
-  alignItems: 'center',
-  backgroundColor: Styles.globalColors.black_50,
-  justifyContent: 'center',
-}
-
-const _styleContainer = {
-  height: 520,
-  width: 620,
-}
+const styles = Styles.styleSheetCreate(() => ({
+  box: {
+    ...Styles.globalStyles.flexBoxColumn,
+    alignItems: 'center',
+    flex: 1,
+    paddingBottom: Styles.globalMargins.medium,
+    paddingLeft: Styles.globalMargins.large,
+    paddingRight: Styles.globalMargins.large,
+    paddingTop: Styles.globalMargins.medium,
+  },
+  container: {
+    height: 520,
+    width: 620,
+  },
+  cover: {
+    alignItems: 'center',
+    backgroundColor: Styles.globalColors.black_50OrWhite_75,
+    justifyContent: 'center',
+  },
+  create: {
+    ...Styles.globalStyles.flexBoxRow,
+    alignItems: 'center',
+    position: 'absolute',
+    right: 32,
+    top: 32,
+  },
+  createIcon: Styles.platformStyles({
+    common: {marginRight: Styles.globalMargins.xtiny},
+    isElectron: {display: 'block'},
+  }),
+}))
 
 export default ManageChannels
diff --git a/shared/chat/payments/status/index.tsx b/shared/chat/payments/status/index.tsx
@@ -122,43 +122,45 @@ class PaymentStatus extends React.Component<Props, State> {
 
 const styles = Styles.styleSheetCreate({
   claimable: {
-    backgroundColor: Styles.globalColors.black_05,
+    backgroundColor: Styles.globalColors.black_05OrBlack_60,
     borderRadius: Styles.globalMargins.xxtiny,
-    color: Styles.globalColors.black_50,
+    color: Styles.globalColors.black_50OrWhite,
   },
   claimableIcon: {},
   completed: {
-    backgroundColor: Styles.globalColors.purple_10,
+    backgroundColor: Styles.globalColors.purple_10OrPurple,
     borderRadius: Styles.globalMargins.xxtiny,
-    color: Styles.globalColors.purpleDark,
+    color: Styles.globalColors.purpleDarkOrWhite,
   },
   completedIcon: {
-    color: Styles.globalColors.purpleDark,
+    color: Styles.globalColors.purpleDarkOrWhite,
   },
   container: Styles.platformStyles({
     isElectron: {
       display: 'inline-block',
     },
   }),
   error: {
-    backgroundColor: Styles.globalColors.red_10,
+    backgroundColor: Styles.globalColors.red_10OrRed,
     borderRadius: Styles.globalMargins.xxtiny,
-    color: Styles.globalColors.redDark,
+    color: Styles.globalColors.redDarkOrWhite,
   },
   errorIcon: {
-    color: Styles.globalColors.redDark,
+    color: Styles.globalColors.redDarkOrWhite,
   },
   iconBoxStyle: Styles.platformStyles({
     isElectron: {
       display: 'inline',
     },
   }),
   pending: {
-    backgroundColor: Styles.globalColors.black_05,
+    backgroundColor: Styles.globalColors.black_05OrBlack_60,
     borderRadius: Styles.globalMargins.xxtiny,
-    color: Styles.globalColors.black_50,
+    color: Styles.globalColors.black_50OrWhite,
+  },
+  pendingIcon: {
+    color: Styles.globalColors.black_50OrWhite,
   },
-  pendingIcon: {},
 })
 
 export default PaymentStatus