@thecb/components 10.4.6-beta.0 → 10.4.6-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "10.4.6-beta.0",
3
+ "version": "10.4.6-beta.2",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "typings": "dist/index.d.ts",
@@ -1,4 +1,4 @@
1
- import React, { useContext } from "react";
1
+ import React, { Fragment, useContext } from "react";
2
2
  import { Box } from "../layouts";
3
3
  import { themeComponent } from "../../../util/themeUtils";
4
4
  import ButtonWithAction from "../button-with-action";
@@ -12,34 +12,53 @@ const WalletName = ({
12
12
  personName,
13
13
  action = noop,
14
14
  text = "Not you?",
15
- actionText = "Check out as a guest"
15
+ actionText = "Check out as a guest",
16
+ themeValues
16
17
  }) => {
17
18
  const themeContext = useContext(ThemeContext);
18
19
  const { isMobile } = themeContext;
19
- console.log("isMobile", isMobile);
20
+
20
21
  return (
21
- <Box
22
- padding="0"
23
- extraStyles={
24
- isMobile
25
- ? `display: flex; flex-direction: column; flex-wrap: wrap;
26
- div {text - align: right;`
27
- : `display: flex; justify-content: space-between; align-items: center;`
28
- }
29
- >
30
- <Box>
31
- <Text>{personName}</Text>
32
- </Box>
33
- <Box>
34
- <Text extraStyles="font-size: 12px">{text}</Text>
35
- <ButtonWithAction
36
- text={actionText}
37
- action={action}
38
- variant="smallGhost"
39
- extraStyles="span {font-size: 12px;}"
40
- />
22
+ <Fragment>
23
+ <Box
24
+ background={themeValues.backgroundColor}
25
+ extraStyles={
26
+ isMobile
27
+ ? `display: flex; flex-direction: column; flex-wrap: wrap;
28
+ span {text - align: right;}`
29
+ : `display: flex; justify-content: space-between; align-items: center;`
30
+ }
31
+ >
32
+ <Box padding="0">
33
+ <Text>{personName}</Text>
34
+ </Box>
35
+ {!isMobile && (
36
+ <Box padding="0">
37
+ <Text extraStyles="font-size: 12px">{text}</Text>
38
+ <ButtonWithAction
39
+ text={actionText}
40
+ action={action}
41
+ variant="smallGhost"
42
+ extraStyles="span {font-size: 12px;}"
43
+ />
44
+ </Box>
45
+ )}
41
46
  </Box>
42
- </Box>
47
+ {isMobile && (
48
+ <Box
49
+ padding="0"
50
+ extraStyles="display: flex; align-items: center; justify-content: flex-end;"
51
+ >
52
+ <Text extraStyles="font-size: 12px">{text}</Text>
53
+ <ButtonWithAction
54
+ text={actionText}
55
+ action={action}
56
+ variant="smallGhost"
57
+ extraStyles="span {font-size: 12px;}"
58
+ />
59
+ </Box>
60
+ )}
61
+ </Fragment>
43
62
  );
44
63
  };
45
64