@fonixtree/magic-design 0.0.71 → 0.0.72

package/es/composite-comp/bol/components/Carousel/defaultJSON.js

@@ -7,6 +7,10 @@ exports.imagesGroupSourceJSON = exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
+var _defaultImg = _interopRequireDefault(require("./imgs/defaultImg.png"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
   var groupId = (0, _uuid.v4)();
   return {
@@ -20,8 +24,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       content: {
         h5Name: 'h5Name',
         pcName: 'pcName',
-        h5ImgSrc: '',
-        pcImgSrc: '',
+        h5ImgSrc: _defaultImg["default"],
+        pcImgSrc: _defaultImg["default"],
         clickUrl: ''
       },
       hover: {
@@ -40,7 +44,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       specialContent: [],
       text: 'Title of this group',
       content: {
-        sizeType: 'Customize font styles',
+        sizeType: 'Headline 1',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 16,
@@ -63,7 +67,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       specialContent: [],
       text: 'Please enter a description',
       content: {
-        sizeType: 'Customize font styles',
+        sizeType: 'Headline 1',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 14,
@@ -82,8 +86,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       content: {
         h5Name: '',
         pcName: '',
-        h5ImgSrc: '',
-        pcImgSrc: '',
+        h5ImgSrc: _defaultImg["default"],
+        pcImgSrc: _defaultImg["default"],
         clickUrl: ''
       },
       hover: {
@@ -105,7 +109,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
         backgroundColor: '#E6EAF0'
       },
       buttonText: {
-        sizeType: 'Customize font styles',
+        // sizeType: 'Headline 1',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 14,
@@ -141,7 +145,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
           backgroundColor: '#E6EAF0'
         },
         buttonText: {
-          sizeType: 'Customize font styles',
+          // sizeType: 'Headline 1',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -170,7 +174,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
         backgroundColor: '#E6EAF0'
       },
       buttonText: {
-        sizeType: 'Customize font styles',
+        // sizeType: 'Headline 1',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 14,
@@ -206,7 +210,7 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
           backgroundColor: '#E6EAF0'
         },
         buttonText: {
-          sizeType: 'Customize font styles',
+          // sizeType: 'Headline 1',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -262,12 +266,12 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: window.magicDesign.compSpacing * 1.5
+        marginBottom: 0
       },
       mobile: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: window.magicDesign.compSpacing
+        marginBottom: 0
       }
     },
     customize: {

package/es/composite-comp/bol/components/Carousel/index.js

@@ -15,6 +15,8 @@ var _defaultJSON = require("./defaultJSON");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _businessUtil = require("../../../../utils/businessUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -70,7 +72,10 @@ function (_super) {
 
   Carousel.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+    var wrapStyle = (0, _businessUtil.computeStyle)(nodeData, window.magicDesign.device);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: wrapStyle
+    }, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData

package/es/composite-comp/bol/components/Carousel/mobile/index.js

@@ -177,15 +177,18 @@ function (_super) {
       autoplay: data.setting.autoplay.open,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       speed: 500,
-      draggable: window.magicDesign.mode === 'renderer',
       slidesToShow: colNum,
-      slidesToScroll: 1,
+      slidesToScroll: colNum,
       beforeChange: function beforeChange(oldIndex, newIndex) {
         _this.setState({
           sliderIndex: newIndex
         });
       }
-    };
+    }; // const navStyle = {
+    //   fontSize: data.setting.navigation.size,
+    //   color: data.setting.navigation.color,
+    // };
+
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-mobile",
       style: bgStyle
@@ -222,7 +225,7 @@ function (_super) {
       }), item.secondButtonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.secondButtonTag
       }))));
