fixing warnings related to emotion

Summary: Fixes some warnings that were caused by the switch to react-emotion.

Reviewed By: jknoxville

Differential Revision: D9483185

fbshipit-source-id: 8e49469772efd37f18342252653648618e644d55

src/plugins/shared_preferences/index.js

@@ -13,6 +13,7 @@ import {
   colors,
   FlexRow,
   DataInspector,
+  styled,
 } from 'sonar';
 import {SonarPlugin} from 'sonar';
 
@@ -55,12 +56,12 @@ const CHANGELOG_COLUMN_SIZES = {
 const UPDATED_LABEL = <Text color={colors.lime}>Updated</Text>;
 const DELETED_LABEL = <Text color={colors.cherry}>Deleted</Text>;
 
-const InspectorColumn = FlexColumn.extends({
+const InspectorColumn = styled(FlexColumn)({
   flexGrow: 0.2,
   padding: '16px',
 });
 
-const ChangelogColumn = FlexColumn.extends({
+const ChangelogColumn = styled(FlexColumn)({
   flexGrow: 0.8,
   padding: '16px',
 });

src/ui/components/Button.js

@@ -136,7 +136,7 @@ const StyledButton = styled('div')(props => ({
   },
 
   '&:hover::before': {
-    content: props.dropdown ? "''" : '',
+    content: props.dropdown ? "''" : 'normal',
     position: 'absolute',
     bottom: 1,
     right: 2,

src/ui/components/ToggleSwitch.js

@@ -19,7 +19,7 @@ export const StyledButton = styled('div')(props => ({
   position: 'relative',
   marginLeft: '15px',
   '&::after': {
-    content: `''`,
+    content: '""',
     position: 'absolute',
     top: '3px',
     left: props.toggled ? '18px' : '3px',