From f1c9eed97515e5d902c31fbc086814055eb286ab Mon Sep 17 00:00:00 2001
From: Kwandes <bz.jasiek@gmail.com>
Date: Thu, 13 Oct 2022 01:32:00 +0200
Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20Facebook=20Cha?=
 =?UTF-8?q?t=20Plugin=20demo=20integration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/webstore/src/index.html | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/apps/webstore/src/index.html b/apps/webstore/src/index.html
index f1eceb08a..d0ddab64c 100644
--- a/apps/webstore/src/index.html
+++ b/apps/webstore/src/index.html
@@ -47,6 +47,37 @@
             gtag('config', 'G-X852EK18T4'); // testing.treecreate.dk gtagId
         </script>
         <!-- End google analytics -->
+        <!-- Messenger Chat Plugin Code -->
+        <div id="fb-root"></div>
+
+        <!-- Your Chat Plugin code -->
+        <div id="fb-customer-chat" class="fb-customerchat"></div>
+
+        <script>
+            var chatbox = document.getElementById('fb-customer-chat');
+            chatbox.setAttribute('page_id', '103352891111872');
+            chatbox.setAttribute('attribution', 'biz_inbox');
+        </script>
+
+        <!-- Your SDK code -->
+        <script>
+            window.fbAsyncInit = function () {
+                FB.init({
+                    xfbml: true,
+                    version: 'v15.0',
+                });
+            };
+
+            (function (d, s, id) {
+                var js,
+                    fjs = d.getElementsByTagName(s)[0];
+                if (d.getElementById(id)) return;
+                js = d.createElement(s);
+                js.id = id;
+                js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
+                fjs.parentNode.insertBefore(js, fjs);
+            })(document, 'script', 'facebook-jssdk');
+        </script>
 
         <!-- load fonts -->
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Share+Tech" />

From 83f7be74b8a074887c462edb3001b67629c7fa65 Mon Sep 17 00:00:00 2001
From: Kwandes <bz.jasiek@gmail.com>
Date: Sat, 15 Oct 2022 20:39:22 +0200
Subject: [PATCH 2/9] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Set=20Meta=20Chat?=
 =?UTF-8?q?=20plugin=20to=20use=20Treecreate's=20facebook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/webstore/src/index.html      |  7 ++++---
 apps/webstore/src/index.prod.html | 32 +++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/apps/webstore/src/index.html b/apps/webstore/src/index.html
index d0ddab64c..17cdfd6ab 100644
--- a/apps/webstore/src/index.html
+++ b/apps/webstore/src/index.html
@@ -50,12 +50,12 @@
         <!-- Messenger Chat Plugin Code -->
         <div id="fb-root"></div>
 
-        <!-- Your Chat Plugin code -->
+        <!-- Meta Chat Plugin code -->
         <div id="fb-customer-chat" class="fb-customerchat"></div>
 
         <script>
             var chatbox = document.getElementById('fb-customer-chat');
-            chatbox.setAttribute('page_id', '103352891111872');
+            chatbox.setAttribute('page_id', '111729197337915');
             chatbox.setAttribute('attribution', 'biz_inbox');
         </script>
 
@@ -74,10 +74,11 @@
                 if (d.getElementById(id)) return;
                 js = d.createElement(s);
                 js.id = id;
-                js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
+                js.src = 'https://connect.facebook.net/da_DK/sdk/xfbml.customerchat.js';
                 fjs.parentNode.insertBefore(js, fjs);
             })(document, 'script', 'facebook-jssdk');
         </script>
+        <!-- End Meta Chat Plugin code -->
 
         <!-- load fonts -->
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Share+Tech" />
diff --git a/apps/webstore/src/index.prod.html b/apps/webstore/src/index.prod.html
index e9d854593..d65547178 100644
--- a/apps/webstore/src/index.prod.html
+++ b/apps/webstore/src/index.prod.html
@@ -60,6 +60,38 @@
             gtag('config', 'UA-182084333-1'); // treecreate.dk gtagId
         </script>
         <!-- End google analytics -->
+        <!-- Messenger Chat Plugin Code -->
+        <div id="fb-root"></div>
+
+        <!-- Meta Chat Plugin code -->
+        <div id="fb-customer-chat" class="fb-customerchat"></div>
+
+        <script>
+            var chatbox = document.getElementById('fb-customer-chat');
+            chatbox.setAttribute('page_id', '111729197337915');
+            chatbox.setAttribute('attribution', 'biz_inbox');
+        </script>
+
+        <!-- Your SDK code -->
+        <script>
+            window.fbAsyncInit = function () {
+                FB.init({
+                    xfbml: true,
+                    version: 'v15.0',
+                });
+            };
+
+            (function (d, s, id) {
+                var js,
+                    fjs = d.getElementsByTagName(s)[0];
+                if (d.getElementById(id)) return;
+                js = d.createElement(s);
+                js.id = id;
+                js.src = 'https://connect.facebook.net/da_DK/sdk/xfbml.customerchat.js';
+                fjs.parentNode.insertBefore(js, fjs);
+            })(document, 'script', 'facebook-jssdk');
+        </script>
+        <!-- End Meta Chat Plugin code -->
     </head>
 
     <body>

