Web: Files: Fixed styles of modal and aside dialogues.

# Conflicts:
#	packages/asc-web-components/modal-dialog/index.js

packages/asc-web-components/modal-dialog/index.js

@@ -100,7 +100,8 @@ class ModalDialog extends React.Component {
       scale,
       onClose,
       zIndex,
-      bodyPadding,
+      asideBodyPadding,
+      modalBodyPadding,
       contentHeight,
       contentWidth,
       className,
@@ -149,7 +150,11 @@ class ModalDialog extends React.Component {
             id={id}
             style={style}
           >
-            <Content contentHeight={contentHeight} contentWidth={contentWidth}>
+            <Content
+              contentHeight={contentHeight}
+              contentWidth={contentWidth}
+              displayType={this.state.displayType}
+            >
               {isLoading ? (
                 <Loaders.DialogLoader bodyHeight={modalDialogHeight} />
               ) : (
@@ -160,7 +165,7 @@ class ModalDialog extends React.Component {
                     </Heading>
                     <CloseButton onClick={onClose}></CloseButton>
                   </StyledHeader>
-                  <BodyBox paddingProp={bodyPadding}>
+                  <BodyBox paddingProp={modalBodyPadding}>
                     {body ? body.props.children : null}
                   </BodyBox>
                   <Box>{footer ? footer.props.children : null}</Box>
@@ -189,6 +194,7 @@ class ModalDialog extends React.Component {
               contentHeight={contentHeight}
               contentWidth={contentWidth}
               removeScroll={removeScroll}
+              displayType={this.state.displayType}
             >
               {isLoading ? (
                 <Loaders.DialogAsideLoader withoutAside />
@@ -202,7 +208,7 @@ class ModalDialog extends React.Component {
                   </StyledHeader>
                   <BodyBox
                     className="modal-dialog-aside-body"
-                    paddingProp={bodyPadding}
+                    paddingProp={asideBodyPadding}
                     removeScroll={removeScroll}
                   >
                     {body ? body.props.children : null}
@@ -238,7 +244,8 @@ ModalDialog.propTypes = {
   /** CSS z-index */
   zIndex: PropTypes.number,
   /** CSS padding props for body section */
-  bodyPadding: PropTypes.string,
+  asideBodyPadding: PropTypes.string,
+  modalBodyPadding: PropTypes.string,
   contentHeight: PropTypes.string,
   contentWidth: PropTypes.string,
   isLoading: PropTypes.bool,
@@ -247,13 +254,14 @@ ModalDialog.propTypes = {
   id: PropTypes.string,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   contentPaddingBottom: PropTypes.string,
-  modalDialogHeight: PropTypes.string,
+  modalLoaderBodyHeight: PropTypes.string,
 };
 
 ModalDialog.defaultProps = {
   displayType: "auto",
   zIndex: 310,
-  bodyPadding: "16px 0",
+  asideBodyPadding: "16px 0",
+  modalBodyPadding: "12px 0",
   contentWidth: "100%",
 };
 

packages/asc-web-components/modal-dialog/styled-modal-dialog.js

@@ -24,15 +24,24 @@ const Content = styled.div`
   width: ${(props) => props.contentWidth};
   background-color: ${(props) =>
     props.theme.modalDialog.content.backgroundColor};
-  padding: ${(props) => props.theme.modalDialog.content.padding};
+  padding: ${(props) =>
+    props.displayType === "modal"
+      ? props.theme.modalDialog.content.modalPadding
+      : props.theme.modalDialog.content.asidePadding};
 
   .heading {
     max-width: ${(props) => props.theme.modalDialog.content.heading.maxWidth};
     margin: ${(props) => props.theme.modalDialog.content.heading.margin};
     line-height: ${(props) =>
-      props.theme.modalDialog.content.heading.lineHeight};
+      props.displayType === "modal"
+        ? props.theme.modalDialog.content.heading.modalLineHeight
+        : props.theme.modalDialog.content.heading.asideLineHeight};
     font-weight: ${(props) =>
       props.theme.modalDialog.content.heading.fontWeight};
+    font-size: ${(props) =>
+      props.displayType === "modal"
+        ? props.theme.modalDialog.content.heading.modalFontSize
+        : props.theme.modalDialog.content.heading.asideFontSize};
   }
 
   ${(props) =>

packages/asc-web-components/themes/base.js

@@ -491,13 +491,16 @@ const Base = {
 
     content: {
       backgroundColor: white,
-      padding: "0 16px 16px",
-
+      modalPadding: "0 12px 12px",
+      asidePadding: "0 16px 16px",
       heading: {
         maxWidth: "500px",
         margin: "0",
-        lineHeight: "56px",
+        modalLineHeight: "40px",
+        asideLineHeight: "56px",
         fontWeight: "700",
+        asideFontSize: "21px",
+        modalFontSize: "18px",
       },
     },
 
@@ -512,7 +515,7 @@ const Base = {
       minHeight: "17px",
 
       right: "16px",
-      top: "19px",
+      top: "11px",
       hoverColor: grayMain,
     },
   },