[SXA] Bugfix/539379 fix sxa initializer styles (#1072)

* #539379: fixed style for new structure of basic site

* #539379 changed styles and rebase

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_container.scss

@@ -0,0 +1,24 @@
+@import "@sass/abstracts/mixins";
+@import "variables";
+
+* {
+  font-family: Roboto;
+}
+h1 {
+  font-size: 36px;
+}
+.max-height {
+  .container {
+    margin-top: 60px;
+  }
+  position: relative;
+  min-height: calc(100vh - 388px);
+  margin-bottom: 50px;
+  padding-top: 50px;
+
+  @include respond-to(all-mobile) {
+    padding-top: 0;
+    margin-bottom: 0;
+  }
+
+}

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss

@@ -9,6 +9,10 @@ footer {
   .rich-text {
     font-size: $text-size-14;
     color: $text-white;
+
+    a {
+      color: $text-white;
+    }
   }
 
   .indent-inner {

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_promo.scss

@@ -9,6 +9,20 @@
 
     >.component-content {
       @include border-basic(all, 'none', 0);
+
+      .promo-text {
+        .field-promotext {
+          font-size: 14px;
+
+          h3 {
+            font-size: 18px;
+            margin: 10px 0;
+          }
+          p {
+            margin: 10px 0;
+          }
+        }
+      }
       @include respond-to(all-mobile) {
         > div {
           padding: 0;
@@ -18,14 +32,6 @@
           padding: 15px 10px 10px 25px;
         }
       }
-
-      .promo-text {
-        .field-promotext {
-          p {
-            margin: 10px 0;
-          }
-        }
-      }
     }
   }
 }

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_rich-text.scss

@@ -3,8 +3,14 @@
 
 .rich-text {
   color: $text-gray;
+  font-size: 16px;
+
+  h4 {
+    line-height: 50px;
+  }
+
   @include respond-to(all-mobile) {
-    padding: 15px 10px 10px 25px;
+    padding: 15px 30px 10px 25px;
 
     h2 {
       font-size: $text-size-18;

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/main.scss

@@ -1,10 +1,7 @@
-@import "common";
+@import "container";
 @import "header";
 @import "promo";
 @import "navigation";
 @import "component";
 @import "rich-text";
 @import "footer";
-
-/**pages**/
-@import "about";

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/components/Container.tsx

@@ -12,12 +12,13 @@ const BACKGROUND_REG_EXP = new RegExp(
 
 interface ComponentProps {
   rendering: ComponentRendering & { params: ComponentParams };
-  params?: ComponentParams;
+  params: ComponentParams;
 }
 
 const Container = (props: ComponentProps): JSX.Element => {
   const { sitecoreContext } = useSitecoreContext();
-  const styles = `${props.params.GridParameters} ${props.params?.Styles}`.trimEnd();
+  const containerStyles = props.params && props.params.Styles ? props.params.Styles : '';
+  const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd();
   const phKey = `container-${props.params.DynamicPlaceholderId}`;
   const backgroundImage = props.params.BackgroundImage as string;
   let backgroundStyle: { [key: string]: string } = { backgroundImage: '' };