From 3a4f96f848d6da6d0b9dcfda8a9e36d3c4e81da5 Mon Sep 17 00:00:00 2001
From: Teodor_Jonasson <teodor_jonasson@hotmail.com>
Date: Tue, 8 Nov 2022 02:52:49 +0100
Subject: [PATCH 3/9] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Remove=20scroll?=
 =?UTF-8?q?=20to=20top=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/pages/home/home.component.css     | 48 -------------------
 .../src/app/pages/home/home.component.html    | 11 -----
 2 files changed, 59 deletions(-)

diff --git a/apps/webstore/src/app/pages/home/home.component.css b/apps/webstore/src/app/pages/home/home.component.css
index 7c8fdd370..cdd7cfced 100644
--- a/apps/webstore/src/app/pages/home/home.component.css
+++ b/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;
diff --git a/apps/webstore/src/app/pages/home/home.component.html b/apps/webstore/src/app/pages/home/home.component.html
index 1deea0c6d..97b2c6c9c 100644
--- a/apps/webstore/src/app/pages/home/home.component.html
+++ b/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>

From 88377295904815d9474004ec8828109130e01dbc Mon Sep 17 00:00:00 2001
From: Teodor_Jonasson <teodor_jonasson@hotmail.com>
Date: Tue, 8 Nov 2022 03:01:26 +0100
Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20center=20product=20o?=
 =?UTF-8?q?ptions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/webstore/src/assets/styles/product-options.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/webstore/src/assets/styles/product-options.scss b/apps/webstore/src/assets/styles/product-options.scss
index 49739027c..70bb8e380 100644
--- a/apps/webstore/src/assets/styles/product-options.scss
+++ b/apps/webstore/src/assets/styles/product-options.scss
@@ -182,6 +182,8 @@
   background: white;
   padding: 10px 25px 20px 25px;
   z-index: 1000;
+  align-items: center;
+  justify-content: center;
 }
 
 .remove {
@@ -255,7 +257,8 @@
   }
 
   .mobile-option-buttons-container {
-    right: 1em;
+    display: flex;
+    justify-content: center;
   }
 
   .mobile-options {

From 4ba5c1dc9f7a411354c5a299e21111ca97d34fea Mon Sep 17 00:00:00 2001
From: Teodor_Jonasson <teodor_jonasson@hotmail.com>
Date: Tue, 8 Nov 2022 03:07:38 +0100
Subject: [PATCH 5/9] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20refactor=20class?=
 =?UTF-8?q?=20setting=20on=20options?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../family-tree/family-tree.component.html    |   8 +-
 .../pet-sign/pet-sign.component.html          | 188 +++++++------
 .../quotable/quotable.component.html          | 251 +++++++++---------
 3 files changed, 215 insertions(+), 232 deletions(-)

diff --git a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
index 60e4f5446..433805cbf 100644
--- a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
@@ -30,17 +30,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
diff --git a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
index e95903a69..113a02d2a 100644
--- a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
@@ -45,122 +45,116 @@
     </section>
 
     <!-- Options -->
-    <aside [ngClass]="isMobileOptionOpen ? 'mobile-options-container' : 'desktop-options-container'" *ngIf="isMutable">
+    <aside [ngClass]="{ 'desktop-options-container': !isMobileOptionOpen }" *ngIf="isMutable">
         <div
             class="blocker"
             *ngIf="isMobileOptionOpen"
             (click)="showOptions(); eventsService.create('webstore.pet-sign.clicked.show-options.mobile-background')"
         ></div>
-        <div [ngClass]="isMobileOptionOpen ? 'mobile-options-container' : ''">
-            <menu [ngClass]="isMobileOptionOpen ? 'mobile-options-items' : ''">
-                <!-- ====== Font selection ====== -->
-                <div class="option option-font-select">
-                    <div class="option-title">
-                        Font
-                        <webstore-info-popover
-                            title="Font"
-                            text="{{
-                                isEnglish()
-                                    ? 'Choose the font that best suits you.'
-                                    : 'Vælg hvilken font der passer dig bedst. '
-                            }}"
-                        ></webstore-info-popover>
-                    </div>
-                    <div class="option-frame-design-btn">
-                        <div ngbDropdown class="font-dropdown-container" data-cy="font-select-option">
-                            <button class="btn" ngbDropdownToggle [ngStyle]="{ 'font-family': displayFont }">
-                                {{ displayFont }}
-                            </button>
-                            <div ngbDropdownMenu>
-                                <button
-                                    (click)="changeFont(font)"
-                                    ngbDropdownItem
-                                    *ngFor="let font of fontOptions"
-                                    [ngStyle]="{ 'font-family': font.value }"
-                                >
-                                    {{ font.key }}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
+        <menu [ngClass]="{ 'mobile-options-items': isMobileOptionOpen }">
+            <!-- ====== Font selection ====== -->
+            <div class="option option-font-select">
+                <div class="option-title">
+                    Font
+                    <webstore-info-popover
+                        title="Font"
+                        text="{{
+                            isEnglish()
+                                ? 'Choose the font that best suits you.'
+                                : 'Vælg hvilken font der passer dig bedst. '
+                        }}"
+                    ></webstore-info-popover>
                 </div>
