Реорганизованы стили попапов

src/components/contact/ContactForm.jsx

@@ -38,6 +38,7 @@ class ContactForm extends Component {
 
         return (
             <div className={styles.contactForm}>
+                <div className={popupStyles.popup}>
                     <div className={popupStyles.header}>
                         <h2 className={popupStyles.headerTitle}>
                             <Message {...messages.title} />
@@ -94,6 +95,7 @@ class ContactForm extends Component {
                         </div>
                     </Form>
                 </div>
+            </div>
         );
     }
 

src/components/contact/contactForm.scss

@@ -3,6 +3,9 @@
 @import '~components/ui/popup/popup.scss';
 
 .contactForm {
+    composes: popupWrapper from 'components/ui/popup/popup.scss';
+
+    @include popupBounding(500px);
 }
 
 .philosophicalThought {

src/components/profile/passwordRequestForm/PasswordRequestForm.jsx

@@ -22,6 +22,8 @@ export default class PasswordRequestForm extends Component {
         const {form} = this.props;
 
         return (
+            <div className={styles.requestPasswordForm}>
+                <div className={popupStyles.popup}>
                     <Form onSubmit={this.onFormSubmit}
                         form={form}
                     >
@@ -54,6 +56,8 @@ export default class PasswordRequestForm extends Component {
                             type="submit"
                         />
                     </Form>
+                </div>
+            </div>
         );
     }
 

src/components/profile/passwordRequestForm/passwordRequestForm.scss

@@ -1,3 +1,11 @@
+@import '~components/ui/popup/popup.scss';
+
+.requestPasswordForm {
+    composes: popupWrapper from 'components/ui/popup/popup.scss';
+
+    @include popupBounding(280px);
+}
+
 .body {
     text-align: center;
 }

src/components/ui/popup/PopupStack.jsx

@@ -41,12 +41,8 @@ export class PopupStack extends Component {
 
                     return (
                         <div className={styles.overlay} key={index} onClick={this.onOverlayClick(popup, props)}>
-                            <div className={styles.popupWrapper}>
-                                <div className={styles.popup}>
                             <Popup {...props} />
                         </div>
-                            </div>
-                        </div>
                     );
                 })}
             </ReactCSSTransitionGroup>

src/components/ui/popup/popup.scss

@@ -1,7 +1,21 @@
 @import '~components/ui/colors.scss';
 @import '~components/ui/fonts.scss';
 
-$popupPadding: 20px;
+$popupPadding: 20px; // Отступ контента внутри попапа
+$popupMargin: 20px; // Отступ попапа от краёв окна
+
+@mixin popupBounding($width, $padding: null) {
+    @if ($padding == null) {
+        $padding: $popupMargin;
+    }
+
+    @if ($padding != $popupMargin) {
+        margin: $padding auto;
+        padding: 0 $padding;
+    }
+
+    max-width: $width;
+}
 
 .overlay {
     position: fixed;
@@ -32,15 +46,12 @@ $popupPadding: 20px;
 }
 
 .popupWrapper {
-    $padding: 20px;
+    box-sizing: content-box;
-    $maxPopupWidth: 500px;
+    margin: $popupMargin auto;
+    padding: 0 $popupMargin;
 
     display: inline-block;
     width: 100%;
-    max-width: $maxPopupWidth + $padding * 2;
-    box-sizing: border-box;
-    margin: $padding auto;
-    padding: 0 $padding;
     vertical-align: middle;
 }