@arcblock/ux 2.1.30 → 2.1.31

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.
Files changed (7) hide show
  1. package/lib/Footer/index.js +37 -26
  2. package/lib/Layout/dashboard/index.js +2 -4
  3. package/lib/Layout/dashboard-legacy/index.js +2 -4
  4. package/package.json +4 -4
  5. package/src/Footer/index.js +13 -10
  6. package/src/Layout/dashboard/index.js +1 -4
  7. package/src/Layout/dashboard-legacy/index.js +1 -4
package/lib/Footer/index.js CHANGED
@@ -11,6 +11,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
11
 
12
12
  var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
13
13
 
14
+ var _Container = _interopRequireDefault(require("@mui/material/Container"));
15
+
14
16
  var _Util = require("../Util");
15
17
 
16
18
  var _Logo = _interopRequireDefault(require("../Logo"));
@@ -35,32 +37,35 @@ function Footer(props) {
35
37
  className: className,
36
38
  style: style,
37
39
  dark: dark,
38
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
39
- component: "div",
40
- className: "footer",
41
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
42
- component: "p",
43
- className: "footer-item",
44
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
45
- className: "footer-copy",
46
- children: ["Copyright \xA9 ", copyYear, " "]
47
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
48
- className: "footer-brand",
49
- children: brand
50
- })]
51
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
52
- component: "p",
53
- className: "footer-item",
54
- style: {
55
- justifyContent: 'flex-end',
56
- flexShrink: 0
57
- },
58
- children: ["Powered by", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.default, {
59
- mode: dark ? 'light' : 'dark',
60
- layout: "horizontal",
61
- className: "logo-container"
40
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
41
+ maxWidth: false,
42
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
43
+ component: "div",
44
+ className: "footer",
45
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
46
+ component: "p",
47
+ className: "footer-item",
48
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
49
+ className: "footer-copy",
50
+ children: ["Copyright \xA9 ", copyYear, " "]
51
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
52
+ className: "footer-brand",
53
+ children: brand
54
+ })]
55
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
56
+ component: "p",
57
+ className: "footer-item",
58
+ style: {
59
+ justifyContent: 'flex-end',
60
+ flexShrink: 0
61
+ },
62
+ children: ["Powered by", /*#__PURE__*/(0, _jsxRuntime.jsx)(_Logo.default, {
63
+ mode: dark ? 'light' : 'dark',
64
+ layout: "horizontal",
65
+ className: "logo-container"
66
+ })]
62
67
  })]
63
- })]
68
+ })
64
69
  })
65
70
  });
66
71
  }
@@ -83,4 +88,10 @@ Footer.defaultProps = {
83
88
  const Container = _styledComponents.default.div.withConfig({
84
89
  displayName: "Footer__Container",
85
90
  componentId: "sc-1qpifuv-0"
86
- })(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;@media (max-width:540px){padding:8px 0;}.footer{display:flex;align-items:center;justify-content:space-between;.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}.logo-container{margin:0 24px;width:90px;opacity:0.5;}@media (max-width:540px){.footer-item{font-size:0.7rem;}.logo-container{margin:0 0 0 16px;width:70px;height:40px;}}@media (max-width:380px){.footer-item{font-size:0.65rem;}.logo-container{margin:0 0 0 8px;height:24px;}}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', props => props.theme.palette.grey[900]);
91
+ })(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;@media (max-width:540px){padding:8px 0;}.footer{display:flex;align-items:center;justify-content:space-between;.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}.logo-container{margin:0 24px;width:90px;opacity:0.5;}@media (max-width:540px){.footer-item{font-size:0.7rem;}.logo-container{margin:0 0 0 16px;width:70px;height:40px;}}@media (max-width:380px){.footer-item{font-size:0.65rem;}.logo-container{margin:0 0 0 8px;height:24px;}}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', _ref => {
92
+ let {
93
+ theme,
94
+ dark
95
+ } = _ref;
96
+ return dark ? theme.palette.grey[500] : theme.palette.grey[900];
97
+ });
package/lib/Layout/dashboard/index.js CHANGED
@@ -131,9 +131,7 @@ function Dashboard(_ref2) {
131
131
  maxWidth: false
132
132
  }), {}, {
133
133
  children: children
134
- })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
135
- className: "dashboard-footer"
136
- })]
134
+ })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {})]
137
135
  })]
138
136
  })]
139
137
  }));
@@ -155,7 +153,7 @@ Dashboard.defaultProps = {
155
153
  const Wrapper = _styledComponents.default.div.withConfig({
156
154
  displayName: "dashboard__Wrapper",
157
155
  componentId: "sc-arvc7q-0"
158
- })(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard-body{overflow:hidden;flex:1;}.dashboard-sidebar{box-sizing:border-box;flex:0 0 auto;width:104px;&:hover{overflow-y:auto;}}.dashboard-main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard-content{flex:1;}.dashboard-footer{padding-left:30px;}"]);
156
+ })(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard-body{overflow:hidden;flex:1;}.dashboard-sidebar{box-sizing:border-box;flex:0 0 auto;width:104px;&:hover{overflow-y:auto;}}.dashboard-main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard-content{flex:1;}"]);
159
157
 
160
158
  const StyledUxHeader = (0, _styledComponents.default)(_Header.ResponsiveHeader).withConfig({
161
159
  displayName: "dashboard__StyledUxHeader",
package/lib/Layout/dashboard-legacy/index.js CHANGED
@@ -46,7 +46,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
46
46
  const Wrapper = _styledComponents.default.div.withConfig({
47
47
  displayName: "dashboard-legacy__Wrapper",
48
48
  componentId: "sc-z8z10v-0"
49
- })(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard__body{overflow:hidden;flex:1;}.dashboard__main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard__content{flex:1;}.dashboard__footer{padding-left:30px;}.drawerPaper{position:relative;white-space:nowrap;width:120px;background:", ";box-shadow:2px 16px 10px 0 rgba(0,0,0,", ");border:0;}"], props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
49
+ })(["&.dashboard{display:flex;flex-direction:column;height:100vh;}.dashboard__body{overflow:hidden;flex:1;}.dashboard__main{display:flex;flex-direction:column;overflow:auto;flex:1;}.dashboard__content{flex:1;}.drawerPaper{position:relative;white-space:nowrap;width:120px;background:", ";box-shadow:2px 16px 10px 0 rgba(0,0,0,", ");border:0;}"], props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
50
50
 
51
51
  function Dashboard(_ref) {
52
52
  let {
@@ -126,9 +126,7 @@ function Dashboard(_ref) {
126
126
  maxWidth: isFullWidth ? false : 'lg',
127
127
  className: "dashboard__content",
128
128
  children: children
129
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {
130
- className: "dashboard__footer"
131
- })]
129
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Footer.default, {})]
132
130
  })]