-
-                <!-- ====== Design selection option ====== -->
-                <div class="option option-frame-design">
-                    <div class="option-title">
-                        Design
-                        <webstore-info-popover
-                            title="Design"
-                            text="{{
-                                isEnglish()
-                                    ? 'Choose the frame you like the most.'
-                                    : 'Vælg den ramme der passer dig bedst.'
-                            }}"
-                        ></webstore-info-popover>
-                    </div>
-                    <div class="option-frame-design-btn">
-                        <button
-                            class="design-arrow-left tc-button-sm-square"
-                            (click)="changeDesign('prev')"
-                            data-cy="prev-design-button"
-                        >
-                            <span class="arrow-left"></span>
+                <div class="option-frame-design-btn">
+                    <div ngbDropdown class="font-dropdown-container" data-cy="font-select-option">
+                        <button class="btn" ngbDropdownToggle [ngStyle]="{ 'font-family': displayFont }">
+                            {{ displayFont }}
                         </button>
-                        <div class="display display-design">
-                            {{ getDesignName() }}
+                        <div ngbDropdownMenu>
+                            <button
+                                (click)="changeFont(font)"
+                                ngbDropdownItem
+                                *ngFor="let font of fontOptions"
+                                [ngStyle]="{ 'font-family': font.value }"
+                            >
+                                {{ font.key }}
+                            </button>
                         </div>
-                        <button
-                            class="design-arrow-right tc-button-sm-square"
-                            (click)="changeDesign('next')"
-                            [disabled]="!isMutable"
-                            data-cy="next-design-button"
-                        >
-                            <span class="arrow-right"></span>
-                        </button>
                     </div>
                 </div>
+            </div>
 
-                <!-- ====== Save and reset buttons ====== -->
-                <div class="option option-actions">
+            <!-- ====== Design selection option ====== -->
+            <div class="option option-frame-design">
+                <div class="option-title">
+                    Design
+                    <webstore-info-popover
+                        title="Design"
+                        text="{{
+                            isEnglish() ? 'Choose the frame you like the most.' : 'Vælg den ramme der passer dig bedst.'
+                        }}"
+                    ></webstore-info-popover>
+                </div>
+                <div class="option-frame-design-btn">
                     <button
-                        class="btn-save-design tc-button-50"
-                        (click)="
-                            saveDesign({ persists: true });
-                            eventsService.create('webstore.pet-sign.clicked.save-design')
-                        "
-                        [disabled]="!isDesignValid"
-                        data-cy="save-button"
+                        class="design-arrow-left tc-button-sm-square"
+                        (click)="changeDesign('prev')"
+                        data-cy="prev-design-button"
                     >
-                        <span i18n="@@save">Save</span>
-                        <img src="/assets/icons/save-icon.svg" class="option-icon" alt="Save icon" />
+                        <span class="arrow-left"></span>
                     </button>
+                    <div class="display display-design">
+                        {{ getDesignName() }}
+                    </div>
                     <button
-                        class="tc-button-50"
-                        (click)="clearDesign(); eventsService.create('webstore.pet-sign.clicked.reset')"
-                        data-cy="reset-button"
+                        class="design-arrow-right tc-button-sm-square"
+                        (click)="changeDesign('next')"
+                        [disabled]="!isMutable"
+                        data-cy="next-design-button"
                     >
-                        <span i18n="@@reset">Reset</span>
-                        <img src="/assets/icons/reset-icon.svg" class="option-icon" alt="Reset icon" />
+                        <span class="arrow-right"></span>
                     </button>
                 </div>
+            </div>
 
