@pisell/private-materials 3.2.4 → 3.2.5

package/es/components/wallet/DiscountCard/index.js

@@ -196,7 +196,7 @@ var RechargeableCard = Provider(function (props) {
     modalWrapStyle: {
       overflowY: 'auto',
       top: 0,
-      height: '100vh',
+      height: '100%',
       zIndex: 998,
       position: 'fixed',
       left: 0,

package/es/components/wallet/DiscountCard/index.less

@@ -1,11 +1,10 @@
 .wallet-discountCard-title {
   color: var(--Gray-900, #101828);
-
-  /* Text xl/Semibold */
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
-  line-height: 30px; /* 150% */
-  margin: 20px 0;
+  line-height: 30px;
+  margin-top: 20px;
+  margin-bottom: 24px;
 }

package/es/components/wallet/PointCard/index.js

@@ -148,7 +148,7 @@ var RechargeableCard = Provider(function (props) {
     modalWrapStyle: {
       overflowY: 'auto',
       top: 68,
-      height: 'calc(100vh - 68px)',
+      height: 'calc(100% - 68px)',
       zIndex: 998
     },
     pcDetailModalDisplay: platform === 'h5' ? true : false,

package/es/components/wallet/PointCard/index.less

@@ -1,11 +1,10 @@
 .wallet-pointCard-title {
   color: var(--Gray-900, #101828);
-
-  /* Text xl/Semibold */
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
-  line-height: 30px; /* 150% */
-  margin: 20px 0;
+  line-height: 30px;
+  margin-top: 20px;
+  margin-bottom: 24px;
 }

package/es/components/wallet/RechargeableCard/index.js

@@ -380,12 +380,12 @@ var RechargeableCard = Provider(function (props) {
     // 打开详情
     openDetail(detailWithButtons);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isEmpty ? /*#__PURE__*/React.createElement(PisellEmpty, null) : /*#__PURE__*/React.createElement(React.Fragment, null, platform !== 'pc' && /*#__PURE__*/React.createElement(Title, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, platform !== 'pc' && /*#__PURE__*/React.createElement("div", {
     className: "wallet-rechargeableCard-title"
-  }, locales.getText('page.wallet.rechargeableCard')), /*#__PURE__*/React.createElement(CardMetricItem, {
+  }, locales.getText('page.wallet.rechargeableCard')), isEmpty ? /*#__PURE__*/React.createElement(PisellEmpty, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardMetricItem, {
     title: locales.getText('page.wallet.cardBalance'),
     style: {
-      margin: '8px 0 24px'
+      marginBottom: 24
     },
     hint: false,
     tags: false,
@@ -400,7 +400,7 @@ var RechargeableCard = Provider(function (props) {
     modalWrapStyle: {
       overflowY: 'auto',
       top: 0,
-      height: '100vh',
+      height: '100%',
       zIndex: 998,
       position: 'fixed',
       left: 0,

package/es/components/wallet/RechargeableCard/index.less

@@ -1,4 +1,4 @@
-.wallet-recharge {
+.wallet-rechargeableCard {
   // 充值选项容器
   &-options {
     // 卡片项
@@ -78,14 +78,13 @@
   // 充值卡标题
   &-title {
     color: var(--Gray-900, #101828);
-
-    /* Text xl/Semibold */
     font-family: Inter;
     font-size: 20px;
     font-style: normal;
     font-weight: 600;
-    line-height: 30px; /* 150% */
-    margin: 20px 0;
+    line-height: 30px;
+    margin-top: 20px;
+    margin-bottom: 24px;
   }
 
   // 钱包卡片样式

package/es/components/wallet/Voucher/index.js

@@ -110,7 +110,7 @@ var Voucher = Provider(function (props) {
     modalWrapStyle: {
       overflowY: 'auto',
       top: 68,
-      height: 'calc(100vh - 68px)',
+      height: 'calc(100% - 68px)',
       zIndex: 998
     },
     pcDetailModalDisplay: platform === 'h5' ? true : false,

package/es/components/wallet/Voucher/index.less

@@ -1,11 +1,10 @@
 .wallet-voucher-title {
   color: var(--Gray-900, #101828);
-
-  /* Text xl/Semibold */
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
-  line-height: 30px; /* 150% */
-  margin: 20px 0;
+  line-height: 30px;
+  margin-top: 20px;
+  margin-bottom: 24px;
 }

package/es/components/wallet/components/WalletBar/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { LeftOutlined } from '@ant-design/icons';
+// import { LeftOutlined } from '@ant-design/icons';
+import { Iconfont } from '@pisell/materials';
 import { locales } from '@pisell/utils';
 import "./index.less";
 var WalletBar = function WalletBar(_ref) {
@@ -7,8 +8,9 @@ var WalletBar = function WalletBar(_ref) {
     onBack = _ref.onBack;
   return /*#__PURE__*/React.createElement("div", {
     className: "pisell-lowcode-wallet-bar"
-  }, /*#__PURE__*/React.createElement(LeftOutlined, {
+  }, /*#__PURE__*/React.createElement(Iconfont, {
     onClick: onBack,
+    type: "pisell2-chevron-left",
     className: "pisell-lowcode-wallet-header-bar-arrow"
   }), /*#__PURE__*/React.createElement("span", {
     className: "header-title"

package/es/components/wallet/index.js

@@ -4,7 +4,7 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 import React, { useEffect, useContext, useMemo } from 'react';
 import { Context, Provider } from "./model";
-import { Button, Tabs, Page, Badge, Typography, PisellInformationEntry, PisellModal, Menu, PisellToast, PisellWalletPassCard } from '@pisell/materials';
+import { Button, Tabs, Badge, Typography, PisellInformationEntry, PisellModal, Menu, PisellToast, PisellWalletPassCard } from '@pisell/materials';
 import { locales } from '@pisell/utils';
 var Title = Typography.Title;
 import { PlusOutlined, RightOutlined } from '@ant-design/icons';
@@ -685,10 +685,14 @@ var Wallet = Provider(function () {
     return addModalOpen ? 'wallet-add-modal' : 'pisell-lowcode__wallet__addModal';
   };
   return /*#__PURE__*/React.createElement(DetailProvider, null, /*#__PURE__*/React.createElement("div", {
-    className: "pisell-wallet-container"
-  }, /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-wallet-container",
+    style: {
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-lowcode-wallet",
     style: {
+      height: platform === 'pc' ? 'auto' : '100%',
       width: platform === 'pc' ? 960 : '100vw',
       padding: platform === 'pc' ? 20 : 0
     }
@@ -736,6 +740,6 @@ var Wallet = Provider(function () {
     }
   }), searchList.map(function (item) {
     return renderSearchCard(item);
-  }))))));
+  })))));
 });
 export default Wallet;

package/es/components/wallet/index.less

@@ -34,7 +34,7 @@
 
   .pisell-lowcode-wallet-mobile {
     display: flex;
-    height: 100vh;
+    height: 100%;
     width: 100vw;
     flex-direction: column;
     background-color: #fff;
@@ -63,8 +63,8 @@
       .pisell-lowcode-wallet-header-bar-arrow {
         position: absolute;
         font-size: 24px;
-        top: 24px;
-        left: 24px;
+        top: 22px;
+        left: 22px;
       }
     }
 
@@ -88,6 +88,12 @@
         border-right: none;
       }
       .pisell-lowcode-wallet-title {
+        color: var(--Gray-900, #101828);
+        font-family: Inter;
+        font-size: 30px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 38px;
         margin: 20px 0;
       }
 

package/es/components/walletList/index.js

@@ -26,10 +26,29 @@ import { locales } from '@pisell/utils';
 import { request } from "./../../utils";
 import "./index.less";
 import classNames from 'classnames';
-import { Skeleton } from 'antd';
 // 导入所有类型
 import { WalletCardItem, DEFAULT_CARD_CONFIG } from "./types";
 
+// 添加 localStorage 相关的操作函数
+var STORAGE_KEY = 'pisell_wallet_list_data';
+var STORAGE_KEY_BALANCE = 'pisell_wallet_balance_data';
+var saveToLocalStorage = function saveToLocalStorage(key, data) {
+  try {
+    localStorage.setItem(key, JSON.stringify(data));
+  } catch (error) {
+    console.error('Error saving to localStorage:', error);
+  }
+};
+var getFromLocalStorage = function getFromLocalStorage(key) {
+  try {
+    var data = localStorage.getItem(key);
+    return data ? JSON.parse(data) : null;
+  } catch (error) {
+    console.error('Error reading from localStorage:', error);
+    return null;
+  }
+};
+
 // @ts-ignore
 
 // @ts-ignore
@@ -73,7 +92,7 @@ var DEFAULT_WALLET_CARD = {
     name: 'Store name'
   },
   isLogin: false,
-  showIcon: false,
+  showIcon: true,
   icon: '',
   wallet: {
     name: {
@@ -321,7 +340,7 @@ var WalletList = Provider(function (props) {
   };
   var initData = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(requestId) {
-      var _yield$Promise$all, _yield$Promise$all2, walletListData, walletBalanceData, _message, _data, isAuthError;
+      var cachedList, cachedBalance, _yield$Promise$all, _yield$Promise$all2, walletListData, walletBalanceData, _message, _data, isAuthError;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -357,33 +376,48 @@ var WalletList = Provider(function (props) {
             }
             return _context3.abrupt("return");
           case 9:
-            setState({
-              loading: true,
-              error: null
-            });
-            _context3.prev = 10;
+            // 从 localStorage 获取缓存数据
+            cachedList = getFromLocalStorage(STORAGE_KEY);
+            cachedBalance = getFromLocalStorage(STORAGE_KEY_BALANCE); // 如果有缓存数据，先使用缓存数据
+            if (cachedList && cachedBalance) {
+              setState({
+                list: cachedList,
+                balance: cachedBalance,
+                loading: false,
+                hasAttempted: false
+              });
+            }
+            _context3.prev = 12;
             if (isMountedRef.current) {
-              _context3.next = 13;
+              _context3.next = 15;
               break;
             }
             return _context3.abrupt("return");
-          case 13:
-            _context3.next = 15;
-            return Promise.all([getWalletList({}), getWalletBalance()]);
           case 15:
+            _context3.next = 17;
+            return Promise.all([getWalletList(), getWalletBalance()]);
+          case 17:
             _yield$Promise$all = _context3.sent;
             _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
             walletListData = _yield$Promise$all2[0];
             walletBalanceData = _yield$Promise$all2[1];
             if (!(!isMountedRef.current || requestIdRef.current !== requestId)) {
-              _context3.next = 21;
+              _context3.next = 23;
               break;
             }
             return _context3.abrupt("return");
-          case 21:
+          case 23:
+            // 如果获取到有效数据，保存到 localStorage
+            if (walletListData && walletListData.length > 0) {
+              saveToLocalStorage(STORAGE_KEY, walletListData);
+            }
+            if (walletBalanceData) {
+              saveToLocalStorage(STORAGE_KEY_BALANCE, walletBalanceData);
+            }
+
             // 添加判断逻辑：如果walletBalanceData为空或walletListData为空，2秒后重试
             if (!walletBalanceData || Array.isArray(walletListData) && walletListData.length === 0) {
-              // 保持loading状态，2秒后重试
+              // 2秒后重试
               setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
                 var retryBalanceData, retryListData;
                 return _regeneratorRuntime().wrap(function _callee2$(_context2) {
@@ -400,35 +434,40 @@ var WalletList = Provider(function (props) {
                       retryBalanceData = walletBalanceData;
                       retryListData = walletListData; // 如果余额数据为空，重试请求余额
                       if (walletBalanceData) {
-                        _context2.next = 9;
+                        _context2.next = 10;
                         break;
                       }
                       _context2.next = 8;
                       return getWalletBalance();
                     case 8:
                       retryBalanceData = _context2.sent;
-                    case 9:
+                      if (retryBalanceData) {
+                        saveToLocalStorage(STORAGE_KEY_BALANCE, retryBalanceData);
+                      }
+                    case 10:
                       if (!(Array.isArray(walletListData) && walletListData.length === 0)) {
-                        _context2.next = 13;
+                        _context2.next = 15;
                         break;
                       }
-                      _context2.next = 12;
+                      _context2.next = 13;
                       return getWalletList({});
-                    case 12:
-                      retryListData = _context2.sent;
                     case 13:
-                      // 无论第二次返回结果如何，都以此为准继续执行
+                      retryListData = _context2.sent;
+                      if (retryListData && retryListData.length > 0) {
+                        saveToLocalStorage(STORAGE_KEY, retryListData);
+                      }
+                    case 15:
+                      // 更新状态
                       setState({
                         list: retryListData || [],
                         balance: retryBalanceData,
-                        // 使用重试后的结果
                         loading: false,
                         hasAttempted: true
                       });
-                      _context2.next = 19;
+                      _context2.next = 21;
                       break;
-                    case 16:
-                      _context2.prev = 16;
+                    case 18:
+                      _context2.prev = 18;
                       _context2.t0 = _context2["catch"](2);
                       // 重试出错也视为最终结果
                       setState({
@@ -437,14 +476,14 @@ var WalletList = Provider(function (props) {
                         loading: false,
                         hasAttempted: true
                       });
-                    case 19:
+                    case 21:
                     case "end":
                       return _context2.stop();
                   }
-                }, _callee2, null, [[2, 16]]);
-              })), 2000); // 2秒后重试
+                }, _callee2, null, [[2, 18]]);
+              })), 2000);
             } else {
-              // 如果两个请求都有数据，直接使用第一次请求的结果
+              // 如果两个请求都有数据，直接使用结果
               setState({
                 list: walletListData || [],
                 balance: walletBalanceData,
@@ -452,17 +491,17 @@ var WalletList = Provider(function (props) {
                 hasAttempted: true
               });
             }
-            _context3.next = 30;
+            _context3.next = 34;
             break;
-          case 24:
-            _context3.prev = 24;
-            _context3.t0 = _context3["catch"](10);
+          case 28:
+            _context3.prev = 28;
+            _context3.t0 = _context3["catch"](12);
             if (!(!isMountedRef.current || requestIdRef.current !== requestId)) {
-              _context3.next = 28;
+              _context3.next = 32;
               break;
             }
             return _context3.abrupt("return");
-          case 28:
+          case 32:
             // 判断是否是登录超时错误
             isAuthError = (_context3.t0 === null || _context3.t0 === void 0 ? void 0 : _context3.t0.code) === 4001 || (_context3.t0 === null || _context3.t0 === void 0 || (_message = _context3.t0.message) === null || _message === void 0 ? void 0 : _message.includes('login time out')) || (_context3.t0 === null || _context3.t0 === void 0 || (_data = _context3.t0.data) === null || _data === void 0 ? void 0 : _data.code) === 4001;
             setState({
@@ -471,11 +510,11 @@ var WalletList = Provider(function (props) {
               authError: isAuthError,
               hasAttempted: true
             });
-          case 30:
+          case 34:
           case "end":
             return _context3.stop();
         }
-      }, _callee3, null, [[10, 24]]);
+      }, _callee3, null, [[12, 28]]);
     }));
     return function initData(_x) {
       return _ref3.apply(this, arguments);
@@ -632,53 +671,6 @@ var WalletList = Provider(function (props) {
 
   // 确保renderContent总是返回JSX，避免返回null
   var renderContent = function renderContent() {
-    // 如果是加载中，显示骨架屏
-    if (loading) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "pisell-wallet-list-container pisell-wallet-skeleton"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "wallet-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "wallet-card-skeleton"
-      }, /*#__PURE__*/React.createElement(Skeleton, {
-        active: true,
-        paragraph: {
-          rows: 6
-        }
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "wallet-card-code-skeleton"
-      }, /*#__PURE__*/React.createElement(Skeleton.Button, {
-        active: true,
-        style: {
-          width: '80%',
-          height: 50
-        }
-      })))), /*#__PURE__*/React.createElement("div", {
-        className: "wallet-navigation-skeleton"
-      }, /*#__PURE__*/React.createElement(Skeleton.Button, {
-        active: true,
-        style: {
-          width: 40,
-          height: 40,
-          borderRadius: '50%'
-        }
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "wallet-dots-container-skeleton"
-      }, /*#__PURE__*/React.createElement(Skeleton.Button, {
-        active: true,
-        style: {
-          width: 80,
-          height: 20
-        }
-      })), /*#__PURE__*/React.createElement(Skeleton.Button, {
-        active: true,
-        style: {
-          width: 40,
-          height: 40,
-          borderRadius: '50%'
-        }
-      })));
-    }
     // 如果列表为空，不显示任何内容
     if (list.length === 0) {
       return null;

package/es/components/walletList/serve.d.ts

@@ -1,14 +1,10 @@
-import { WalletPass, WalletBalance, IWallList } from './types';
+import { WalletPass, WalletBalance } from './types';
 /**
  * 获取 wallet 列表
  * @param params
  * @returns
  */
-export declare const getWalletList: (params: IWallList) => Promise<WalletPass[]>;
-/**
- * 获取wallet pass 余额
- */
-export declare const getWalletPassBalance: (params?: Record<string, any>) => Promise<WalletBalance | null>;
+export declare const getWalletList: () => Promise<WalletPass[]>;
 /**
  * 获取钱包余额
  * @returns

package/es/components/walletList/serve.js

@@ -9,14 +9,14 @@ import { request } from "./../../utils";
  * @returns 
  */
 export var getWalletList = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var _yield$request$getReq, data;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.prev = 0;
           _context.next = 3;
-          return request.getRequest().get('/h5/wallet', params);
+          return request.getRequest().get('/h5/wallet', {});
         case 3:
           _yield$request$getReq = _context.sent;
           data = _yield$request$getReq.data;
@@ -31,74 +31,39 @@ export var getWalletList = /*#__PURE__*/function () {
       }
     }, _callee, null, [[0, 8]]);
   }));
-  return function getWalletList(_x) {
+  return function getWalletList() {
     return _ref.apply(this, arguments);
   };
 }();
 
 /**
- * 获取wallet pass 余额
+ * 获取钱包余额
+ * @returns 
  */
-export var getWalletPassBalance = /*#__PURE__*/function () {
+export var getWalletBalance = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-    var params,
-      _yield$request$getReq2,
-      data,
-      _args2 = arguments;
+    var _yield$request$getReq2, data;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          params = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {};
-          _context2.prev = 1;
-          _context2.next = 4;
-          return request.getRequest().get("/h5/wallet/wallet-pass/balance", params);
-        case 4:
+          _context2.prev = 0;
+          _context2.next = 3;
+          return request.getRequest().get('/h5/wallet/wallet-pass/balance', {});
+        case 3:
           _yield$request$getReq2 = _context2.sent;
           data = _yield$request$getReq2.data;
           return _context2.abrupt("return", data || null);
-        case 9:
-          _context2.prev = 9;
-          _context2.t0 = _context2["catch"](1);
-          return _context2.abrupt("return", null);
-        case 12:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2, null, [[1, 9]]);
-  }));
-  return function getWalletPassBalance() {
-    return _ref2.apply(this, arguments);
-  };
-}();
-
-/**
- * 获取钱包余额
- * @returns 
- */
-export var getWalletBalance = /*#__PURE__*/function () {
-  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-    var _yield$request$getReq3, data;
-    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          _context3.prev = 0;
-          _context3.next = 3;
-          return request.getRequest().get('/h5/wallet/wallet-pass/balance', {});
-        case 3:
-          _yield$request$getReq3 = _context3.sent;
-          data = _yield$request$getReq3.data;
-          return _context3.abrupt("return", data || null);
         case 8:
-          _context3.prev = 8;
-          _context3.t0 = _context3["catch"](0);
-          return _context3.abrupt("return", null);
+          _context2.prev = 8;
+          _context2.t0 = _context2["catch"](0);
+          return _context2.abrupt("return", null);
         case 11:
         case "end":
-          return _context3.stop();
+          return _context2.stop();
       }
-    }, _callee3, null, [[0, 8]]);
+    }, _callee2, null, [[0, 8]]);
   }));
   return function getWalletBalance() {
-    return _ref3.apply(this, arguments);
+    return _ref2.apply(this, arguments);
   };
 }();

