PR: Brand Info. New design. (#8646)

* work for the surveyjs/service#2362

* work for the surveyjs/service#2362

* work for the surveyjs/service#2362

* work for the surveyjs/service#2362

* work for the surveyjs/service#2362

* work for the surveyjs/service#2362

* work for the surveyjs/service#2362

* work for the surveyjs/service#2362

* work for the surveyjs/service#2362

* work for the surveyjs/service#2362

packages/survey-angular-ui/src/survey-content.component.html

@@ -24,6 +24,7 @@
                   <!-- /ko -->
                 <!-- /ko -->
                 <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'contentBottom' } }"></ng-template>
+                <sv-brand-info *ngIf="model.showBrandInfo"></sv-brand-info>
               </div>
             </div>
             <ng-template [component]="{ name: 'sv-components-container', data: { survey: model, container: 'right' } }"></ng-template>
@@ -38,7 +39,6 @@
           <div *ngIf="model.state === 'empty'" [class]="model.css.bodyEmpty">{{model.emptySurveyText}}</div>
         </div>
       </form>
-      <sv-brand-info *ngIf="model.showBrandInfo"></sv-brand-info>
       <sv-notifier [notifier]="model.notifier"></sv-notifier>
     </div>
   </div>

packages/survey-core/src/common-styles/sv-brand-info.scss

@@ -1,26 +1,46 @@
 sv-brand-info {}
 
-sv-brand-info, .sv-brand-info {
+sv-brand-info,
+.sv-brand-info {
   z-index: 1;
   position: relative;
   margin-top: 1px;
 }
 
 .sv-brand-info {
-  width: 100%;
   font-family: $font-family;
-  text-align: center;
+  text-align: right;
   color: #161616;
-  background: white;
-  padding: 32px 0;
-  box-shadow: 0px -1px 0px #D6D6D6;
+  padding: 24px 40px;
 
   a {
     color: #161616;
     text-decoration-line: underline;
   }
 }
 
+.sd-body--static {
+  .sv-brand-info {
+    padding-top: 0;
+    margin-top: 16px;
+  }
+}
+
+.sd-body--responsive {
+  .sv-brand-info {
+    padding-top: 16px;
+    margin-top: -8px;
+  }
+}
+
+.sd-root-modern--mobile {
+  .sv-brand-info {
+    padding: 48px 24px 8px 24px;
+    margin-top: 0;
+    text-align: center;
+  }
+}
+
 .sv-brand-info__text {
   font-weight: 600;
   font-size: calcFontSize(1);
@@ -40,8 +60,16 @@ sv-brand-info, .sv-brand-info {
   font-weight: 400;
   font-size: calcFontSize(0.75);
   line-height: calcLineHeight(1);
+  padding-top: 4px;
 
   a {
     color: #909090;
   }
+}
+
+.sd-body--responsive {
+  .sv-brand-info {
+    padding-right: 0;
+    padding-left: 0;
+  }
 }

packages/survey-react-ui/src/reactSurvey.tsx

@@ -120,7 +120,6 @@ export class Survey extends SurveyElementBase<any, any>
               <ComponentsContainer survey={this.survey} container={"footer"} needRenderWrapper={false}></ComponentsContainer>
             </div>
           </form>
-          { this.survey.showBrandInfo ? <BrandInfo/> : null }
           <NotifierComponent notifier={this.survey.notifier} ></NotifierComponent>
         </div>
       </div>
@@ -186,6 +185,7 @@ export class Survey extends SurveyElementBase<any, any>
             <ComponentsContainer survey={this.survey} container={"contentTop"}></ComponentsContainer>
             {activePage}
             <ComponentsContainer survey={this.survey} container={"contentBottom"}></ComponentsContainer>
+            { this.survey.showBrandInfo ? <BrandInfo/> : null }
           </div>
         </div>
         <ComponentsContainer survey={this.survey} container={"right"}></ComponentsContainer>

packages/survey-vue3-ui/src/Survey.vue

@@ -59,6 +59,7 @@
                     :container="'contentBottom'"
                     :needRenderWrapper="true"
                   ></component>
+                  <sv-brand-info v-if="vueSurvey.showBrandInfo"></sv-brand-info>
                 </div>
               </div>
               <component
@@ -102,7 +103,6 @@
           </div>
         </div>
       </form>
-      <sv-brand-info v-if="vueSurvey.showBrandInfo"></sv-brand-info>
       <sv-notifier :model="vueSurvey.notifier"></sv-notifier>
     </div>
   </div>

src/knockout/templates/index.html

@@ -37,6 +37,9 @@
                           <!-- /ko -->
                           <!-- /ko -->
                           <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "contentBottom" } } --><!-- /ko -->
+                          <!-- ko if: showBrandInfo -->
+                            <sv-brand-info></sv-brand-info>
+                          <!-- /ko -->
                     </div>
                   </div>
                   <!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "right" } } --><!-- /ko -->
@@ -58,9 +61,6 @@
               <!-- /ko -->
           </div>
       </form>
-      <!-- ko if: showBrandInfo -->
-      <sv-brand-info></sv-brand-info>
-      <!-- /ko -->
       <!-- ko component: { name: 'sv-notifier', params: { notifier: notifier } } -->
       <!-- /ko -->
     </div>

src/vue/survey.vue

@@ -27,6 +27,7 @@
                     :css="css"
                   />
                   <component :is="'sv-components-container'" :survey="vueSurvey" :container="'contentBottom'"></component>
+                  <sv-brand-info v-if="vueSurvey.showBrandInfo"></sv-brand-info>
                 </div>
               </div>
               <component :is="'sv-components-container'" :survey="vueSurvey" :container="'right'"></component>
@@ -55,7 +56,6 @@
           </div>
         </div>
       </form>
-      <sv-brand-info v-if="vueSurvey.showBrandInfo"></sv-brand-info>
       <sv-notifier :model="vueSurvey.notifier"></sv-notifier>
     </div>
   </div>

visualRegressionTests/tests/defaultV2/brandinfo.ts

@@ -33,7 +33,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
 
-      const brandInfo = Selector(".sv-brand-info");
+      const brandInfo = Selector(".sd-body");
       await takeElementScreenshot("brand-info-image.png", brandInfo, t, comparer);
     });
   });