-                <!-- ====== Add to Basket button ====== -->
-                <div class="option">
-                    <button
-                        class="tc-button-100 green remove-on-mobile"
-                        (click)="
-                            openAddToBasketModal();
-                            eventsService.create('webstore.pet-sign.clicked.add-to-basket.desktop')
-                        "
-                        [disabled]="!isDesignValid"
-                        data-cy="add-pet-sign-to-basket-button"
-                    >
-                        <span i18n="@@add">Add</span>
-                        <img src="/assets/icons/basket-white-icon.svg" class="option-icon" alt="Basket icon" />
-                    </button>
-                </div>
-            </menu>
-        </div>
+            <!-- ====== Save and reset buttons ====== -->
+            <div class="option option-actions">
+                <button
+                    class="btn-save-design tc-button-50"
+                    (click)="
+                        saveDesign({ persists: true }); eventsService.create('webstore.pet-sign.clicked.save-design')
+                    "
+                    [disabled]="!isDesignValid"
+                    data-cy="save-button"
+                >
+                    <span i18n="@@save">Save</span>
+                    <img src="/assets/icons/save-icon.svg" class="option-icon" alt="Save icon" />
+                </button>
+                <button
+                    class="tc-button-50"
+                    (click)="clearDesign(); eventsService.create('webstore.pet-sign.clicked.reset')"
+                    data-cy="reset-button"
+                >
+                    <span i18n="@@reset">Reset</span>
+                    <img src="/assets/icons/reset-icon.svg" class="option-icon" alt="Reset icon" />
+                </button>
+            </div>
+
+            <!-- ====== Add to Basket button ====== -->
+            <div class="option">
+                <button
+                    class="tc-button-100 green remove-on-mobile"
+                    (click)="
+                        openAddToBasketModal(); eventsService.create('webstore.pet-sign.clicked.add-to-basket.desktop')
+                    "
+                    [disabled]="!isDesignValid"
+                    data-cy="add-pet-sign-to-basket-button"
+                >
+                    <span i18n="@@add">Add</span>
+                    <img src="/assets/icons/basket-white-icon.svg" class="option-icon" alt="Basket icon" />
+                </button>
+            </div>
+        </menu>
     </aside>
 </main>
 <!-- Floating icons -->
diff --git a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
index 4ff02c0be..733f7b6c2 100644
--- a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
@@ -46,156 +46,149 @@
     </section>
 
     <!-- Options -->
-    <aside [ngClass]="isMobileOptionOpen ? 'mobile-options-container' : 'desktop-options-container'" *ngIf="isMutable">
+    <aside [ngClass]="{ 'desktop-options-container': !isMobileOptionOpen }" *ngIf="isMutable">
         <div
             class="blocker"
             *ngIf="isMobileOptionOpen"
             (click)="showOptions(); eventsService.create('webstore.quotable.clicked.show-options.mobile-background')"
         ></div>
-        <div [ngClass]="isMobileOptionOpen ? 'mobile-options-container' : ''">
-            <menu [ngClass]="isMobileOptionOpen ? 'mobile-options-items' : ''">
-                <!-- ====== Font selection ====== -->
-                <div class="option option-font-select">
-                    <div class="option-title">
-                        Font
-                        <webstore-info-popover
-                            title="Font"
-                            text="{{
-                                isEnglish()
-                                    ? 'Choose the font that best suits you.'
-                                    : 'Vælg hvilken font der passer dig bedst. '
-                            }}"
-                        ></webstore-info-popover>
-                    </div>
-                    <div class="option-frame-design-btn">
-                        <div ngbDropdown class="font-dropdown-container" data-cy="font-select-option">
-                            <button class="btn" ngbDropdownToggle [ngStyle]="{ 'font-family': displayFont }">
-                                {{ displayFont }}
-                            </button>
-                            <div ngbDropdownMenu>
-                                <button
-                                    (click)="changeFont(font)"
-                                    ngbDropdownItem
-                                    *ngFor="let font of fontOptions"
-                                    [ngStyle]="{ 'font-family': font.value }"
-                                >
-                                    {{ font.key }}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
+        <menu [ngClass]="{ 'mobile-options-items': isMobileOptionOpen }">
+            <!-- ====== Font selection ====== -->
+            <div class="option option-font-select">
+                <div class="option-title">
+                    Font
+                    <webstore-info-popover
+                        title="Font"
+                        text="{{
+                            isEnglish()
+                                ? 'Choose the font that best suits you.'
+                                : 'Vælg hvilken font der passer dig bedst. '
+                        }}"
+                    ></webstore-info-popover>
                 </div>
-
-                <!-- ====== Design selection option ====== -->
-                <div class="option option-frame-design">
-                    <div class="option-title">
-                        Design
-                        <webstore-info-popover
-                            title="Design"
-                            text="{{
-                                isEnglish()
-                                    ? 'Choose the frame you like the most.'
-                                    : 'Vælg den ramme der passer dig bedst.'
-                            }}"
-                        ></webstore-info-popover>
-                    </div>
-                    <div class="option-frame-design-btn">
-                        <button
-                            class="design-arrow-left tc-button-sm-square"
-                            (click)="changeDesign('prev')"
-                            data-cy="prev-design-button"
-                        >
-                            <span class="arrow-left"></span>
+                <div class="option-frame-design-btn">
+                    <div ngbDropdown class="font-dropdown-container" data-cy="font-select-option">
+                        <button class="btn" ngbDropdownToggle [ngStyle]="{ 'font-family': displayFont }">
+                            {{ displayFont }}
                         </button>
