fix(style): fix badges style and add berty icon

Signed-off-by: Sacha Froment <sfroment42@gmail.com>
berty · Feb 1, 2019 · 87a25c3 · 87a25c3
1 parent 2470dd5
commit 87a25c3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/client/react-native/common/components/Library/Berty.js b/client/react-native/common/components/Library/Berty.js
@@ -0,0 +1,29 @@
+import Svg, {
+  Circle,
+  G,
+  Path,
+} from 'react-native-svg'
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+
+export default class Berty extends React.PureComponent {
+  render () {
+    return (
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          { alignItems: 'center', justifyContent: 'center' },
+        ]}>
+        <Svg width='872px' height='871px' viewBox='0 0 872 871'>
+          <G id='Page-1' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+            <G id='berty_picto' fill={this.props.color}>
+              <Path d='M618.9,526.7 C619,526.7 619,526.7 619.1,526.7 C685.5,526.6 741.1,480.7 756.2,418.9 L618.9,389.2 L618.9,526.7 Z' id='Path' />
+              <Path d='M872,387.2 C872,313.5 840.2,247.2 789.6,201.2 C748.7,164 695.4,140.2 636.7,136.6 C631.1,136.3 625.5,136.1 619.9,136.1 C619.6,136.1 619.2,136.1 618.9,136.1 C619.2,136.1 619.6,136.1 619.9,136.1 C565.6,135.6 511.9,146.4 462.2,167.2 C445.4,174.2 429,182.4 413.3,191.7 L351.6,54.9 L326.9,0.2 C265.6,27.9 220.6,76.9 196.7,134.5 L291.9,218.7 L186.7,163.1 L44.9,84.5 C-42,240.8 15.3,438.7 171.5,525.6 L0.6,851.6 C82.5,894.6 183.8,863.1 226.8,781.1 C229.2,776.6 231.3,771.9 233.2,767.3 C228,764.6 222.9,761.9 217.8,759.1 C208.6,754 199.5,748.8 190.5,743.5 C172.6,732.8 155,721.5 137.9,709.9 C157.2,717.4 176.8,724.3 196.4,730.7 C206.2,733.8 216,736.8 225.9,739.6 C233.4,741.7 241,743.7 248.4,745.4 C396.7,751.2 542.2,673.3 615.7,533 L618.6,526.8 C617.7,526.8 616.8,526.8 615.9,526.8 C517.7,525.1 438.6,445 438.6,346.4 C438.6,343.6 438.7,340.9 438.8,338.1 C443.1,242.5 522.3,166.3 618.9,165.9 C618.9,226.4 618.9,359.6 618.9,382 L867.2,435.7 C870.3,420 872,403.8 872,387.2 Z' id='Path' />
+              <Circle id='Oval' cx='561' cy='335.1' r='32.3' />
+            </G>
+          </G>
+        </Svg>
+      </View>
+    )
+  }
+}
diff --git a/client/react-native/common/components/Library/Header.js b/client/react-native/common/components/Library/Header.js
@@ -181,23 +181,21 @@ class StateBadge extends PureComponent {
 
     return (
       <Flex.Cols
-        justify={'stretch'}
+        size={3}
         style={{
-          borderRadius: 4,
           shadowColor: 'black',
           shadowRadius: 2,
           shadowOffset: {
             width: 0,
             height: 1,
           },
           shadowOpacity: 0.10,
-          alignItems: 'flex-start',
           display: 'flex',
         }}
       >
-        <Text margin={5} icon={<Berty color={bertyColor} />} rounded tiny background={bgBertyColor} color={bertyColor}>{bertyText.toLocaleUpperCase()}</Text>
-        <Text margin={5} icon='users' rounded tiny background={bgPeerColor} color={peerColor}>{peers.length.toString()}</Text>
-        <Text margin={5} icon='bluetooth' rounded tiny background={bgBleColor} color={bleColor}>{bleText.toLocaleUpperCase()}</Text>
+        <Text margin={5} size={2} icon={<Berty color={bertyColor} />} rounded center tiny background={bgBertyColor} color={bertyColor}>{bertyText.toLocaleUpperCase()}</Text>
+        <Text margin={5} size={1} icon='users' rounded center tiny background={bgPeerColor} color={peerColor}>{peers.length.toString()}</Text>
+        <Text margin={5} size={1} icon='bluetooth' rounded center tiny background={bgBleColor} color={bleColor}>{bleText.toLocaleUpperCase()}</Text>
       </Flex.Cols>
     )
   }