package/lib/components/wallet/DiscountCard/index.js

@@ -188,7 +188,7 @@ var RechargeableCard = (0, import_model.Provider)((props) => {
       modalWrapStyle: {
         overflowY: "auto",
         top: 0,
-        height: "100vh",
+        height: "100%",
         zIndex: 998,
         position: "fixed",
         left: 0,

package/lib/components/wallet/DiscountCard/index.less

@@ -1,11 +1,10 @@
 .wallet-discountCard-title {
   color: var(--Gray-900, #101828);
-
-  /* Text xl/Semibold */
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
-  line-height: 30px; /* 150% */
-  margin: 20px 0;
+  line-height: 30px;
+  margin-top: 20px;
+  margin-bottom: 24px;
 }

package/lib/components/wallet/PointCard/index.js

@@ -170,7 +170,7 @@ var RechargeableCard = (0, import_model.Provider)((props) => {
       modalWrapStyle: {
         overflowY: "auto",
         top: 68,
-        height: "calc(100vh - 68px)",
+        height: "calc(100% - 68px)",
         zIndex: 998
       },
       pcDetailModalDisplay: platform === "h5" ? true : false,

package/lib/components/wallet/PointCard/index.less

@@ -1,11 +1,10 @@
 .wallet-pointCard-title {
   color: var(--Gray-900, #101828);
-
-  /* Text xl/Semibold */
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
   font-weight: 600;
-  line-height: 30px; /* 150% */
-  margin: 20px 0;
+  line-height: 30px;
+  margin-top: 20px;
+  margin-bottom: 24px;
 }