-                        <div class="display display-design">
-                            {{ getDesignName() }}
+                        <div ngbDropdownMenu>
+                            <button
+                                (click)="changeFont(font)"
+                                ngbDropdownItem
+                                *ngFor="let font of fontOptions"
+                                [ngStyle]="{ 'font-family': font.value }"
+                            >
+                                {{ font.key }}
+                            </button>
                         </div>
-                        <button
-                            class="design-arrow-right tc-button-sm-square"
-                            (click)="changeDesign('next')"
-                            [disabled]="!isMutable"
-                            data-cy="next-design-button"
-                        >
-                            <span class="arrow-right"></span>
-                        </button>
                     </div>
                 </div>
+            </div>
 
-                <!-- ====== Font size change ====== -->
-                <div class="option option-font-size">
-                    <div class="option-title">
-                        <span i18n="@@font-size">Font Size</span>
-                        <webstore-info-popover
-                            title="{{ isEnglish() ? 'Font size' : 'Font størrelse' }}"
-                            text="{{
-                                isEnglish()
-                                    ? 'You can increase or decrease the size of the font. Make them larger for better visibility of your design.'
-                                    : 'Du kan gøre fonten større og mindre. Gør dem større for et mere tydeligt print.'
-                            }}"
-                        ></webstore-info-popover>
-                        <ngx-slider
-                            (userChange)="changeFontSize()"
-                            [(value)]="design.fontSize"
-                            [options]="fontSizeOptions"
-                            data-cy="font-size-slider"
-                        ></ngx-slider>
-                    </div>
+            <!-- ====== Design selection option ====== -->
+            <div class="option option-frame-design">
+                <div class="option-title">
+                    Design
+                    <webstore-info-popover
+                        title="Design"
+                        text="{{
+                            isEnglish() ? 'Choose the frame you like the most.' : 'Vælg den ramme der passer dig bedst.'
+                        }}"
+                    ></webstore-info-popover>
                 </div>
-
-                <!-- ====== Save and reset buttons ====== -->
-                <div class="option option-actions">
+                <div class="option-frame-design-btn">
                     <button
-                        class="btn-save-design tc-button-50"
-                        (click)="
-                            saveDesign({ persists: true });
-                            eventsService.create('webstore.quotable.clicked.save-design')
-                        "
-                        [disabled]="!isDesignValid"
-                        data-cy="save-button"
+                        class="design-arrow-left tc-button-sm-square"
+                        (click)="changeDesign('prev')"
+                        data-cy="prev-design-button"
                     >
-                        <span i18n="@@save">Save</span>
-                        <img src="/assets/icons/save-icon.svg" class="option-icon" alt="Save icon" />
+                        <span class="arrow-left"></span>
                     </button>
+                    <div class="display display-design">
+                        {{ getDesignName() }}
+                    </div>
                     <button
-                        class="tc-button-50"
-                        (click)="clearDesign(); eventsService.create('webstore.quotable.clicked.reset')"
-                        data-cy="reset-button"
+                        class="design-arrow-right tc-button-sm-square"
+                        (click)="changeDesign('next')"
+                        [disabled]="!isMutable"
+                        data-cy="next-design-button"
                     >
-                        <span i18n="@@reset">Reset</span>
-                        <img src="/assets/icons/reset-icon.svg" class="option-icon" alt="Reset icon" />
+                        <span class="arrow-right"></span>
                     </button>
                 </div>
+            </div>
 
-                <!-- ====== Add to Basket button ====== -->
-                <div class="option">
-                    <button
-                        class="tc-button-100"
-                        (click)="
-                            openQuotableTemplateModal();
-                            eventsService.create('webstore.quotable.clicked.select-template')
-                        "
-                        data-cy="quotable-template-button"
-                    >
-                        <span i18n="@@select-a-template">Select a template</span>
-                        <img src="/assets/icons/template-icon.svg" class="option-icon" alt="Option icon" />
-                    </button>
-                </div>
-                <div class="option">
-                    <button
-                        class="tc-button-100 green remove-on-mobile"
-                        (click)="
-                            openAddToBasketModal();
-                            eventsService.create('webstore.quotable.clicked.add-to-basket.desktop')
-                        "
-                        [disabled]="!isDesignValid"
-                        data-cy="add-quotable-to-basket-button"
-                    >
-                        <span i18n="@@add">Add</span>
-                        <img src="/assets/icons/basket-white-icon.svg" class="option-icon" alt="Basket icon" />
-                    </button>
+            <!-- ====== Font size change ====== -->
+            <div class="option option-font-size">
+                <div class="option-title">
+                    <span i18n="@@font-size">Font Size</span>
+                    <webstore-info-popover
+                        title="{{ isEnglish() ? 'Font size' : 'Font størrelse' }}"
+                        text="{{
+                            isEnglish()
+                                ? 'You can increase or decrease the size of the font. Make them larger for better visibility of your design.'
+                                : 'Du kan gøre fonten større og mindre. Gør dem større for et mere tydeligt print.'
+                        }}"
+                    ></webstore-info-popover>
+                    <ngx-slider
+                        (userChange)="changeFontSize()"
+                        [(value)]="design.fontSize"
+                        [options]="fontSizeOptions"
+                        data-cy="font-size-slider"
+                    ></ngx-slider>
                 </div>
