Feat/#229 chat dialog research

apps/webstore/src/app/pages/home/home.component.css

@@ -125,58 +125,10 @@ figure {
   background-image: url('/assets/img/home/family-tree-baby.jpg');
 }
 
-.hide .arrow-up-item,
-.hide {
-  transition: 0.4s;
-  opacity: 0 !important;
-  bottom: 30px;
-}
-
 .remove {
   bottom: 100px;
 }
 
-.show {
-  transition: 0.4s;
-  opacity: 1;
-}
-/* Arrow button */
-.arrow-up-container {
-  position: relative;
-  display: flex;
-  justify-content: flex-end;
-  z-index: 1000;
-}
-.arrow-up-item {
-  transition: 1s;
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-}
-.up-arrow {
-  margin: 4vh 2vh 2vh 2vh;
-  padding-right: 2px;
-  outline: none;
-  background-color: transparent;
-  border: none;
-}
-.up-bar1,
-.up-bar2 {
-  width: 25px;
-  height: 3px;
-  background-color: var(--second-action-color);
-  margin: 5px 0;
-  transition: 0.4s;
-}
-.up-bar2 {
-  -webkit-transform: rotate(-45deg) translate(-2px, -11px);
-  transform: rotate(-45deg) translate(-2px, -11px);
-}
-.up-bar1 {
-  -webkit-transform: rotate(45deg) translate(6px, -4px);
-  transform: rotate(45deg) translate(6px, -4px);
-}
-
 .review-section {
   background-color: white;
   display: flex;

apps/webstore/src/app/pages/home/home.component.html

@@ -200,16 +200,5 @@ <h3 i18n="@@quality">Quality</h3>
                 </div>
             </div>
         </section>
-
-        <div class="arrow-up-container" [ngClass]="showUpArrow ? 'show' : 'hide'">
-            <div class="arrow-up-item" (click)="scrollTop(); eventsService.create('webstore.home.clicked.scroll-top')">
-                <button class="up-arrow">
-                    <div class="icon">
-                        <div class="up-bar1"></div>
-                        <div class="up-bar2"></div>
-                    </div>
-                </button>
-            </div>
-        </div>
     </div>
 </main>

apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html

@@ -9,6 +9,38 @@
             >
                 < <span i18n="@@back">Back</span>
             </a>
+
+            <div class="view-button-container">
+                <div class="view-button view-section">
+                    <button
+                        class="toggle-box-options tc-button-square view"
+                        type="button"
+                        (click)="
+                            toggleBoxOptions();
+                            eventsService.create('webstore.family-tree.clicked.toggle-showing-options')
+                        "
+                        title="Hide/Show box options"
+                    >
+                        <img
+                            class="toggle-box-options-icon"
+                            [ngClass]="{ active: !isMobileOptionOpen }"
+                            alt="Toggle box options"
+                            [src]="toggleBoxOptionsIcon"
+                        />
+                    </button>
+                    <button
+                        class="intro-modal-option tc-button-square"
+                        type="button"
+                        (click)="
+                            openIntroModal(); eventsService.create('webstore.family-tree.clicked.open-intro-modal')
+                        "
+                        title="Hide/Show box options"
+                        data-cy="family-tree-intro-modal-option-button"
+                    >
+                        ?
+                    </button>
+                </div>
+            </div>
         </div>
         <webstore-family-tree-design
             #familyTreeDesignCanvas
@@ -30,17 +62,13 @@
     </div>
     <!-- END CY TESTS -->
 
-    <aside
-        [ngClass]="isMobileOptionOpen ? 'mobile-options-container' : 'desktop-options-container'"
-        *ngIf="isMutable"
-        data-cy="product-options"
-    >
+    <aside [ngClass]="{ 'desktop-options-container': !isMobileOptionOpen }" *ngIf="isMutable" data-cy="product-options">
         <div
             class="blocker"
             *ngIf="isMobileOptionOpen"
             (click)="showOptions(); eventsService.create('webstore.family-tree.clicked.show-options.mobile-background')"
         ></div>
-        <menu [ngClass]="isMobileOptionOpen ? 'mobile-options-items' : ''">
+        <menu [ngClass]="{ 'mobile-options-items': isMobileOptionOpen }">
             <div class="option option-font-select">
                 <div class="option-title">
                     Font
@@ -232,27 +260,5 @@
         >
             <img class="toggle-box-options-icon" alt="Option icon" src="/assets/icons/pen-icon.svg" />
         </button>
-        <button
-            class="toggle-box-options tc-button-square view"
-            type="button"
-            (click)="toggleBoxOptions(); eventsService.create('webstore.family-tree.clicked.toggle-showing-options')"
-            title="Hide/Show box options"
-        >
-            <img
-                class="toggle-box-options-icon"
-                [ngClass]="!isMobileOptionOpen ? '' : 'active'"
-                alt="Toggle box options"
-                [src]="toggleBoxOptionsIcon"
-            />
-        </button>
-        <button
-            class="intro-modal-option tc-button-square"
-            type="button"
-            (click)="openIntroModal(); eventsService.create('webstore.family-tree.clicked.open-intro-modal')"
-            title="Hide/Show box options"
-            data-cy="family-tree-intro-modal-option-button"
-        >
-            ?
-        </button>
     </div>
 </div>

apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.scss

@@ -31,3 +31,7 @@
 .back-container {
   padding: 0;
 }
+
+.view-section {
+  display: flex;
+}