From 9cff7e8b3c59f99ec6e0813532ac847277d35849 Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Tue, 11 Jan 2022 13:20:58 +0300
Subject: [PATCH 01/13] fix: header layout

---
 packages/apps/src/apps.scss | 137 ++++++++++++++++--------------------
 1 file changed, 61 insertions(+), 76 deletions(-)

diff --git a/packages/apps/src/apps.scss b/packages/apps/src/apps.scss
index 05091dfd..6bf55396 100644
--- a/packages/apps/src/apps.scss
+++ b/packages/apps/src/apps.scss
@@ -36,12 +36,11 @@
         background-color: transparent;
         padding: 0;
         width: auto;
+        height: 64px;
         margin-right: calc((var(--gap) / 2) * 3);
 
         img {
-          width: auto;
-          max-width: 130px;
-          height: 50px;
+          width: 100%;
         }
       }
     }
@@ -49,7 +48,7 @@
 }
 
 .user-icon {
-  display: none; 
+  display: none;
 }
 
 .mark {
@@ -86,13 +85,11 @@
           padding-right: 10.25px;
           display: flex;
           align-items: center;
-          margin-bottom: 3px;
         }
 
         &:hover {
-          .item-icon{
-
-            svg{
+          .item-icon {
+            svg {
               fill: var(--button-color);
             }
           }
@@ -121,7 +118,7 @@
   .account-selector-block {
     max-width: 500px;
 
-    .address{
+    .address {
       text-align: left;
     }
   }
@@ -149,6 +146,7 @@
     justify-content: space-between;
     align-items: center;
     max-width: var(--max-header-width);
+    height: 64px;
   }
 }
 
@@ -159,7 +157,6 @@
 }
 
 .manage-balances {
-
   &.popup {
     position: absolute;
     display: none;
@@ -216,7 +213,7 @@
     }
   }
 
-  .popup-link{
+  .popup-link {
     & a {
       cursor: pointer;
       color: var(--button-color);
@@ -315,8 +312,7 @@
     height: 16px;
     color: var(--link-color);
     display: inline-block;
-    background: url("../../react-components/src/AccountButtonGroup/images/warning-alert.svg")
-      no-repeat;
+    background: url("../../react-components/src/AccountButtonGroup/images/warning-alert.svg") no-repeat;
     background-size: contain;
   }
 }
@@ -352,6 +348,11 @@
 .menu-mobile-header {
   .menu-icon {
     cursor: pointer;
+    height: 32px;
+  }
+
+  .icon {
+    height: 100%;
   }
 }
 
@@ -362,7 +363,7 @@
 
   a.create-account-btn {
     padding: 8px 24px;
-    border:1px solid var(--button-color);
+    border: 1px solid var(--button-color);
     border-radius: 4px !important;
     color: var(--link-color);
     font-family: var(--font-roboto);
@@ -372,17 +373,17 @@
 
     &:hover {
       background-color: var(--button-background-hover);
-      color: var(--link-color)!important;
+      color: var(--link-color) !important;
     }
 
-    &.active{
+    &.active {
       pointer-events: none;
       border-color: var(--button-background-disabled-border);
-      color:var(--button-background-disabled);
+      color: var(--button-background-disabled);
       background: transparent;
     }
 
-    &:before{
+    &:before {
       display: none;
     }
   }
@@ -418,24 +419,6 @@
   }
 }
 
-@media (min-width: 1441px) {
-}
-
-@media (max-width: 1440px) {
-}
-
-/* @media (min-width: 1025px) {
-  .app-header {
-    .app-user {
-      .account-selector-block {
-        .mobile-account-selector {
-          display: none;
-        }
-      }
-    }
-  }
-} */
-
 @media (max-width: 1279px) {
   .app-header {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
@@ -449,6 +432,7 @@
       display: flex;
       align-items: center;
       grid-column-gap: var(--gap);
+      height: 100%;
     }
 
     .app-user {
@@ -494,9 +478,26 @@
       text-align: center;
       margin-bottom: var(--gap);
     }
+
+    &--link {
+      display: block;
+      width: 100%;
+      font-family: var(--font-roboto);
+      font-weight: 500;
+      font-size: 16px;
+      margin: 4px 0;
+      padding: 8px 16px;
+      color: var(--header-text-color);
+
+      &.active {
+        background-color: var(--link-color);
+        border-radius: 4px;
+        color: var(--card-background);
+      }
+    }
   }
 
-  .app-main  {
+  .app-main {
     &.menu {
       display: none;
     }
@@ -511,6 +512,8 @@
 
     .ui.tabular.header-menu.menu {
       display: inline-flex;
+      align-items: center;
+      height: 64px;
     }
 
     .app-user {
@@ -541,7 +544,7 @@
       padding: 0;
     }
 
-    &.page-no-found{
+    &.page-no-found {
       background-color: var(--bg-page);
     }
   }
@@ -550,7 +553,8 @@
     width: 25%;
   }
 
-  .menu-mobile, .manage-accounts {
+  .menu-mobile,
+  .manage-accounts {
     margin-top: 84px;
   }
 
@@ -568,6 +572,12 @@
     }
   }
 
+  .app-logo {
+    img{
+      height: 100%;
+    }
+  }
+
   .app-user {
     display: block !important;
 
@@ -575,6 +585,13 @@
       display: none;
     }
   }
+
+  .app-container {
+    &--header {
+      height: 48px;
+    }
+  }
+
   .menu-mobile-header {
     display: block;
   }
@@ -605,7 +622,7 @@
   }
 
   .user-icon {
-    display: block; 
+    display: block;
   }
 
   .menu-arrow {
@@ -617,7 +634,6 @@
       display: none;
     }
   }
