fix: fix list badge style

Signed-off-by: Sacha Froment <sfroment42@gmail.com>
berty · Feb 1, 2019 · 6b721dd · 6b721dd
1 parent 9c5e6b6
commit 6b721dd
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 165 deletions.
diff --git a/client/react-native/common/components/Library/Badge.js b/client/react-native/common/components/Library/Badge.js
@@ -30,7 +30,7 @@ const getSize = (
   props,
   sizes = {
     tiny: props.icon ? 20 : 14,
-    small: props.icon ? 28 : 20,
+    small: props.icon ? 28 : 18,
     medium: props.icon ? 34 : 25,
     large: props.icon ? 38 : 30,
     big: props.icon ? 49 : 39,
@@ -40,8 +40,8 @@ const getSize = (
 const getPadding = (
   props,
   paddings = {
-    tiny: 2,
-    small: 3,
+    tiny: 1,
+    small: 2,
     medium: 4,
     large: 5,
     big: 6,
@@ -83,25 +83,23 @@ const Badge = props => {
   const [horizPos, vertiPos, size, padding, absolute] = [
     getHorizPos(props),
     getVertiPos(props),
-    getSize(props),
-    getPadding(props),
+    typeof props.getSize === 'function' ? props.getSize(props) : getSize(props),
+    typeof props.getPadding === 'function' ? props.getPadding(props) : getPadding(props),
     { ...getHorizAbsol(props), ...getVertiAbsol(props) },
   ]
-  if (value == null && !icon) {
-    return children
-  }
+
   return (
     <Flex.Rows justify={vertiPos} align={horizPos} style={{ padding }}>
       {children}
       <Text
         icon={value == null && icon}
         height={size}
-        padding
+        padding={padding}
         middle
         center
         rounded='circle'
         absolute={absolute}
-        background={background || colors.red}
+        background={background || colors.white}
         color={color || colors.white}
         {...otherProps}
       >

diff --git a/client/react-native/common/components/Library/Header.js b/client/react-native/common/components/Library/Header.js
@@ -239,7 +239,7 @@ export default class Header extends PureComponent {
         style={[
           {
             backgroundColor: colorBack,
-            height: searchBar && true ? 140 : 100,
+            height: searchBar && true ? 110 : 70,
           },
           borderBottom,
           padding,
@@ -250,7 +250,7 @@ export default class Header extends PureComponent {
             size={1}
             justify='between'
             align='center'
-            style={[paddingBottom]}
+            style={[ searchBar ? paddingBottom : {} ]}
           >
             {backBtn && (
               <HeaderButton
@@ -278,6 +278,11 @@ export default class Header extends PureComponent {
             >
               {title}
             </Text>
+            <View>
+              <RelayContext.Consumer>
+                {context => <StateBadge context={context} />}
+              </RelayContext.Consumer>
+            </View>
             {rightBtn ? <View>{rightBtn}</View> : null}
             {!rightBtn &&
               rightBtnIcon !== null && (
@@ -290,18 +295,6 @@ export default class Header extends PureComponent {
               />
             )}
           </Flex.Cols>
-          <Flex.Cols
-            size={1}
-            justify='center'
-            align='center'
-            style={[paddingBottom]}
-          >
-            <View>
-              <RelayContext.Consumer>
-                {context => <StateBadge context={context} />}
-              </RelayContext.Consumer>
-            </View>
-          </Flex.Cols>
           {searchBarComponent}
         </Flex.Rows>
       </View>