-            </menu>
-        </div>
+            </div>
+
+            <!-- ====== Save and reset buttons ====== -->
+            <div class="option option-actions">
+                <button
+                    class="btn-save-design tc-button-50"
+                    (click)="
+                        saveDesign({ persists: true }); eventsService.create('webstore.quotable.clicked.save-design')
+                    "
+                    [disabled]="!isDesignValid"
+                    data-cy="save-button"
+                >
+                    <span i18n="@@save">Save</span>
+                    <img src="/assets/icons/save-icon.svg" class="option-icon" alt="Save icon" />
+                </button>
+                <button
+                    class="tc-button-50"
+                    (click)="clearDesign(); eventsService.create('webstore.quotable.clicked.reset')"
+                    data-cy="reset-button"
+                >
+                    <span i18n="@@reset">Reset</span>
+                    <img src="/assets/icons/reset-icon.svg" class="option-icon" alt="Reset icon" />
+                </button>
+            </div>
+
+            <!-- ====== Add to Basket button ====== -->
+            <div class="option">
+                <button
+                    class="tc-button-100"
+                    (click)="
+                        openQuotableTemplateModal(); eventsService.create('webstore.quotable.clicked.select-template')
+                    "
+                    data-cy="quotable-template-button"
+                >
+                    <span i18n="@@select-a-template">Select a template</span>
+                    <img src="/assets/icons/template-icon.svg" class="option-icon" alt="Option icon" />
+                </button>
+            </div>
+            <div class="option">
+                <button
+                    class="tc-button-100 green remove-on-mobile"
+                    (click)="
+                        openAddToBasketModal(); eventsService.create('webstore.quotable.clicked.add-to-basket.desktop')
+                    "
+                    [disabled]="!isDesignValid"
+                    data-cy="add-quotable-to-basket-button"
+                >
+                    <span i18n="@@add">Add</span>
+                    <img src="/assets/icons/basket-white-icon.svg" class="option-icon" alt="Basket icon" />
+                </button>
+            </div>
+        </menu>
     </aside>
 </main>
 <!-- Floating icons -->

From 7ae79651460015a8011ea1e8ecdb9011eebc2065 Mon Sep 17 00:00:00 2001
From: Teodor_Jonasson <teodor_jonasson@hotmail.com>
Date: Tue, 8 Nov 2022 03:21:21 +0100
Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20update=20placement?=
 =?UTF-8?q?=20of=20view=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../quotable/quotable.component.html          | 32 +++++++++++--------
 .../pet-sign-design.component.html            |  2 +-
 apps/webstore/src/styles.css                  | 12 +++++++
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
index 733f7b6c2..e04b314d8 100644
--- a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
@@ -10,6 +10,24 @@
             >
                 < <span i18n="@@back">Back</span>
             </a>
+            <div class="view-button-container">
+                <button
+                    class="toggle-box-options tc-button-square view view-button"
+                    type="button"
+                    (click)="
+                        toggleUserOptions(); eventsService.create('webstore.quotable.clicked.toggle-showing-options')
+                    "
+                    title="Hide/Show box options"
+                    data-cy="hide-quotable-options"
+                >
+                    <img
+                        class="toggle-box-options-icon"
+                        [ngClass]="!isMobileOptionOpen ? '' : 'active'"
+                        alt="Toggle box options"
+                        [src]="toggleUserOptionsIcon"
+                    />
+                </button>
+            </div>
         </div>
         <webstore-quotable-design
             #quotableDesign
@@ -207,19 +225,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)="toggleUserOptions(); eventsService.create('webstore.quotable.clicked.toggle-showing-options')"
-            title="Hide/Show box options"
-            data-cy="hide-quotable-options"
-        >
-            <img
-                class="toggle-box-options-icon"
-                [ngClass]="!isMobileOptionOpen ? '' : 'active'"
-                alt="Toggle box options"
-                [src]="toggleUserOptionsIcon"
-            />
-        </button>
     </div>
 </div>