-
 }
 
 .manage-accounts {
@@ -636,7 +652,7 @@
     background-color: var(--white-color);
     z-index: 999;
 
-    a{
+    a {
       border-bottom: 1px solid var(--border-color);
       display: block;
       width: 100%;
@@ -678,7 +694,7 @@
           font-family: var(--font-roboto);
           font-weight: 500;
 
-          div{
+          div {
             max-width: 300px;
             white-space: nowrap;
             overflow: hidden;
@@ -717,11 +733,11 @@
   }
 }
 
-.ui.popup.attributes{
+.ui.popup.attributes {
   left: -12px !important;
 }
 
-.ui.top.popup.help{
+.ui.top.popup.help {
   top: 10px !important;
 }
 
@@ -743,34 +759,3 @@
     border: 1px solid var(--input-background-color);
   }
 }
-
-@media (max-width: 1279px) {
-  .menu-mobile {
-    padding: var(--gap);
-    display: flex;
-    flex-direction: column;
-    background-color: var(--card-background);
-
-    &--logo {
-      text-align: center;
-      margin-bottom: var(--gap);
-    }
-
-    &--link {
-      display: block;
-      width: 100%;
-      font-family: var(--font-roboto);
-      font-weight: 500;
-      font-size: 16px;
-      margin: 4px 0;
-      padding: 8px 16px;
-      color: var(--header-text-color);
-
-      &.active {
-        background-color: var(--link-color);
-        border-radius: 4px;
-        color: var(--card-background);
-      }
-    }
-  }
-}

From 6dcc5a90e2dad566334d27e4952285a3197a436e Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Tue, 11 Jan 2022 14:46:26 +0300
Subject: [PATCH 02/13] NFTPAR-1071 decrease mobile-heading

---
 packages/apps/styles/global.scss              | 30 +++++++++----------
 .../components/MainInformation/styles.scss    | 22 ++++++++++----
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/packages/apps/styles/global.scss b/packages/apps/styles/global.scss
index 3f3f8e22..27cb2bc2 100644
--- a/packages/apps/styles/global.scss
+++ b/packages/apps/styles/global.scss
@@ -24,7 +24,7 @@ body {
 .ui.popup {
   background: var(--bg-page) !important;
 
-  a{
+  a {
     color: unset;
     cursor: pointer;
     text-decoration: underline;
@@ -88,7 +88,7 @@ h1.ui.header {
 }
 
 h2.ui.header {
-  font: 700 28px/38px var(--font-inter);
+  font: 700 28px/42px var(--font-inter);
   color: var(--title-color);
   margin-bottom: calc(var(--gap) / 2);
 }
@@ -198,7 +198,7 @@ h4.ui.header {
     height: 48px;
 
     & .menu > .item {
-      padding: 8px calc( (var(--gap) / 2) * 5) !important;
+      padding: 8px calc((var(--gap) / 2) * 5) !important;
     }
   }
 
@@ -247,11 +247,11 @@ h4.ui.header {
   color: var(--text-color);
 
   &:after {
-    left: calc(50% - 12px);;
+    left: calc(50% - 12px);
   }
 
   &:before {
-    left: calc(50% - 12px);;
+    left: calc(50% - 12px);
   }
 
   .load-more {
@@ -412,7 +412,9 @@ form {
   padding: 1rem var(--gap);
 }
 
-button.ui.button, .button-link, .ui--Button {
+button.ui.button,
+.button-link,
+.ui--Button {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -621,10 +623,10 @@ button.ui.button, .button-link, .ui--Button {
   border-radius: 4px;
   padding: 32px;
 
-  &.empty{
+  &.empty {
     height: 100%;
     display: flex;
-    flex-direction:column;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
   }
@@ -657,7 +659,6 @@ button.ui.button, .button-link, .ui--Button {
 
 .ui--Labelled {
   .ui.input.ui--Input {
-
     &.left {
       input {
         padding-right: 4rem !important;
@@ -702,15 +703,14 @@ button.ui.button, .button-link, .ui--Button {
   padding: 8px 10.25px;
   margin: 0 !important;
 
-  img{
+  img {
     margin-right: 10.25px;
   }
 
   div {
-
     p {
       margin: 0;
-      color:var(--modal-warning-text-color);
+      color: var(--modal-warning-text-color);
       font-family: var(--font-roboto);
       padding: 0.3rem 1.5rem 0 0 !important;
     }
@@ -761,6 +761,8 @@ button.ui.button, .button-link, .ui--Button {
 
 @media (max-width: 1023px) {
   h1.ui.header {
+    font-size: 28px;
+    line-height: 42px;
     margin-top: calc(var(--gap) * 1.5) !important;
     padding: 0 var(--gap);
   }
@@ -771,7 +773,6 @@ button.ui.button, .button-link, .ui--Button {
   }
 
   .ui.page.modals {
-
     .ui--Modal.modal {
       .ui--Row-address {
         font-size: 14px !important;
@@ -779,13 +780,12 @@ button.ui.button, .button-link, .ui--Button {
       }
 
       .content {
-
         .TextAreaWithDropdown {
           flex-direction: column;
 
           .ui--CopyButton.copyMoved {
             right: 13px;
-            top: 13px
+            top: 13px;
           }
 
           .ui.buttons {
diff --git a/packages/page-builder/src/components/MainInformation/styles.scss b/packages/page-builder/src/components/MainInformation/styles.scss
index f647ec74..4f3644e2 100644
--- a/packages/page-builder/src/components/MainInformation/styles.scss
+++ b/packages/page-builder/src/components/MainInformation/styles.scss
@@ -1,18 +1,18 @@
-.main-information{
+.main-information {
   background-color: var(--white-color);
   font-family: var(--font-roboto);
 
-  .header-text{
+  .header-text {
     font-family: var(--font-inter);
     font-weight: bold;
     font-size: 28px;
     line-height: 42px;
   }
 
-  .info-block{
+  .info-block {
     margin-top: calc(var(--gap) * 2);
 
-    h2{
+    h2 {
       color: var(--title-color);
       font-family: var(--font-roboto);
       font-weight: 500;
@@ -31,15 +31,25 @@
   }
 }
 
+@media (max-width: 1023px) {
+  .main-information {
+    .header-text {
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+}
+
 @media (max-width: 767px) {
-  .main-information{
+  .main-information {
     box-shadow: none;
     padding: var(--gap);
   }
 }
 
 @media (max-width: 320px) {
-  .main-information{
+  .main-information {
     box-shadow: none;
     padding: var(--gap);
   }

From 8202fe6af9c956d20a15a17d0f84bb82295add0c Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Wed, 12 Jan 2022 10:28:19 +0300
Subject: [PATCH 03/13] bug-NFTPAR-1072-footer-layout

---
 packages/apps/src/Footer/Footer.tsx | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/packages/apps/src/Footer/Footer.tsx b/packages/apps/src/Footer/Footer.tsx
index aae57e58..895b906f 100644
--- a/packages/apps/src/Footer/Footer.tsx
+++ b/packages/apps/src/Footer/Footer.tsx
@@ -102,7 +102,7 @@ export default memo(styled(Footer)`
 
   .app-footer__social-links {
     display: flex;
-    grid-column-gap: calc(var(--gap)/2);
+    grid-column-gap: var(--gap);
 
     a {
       display: flex;
@@ -116,33 +116,15 @@ export default memo(styled(Footer)`
 
   @media (max-width: 1023px) {
     border-top: 1px solid var(--enum-input-border-disabled-color);
-    padding: calc(var(--gap) / 2) calc((var(--gap) / 2) * 3);
-
-    .app-footer--container {
-      align-items: flex-start;
-      flex-direction: column;
-      grid-row-gap: calc(var(--gap) / 2);
-    }
   }
 
   @media (max-width: 767px) {
-    border-top: 1px solid var(--enum-input-border-disabled-color);
-
-    .app-footer--container {
-      align-items: flex-start;
-      flex-direction: column;
-      grid-row-gap: calc(var(--gap) / 2);
-    }
-  }
-
-  @media (max-width: 320px) {
-    border-top: 1px solid var(--enum-input-border-disabled-color);
     padding: var(--gap);
 
     .app-footer--container {
       align-items: flex-start;
       flex-direction: column;
-      grid-row-gap: calc(var(--gap)/2);
+      grid-row-gap: var(--gap);
     }
   }
 `);

From 3f65b54a84f252581e60a2511dab455a90896271 Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Thu, 13 Jan 2022 09:57:40 +0300
Subject: [PATCH 04/13] feat: preview-button in process

---
 packages/apps/src/Apps.tsx                    |  2 +-
 packages/apps/src/apps.scss                   |  9 ++-
 .../src/containers/CollectionPage/index.tsx   | 14 ++--
 .../src/containers/CollectionPage/styles.scss | 74 +++++++++----------
 .../CollectionPage/usePreviewMode.ts          | 17 +++++
 5 files changed, 70 insertions(+), 46 deletions(-)
 create mode 100644 packages/page-builder/src/containers/CollectionPage/usePreviewMode.ts

diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 5f6e9e88..c7b69334 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -185,12 +185,12 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
                 )}
               </>
             </ErrorBoundary>
+            <Footer />
             <Status />
           </>
         </Signer>
       </div>
       <WarmUp />
-      <Footer />
     </>
   );
 }
diff --git a/packages/apps/src/apps.scss b/packages/apps/src/apps.scss
index 66aa9f18..9a7cc4e0 100644
--- a/packages/apps/src/apps.scss
+++ b/packages/apps/src/apps.scss
@@ -527,9 +527,9 @@
 }
 
 @media (max-width: 1023px) {
-  .app-wrapper {
-    background-color: var(--card-background);
-  }
+  // .app-wrapper {
+  //   background-color: var(--card-background);
+  // }
   .app-header {
     position: fixed;
     top: 0;
@@ -564,6 +564,9 @@
 }
 
 @media (max-width: 767px) {
+  .app-wrapper {
+    background-color: var(--card-background);
+  }
   .app-main {
     margin-top: 85px;
 
diff --git a/packages/page-builder/src/containers/CollectionPage/index.tsx b/packages/page-builder/src/containers/CollectionPage/index.tsx
index 67ff6fe8..a87430f3 100644
--- a/packages/page-builder/src/containers/CollectionPage/index.tsx
+++ b/packages/page-builder/src/containers/CollectionPage/index.tsx
@@ -19,6 +19,8 @@ import NftPage from '@polkadot/app-builder/containers/NftPage';
 import { UnqButton } from '@polkadot/react-components';
 import { useTokenAttributes } from '@polkadot/react-hooks';
 import { NftCollectionInterface, useCollection } from '@polkadot/react-hooks/useCollection';
+import { usePreviewMode } from './usePreviewMode';
+
 
 interface CollectionPageProps {
   account: string;
@@ -30,8 +32,9 @@ interface CollectionPageProps {
  and open the same page, where user interrupted the action.
  */
 
-function CollectionPage ({ account, basePath }: CollectionPageProps): ReactElement {
+function CollectionPage({ account, basePath }: CollectionPageProps): ReactElement {
   const [isPreviewOpen, setIsPreviewOpen] = useState<boolean>(false);
+  const [previewMode] = usePreviewMode();
   const [collectionName, setCollectionName] = useState<string>('');
   const [avatarImg, setAvatarImg] = useState<File | null>(null);
   const [tokenImg, setTokenImg] = useState<File | null>(null);
@@ -80,7 +83,7 @@ function CollectionPage ({ account, basePath }: CollectionPageProps): ReactEleme
 
   return (
     <div className='collection-page'>
-      { location.pathname !== `/builder/collections/${collectionId}/new-nft` && (
+      {location.pathname !== `/builder/collections/${collectionId}/new-nft` && (
         <Header
           as='h1'
           className={`${isPreviewOpen ? 'hidden' : ''}`}
@@ -88,7 +91,7 @@ function CollectionPage ({ account, basePath }: CollectionPageProps): ReactEleme
           Create collection
         </Header>
       )}
-      { location.pathname === `/builder/collections/${collectionId}/new-nft` && (
+      {location.pathname === `/builder/collections/${collectionId}/new-nft` && (
         <Header
           as='h1'
           className={`${isPreviewOpen ? 'hidden' : ''}`}
@@ -98,7 +101,7 @@ function CollectionPage ({ account, basePath }: CollectionPageProps): ReactEleme
       )}
       <div className='page-main'>
         <div className={`main-section ${isPreviewOpen ? 'hidden' : ''}`}>
-          { location.pathname !== `/builder/collections/${collectionId}/new-nft` && (
+          {location.pathname !== `/builder/collections/${collectionId}/new-nft` && (
             <Stepper />
           )}
           <Switch>
@@ -172,13 +175,14 @@ function CollectionPage ({ account, basePath }: CollectionPageProps): ReactEleme
             tokenPrefix={tokenPrefix}
           />
         </div>
-        <div className='preview-btn'>
+        {previewMode && <div className='preview-btn'>
           <UnqButton
             content={isPreviewOpen ? 'Back' : 'Preview'}
             onClick={handleOnBtnClick}
             size='large'
           />
         </div>
+        }
       </div>
     </div>
   );
diff --git a/packages/page-builder/src/containers/CollectionPage/styles.scss b/packages/page-builder/src/containers/CollectionPage/styles.scss
index 9dc80c59..79bfd9e2 100644
--- a/packages/page-builder/src/containers/CollectionPage/styles.scss
+++ b/packages/page-builder/src/containers/CollectionPage/styles.scss
@@ -1,78 +1,78 @@
-.collection-page{
-  .page-main{
+.collection-page {
+  .page-main {
     display: grid;
     grid-template-columns: 1fr 450px;
     grid-column-gap: calc(var(--gap) * 2);
     grid-row-gap: calc(var(--gap) * 2);
 
-    .main-section{
+    .main-section {
       flex: 2;
       display: flex;
       flex-direction: column;
       gap: 24px;
     }
 
-    .preview-cards{
+    .preview-cards {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 24px;
     }
-  }
 
-  .preview-btn{
-    display: none;
+    .preview-btn {
+      position: fixed;
+      bottom: 0;
+      display: flex;
+      padding: calc(var(--gap) / 2) calc((var(--gap) / 2) * 3);
+      background-color: var(--white-color);
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+      box-shadow: 0 -8px 12px rgba(0, 0, 0, 0.06);
+    }
   }
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 1279px) {
   .collection-page {
     .page-main {
       display: flex;
       flex-direction: column;
     }
   }
-
-  .preview-btn {
-    padding: calc(var(--gap) / 2) calc((var(--gap) / 2) * 3);
-  }
 }
 
-@media (max-width: 767px) {
-  .collection-page{
-    .main-section{
-      width: 100%;
-    .page-main{
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
+@media (max-width: 1023px) {
+  .collection-page {
+    .page-main {
+      .hidden {
+        display: none !important;
+      }
     }
   }
+}
 
-    .hidden{
-      display: none !important;
-    }
-
-    .preview-btn {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      width: 100%;
-      box-shadow: 0 -8px 12px rgba(0, 0, 0, 0.06);
+@media (min-width: 1024px) and (max-width: 1279px) {
+  .collection-page {
+    .page-main {
+      max-width: 992px;
     }
   }
 }
 
-@media (max-width: 320px) {
-  .collection-page{
-    .preview-btn{
+@media (max-width: 767px) {
+  .collection-page {
+    .main-section {
+      width: 100%;
+      .page-main {
         display: flex;
-        justify-content: flex-start;
+        flex-direction: column;
         align-items: center;
+        justify-content: center;
         width: 100%;
-        padding: 10px var(--gap);
-        box-shadow: 0 -8px 12px rgba(0, 0, 0, 0.06);
+      }
     }
+
+    
   }
 }
diff --git a/packages/page-builder/src/containers/CollectionPage/usePreviewMode.ts b/packages/page-builder/src/containers/CollectionPage/usePreviewMode.ts
new file mode 100644
index 00000000..33f5b2bc
--- /dev/null
+++ b/packages/page-builder/src/containers/CollectionPage/usePreviewMode.ts
@@ -0,0 +1,17 @@
+// Copyright 2017-2021 @polkadot/apps, UseTech authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+
+// определяет необходимость превью-режима в зависимости от ширины экрана
+export const usePreviewMode = (): [previewMode: boolean] => {
+
+    const x = window.matchMedia("(max-width: 1023px)");
+    const [previewMode, setPreviewMode] = useState(x.matches);
+
+    x.onchange = () => {
+        setPreviewMode(x.matches);
+    }
+
+    return [previewMode];
+}

From 95add334ec4e7609ca61c3e2529f83012b4451ff Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Thu, 13 Jan 2022 10:43:44 +0300
Subject: [PATCH 05/13] fix: hook to universalize and move to common folder

---
 packages/apps/src/apps.scss                     |  6 ++++++
 .../src/containers/CollectionPage/index.tsx     |  6 +++---
 .../containers/CollectionPage/usePreviewMode.ts | 17 -----------------
 packages/react-hooks/src/index.ts               |  1 +
 .../src/useScreenWidthFromThreshold.ts          | 17 +++++++++++++++++
 5 files changed, 27 insertions(+), 20 deletions(-)
 delete mode 100644 packages/page-builder/src/containers/CollectionPage/usePreviewMode.ts
 create mode 100644 packages/react-hooks/src/useScreenWidthFromThreshold.ts

diff --git a/packages/apps/src/apps.scss b/packages/apps/src/apps.scss
index 9a7cc4e0..cf761d2e 100644
--- a/packages/apps/src/apps.scss
+++ b/packages/apps/src/apps.scss
@@ -227,6 +227,12 @@
   }
 }
 
+.manage-accounts {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
 .app-balances {
   display: flex;
   position: relative;
diff --git a/packages/page-builder/src/containers/CollectionPage/index.tsx b/packages/page-builder/src/containers/CollectionPage/index.tsx
index a87430f3..0e5aa749 100644
--- a/packages/page-builder/src/containers/CollectionPage/index.tsx
+++ b/packages/page-builder/src/containers/CollectionPage/index.tsx
@@ -17,9 +17,8 @@ import { ArtificialAttributeItemType } from '@polkadot/app-builder/components/To
 import TokenPreview from '@polkadot/app-builder/components/TokenPreview';
 import NftPage from '@polkadot/app-builder/containers/NftPage';
 import { UnqButton } from '@polkadot/react-components';
-import { useTokenAttributes } from '@polkadot/react-hooks';
+import { useTokenAttributes, useScreenWidthFromThreshold } from '@polkadot/react-hooks';
 import { NftCollectionInterface, useCollection } from '@polkadot/react-hooks/useCollection';
-import { usePreviewMode } from './usePreviewMode';
 
 
 interface CollectionPageProps {
@@ -34,7 +33,7 @@ interface CollectionPageProps {
 
 function CollectionPage({ account, basePath }: CollectionPageProps): ReactElement {
   const [isPreviewOpen, setIsPreviewOpen] = useState<boolean>(false);
-  const [previewMode] = usePreviewMode();
+  const [lessThanThreshold] = useScreenWidthFromThreshold(1023);
   const [collectionName, setCollectionName] = useState<string>('');
   const [avatarImg, setAvatarImg] = useState<File | null>(null);
   const [tokenImg, setTokenImg] = useState<File | null>(null);
@@ -48,6 +47,7 @@ function CollectionPage({ account, basePath }: CollectionPageProps): ReactElemen
   const [collectionInfo, setCollectionInfo] = useState<NftCollectionInterface>();
   const { constAttributes, constOnChainSchema, resetAttributes, setTokenConstAttributes, tokenConstAttributes } = useTokenAttributes(collectionInfo);
 
+  const previewMode = lessThanThreshold;
   const handleOnBtnClick = useCallback(() => {
     setIsPreviewOpen((prev) => !prev);
   }, []);
diff --git a/packages/page-builder/src/containers/CollectionPage/usePreviewMode.ts b/packages/page-builder/src/containers/CollectionPage/usePreviewMode.ts
deleted file mode 100644
index 33f5b2bc..00000000
--- a/packages/page-builder/src/containers/CollectionPage/usePreviewMode.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Copyright 2017-2021 @polkadot/apps, UseTech authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import { useState } from 'react';
-
-// определяет необходимость превью-режима в зависимости от ширины экрана
-export const usePreviewMode = (): [previewMode: boolean] => {
-
-    const x = window.matchMedia("(max-width: 1023px)");
-    const [previewMode, setPreviewMode] = useState(x.matches);
-
-    x.onchange = () => {
-        setPreviewMode(x.matches);
-    }
-
-    return [previewMode];
-}
diff --git a/packages/react-hooks/src/index.ts b/packages/react-hooks/src/index.ts
index 2467d00e..6197398c 100644
--- a/packages/react-hooks/src/index.ts
+++ b/packages/react-hooks/src/index.ts
@@ -42,6 +42,7 @@ export { useParaEndpoints } from './useParaEndpoints';
 export { usePassword } from './usePassword';
 export { useRegistrars } from './useRegistrars';
 export { useSavedFlags } from './useSavedFlags';
+export { useScreenWidthFromThreshold } from './useScreenWidthFromThreshold';
 export { useStepper } from './useStepper';
 export { useSudo } from './useSudo';
 export { useToken } from './useToken';
diff --git a/packages/react-hooks/src/useScreenWidthFromThreshold.ts b/packages/react-hooks/src/useScreenWidthFromThreshold.ts
new file mode 100644
index 00000000..0e8cfaf3
--- /dev/null
+++ b/packages/react-hooks/src/useScreenWidthFromThreshold.ts
@@ -0,0 +1,17 @@
+// Copyright 2017-2021 @polkadot/apps, UseTech authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+
+// determines whether the screen width is less than the threshold
+export const useScreenWidthFromThreshold = (threshold:number): [lessThanThreshold: boolean] => {
+
+    const media = window.matchMedia(`(max-width: ${threshold}px)`);
+    const [lessThanThreshold, setLessThanThreshold] = useState(media.matches);
+
+    media.onchange = () => {
+        setLessThanThreshold(media.matches);
+    }
+
+    return [lessThanThreshold];
+}

From f0053204ade94be78077f1d58c4e04f61e662c01 Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Thu, 13 Jan 2022 16:44:04 +0300
Subject: [PATCH 06/13] fix: preview-button works correct

---
 packages/apps/src/AppContext.tsx              | 30 +++++++++++++++++++
 packages/apps/src/Apps.tsx                    | 16 +++++-----
 packages/apps/src/Root.tsx                    |  9 ++++--
 packages/apps/src/apps.scss                   |  7 ++++-
 .../src/containers/CollectionPage/index.tsx   | 13 ++++++--
 .../src/containers/CollectionPage/styles.scss | 11 +++++--
 .../src/useScreenWidthFromThreshold.ts        |  2 +-
 7 files changed, 72 insertions(+), 16 deletions(-)
 create mode 100644 packages/apps/src/AppContext.tsx

diff --git a/packages/apps/src/AppContext.tsx b/packages/apps/src/AppContext.tsx
new file mode 100644
index 00000000..82bd9d70
--- /dev/null
+++ b/packages/apps/src/AppContext.tsx
@@ -0,0 +1,30 @@
+// Copyright 2017-2021 @polkadot/apps authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { Dispatch, SetStateAction, useState } from 'react';
+
+interface IAppContext {
+  previewButtonDisplayed: boolean;
+  setPreviewButtonDisplayed: Dispatch<SetStateAction<boolean>>;
+}
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const AppCtx = React.createContext<IAppContext>({ previewButtonDisplayed: false, setPreviewButtonDisplayed: () => { } });
+
+function AppProvider({ children }: Props): React.ReactElement<Props> {
+  const [previewButtonDisplayed, setPreviewButtonDisplayed] = useState(false);
+
+
+  return (
+    <AppCtx.Provider value={{ previewButtonDisplayed, setPreviewButtonDisplayed }}>
+      {children}
+    </AppCtx.Provider>
+  );
+}
+
+export default React.memo(AppProvider);
+
+export { AppCtx };
diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index c7b69334..feffe632 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -30,6 +30,7 @@ import MobileMenu from './MobileMenu';
 import MobileMenuHeader from './MobileMenuHeader';
 import ScrollToTop from './ScrollToTop';
 import WarmUp from './WarmUp';
+import { AppCtx } from './AppContext';
 
 export const PORTAL_ID = 'portals';
 
@@ -45,7 +46,7 @@ const NOT_FOUND: Route = {
   text: 'Unknown'
 };
 
-function Apps ({ className = '' }: Props): React.ReactElement<Props> {
+function Apps({ className = '' }: Props): React.ReactElement<Props> {
   const location = useLocation();
   const { t } = useTranslation();
   const theme = useContext<ThemeDef>(ThemeContext);
@@ -54,6 +55,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
   const [account, setAccount] = useState<string>();
   const [openPanel, setOpenPanel] = useState<OpenPanelType>('tokens');
   const [isPageFound, setIsPageFound] = useState<boolean>(true);
+  const { previewButtonDisplayed } = useContext(AppCtx);
 
   const uiHighlight = useMemo(
     () => getSystemChainColor(systemChain, systemName),
@@ -76,7 +78,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
     <>
       <GlobalStyle uiHighlight={uiHighlight} />
       <ScrollToTop />
-      <div className={`app-wrapper theme--${theme.theme} ${className}`}>
+      <div className={`app-wrapper theme--${theme.theme} ${className} ${previewButtonDisplayed && openPanel !== 'menu' ? 'padding-for-button' : ''}`}>
         <Signer>
           <>
             <ErrorBoundary
@@ -96,7 +98,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
                       className='header-menu'
                       tabular
                     >
-                      { theme.logo && (
+                      {theme.logo && (
                         <Menu.Item
                           active={location.pathname === '/'}
                           as={NavLink}
@@ -123,7 +125,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
                         to='/faq'
                       />
                     </Menu>
-                    { (isApiReady && isApiConnected) && (
+                    {(isApiReady && isApiConnected) && (
                       <div className='app-user'>
                         <BalancesHeader
                           account={account}
@@ -143,14 +145,14 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
                     )}
                   </div>
                 </header>
-                { (isApiReady && isApiConnected) && openPanel === 'menu' && (
+                {(isApiReady && isApiConnected) && openPanel === 'menu' && (
                   <MobileMenu
                     account={account}
                     setOpenPanel={setOpenPanel}
                     theme={theme}
                   />
                 )}
-                { openPanel === 'accounts' && (
+                {openPanel === 'accounts' && (
                   <ManageAccounts
                     account={account}
                     setAccount={setAccount}
@@ -158,7 +160,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
                   />
                 )}
 
-                { (openPanel !== 'accounts') && (
+                {(openPanel !== 'accounts') && (
                   <Suspense fallback=''>
                     <main className={`app-main ${openPanel || ''} ${noAccounts ? 'no-accounts' : ''} ${!isPageFound ? 'page-no-found' : ''}`}>
                       <div className='app-container'>
diff --git a/packages/apps/src/Root.tsx b/packages/apps/src/Root.tsx
index a4577f0d..f118c569 100644
--- a/packages/apps/src/Root.tsx
+++ b/packages/apps/src/Root.tsx
@@ -17,6 +17,7 @@ import envConfig from '@polkadot/apps-config/envConfig';
 import Apps from './Apps';
 import { Themes, uniqueTheme } from './themes';
 import WindowDimensions from './WindowDimensions';
+import AppProvider from './AppContext';
 
 const { uniqueSubstrateApi } = envConfig;
 
@@ -24,7 +25,7 @@ interface Props {
   store?: KeyringStore;
 }
 
-function createTheme ({ uiTheme }: { uiTheme: string }): ThemeDef {
+function createTheme({ uiTheme }: { uiTheme: string }): ThemeDef {
   const validTheme = Themes.find((themeElem) => {
     return (themeElem.domain && window.location.href.includes(themeElem.domain)) || (themeElem.ip && window.location.href.includes(themeElem.ip));
   });
@@ -35,7 +36,7 @@ function createTheme ({ uiTheme }: { uiTheme: string }): ThemeDef {
   return validTheme || uniqueTheme;
 }
 
-function Root ({ store }: Props): React.ReactElement<Props> {
+function Root({ store }: Props): React.ReactElement<Props> {
   const [theme, setTheme] = useState(() => createTheme(settings));
 
   useEffect((): void => {
@@ -54,7 +55,9 @@ function Root ({ store }: Props): React.ReactElement<Props> {
               <Events>
                 <HashRouter>
                   <WindowDimensions>
-                    <Apps />
+                    <AppProvider>
+                      <Apps />
+                    </AppProvider>
                   </WindowDimensions>
                 </HashRouter>
               </Events>
diff --git a/packages/apps/src/apps.scss b/packages/apps/src/apps.scss
index cf761d2e..1f919b39 100644
--- a/packages/apps/src/apps.scss
+++ b/packages/apps/src/apps.scss
@@ -6,6 +6,10 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+
+  &.padding-for-button {
+    padding-bottom: 56px;
+  }
 }
 
 .app-header {
@@ -478,6 +482,7 @@
     padding: var(--gap);
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     background-color: var(--card-background);
 
     &--logo {
@@ -582,7 +587,7 @@
   }
 
   .app-logo {
-    img{
+    img {
       height: 100%;
     }
   }
diff --git a/packages/page-builder/src/containers/CollectionPage/index.tsx b/packages/page-builder/src/containers/CollectionPage/index.tsx
index 0e5aa749..b18cc6bc 100644
--- a/packages/page-builder/src/containers/CollectionPage/index.tsx
+++ b/packages/page-builder/src/containers/CollectionPage/index.tsx
@@ -3,7 +3,7 @@
 
 import './styles.scss';
 
-import React, { memo, ReactElement, useCallback, useEffect, useState } from 'react';
+import React, { memo, ReactElement, useCallback, useContext, useEffect, useState } from 'react';
 import { Route, Switch, useHistory } from 'react-router';
 import { useLocation, useParams } from 'react-router-dom';
 import Header from 'semantic-ui-react/dist/commonjs/elements/Header/Header';
@@ -19,6 +19,7 @@ import NftPage from '@polkadot/app-builder/containers/NftPage';
 import { UnqButton } from '@polkadot/react-components';
 import { useTokenAttributes, useScreenWidthFromThreshold } from '@polkadot/react-hooks';
 import { NftCollectionInterface, useCollection } from '@polkadot/react-hooks/useCollection';
+import { AppCtx } from '@polkadot/apps/AppContext';
 
 
 interface CollectionPageProps {
@@ -46,8 +47,9 @@ function CollectionPage({ account, basePath }: CollectionPageProps): ReactElemen
   const { getDetailedCollectionInfo } = useCollection();
   const [collectionInfo, setCollectionInfo] = useState<NftCollectionInterface>();
   const { constAttributes, constOnChainSchema, resetAttributes, setTokenConstAttributes, tokenConstAttributes } = useTokenAttributes(collectionInfo);
-
+  const { setPreviewButtonDisplayed } = useContext(AppCtx);
   const previewMode = lessThanThreshold;
+
   const handleOnBtnClick = useCallback(() => {
     setIsPreviewOpen((prev) => !prev);
   }, []);
@@ -62,6 +64,13 @@ function CollectionPage({ account, basePath }: CollectionPageProps): ReactElemen
     }
   }, [collectionId, getDetailedCollectionInfo]);
 
+  // set previewButtonDisplayed to AppContext
+  useEffect(() => {
+    setPreviewButtonDisplayed(previewMode);
+
+    return () => { setPreviewButtonDisplayed(false) };
+  }, [previewMode])
+
   useEffect(() => {
     if (location.pathname === '/builder/new-collection' || location.pathname === '/builder/new-collection/') {
       history.push('/builder/new-collection/main-information');
diff --git a/packages/page-builder/src/containers/CollectionPage/styles.scss b/packages/page-builder/src/containers/CollectionPage/styles.scss
index 79bfd9e2..2dda4531 100644
--- a/packages/page-builder/src/containers/CollectionPage/styles.scss
+++ b/packages/page-builder/src/containers/CollectionPage/styles.scss
@@ -22,6 +22,7 @@
     .preview-btn {
       position: fixed;
       bottom: 0;
+      left: 0;
       display: flex;
       padding: calc(var(--gap) / 2) calc((var(--gap) / 2) * 3);
       background-color: var(--white-color);
@@ -60,6 +61,14 @@
   }
 }
 
+@media (min-width: 768px) and (max-width: 1023px) {
+  .app-main {
+    .app-container {
+      padding: 0 16px;
+    }
+  }
+}
+
 @media (max-width: 767px) {
   .collection-page {
     .main-section {
@@ -72,7 +81,5 @@
         width: 100%;
       }
     }
-
-    
   }
 }
diff --git a/packages/react-hooks/src/useScreenWidthFromThreshold.ts b/packages/react-hooks/src/useScreenWidthFromThreshold.ts
index 0e8cfaf3..223e0266 100644
--- a/packages/react-hooks/src/useScreenWidthFromThreshold.ts
+++ b/packages/react-hooks/src/useScreenWidthFromThreshold.ts
@@ -12,6 +12,6 @@ export const useScreenWidthFromThreshold = (threshold:number): [lessThanThreshol
     media.onchange = () => {
         setLessThanThreshold(media.matches);
     }
-
+    
     return [lessThanThreshold];
 }

From a7c0e4d0f20433e82b66a466e9fe8d56c760505a Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Fri, 14 Jan 2022 09:27:11 +0300
Subject: [PATCH 07/13] fix: (paddings) px to gap

---
 packages/apps/src/apps.scss                   |  5 +---
 packages/apps/styles/global.scss              | 26 +------------------
 .../src/containers/CollectionPage/styles.scss |  2 +-
 3 files changed, 3 insertions(+), 30 deletions(-)

diff --git a/packages/apps/src/apps.scss b/packages/apps/src/apps.scss
index 1f919b39..b29ee4e9 100644
--- a/packages/apps/src/apps.scss
+++ b/packages/apps/src/apps.scss
@@ -497,7 +497,7 @@
       font-weight: 500;
       font-size: 16px;
       margin: 4px 0;
-      padding: 8px 16px;
+      padding: calc(var(--gap)/2) var(--gap);
       color: var(--header-text-color);
 
       &.active {
@@ -538,9 +538,6 @@
 }
 
 @media (max-width: 1023px) {
-  // .app-wrapper {
-  //   background-color: var(--card-background);
-  // }
   .app-header {
     position: fixed;
     top: 0;
diff --git a/packages/apps/styles/global.scss b/packages/apps/styles/global.scss
index 27cb2bc2..eb82c301 100644
--- a/packages/apps/styles/global.scss
+++ b/packages/apps/styles/global.scss
@@ -198,7 +198,7 @@ h4.ui.header {
     height: 48px;
 
     & .menu > .item {
-      padding: 8px calc((var(--gap) / 2) * 5) !important;
+      padding: calc(var(--gap)/2) calc((var(--gap) / 2) * 5) !important;
     }
   }
 
@@ -693,30 +693,6 @@ button.ui.button,
   }
 }
 
-.modalDescription {
-  display: flex;
-  background-color: var(--modal-warning-background-color);
-  font-size: 14px;
-  font-family: var(--font-roboto);
-  line-height: 22px;
-  border-radius: 4px;
-  padding: 8px 10.25px;
-  margin: 0 !important;
-
-  img {
-    margin-right: 10.25px;
-  }
-
-  div {
-    p {
-      margin: 0;
-      color: var(--modal-warning-text-color);
-      font-family: var(--font-roboto);
-      padding: 0.3rem 1.5rem 0 0 !important;
-    }
-  }
-}
-
 .ui.loader.simple-loader {
   left: 0;
   top: 0;
diff --git a/packages/page-builder/src/containers/CollectionPage/styles.scss b/packages/page-builder/src/containers/CollectionPage/styles.scss
index 2dda4531..5000e322 100644
--- a/packages/page-builder/src/containers/CollectionPage/styles.scss
+++ b/packages/page-builder/src/containers/CollectionPage/styles.scss
@@ -64,7 +64,7 @@
 @media (min-width: 768px) and (max-width: 1023px) {
   .app-main {
     .app-container {
-      padding: 0 16px;
+      padding: 0 var(--gap);
     }
   }
 }

From 1286797cab17817fcae6b2832ab97cd74cb4f7cb Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Mon, 17 Jan 2022 01:28:48 +0300
Subject: [PATCH 08/13] bug/NFTPAR-1058-modal-layout

---
 packages/apps/src/Footer/Footer.tsx           |  2 +-
 packages/apps/src/apps.scss                   | 44 ++++------
 packages/apps/styles/global.scss              | 34 ++++----
 .../src/components/CreateNFT/index.tsx        |  4 +-
 .../src/components/CreateNFT/styles.scss      | 42 +++++++---
 .../components/MainInformation/styles.scss    |  8 --
 .../src/components/Stepper/styles.scss        | 35 +++-----
 .../src/components/WarningText/styles.scss    |  8 +-
 .../src/containers/CollectionPage/styles.scss | 31 ++++---
 .../containers/CollectionsList/styles.scss    | 32 +++----
 packages/page-builder/src/styles.scss         | 47 ++++-------
 packages/page-faq/src/styles.scss             |  7 +-
 .../react-components/src/Modal/styles.scss    | 83 +++++++++++--------
 13 files changed, 194 insertions(+), 183 deletions(-)

diff --git a/packages/apps/src/Footer/Footer.tsx b/packages/apps/src/Footer/Footer.tsx
index 895b906f..7b9166e2 100644
--- a/packages/apps/src/Footer/Footer.tsx
+++ b/packages/apps/src/Footer/Footer.tsx
@@ -114,7 +114,7 @@ export default memo(styled(Footer)`
     color: var(--link-color);
   }
 
-  @media (max-width: 1023px) {
+  @media (max-width: 1279px) {
     border-top: 1px solid var(--enum-input-border-disabled-color);
   }
 
diff --git a/packages/apps/src/apps.scss b/packages/apps/src/apps.scss
index b29ee4e9..3f1e2961 100644
--- a/packages/apps/src/apps.scss
+++ b/packages/apps/src/apps.scss
@@ -16,6 +16,11 @@
   background: var(--header-background);
   margin-bottom: 0;
   padding: calc(var(--gap) / 2) 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  z-index: 1000;
 
   .ui.tabular.menu {
     display: inline-flex;
@@ -135,14 +140,14 @@
 }
 
 .app-main {
-  padding: calc(var(--gap) * 2) 0;
+  margin-top: 80px;
+  padding: calc(var(--gap) * 2) calc(var(--gap) / 2 * 3) calc(var(--gap) / 4 * 10);
   flex: 1 1 auto;
 }
 
 .app-container {
   width: 100%;
   max-width: var(--max-width);
-  padding: 0 var(--gap);
   margin: 0 auto;
 
   &--header {
@@ -151,6 +156,7 @@
     align-items: center;
     max-width: var(--max-header-width);
     height: 64px;
+    padding: 0 var(--gap);
   }
 }
 
@@ -431,9 +437,6 @@
 
 @media (max-width: 1279px) {
   .app-header {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    z-index: 1000;
-
     .ui.tabular.header-menu.menu {
       display: none;
     }
@@ -497,7 +500,7 @@
       font-weight: 500;
       font-size: 16px;
       margin: 4px 0;
-      padding: calc(var(--gap)/2) var(--gap);
+      padding: calc(var(--gap) / 2) var(--gap);
       color: var(--header-text-color);
 
       &.active {
@@ -537,21 +540,14 @@
   }
 }
 
-@media (max-width: 1023px) {
-  .app-header {
-    position: fixed;
-    top: 0;
-    width: 100%;
+@media (max-width: 1279px) {
+  .app-wrapper {
+    background-color: var(--card-background);
   }
+}
 
+@media (max-width: 1023px) {
   .app-main {
-    margin-top: 84px;
-    padding: 0;
-
-    .app-container {
-      padding: 0;
-    }
-
     &.page-no-found {
       background-color: var(--bg-page);
     }
@@ -563,7 +559,7 @@
 
   .menu-mobile,
   .manage-accounts {
-    margin-top: 84px;
+    margin-top: 64px;
   }
 
   .welcome {
@@ -572,11 +568,9 @@
 }
 
 @media (max-width: 767px) {
-  .app-wrapper {
-    background-color: var(--card-background);
-  }
   .app-main {
-    margin-top: 85px;
+    padding: calc(var(--gap) / 2 * 3) var(--gap) calc(var(--gap) * 2);
+    margin-top: 64px;
 
     &.no-accounts {
       margin-top: 67px;
@@ -615,10 +609,6 @@
     }
   }
 
-  .manage-accounts {
-    margin-top: 85px;
-  }
-
   .welcome {
     height: 100vh;
 
diff --git a/packages/apps/styles/global.scss b/packages/apps/styles/global.scss
index c2979578..44860758 100644
--- a/packages/apps/styles/global.scss
+++ b/packages/apps/styles/global.scss
@@ -726,24 +726,25 @@ button.ui.button,
   background-color: rgba(0, 0, 0, 0.7) !important;
 }
 
-.shadow-block {
-  padding: calc(var(--gap) * 2);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  border-radius: calc(var(--gap) / 4);
-  background-color: var(--white-color);
+@media (min-width: 1280px) {
+  .shadow-block {
+    padding: calc(var(--gap) * 2);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    border-radius: calc(var(--gap) / 4);
+    background-color: var(--white-color);
+  }
+}
+
+@media (max-width: 1279px) {
+  h1.ui.header {
+    margin-bottom: calc(var(--gap) / 2 * 3);
+  }
 }
 
 @media (max-width: 1023px) {
   h1.ui.header {
     font-size: 28px;
     line-height: 42px;
-    margin-top: calc(var(--gap) * 1.5) !important;
-    padding: 0 var(--gap);
-  }
-
-  .shadow-block {
-    padding-left: calc((var(--gap) / 2) * 3) !important;
-    padding-right: calc((var(--gap) / 2) * 3) !important;
   }
 
   .ui.page.modals {
@@ -772,14 +773,11 @@ button.ui.button,
 }
 
 @media (max-width: 768px) {
+  h1.ui.header {
+    margin-bottom: var(--gap);
+  }
   .ui.grid > .row {
     display: grid;
   }
 }
 
-@media (max-width: 320px) {
-  .shadow-block {
-    padding-left: var(--gap) !important;
-    padding-right: var(--gap) !important;
-  }
-}
diff --git a/packages/page-builder/src/components/CreateNFT/index.tsx b/packages/page-builder/src/components/CreateNFT/index.tsx
index debb091d..2b315b61 100644
--- a/packages/page-builder/src/components/CreateNFT/index.tsx
+++ b/packages/page-builder/src/components/CreateNFT/index.tsx
@@ -233,14 +233,14 @@ function CreateNFT ({ account, collectionId, collectionInfo, constAttributes, co
 
   if (collectionInfo && !isOwner) {
     return (
-      <div className='create-nft'>
+      <div className='create-nft shadow-block'>
         <h2 className='header-text'>You are not the owner of this collection, you cannot create nft.</h2>
       </div>
     );
   }
 
   return (
-    <div className='create-nft'>
+    <div className='create-nft shadow-block'>
       <h1 className='header-text'>Image</h1>
       <h2>Upload image*</h2>
       <p>Choose JPG, PNG, GIF (max 10 Mb)</p>
diff --git a/packages/page-builder/src/components/CreateNFT/styles.scss b/packages/page-builder/src/components/CreateNFT/styles.scss
index 6096c3e4..d31b8a33 100644
--- a/packages/page-builder/src/components/CreateNFT/styles.scss
+++ b/packages/page-builder/src/components/CreateNFT/styles.scss
@@ -1,8 +1,5 @@
 .create-nft {
   background-color: var(--white-color);
-  padding: calc(var(--gap) * 2);
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
-  border-radius: calc(var(--gap) / 4);
   font-family: var(--font-roboto);
 
   .header-text {
@@ -31,18 +28,18 @@
 
   .warning-text {
     p {
-    color: var(--modal-warning-text-color);
-    font-family: var(--font-roboto);
-    font-size: 14px;
-    line-height: 22px;
-    margin-bottom: 0;
+      color: var(--modal-warning-text-color);
+      font-family: var(--font-roboto);
+      font-size: 14px;
+      line-height: 22px;
+      margin-bottom: 0;
     }
   }
 
   .avatar{
     display: flex;
     gap: calc(var(--gap) / 2);
-    margin: 24px 0 48px;
+    margin: calc(var(--gap) / 2 * 3) 0 calc(var(--gap) / 4 * 10);
 
     .avatar-img{
       display: flex;
@@ -84,10 +81,9 @@
   .attributes{
     display: flex;
     flex-direction: column;
-    gap: 32px ;
+    gap: 32px;
 
     .attributes-input{
-
       h2{
         margin-bottom: var(--gap);
       }
@@ -149,3 +145,27 @@
     }
   }
 }
+
+@media (max-width: 1279px) {
+  .create-nft {
+    .avatar {
+      margin: calc(var(--gap) / 2 * 3) 0 calc(var(--gap) * 2);
+    }
+  }
+}
+
+@media (max-width: 1023px) {
+  .create-nft {
+    .header-text {
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .create-nft {
+    padding-top: calc(var(--gap) / 2);
+  }
+}
diff --git a/packages/page-builder/src/components/MainInformation/styles.scss b/packages/page-builder/src/components/MainInformation/styles.scss
index 4f3644e2..dbb786c4 100644
--- a/packages/page-builder/src/components/MainInformation/styles.scss
+++ b/packages/page-builder/src/components/MainInformation/styles.scss
@@ -44,13 +44,5 @@
 @media (max-width: 767px) {
   .main-information {
     box-shadow: none;
-    padding: var(--gap);
-  }
-}
-
-@media (max-width: 320px) {
-  .main-information {
-    box-shadow: none;
-    padding: var(--gap);
   }
 }
diff --git a/packages/page-builder/src/components/Stepper/styles.scss b/packages/page-builder/src/components/Stepper/styles.scss
index aeaac188..26aa729e 100644
--- a/packages/page-builder/src/components/Stepper/styles.scss
+++ b/packages/page-builder/src/components/Stepper/styles.scss
@@ -1,15 +1,15 @@
-.stepper-main{
+.stepper-main {
   color: var(--attribute-title-color);
   font-family: var(--font-roboto);
   font-weight: 500;
 
-  .steps{
+  .steps {
     display: flex;
     align-items: center;
     padding: 0 38px;
     font-size: 18px;
 
-    .step{
+    .step {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -19,38 +19,35 @@
       background-color: var(--attribute-background-color);
     }
 
-    .step-line{
+    .step-line {
       height: 2px;
       width: 100%;
       background-color: var(--attribute-background-color);
     }
   }
 
-  .steps-text{
+  .steps-text {
     display: flex;
     justify-content: space-between;
-    padding-top:calc(var(--gap) / 2);
+    padding-top: calc(var(--gap) / 2);
     margin-right: 3px;
     font-size: 16px;
     line-height: 24px;
   }
 
-  .active-step{
+  .active-step {
     background-color: var(--button-color) !important;
     color: var(--white-color);
   }
 
-  .active-line{
+  .active-line {
     color: var(--button-color);
   }
 }
 
-
-@media (max-width: 767px) {
+@media (max-width: 1279px) {
   .stepper-main {
-    .steps{
-      padding: 0;
-    }
+    margin-bottom: var(--gap);
 
     .steps-text {
       display: none;
@@ -58,19 +55,13 @@
   }
 }
 
-@media (max-width: 1279px) {
+@media (max-width: 1023px) {
   .stepper-main {
-      box-shadow: none;
+    .steps {
+      padding: 0;
     }
-
     .steps-text {
       display: none;
     }
   }
-
-@media (max-width: 320px) {
-  .stepper-main {
-    padding-left: var(--gap);
-    padding-right: var(--gap);
-  }
 }
diff --git a/packages/page-builder/src/components/WarningText/styles.scss b/packages/page-builder/src/components/WarningText/styles.scss
index afd71be5..775e4647 100644
--- a/packages/page-builder/src/components/WarningText/styles.scss
+++ b/packages/page-builder/src/components/WarningText/styles.scss
@@ -5,7 +5,7 @@
   align-items: center;
   padding: calc(var(--gap) / 2);
   border-radius: calc(var(--gap) / 4);
-  margin: 40px 0 24px;
+  margin: calc(var(--gap) / 4 * 10) 0 calc(var(--gap) / 2 * 3);
 
   img {
     margin: 0 calc(var(--gap) / 2) ;
@@ -19,3 +19,9 @@
     margin-bottom: 0;
   }
 }
+
+@media (max-width: 1023px){
+  .warning-text {
+    margin: calc(var(--gap) * 2) 0 calc(var(--gap) / 2 * 3);
+  }
+}
diff --git a/packages/page-builder/src/containers/CollectionPage/styles.scss b/packages/page-builder/src/containers/CollectionPage/styles.scss
index 5000e322..28dd7cfb 100644
--- a/packages/page-builder/src/containers/CollectionPage/styles.scss
+++ b/packages/page-builder/src/containers/CollectionPage/styles.scss
@@ -17,6 +17,7 @@
       display: flex;
       flex-direction: column;
       gap: 24px;
+      width: 100%;
     }
 
     .preview-btn {
@@ -61,24 +62,28 @@
   }
 }
 
-@media (min-width: 768px) and (max-width: 1023px) {
-  .app-main {
-    .app-container {
-      padding: 0 var(--gap);
-    }
-  }
-}
+// @media (min-width: 768px) and (max-width: 1023px) {
+//   .app-main {
+//     .app-container {
+//       padding: 0 var(--gap);
+//     }
+//   }
+// }
 
 @media (max-width: 767px) {
   .collection-page {
     .main-section {
       width: 100%;
-      .page-main {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
+    }
+    .page-main {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+
+      .preview-btn{
+        padding: calc(var(--gap)/2) var(--gap);
       }
     }
   }
diff --git a/packages/page-builder/src/containers/CollectionsList/styles.scss b/packages/page-builder/src/containers/CollectionsList/styles.scss
index 6cca7804..3628d707 100644
--- a/packages/page-builder/src/containers/CollectionsList/styles.scss
+++ b/packages/page-builder/src/containers/CollectionsList/styles.scss
@@ -5,15 +5,15 @@
 }
 
 @media (max-width: 1023px) {
-  .create-and-search {
-    padding-left: calc((var(--gap) / 2) * 3);
-    padding-right: calc((var(--gap) / 2) * 3);
-  }
+  // .create-and-search {
+  //   padding-left: calc((var(--gap) / 2) * 3);
+  //   padding-right: calc((var(--gap) / 2) * 3);
+  // }
 
-  h1.ui.header {
-    padding-left: calc((var(--gap) / 2) * 3);
-    padding-right: calc((var(--gap) / 2) * 3);
-  }
+  // h1.ui.header {
+  //   padding-left: calc((var(--gap) / 2) * 3);
+  //   padding-right: calc((var(--gap) / 2) * 3);
+  // }
 
   .collections-list {
     &--collections {
@@ -28,12 +28,16 @@
       background: var(--bg-page);
     }
   }
+  // h1.ui.header {
+  //   padding-left: 0;
+  //   padding-right: 0;
+  // }
 }
 
-@media (max-width: 320px) {
-  .collections-list {
-    &--collections {
+// @media (max-width: 320px) {
+//   .collections-list {
+//     &--collections {
 
-    }
-  }
-}
+//     }
+//   }
+// }
diff --git a/packages/page-builder/src/styles.scss b/packages/page-builder/src/styles.scss
index 87695464..22eb28d2 100644
--- a/packages/page-builder/src/styles.scss
+++ b/packages/page-builder/src/styles.scss
@@ -25,7 +25,7 @@
       font-family: var(--font-roboto);
       font-size: 18px;
       line-height: 26px;
-      margin-top:24px ;
+      margin-top: calc(var(--gap) / 2 * 3);
       color: var(--tabs-color);
     }
   }
@@ -42,7 +42,6 @@
     padding: 178px 238px;
 
     .disclaimer-content {
-
       a {
         color: var(--link-color);
       }
@@ -121,7 +120,7 @@
           font-size: var(--gap);
           line-height: calc((var(--gap) * 1.5));
         }
-    }
+      }
 
       .disclaimer-btn{
         text-align: center;
@@ -132,13 +131,7 @@
 }
 
 @media (max-width: 1023px) {
-  .builder-page  {
-
-    .collection-page {
-      .page-main {
-        background: var(--bg-page);
-      }
-    }
+  .builder-page {
 
     .collection-card {
       box-shadow: none;
@@ -154,23 +147,23 @@
     }
 
     h1.ui.header {
-    font-size: 28px;
-}
+      font-size: 28px;
+    }
   }
 }
 
-
-
 @media (max-width: 767px) {
-  .builder-page {
-    .create-and-search {
-      flex-direction: row;
-      gap: var(--gap);
+  .collection-page {
+    .builder-page {
+      .create-and-search {
+        flex-direction: row;
+        gap: var(--gap);
 
       .create-btn{
-       width: 40%;
-       margin: 0;
-     }
+          width: 40%;
+          margin: 0;
+        }
+      }
     }
   }
 }
@@ -179,19 +172,15 @@
   .builder-page {
     .content-links {
       min-width: 50%;
-
     }
 
     .create-and-search {
-     flex-direction: column;
-      padding: 0 16px;
+      flex-direction: column;
 
       .create-btn{
-       width: 100%;
-       margin: 0;
-     }
+        width: 100%;
+        margin: 0;
+      }
     }
   }
 }
-
-
diff --git a/packages/page-faq/src/styles.scss b/packages/page-faq/src/styles.scss
index bb034992..f2198575 100644
--- a/packages/page-faq/src/styles.scss
+++ b/packages/page-faq/src/styles.scss
@@ -2,7 +2,7 @@
   font-family: var(--font-inter);
 
   .faq {
-    margin-top: calc(var(--gap) * 2);
+    margin-top: calc(var(--gap) / 2 * 3);
 
     h4.ui.header {
       font-family: var(--font-inter);
@@ -10,7 +10,7 @@
       font-size: 18px;
       line-height: 26px;
       margin-top: calc(var(--gap) * 2);
-      margin-bottom: 12px;
+      margin-bottom: calc(var(--gap) / 2);
       min-height: 0;
       letter-spacing: normal;
 
@@ -19,7 +19,8 @@
       }
     }
 
-    p, ol li {
+    p,
+    ol li {
       font-size: var(--gap);
       line-height: 24px;
       font-family: var(--font-roboto);
diff --git a/packages/react-components/src/Modal/styles.scss b/packages/react-components/src/Modal/styles.scss
index a18643b6..607572ec 100644
--- a/packages/react-components/src/Modal/styles.scss
+++ b/packages/react-components/src/Modal/styles.scss
@@ -18,7 +18,7 @@
   }
 
   .actions {
-    .close-btn{
+    .close-btn {
       position: absolute;
       top: 37.5px;
       right: 28.5px;
@@ -29,7 +29,7 @@
   .footer {
     padding: 32px 24px 24px 24px;
 
-    .btn-container{
+    .btn-container {
       display: flex;
     }
   }
@@ -46,11 +46,10 @@
       margin-top: 0;
       margin-bottom: 16px;
     }
-
   }
   .ui--Password {
-    .ui--Labelled-content{
-      .ui--Input{
+    .ui--Labelled-content {
+      .ui--Input {
         position: relative;
 
         .see-password-button {
@@ -59,7 +58,7 @@
           right: 16.25px;
           top: 7px;
 
-          img{
+          img {
             position: static;
           }
         }
@@ -69,11 +68,15 @@
 
   &.unique-modal {
     border-radius: calc(var(--gap) / 2);
+    padding: calc(var(--gap) / 2 * 3);
 
     .header {
-      padding: 1.71rem !important;
+      padding: 0 !important;
+      font-size: 28px !important;
+      line-height: 42px !important;
+      font-weight: 700 !important;
 
-      h2{
+      h2 {
         margin: 0 !important;
       }
 
@@ -86,7 +89,7 @@
     }
 
     .content {
-      padding: 0 1.71rem !important;
+      padding: calc(var(--gap) / 2 * 3) 0 calc(var(--gap) * 2) !important;
 
       .warning-block {
         font-size: 18px;
@@ -105,13 +108,16 @@
     }
 
     .actions {
-      padding: calc((var(--gap) / 2) * 3) !important;
       border-top: none;
       display: flex;
       justify-content: flex-end;
       background: var(--card-background);
 
-      .primary  {
+      .button {
+        letter-spacing: normal;
+      }
+
+      .primary {
         background-color: var(--card-background) !important;
         color: var(--button-color) !important;
         font-family: var(--font-roboto) !important;
@@ -123,13 +129,24 @@
 
 @media (max-width: 767px) {
   .ui.modal {
-
     &.unique-modal {
+      padding: calc(var(--gap) / 2 * 3) var(--gap) !important;
+      .header {
+        font-size: 24px !important;
+        line-height: 36px !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        padding-top: 0 !important;
+      }
+      .content {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+      }
       .actions {
         width: 100%;
-        padding: 24px 16px !important;
+        padding: calc(var(--gap) * 2) 0 0 !important;
 
-        button{
+        button {
           width: 100%;
           margin: 0;
           font-size: 15px !important;
@@ -149,15 +166,15 @@
       .actions {
         width: 100%;
 
-        .ui--Button-Group{
+        .ui--Button-Group {
           width: 100%;
         }
       }
-      .btn-container{
+      .btn-container {
         margin-top: 24px;
         width: 100%;
 
-        button{
+        button {
           width: 100%;
         }
       }
@@ -166,31 +183,29 @@
 }
 
 @media (max-width: 320px) {
-.ui.modal {
-
+  .ui.modal {
     &.unique-modal {
       .actions {
         padding: 24px 16px !important;
       }
 
       button {
-          width: 100%;
-          margin: 0;
-          font-size: 15px !important;
-          padding: 0px 6px !important;
-          align-items: center;
-        }
+        width: 100%;
+        margin: 0;
+        font-size: 15px !important;
+        padding: 0px 6px !important;
+        align-items: center;
+      }
 
-        .header {
-          font-size: 20px !important;
-          padding: 16px !important;
-          line-height: 28px !important;
-        }
+      .header {
+        font-size: 20px !important;
+        padding: 16px !important;
+        line-height: 28px !important;
+      }
 
-        .content {
-          padding: 16px !important;
-        }
+      .content {
+        padding: 16px !important;
       }
     }
   }
-  
\ No newline at end of file
+}

From ffb8b77524661da3da71127243888ae60ec4f1a8 Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Mon, 17 Jan 2022 01:33:14 +0300
Subject: [PATCH 09/13] fix: more files

---
 .../src/containers/CollectionPage/styles.scss |  8 -----
 .../containers/CollectionsList/styles.scss    | 30 -------------------
 packages/page-faq/src/styles.scss             |  3 +-
 .../react-components/src/Modal/styles.scss    | 20 ++++++-------
 4 files changed, 11 insertions(+), 50 deletions(-)

diff --git a/packages/page-builder/src/containers/CollectionPage/styles.scss b/packages/page-builder/src/containers/CollectionPage/styles.scss
index 28dd7cfb..7c09fb9c 100644
--- a/packages/page-builder/src/containers/CollectionPage/styles.scss
+++ b/packages/page-builder/src/containers/CollectionPage/styles.scss
@@ -62,14 +62,6 @@
   }
 }
 
-// @media (min-width: 768px) and (max-width: 1023px) {
-//   .app-main {
-//     .app-container {
-//       padding: 0 var(--gap);
-//     }
-//   }
-// }
-
 @media (max-width: 767px) {
   .collection-page {
     .main-section {
diff --git a/packages/page-builder/src/containers/CollectionsList/styles.scss b/packages/page-builder/src/containers/CollectionsList/styles.scss
index 3628d707..03f0b432 100644
--- a/packages/page-builder/src/containers/CollectionsList/styles.scss
+++ b/packages/page-builder/src/containers/CollectionsList/styles.scss
@@ -5,39 +5,9 @@
 }
 
 @media (max-width: 1023px) {
-  // .create-and-search {
-  //   padding-left: calc((var(--gap) / 2) * 3);
-  //   padding-right: calc((var(--gap) / 2) * 3);
-  // }
-
-  // h1.ui.header {
-  //   padding-left: calc((var(--gap) / 2) * 3);
-  //   padding-right: calc((var(--gap) / 2) * 3);
-  // }
-
   .collections-list {
     &--collections {
       background: var(--bg-page);
     }
   }
 }
-
-@media (max-width: 767px) {
-  .collections-list {
-    &--collections {
-      background: var(--bg-page);
-    }
-  }
-  // h1.ui.header {
-  //   padding-left: 0;
-  //   padding-right: 0;
-  // }
-}
-
-// @media (max-width: 320px) {
-//   .collections-list {
-//     &--collections {
-
-//     }
-//   }
-// }
diff --git a/packages/page-faq/src/styles.scss b/packages/page-faq/src/styles.scss
index f2198575..dbc742f0 100644
--- a/packages/page-faq/src/styles.scss
+++ b/packages/page-faq/src/styles.scss
@@ -19,8 +19,7 @@
       }
     }
 
-    p,
-    ol li {
+    p, ol li {
       font-size: var(--gap);
       line-height: 24px;
       font-family: var(--font-roboto);
diff --git a/packages/react-components/src/Modal/styles.scss b/packages/react-components/src/Modal/styles.scss
index 607572ec..34eae3af 100644
--- a/packages/react-components/src/Modal/styles.scss
+++ b/packages/react-components/src/Modal/styles.scss
@@ -18,7 +18,7 @@
   }
 
   .actions {
-    .close-btn {
+    .close-btn{
       position: absolute;
       top: 37.5px;
       right: 28.5px;
@@ -29,7 +29,7 @@
   .footer {
     padding: 32px 24px 24px 24px;
 
-    .btn-container {
+    .btn-container{
       display: flex;
     }
   }
@@ -48,8 +48,8 @@
     }
   }
   .ui--Password {
-    .ui--Labelled-content {
-      .ui--Input {
+    .ui--Labelled-content{
+      .ui--Input{
         position: relative;
 
         .see-password-button {
@@ -58,7 +58,7 @@
           right: 16.25px;
           top: 7px;
 
-          img {
+          img{
             position: static;
           }
         }
@@ -76,7 +76,7 @@
       line-height: 42px !important;
       font-weight: 700 !important;
 
-      h2 {
+      h2{
         margin: 0 !important;
       }
 
@@ -146,7 +146,7 @@
         width: 100%;
         padding: calc(var(--gap) * 2) 0 0 !important;
 
-        button {
+        button{
           width: 100%;
           margin: 0;
           font-size: 15px !important;
@@ -166,15 +166,15 @@
       .actions {
         width: 100%;
 
-        .ui--Button-Group {
+        .ui--Button-Group{
           width: 100%;
         }
       }
-      .btn-container {
+      .btn-container{
         margin-top: 24px;
         width: 100%;
 
-        button {
+        button{
           width: 100%;
         }
       }

From 4bf676fa9d484a89474e7ba10804a95660f8f0e5 Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Mon, 17 Jan 2022 20:58:27 +0300
Subject: [PATCH 10/13] fix: eslint for *.tsx

---
 packages/apps/src/Apps.tsx                                    | 2 +-
 packages/apps/src/Root.tsx                                    | 4 ++--
 packages/page-builder/src/containers/CollectionPage/index.tsx | 3 +--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 38a5872b..3b3f8566 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -46,7 +46,7 @@ const NOT_FOUND: Route = {
   text: 'Unknown'
 };
 
-function Apps({ className = '' }: Props): React.ReactElement<Props> {
+function Apps ({ className = '' }: Props): React.ReactElement<Props> {
   const location = useLocation();
   const { t } = useTranslation();
   const theme = useContext<ThemeDef>(ThemeContext);
diff --git a/packages/apps/src/Root.tsx b/packages/apps/src/Root.tsx
index 25e91e8b..5e9a379e 100644
--- a/packages/apps/src/Root.tsx
+++ b/packages/apps/src/Root.tsx
@@ -25,7 +25,7 @@ interface Props {
   store?: KeyringStore;
 }
 
-function createTheme({ uiTheme }: { uiTheme: string }): ThemeDef {
+function createTheme ({ uiTheme }: { uiTheme: string }): ThemeDef {
   const validTheme = Themes.find((themeElem) => {
     return (themeElem.domain && window.location.href.includes(themeElem.domain)) || (themeElem.ip && window.location.href.includes(themeElem.ip));
   });
@@ -36,7 +36,7 @@ function createTheme({ uiTheme }: { uiTheme: string }): ThemeDef {
   return validTheme || uniqueTheme;
 }
 
-function Root({ store }: Props): React.ReactElement<Props> {
+function Root ({ store }: Props): React.ReactElement<Props> {
   const [theme, setTheme] = useState(() => createTheme(settings));
 
   useEffect((): void => {
diff --git a/packages/page-builder/src/containers/CollectionPage/index.tsx b/packages/page-builder/src/containers/CollectionPage/index.tsx
index 6870b49b..5adbdaa3 100644
--- a/packages/page-builder/src/containers/CollectionPage/index.tsx
+++ b/packages/page-builder/src/containers/CollectionPage/index.tsx
@@ -21,7 +21,6 @@ import { UnqButton } from '@polkadot/react-components';
 import { useScreenWidthFromThreshold, useTokenAttributes } from '@polkadot/react-hooks';
 import { NftCollectionInterface, useCollection } from '@polkadot/react-hooks/useCollection';
 
-
 interface CollectionPageProps {
   account: string;
   basePath: string;
@@ -33,7 +32,7 @@ interface CollectionPageProps {
  and open the same page, where user interrupted the action.
  */
 
-function CollectionPage({ account, basePath }: CollectionPageProps): ReactElement {
+function CollectionPage ({ account, basePath }: CollectionPageProps): ReactElement {
   const [isPreviewOpen, setIsPreviewOpen] = useState<boolean>(false);
   const [lessThanThreshold] = useScreenWidthFromThreshold(1023);
   const [collectionName, setCollectionName] = useState<string>('');

From 97c6026c8395fba3d705550aae7603f27a2ba531 Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Tue, 18 Jan 2022 09:30:05 +0300
Subject: [PATCH 11/13] fix: disclaimer layout mostly

---
 packages/apps/src/apps.scss                   | 17 +++++---
 .../src/components/Disclaimer.tsx             | 10 ++---
 packages/page-builder/src/styles.scss         | 41 +++++++++++--------
 3 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/packages/apps/src/apps.scss b/packages/apps/src/apps.scss
index 3f1e2961..50a854a7 100644
--- a/packages/apps/src/apps.scss
+++ b/packages/apps/src/apps.scss
@@ -241,6 +241,8 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  margin-top: 80px;
+  padding: calc(var(--gap) / 2 * 3);
 }
 
 .app-balances {
@@ -483,6 +485,7 @@
 
   .menu-mobile {
     padding: var(--gap);
+    margin-top: 80px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -557,10 +560,10 @@
     width: 25%;
   }
 
-  .menu-mobile,
-  .manage-accounts {
-    margin-top: 64px;
-  }
+  // .menu-mobile,
+  // .manage-accounts {
+  //   margin-top: 80px;
+  // }
 
   .welcome {
     height: 100vh;
@@ -602,7 +605,7 @@
   }
 
   .menu-mobile {
-    margin-top: 85px;
+    margin-top: 64px;
 
     &.no-accounts {
       margin-top: 67px;
@@ -635,6 +638,10 @@
       display: none;
     }
   }
+  .manage-accounts {
+    margin-top: 64px;
+    padding: var(--gap);
+  }
 }
 
 .manage-accounts {
diff --git a/packages/page-builder/src/components/Disclaimer.tsx b/packages/page-builder/src/components/Disclaimer.tsx
index 8103d062..8280f522 100644
--- a/packages/page-builder/src/components/Disclaimer.tsx
+++ b/packages/page-builder/src/components/Disclaimer.tsx
@@ -30,15 +30,15 @@ function Disclaimer ({ checkDisclaimer }: Props): React.ReactElement<Props> {
     <div className='disclaimer'>
       <Header as='h1'>Disclaimer</Header>
       <div className='disclaimer-content'>
-        <ol>
-          <li>Make sure you have <span>105 {tokensName}.</span> Otherwise you won`t be able to create a collection. To get some {tokensName} for free go to special Telegram bot <a
+        <ul>
+          <li>1. Make sure you have <span>105 {tokensName}.</span> Otherwise you won`t be able to create a collection. To get some {tokensName} for free go to special Telegram bot <a
             href={envConfig?.uniqueTelegram || ''}
             rel='noopener noreferrer'
             target='_blank'
           >@unique2faucet_opal_bot</a></li>
-          <li>Check carefully that the entered data is correct. Once confirmed, it will not be possible to return and make changes.</li>
-          <li>Collections created in Opal will not be transferred into the Quartz. If you need to transfer the collection, contact the administrator in <a href={envConfig?.discordChannel || ''}>our Discord channel</a>.</li>
-        </ol>
+          <li>2. Check carefully that the entered data is correct. Once confirmed, it will not be possible to return and make changes.</li>
+          <li>3. Collections created in Opal will not be transferred into the Quartz. If you need to transfer the collection, contact the administrator in <a href={envConfig?.discordChannel || ''}>our Discord channel</a>.</li>
+        </ul>
         <div className='custom-checkbox'>
           <div className='checkbox-input'>
             <input
diff --git a/packages/page-builder/src/styles.scss b/packages/page-builder/src/styles.scss
index a35b0f75..865e2b73 100644
--- a/packages/page-builder/src/styles.scss
+++ b/packages/page-builder/src/styles.scss
@@ -1,17 +1,16 @@
 .builder-page {
-
-  .create-and-search{
+  .create-and-search {
     display: flex;
     align-items: center;
     margin-bottom: calc(var(--gap) * 2);
     gap: calc(var(--gap) * 1.5);
 
-    .isSmall{
+    .isSmall {
       width: 100%;
     }
   }
 
-  .no-collections{
+  .no-collections {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -46,17 +45,21 @@
         color: var(--link-color);
       }
 
-      ol {
-        padding: 0 var(--gap);
+      ul {
+        list-style-type: none;
+        padding-inline-start: 0px;
+        margin-block-start: calc(var(--gap) / 2);
+        margin-block-end: calc(var(--gap) / 2 * 3);
+        //padding: 0 var(--gap);
 
-        li{
-          padding: calc(var(--gap) / 2) 0;
+        li {
+          padding-bottom: calc(var(--gap) / 2);
           font-family: var(--font-roboto);
           font-size: var(--gap);
           line-height: 24px;
           color: var(--title-color);
 
-          span{
+          span {
             font-weight: 700;
           }
         }
@@ -116,13 +119,13 @@
           }
         }
 
-        .checkbox-title{
+        .checkbox-title {
           font-size: var(--gap);
           line-height: calc((var(--gap) * 1.5));
         }
       }
 
-      .disclaimer-btn{
+      .disclaimer-btn {
         text-align: center;
         padding-top: 40px;
       }
@@ -132,7 +135,6 @@
 
 @media (max-width: 1023px) {
   .builder-page {
-
     .collection-card {
       box-shadow: none;
     }
@@ -142,13 +144,13 @@
     }
 
     .disclaimer {
-      padding: 16px;
+      padding: calc(var(--gap) * 2) calc(var(--gap) * 4);
       box-shadow: none;
     }
 
     h1.ui.header {
-    font-size: 28px;
-    line-height: 42px;
+      font-size: 28px;
+      line-height: 42px;
     }
   }
 }
@@ -160,13 +162,18 @@
         flex-direction: row;
         gap: var(--gap);
 
-      .create-btn{
+        .create-btn {
           width: 40%;
           margin: 0;
         }
       }
     }
   }
+  .builder-page {
+    .disclaimer {
+      padding: 0;
+    }
+  }
 }
 
 @media (max-width: 567px) {
@@ -178,7 +185,7 @@
     .create-and-search {
       flex-direction: column;
 
-      .create-btn{
+      .create-btn {
         width: 100%;
         margin: 0;
       }

From 2d66437c419f8559592ff4afbd8d331b8e80decb Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Tue, 18 Jan 2022 09:31:16 +0300
Subject: [PATCH 12/13] fix: add files

---
 packages/apps/src/apps.scss           | 5 -----
 packages/page-builder/src/styles.scss | 1 -
 2 files changed, 6 deletions(-)

diff --git a/packages/apps/src/apps.scss b/packages/apps/src/apps.scss
index 50a854a7..ad218a5a 100644
--- a/packages/apps/src/apps.scss
+++ b/packages/apps/src/apps.scss
@@ -560,11 +560,6 @@
     width: 25%;
   }
 
-  // .menu-mobile,
-  // .manage-accounts {
-  //   margin-top: 80px;
-  // }
-
   .welcome {
     height: 100vh;
   }
diff --git a/packages/page-builder/src/styles.scss b/packages/page-builder/src/styles.scss
index 865e2b73..8ce4dad0 100644
--- a/packages/page-builder/src/styles.scss
+++ b/packages/page-builder/src/styles.scss
@@ -50,7 +50,6 @@
         padding-inline-start: 0px;
         margin-block-start: calc(var(--gap) / 2);
         margin-block-end: calc(var(--gap) / 2 * 3);
-        //padding: 0 var(--gap);
 
         li {
           padding-bottom: calc(var(--gap) / 2);

From fe1844dcd6a2e39318453cef45efd0675ddedb3a Mon Sep 17 00:00:00 2001
From: a-mikhailova <amikhailova@usetech.com>
Date: Tue, 18 Jan 2022 16:06:14 +0300
Subject: [PATCH 13/13] bug/NFTPAR-1121-faq-heading-size

---
 packages/page-faq/src/styles.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/page-faq/src/styles.scss b/packages/page-faq/src/styles.scss
index dbc742f0..0143b1ff 100644
--- a/packages/page-faq/src/styles.scss
+++ b/packages/page-faq/src/styles.scss
@@ -6,9 +6,9 @@
 
     h4.ui.header {
       font-family: var(--font-inter);
-      font-weight: bold;
-      font-size: 18px;
-      line-height: 26px;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 28px;
       margin-top: calc(var(--gap) * 2);
       margin-bottom: calc(var(--gap) / 2);
       min-height: 0;