-    })), data.setting.dots.open && Math.ceil(data.groupSource.length / colNum) > 1 && /*#__PURE__*/_react["default"].createElement("div", {
+    })), data.setting.dots.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "swiper-ban"
     }, data.groupSource.length > 1 && data.groupSource.map(function (item, i) {
       return /*#__PURE__*/_react["default"].createElement("div", {

package/es/composite-comp/bol/components/Carousel/pc/index.js

@@ -153,6 +153,8 @@ function (_super) {
       };
     }
 
+    var spacing = data.spacing[window.magicDesign.device];
+    if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
     var settings = {
       className: 'slider-wrap',
       arrows: false,
@@ -160,9 +162,8 @@ function (_super) {
       autoplay: data.setting.autoplay.open,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       speed: 500,
-      draggable: window.magicDesign.mode === 'renderer',
       slidesToShow: colNum,
-      slidesToScroll: 1,
+      slidesToScroll: colNum,
       beforeChange: function beforeChange(oldIndex, newIndex) {
         _this.setState({
           sliderIndex: newIndex
@@ -173,12 +174,9 @@ function (_super) {
       fontSize: data.setting.navigation.size,
       color: data.setting.navigation.color
     };
-    var spacing = data.spacing[window.magicDesign.device];
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-pc",
       style: bgStyle
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "content"
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
       onClick: function onClick() {
@@ -188,11 +186,7 @@ function (_super) {
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-left"
-    }), /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        width: spacing.contentWidth || 'calc(100% - 52px)'
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
+    }), /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {
         return _this.sliderRef = slider;
       }
@@ -204,6 +198,7 @@ function (_super) {
         className: "img"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
+        isBackground: true,
         maxHeight: PC_IMG_SIZE[colNum - 1].maxH,
         maxWidth: PC_IMG_SIZE[colNum - 1].maxW,
         minWidth: PC_IMG_SIZE[colNum - 1].minW
@@ -225,7 +220,7 @@ function (_super) {
       }), item.secondButtonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.secondButtonTag
       }))));
-    }))), data.setting.dots.open && Math.ceil(data.groupSource.length / colNum) > 1 && /*#__PURE__*/_react["default"].createElement("div", {
+    })), data.setting.dots.open && /*#__PURE__*/_react["default"].createElement("div", {
       className: "swiper-ban"
     }, data.groupSource.length > 1 && data.groupSource.map(function (item, i) {
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -250,7 +245,7 @@ function (_super) {
       onMouseLeave: this.mouseLeaveBtn,
       style: navStyle,
       type: "icon-right"
-    })));
+    }));
   };
 
   CarouselPc.defaultProps = {

package/es/composite-comp/bol/components/Carousel/pc/index.less

@@ -1,26 +1,20 @@
 .m-carousel-pc {
+  display: flex;
   position: relative;
-  overflow-x: auto;
-  width: 100%;
-
-  .content {
-    display: flex;
-    width: fit-content;
-    margin: 0 auto;
-  }
+  margin: 0 auto;
 
   .carousel-icon-left {
     float: left;
-    margin-left: 10px;
+    margin-left: 50px;
   }
 
   .carousel-icon-right {
     float: right;
-    margin-right: 10px;
+    margin-right: 50px;
   }
 
   .slider-wrap {
-    width: 100%;
+    width: calc(100% - 200px);
     padding: 30px 0;
     margin: 0 auto;
 
@@ -71,8 +65,6 @@
     position: absolute;
     width: 100%;
     bottom: 0;
-    left: 0;
-    right: 0;
     display: flex;
     align-items: center;
     justify-content: center;

package/es/composite-comp/bol/components/ImageGallery/defaultJSON.js

@@ -50,12 +50,12 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: window.magicDesign.compSpacing * 1.5
+        marginBottom: 0
       },
       mobile: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: window.magicDesign.compSpacing
+        marginBottom: 0
       }
     },
     customize: {

package/es/composite-comp/bol/components/ImageText/defaultJSON.js

@@ -9,16 +9,11 @@ var _uuid = require("uuid");
 
 var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
   var groupId = (0, _uuid.v4)();
-  var imageId = (0, _uuid.v4)();
-  var titleId = (0, _uuid.v4)();
-  var textId = (0, _uuid.v4)();
-  var buttonId = (0, _uuid.v4)();
-  var secButtonId = (0, _uuid.v4)();
   return {
     id: groupId,
     image: {
       parentId: groupId,
-      id: imageId,
+      id: (0, _uuid.v4)(),
       open: false,
       type: 'IMAGE',
       content: {
@@ -38,13 +33,13 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
     },
     title: {
       parentId: groupId,
-      id: titleId,
+      id: (0, _uuid.v4)(),
       open: true,
       type: 'TEXT',
       specialContent: [],
       text: 'Title of this group',
       content: {
-        sizeType: 'Customize font styles',
+        sizeType: 'Headline 1',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 12,
@@ -60,13 +55,13 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
     },
     text: {
       parentId: groupId,
-      id: textId,
+      id: (0, _uuid.v4)(),
       open: true,
       type: 'TEXT',
       specialContent: [],
       text: 'Please enter a description',
       content: {
-        sizeType: 'Customize font styles',
+        sizeType: 'Headline 1',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 10,
@@ -78,7 +73,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
     },
     button: {
       parentId: groupId,
-      id: buttonId,
+      id: (0, _uuid.v4)(),
       open: true,
       type: 'BUTTON',
       text: 'Button',
@@ -87,7 +82,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         backgroundColor: '#2F54EB'
       },
       buttonText: {
-        sizeType: 'Customize font styles',
+        sizeType: 'Headline 1',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 10,
@@ -109,7 +104,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
           backgroundColor: '#0d39ed'
         },
         buttonText: {
-          sizeType: 'Customize font styles',
+          sizeType: 'Headline 1',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -133,7 +128,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
     },
     secondButton: {
       parentId: groupId,
-      id: secButtonId,
+      id: (0, _uuid.v4)(),
       open: true,
       type: 'BUTTON',
       text: 'More',
@@ -142,7 +137,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         backgroundColor: '#fff'
       },
       buttonText: {
-        sizeType: 'Customize font styles',
+        sizeType: 'Headline 1',
         fontFamily: 'Open Sans',
         fontWeight: 400,
         fontSize: 10,
@@ -164,7 +159,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
           backgroundColor: '#E9F0FF'
         },
         buttonText: {
-          sizeType: 'Customize font styles',
+          sizeType: 'Headline 1',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -196,7 +191,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
       open: false,
       image: {
         parentId: groupId,
-        id: imageId,
+        id: (0, _uuid.v4)(),
         open: false,
         type: 'IMAGE',
         content: {
@@ -216,7 +211,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
       },
       title: {
         parentId: groupId,
-        id: titleId,
+        id: (0, _uuid.v4)(),
         open: true,
         type: 'TEXT',
         specialContent: [],
@@ -236,13 +231,13 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         vertical: {}
       },
       text: {
-        id: textId,
+        id: (0, _uuid.v4)(),
         open: true,
         type: 'TEXT',
         specialContent: [],
         text: '',
         content: {
-          sizeType: 'Customize font styles',
+          sizeType: 'Headline 1',
           fontFamily: 'Open Sans',
           fontWeight: 400,
           fontSize: 18,
@@ -253,7 +248,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         vertical: {}
       },
       button: {
-        id: buttonId,
+        id: (0, _uuid.v4)(),
         open: true,
         type: 'BUTTON',
         text: 'Button',
@@ -262,7 +257,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
           backgroundColor: '#2F54EB'
         },
         buttonText: {
-          sizeType: 'Customize font styles',
+          sizeType: 'Headline 1',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -284,7 +279,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
             backgroundColor: '#0d39ed'
           },
           buttonText: {
-            sizeType: 'Customize font styles',
+            sizeType: 'Headline 1',
             fontFamily: 'Open Sans',
             fontWeight: 600,
             fontSize: 14,
@@ -303,7 +298,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
         }
       },
       secondButton: {
-        id: secButtonId,
+        id: (0, _uuid.v4)(),
         open: true,
         type: 'BUTTON',
         text: 'More',
@@ -312,7 +307,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
           backgroundColor: '#fff'
         },
         buttonText: {
-          sizeType: 'Customize font styles',
+          sizeType: 'Headline 1',
           fontFamily: 'Open Sans',
           fontWeight: 600,
           fontSize: 14,
@@ -334,7 +329,7 @@ var ImageTextGroupSourceJSON = function ImageTextGroupSourceJSON() {
             backgroundColor: '#E9F0FF'
           },
           buttonText: {
-            sizeType: 'Customize font styles',
+            sizeType: 'Headline 1',
             fontFamily: 'Open Sans',
             fontWeight: 600,
             fontSize: 14,
@@ -368,6 +363,151 @@ var getDefaultJSON = function getDefaultJSON() {
   return {
     id: (0, _uuid.v4)(),
     type: 'IMAGE_TEXT',
+    // headline: {
+    //   id: uuidv4(),
+    //   open: true,
+    //   type: 'TEXT',
+    //   specialContent: [],
+    //   text: 'Digital Maturity',
+    //   content: {
+    //     sizeType: 'Headline 1',
+    //     fontFamily: 'Open Sans',
+    //     fontWeight: 600,
+    //     fontSize: 28,
+    //     color: '#232F46',
+    //     width: 0,
+    //   },
+    //   underline: {
+    //     open: false,
+    //     textDecorationColor: '',
+    //     textDecorationStyle: 'solid',
+    //   },
+    //   vertical: {
+    //   },
+    // },
+    // subtitle: {
+    //   id: uuidv4(),
+    //   open: true,
+    //   type: 'TEXT',
+    //   specialContent: [],
+    //   text: 'Freedom to innovate and create with ODA compliant B/OSS solutions',
+    //   content: {
+    //     sizeType: 'Headline 1',
+    //     fontFamily: 'Open Sans',
+    //     fontWeight: 400,
+    //     // textAlign: 'center',
+    //     fontSize: 16,
+    //     color: '#232F46',
+    //     width: 0,
+    //   },
+    //   underline: {
+    //     open: false,
+    //     textDecorationColor: '',
+    //     textDecorationStyle: 'solid',
+    //   },
+    //   vertical: {
+    //   },
+    // },
+    // button: {
+    //   id: uuidv4(),
+    //   open: true,
+    //   type: 'BUTTON',
+    //   text: 'Button',
+    //   content: {
+    //     url: '',
+    //     backgroundColor: '#2F54EB',
+    //   },
+    //   buttonText: {
+    //     sizeType: 'Headline 1',
+    //     fontFamily: 'Open Sans',
+    //     fontWeight: 600,
+    //     fontSize: 14,
+    //     fontStyle: 'normal',
+    //     color: '#fff',
+    //   },
+    //   buttonBorder: {
+    //     open: true,
+    //     borderColor: '',
+    //     borderRadius: 6,
+    //   },
+    //   buttonIcon: {
+    //     iconUrl: '',
+    //     layout: 'right',
+    //   },
+    //   hover: {
+    //     open: false,
+    //     content: {
+    //       backgroundColor: '#0d39ed',
+    //     },
+    //     buttonText: {
+    //       sizeType: 'Headline 1',
+    //       fontFamily: 'Open Sans',
+    //       fontWeight: 600,
+    //       fontSize: 14,
+    //       fontStyle: 'normal',
+    //       color: '#fff',
+    //     },
+    //     buttonBorder: {
+    //       open: true,
+    //       borderColor: '',
+    //       borderRadius: 6,
+    //     },
+    //     buttonIcon: {
+    //       iconUrl: '',
+    //       layout: 'right',
+    //     },
+    //   },
+    // },
+    // secondButton: {
+    //   id: uuidv4(),
+    //   open: false,
+    //   type: 'BUTTON',
+    //   text: 'Button',
+    //   content: {
+    //     url: '',
+    //     backgroundColor: '#FFFFFF',
+    //   },
+    //   buttonText: {
+    //     sizeType: 'Headline 1',
+    //     fontFamily: 'Open Sans',
+    //     fontWeight: 600,
+    //     fontSize: 14,
+    //     fontStyle: 'normal',
+    //     color: '#2F54EB',
+    //   },
+    //   buttonBorder: {
+    //     open: true,
+    //     borderColor: '#2F54EB',
+    //     borderRadius: 6,
+    //   },
+    //   buttonIcon: {
+    //     iconUrl: '',
+    //     layout: 'right',
+    //   },
+    //   hover: {
+    //     open: false,
+    //     content: {
+    //       backgroundColor: '#0d39ed',
+    //     },
+    //     buttonText: {
+    //       sizeType: 'Headline 1',
+    //       fontFamily: 'Open Sans',
+    //       fontWeight: 600,
+    //       fontSize: 14,
+    //       fontStyle: 'normal',
+    //       color: '#fff',
+    //     },
+    //     buttonBorder: {
+    //       open: true,
+    //       borderColor: '',
+    //       borderRadius: 6,
+    //     },
+    //     buttonIcon: {
+    //       iconUrl: '',
+    //       layout: 'right',
+    //     },
+    //   },
+    // },
     spacing: {
       pc: {
         paddingTop: 10,

package/es/composite-comp/bol/components/ImageText/mobile/index.js

@@ -15,6 +15,8 @@ var _AlignSelector = require("../../../../../common/AlignSelector");
 
 var _components = require("../../../../../meta-comp/components");
 
+var _businessUtil = require("../../../../../utils/businessUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -102,9 +104,10 @@ function (_super) {
   ImageTextMobile.prototype.render = function () {
     var _this = this;
 
-    var data = this.props.data; // console.log('----imagetext mobile', data);
+    var data = this.props.data; // const { ready } = this.state;
+    // console.log('----imagetext mobile', data);
 
-    var wrapStyle = {};
+    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
     wrapStyle.textAlign = data.customize.align; // if (data.background.bgType === 'color') {
     //   wrapStyle.backgroundColor = data.background.color;
     //   wrapStyle.opacity = data.background.opacity ? data.background.opacity : 1;

package/es/composite-comp/bol/components/ImageText/mobile/index.less

@@ -59,8 +59,8 @@
         }
         .card-btn-wrap {
           display: flex;
-          .card-second-btn {
-            margin-left: 12px;
+          .card-first-btn {
+            margin-right: 12px;
           }
         }
       }
@@ -94,8 +94,8 @@
         }
         .card-btn-wrap {
           display: flex;
-          .card-second-btn {
-            margin-left: 12px;
+          .card-first-btn {
+            margin-right: 12px;
           }
         }
       }
@@ -135,8 +135,8 @@
         flex-direction: column;
       }
 
-      .card-first-btn, .card-second-btn {
-        margin-bottom: 8px;
+      .card-second-btn {
+        margin-top: 8px;
       }
     }
     .card-margin-bottom {
@@ -170,8 +170,8 @@
         }
         .card-btn-wrap {
           display: flex;
-          .card-second-btn {
-            margin-left: 12px;
+          .card-first-btn {
+            margin-right: 12px;
           }
         }
       }