diff --git a/apps/webstore/src/app/shared/components/products/pet-sign-design/pet-sign-design.component.html b/apps/webstore/src/app/shared/components/products/pet-sign-design/pet-sign-design.component.html
index bd405fc77..fd717182e 100644
--- a/apps/webstore/src/app/shared/components/products/pet-sign-design/pet-sign-design.component.html
+++ b/apps/webstore/src/app/shared/components/products/pet-sign-design/pet-sign-design.component.html
@@ -10,7 +10,7 @@
                 cdkAutosizeMinRows="1"
                 cdkAutosizeMaxRows="25"
                 spellcheck="false"
-                [ngStyle]="{ 'font-size': fontSize * 2 + 'px' }"
+                [ngStyle]="{ 'font-size': fontSize * 2.5 + 'px' }"
                 [maxlength]="150"
                 autocomplete="off"
                 [ngModel]="design.title ?? ''"
diff --git a/apps/webstore/src/styles.css b/apps/webstore/src/styles.css
index cad681085..f83b65f47 100644
--- a/apps/webstore/src/styles.css
+++ b/apps/webstore/src/styles.css
@@ -208,6 +208,18 @@ hr {
   text-align: left;
   width: 100%;
   padding-left: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.view-button {
+  position: absolute;
+  right: -5px;
+}
+
+.view-button-container {
+  position: relative;
+  bottom: 20px;
 }
 
 @media screen and (max-width: 600px) {

From 2cf12f3ef0aafdbdac534290dc57aed455fe0630 Mon Sep 17 00:00:00 2001
From: Teodor_Jonasson <teodor_jonasson@hotmail.com>
Date: Tue, 8 Nov 2022 03:28:05 +0100
Subject: [PATCH 7/9] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Add=20view=20button?=
 =?UTF-8?q?=20for=20family=20tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../family-tree/family-tree.component.html    | 54 +++++++++++--------
 .../family-tree/family-tree.component.scss    |  4 ++
 .../quotable/quotable.component.scss          |  4 ++
 apps/webstore/src/styles.css                  |  3 +-
 4 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
index 433805cbf..5018e4329 100644
--- a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
+++ b/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]="!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>
         </div>
         <webstore-family-tree-design
             #familyTreeDesignCanvas
@@ -228,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>
diff --git a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.scss b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.scss
index 0234c8f77..2fb82abe9 100644
--- a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.scss
+++ b/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;
+}
diff --git a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.scss b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.scss
index 27e3cee87..2d09ba296 100644
--- a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.scss
+++ b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.scss
@@ -38,3 +38,7 @@
   position: relative;
   top: -51%;
 }
+
+.view-button {
+  right: -5px !important;
+}
diff --git a/apps/webstore/src/styles.css b/apps/webstore/src/styles.css
index f83b65f47..05aeb2a16 100644
--- a/apps/webstore/src/styles.css
+++ b/apps/webstore/src/styles.css
@@ -214,7 +214,8 @@ hr {
 
 .view-button {
   position: absolute;
-  right: -5px;
+  right: 5px;
+  top: 5px;
 }
 
 .view-button-container {

From 95a71ce5c958a5504d8067bd442c17ba0433bb9d Mon Sep 17 00:00:00 2001
From: Teodor_Jonasson <teodor_jonasson@hotmail.com>
Date: Tue, 8 Nov 2022 03:31:11 +0100
Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20optimize=20view=20fo?=
 =?UTF-8?q?r=20pet=20sign?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../family-tree/family-tree.component.html    |  2 +-
 .../pet-sign/pet-sign.component.html          | 31 ++++++++++---------
 .../pet-sign/pet-sign.component.scss          |  4 +++
 .../quotable/quotable.component.html          |  2 +-
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
index 5018e4329..d8c99a18c 100644
--- a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
@@ -23,7 +23,7 @@
                     >
                         <img
                             class="toggle-box-options-icon"
-                            [ngClass]="!isMobileOptionOpen ? '' : 'active'"
+                            [ngClass]="{'active' : !isMobileOptionOpen}"
                             alt="Toggle box options"
                             [src]="toggleBoxOptionsIcon"
                         />
diff --git a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
index 113a02d2a..ef7a26b81 100644
--- a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
@@ -10,6 +10,23 @@
             >
                 < <span i18n="@@back">Back</span>
             </a>
+
+            <div class="view-button-container">
+                <button
+                    class="toggle-box-options tc-button-square view view-button"
+                    type="button"
+                    (click)="toggleUserOptions(); eventsService.create('webstore.pet-sign.clicked.toggle-showing-options')"
+                    title="Hide/Show box options"
+                    data-cy="hide-pet-sign-options"
+                >
+                    <img
+                        class="toggle-box-options-icon"
+                        [ngClass]="{'active' : !isMobileOptionOpen}"
+                        alt="Toggle box options"
+                        [src]="toggleUserOptionsIcon"
+                    />
+                </button>
+            </div>
         </div>
         <webstore-pet-sign-design
             #petSignDesign
@@ -173,19 +190,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)="toggleUserOptions(); eventsService.create('webstore.pet-sign.clicked.toggle-showing-options')"
-            title="Hide/Show box options"
-            data-cy="hide-pet-sign-options"
-        >
-            <img
-                class="toggle-box-options-icon"
-                [ngClass]="!isMobileOptionOpen ? '' : 'active'"
-                alt="Toggle box options"
-                [src]="toggleUserOptionsIcon"
-            />
-        </button>
     </div>
 </div>
diff --git a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss
index 27e3cee87..f775b4b44 100644
--- a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss
+++ b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss
@@ -38,3 +38,7 @@
   position: relative;
   top: -51%;
 }