133
131
  })]
134
132
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/ux",
3
- "version": "2.1.30",
3
+ "version": "2.1.31",
4
4
  "description": "Common used react components for arcblock products",
5
5
  "keywords": [
6
6
  "react",
@@ -52,10 +52,10 @@
52
52
  "react": ">=18.1.0",
53
53
  "react-ga": "^2.7.0"
54
54
  },
55
- "gitHead": "16c9e4b3d8664ef14440b248bdf34b46fc8396d1",
55
+ "gitHead": "255d332ea93803d8b12a6595eb603a625712e459",
56
56
  "dependencies": {
57
- "@arcblock/icons": "^2.1.30",
58
- "@arcblock/react-hooks": "^2.1.30",
57
+ "@arcblock/icons": "^2.1.31",
58
+ "@arcblock/react-hooks": "^2.1.31",
59
59
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
60
60
  "@emotion/react": "^11.9.0",
61
61
  "@emotion/styled": "^11.8.1",
package/src/Footer/index.js CHANGED
@@ -2,6 +2,7 @@
2
2
  import PropTypes from 'prop-types';
3
3
  import styled from 'styled-components';
4
4
  import Typography from '@mui/material/Typography';
5
+ import MuiContainer from '@mui/material/Container';
5
6
 
6
7
  import { mergeProps } from '../Util';
7
8
  import Logo from '../Logo';
@@ -15,16 +16,18 @@ export default function Footer(props) {
15
16
 
16
17
  return (
17
18
  <Container className={className} style={style} dark={dark}>
18
- <Typography component="div" className="footer">
19
- <Typography component="p" className="footer-item">
20
- <span className="footer-copy">Copyright &copy; {copyYear} </span>
21
- <span className="footer-brand">{brand}</span>
19
+ <MuiContainer maxWidth={false}>
20
+ <Typography component="div" className="footer">
21
+ <Typography component="p" className="footer-item">
22
+ <span className="footer-copy">Copyright &copy; {copyYear} </span>
23
+ <span className="footer-brand">{brand}</span>
24
+ </Typography>
25
+ <Typography component="p" className="footer-item" style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
26
+ Powered by
27
+ <Logo mode={dark ? 'light' : 'dark'} layout="horizontal" className="logo-container" />
28
+ </Typography>
22
29
  </Typography>
23
- <Typography component="p" className="footer-item" style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
24
- Powered by
25
- <Logo mode={dark ? 'light' : 'dark'} layout="horizontal" className="logo-container" />
26
- </Typography>
27
- </Typography>
30
+ </MuiContainer>
28
31
  </Container>
29
32
  );
30
33
  }
@@ -62,7 +65,7 @@ const Container = styled.div`
62
65
  justify-content: space-between;
63
66
 
64
67
  .footer-item {
65
- color: ${(props) => props.theme.palette.grey[900]};
68
+ color: ${({ theme, dark }) => (dark ? theme.palette.grey[500] : theme.palette.grey[900])};
66
69
  display: flex;
67
70
  align-items: center;
68
71
  flex-wrap: wrap;
package/src/Layout/dashboard/index.js CHANGED
@@ -69,7 +69,7 @@ function Dashboard({ children, title, headerProps, links, fullWidth, ...rest })
69
69
  <Container className="dashboard-content" {...(fullWidth && { maxWidth: false })}>
70
70
  {children}
71
71
  </Container>
72
- <Footer className="dashboard-footer" />
72
+ <Footer />
73
73
  </Box>
74
74
  </Box>
75
75
  </Wrapper>
@@ -117,9 +117,6 @@ const Wrapper = styled.div`
117
117
  .dashboard-content {
118
118
  flex: 1;
119
119
  }
120
- .dashboard-footer {
121
- padding-left: 30px;
122
- }
123
120
  `;
124
121
 
125
122
  const StyledUxHeader = styled(ResponsiveHeader)`
package/src/Layout/dashboard-legacy/index.js CHANGED
@@ -30,9 +30,6 @@ const Wrapper = styled.div`
30
30
  .dashboard__content {
31
31
  flex: 1;
32
32
  }
33
- .dashboard__footer {
34
- padding-left: 30px;
35
- }
36
33
 
37
34
  .drawerPaper {
38
35
  position: relative;
@@ -105,7 +102,7 @@ export default function Dashboard({
105
102
  <Container maxWidth={isFullWidth ? false : 'lg'} className="dashboard__content">
106
103
  {children}
107
104
  </Container>
108
- <Footer className="dashboard__footer" />
105
+ <Footer />
109
106
  </Box>
110
107
  </Box>
111
108
  </Wrapper>