+
+.view-button {
+  right: -5px !important;
+}
\ No newline at end of file
diff --git a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
index e04b314d8..6fd7b63da 100644
--- a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
@@ -22,7 +22,7 @@
                 >
                     <img
                         class="toggle-box-options-icon"
-                        [ngClass]="!isMobileOptionOpen ? '' : 'active'"
+                        [ngClass]="{'active' : !isMobileOptionOpen}"
                         alt="Toggle box options"
                         [src]="toggleUserOptionsIcon"
                     />

From 2f802606d59b1f500bcae1efeefd2801e85839eb Mon Sep 17 00:00:00 2001
From: Teodor_Jonasson <teodor_jonasson@hotmail.com>
Date: Tue, 8 Nov 2022 08:13:09 +0100
Subject: [PATCH 9/9] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20formatting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../product-pages/family-tree/family-tree.component.html    | 2 +-
 .../products/product-pages/pet-sign/pet-sign.component.html | 6 ++++--
 .../products/product-pages/pet-sign/pet-sign.component.scss | 2 +-
 .../products/product-pages/quotable/quotable.component.html | 2 +-
 apps/webstore/src/assets/styles/product-options.scss        | 1 +
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
index d8c99a18c..881d27c38 100644
--- a/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/family-tree/family-tree.component.html
@@ -23,7 +23,7 @@
                     >
                         <img
                             class="toggle-box-options-icon"
-                            [ngClass]="{'active' : !isMobileOptionOpen}"
+                            [ngClass]="{ active: !isMobileOptionOpen }"
                             alt="Toggle box options"
                             [src]="toggleBoxOptionsIcon"
                         />
diff --git a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
index ef7a26b81..20d8d3d82 100644
--- a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.html
@@ -15,13 +15,15 @@
                 <button
                     class="toggle-box-options tc-button-square view view-button"
                     type="button"
-                    (click)="toggleUserOptions(); eventsService.create('webstore.pet-sign.clicked.toggle-showing-options')"
+                    (click)="
+                        toggleUserOptions(); eventsService.create('webstore.pet-sign.clicked.toggle-showing-options')
+                    "
                     title="Hide/Show box options"
                     data-cy="hide-pet-sign-options"
                 >
                     <img
                         class="toggle-box-options-icon"
-                        [ngClass]="{'active' : !isMobileOptionOpen}"
+                        [ngClass]="{ active: !isMobileOptionOpen }"
                         alt="Toggle box options"
                         [src]="toggleUserOptionsIcon"
                     />
diff --git a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss
index f775b4b44..2d09ba296 100644
--- a/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss
+++ b/apps/webstore/src/app/pages/products/product-pages/pet-sign/pet-sign.component.scss
@@ -41,4 +41,4 @@
 
 .view-button {
   right: -5px !important;
-}
\ No newline at end of file
+}
diff --git a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
index 6fd7b63da..84aa7aba8 100644
--- a/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
+++ b/apps/webstore/src/app/pages/products/product-pages/quotable/quotable.component.html
@@ -22,7 +22,7 @@
                 >
                     <img
                         class="toggle-box-options-icon"
-                        [ngClass]="{'active' : !isMobileOptionOpen}"
+                        [ngClass]="{ active: !isMobileOptionOpen }"
                         alt="Toggle box options"
                         [src]="toggleUserOptionsIcon"
                     />
diff --git a/apps/webstore/src/assets/styles/product-options.scss b/apps/webstore/src/assets/styles/product-options.scss
index 70bb8e380..a8e30a076 100644
--- a/apps/webstore/src/assets/styles/product-options.scss
+++ b/apps/webstore/src/assets/styles/product-options.scss
@@ -149,6 +149,7 @@
 .mobile-options {
   display: flex;
   flex-direction: row-reverse;
+  justify-content: center;
   margin-right: 10px;
 }