From 60df471f10e3b532ac985da1a31f88b2125a2cc1 Mon Sep 17 00:00:00 2001
From: damonsson <damon6363@wp.pl>
Date: Sat, 23 Nov 2024 04:03:38 +0100
Subject: [PATCH 1/2] replace font by Arial to save 800kb, fix contrast problem

---
 config/packages/sylius_twig_hooks.yaml |   7 +-
 templates/css_override.html.twig       |   1 +
 templates/info_box.html.twig           | 141 -------------------------
 3 files changed, 7 insertions(+), 142 deletions(-)
 create mode 100644 templates/css_override.html.twig

diff --git a/config/packages/sylius_twig_hooks.yaml b/config/packages/sylius_twig_hooks.yaml
index c0166e4..ff68e40 100644
--- a/config/packages/sylius_twig_hooks.yaml
+++ b/config/packages/sylius_twig_hooks.yaml
@@ -21,10 +21,15 @@ sylius_twig_hooks:
                 priority: 100
 
         'sylius_shop.base#javascripts':
-            analytics:
+            info_box:
                 template: "analytics.html.twig"
                 priority: 100
 
+        'sylius_shop.base#stylesheets':
+            override:
+                template: "css_override.html.twig"
+                priority: 100
+
         'sylius_shop.account.login.content.login_container':
             analytics:
                 template: "shop_demo_credentials.html.twig"
diff --git a/templates/css_override.html.twig b/templates/css_override.html.twig
new file mode 100644
index 0000000..b161d01
--- /dev/null
+++ b/templates/css_override.html.twig
@@ -0,0 +1 @@
+<style>.info-box{position:fixed;bottom:20px;left:20px;z-index:9998;display:none;padding:25px 25px 80px;border-radius:6px;color:#fff;font-size:16px!important;line-height:1.6;box-shadow:0 6px 18px 0 rgba(0,0,0,.22);background:rgba(16,116,93,.9);backdrop-filter:blur(10px);overflow:hidden}.info-box.show,.info-toggle.show>svg:last-child,.info-toggle>svg:first-child{display:block}.info-box a{color:#fff;text-decoration:underline}.info-box a:hover{color:rgba(255,255,255,.85)!important;text-decoration:underline}.info-box label{font-size:16px!important;font-weight:700;padding:0!important;margin:0!important}.info-box select{width:100%;border-radius:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);padding:4px 10px!important}.info-cta,.info-toggle{display:flex;height:48px;border-radius:6px}.info-box__item{margin-bottom:10px}@media (min-width:600px){.info-box__item{display:flex;align-items:center;min-height:30px}}.info-box__item__label{flex-shrink:0;width:130px}.info-box__item__content{flex-grow:1}.select-color-green{background:rgba(16,116,93,.9)!important}.info-cta{position:absolute;bottom:20px;left:80px;align-items:center;padding:0 20px;background:#1e2e3e}.info-cta a{color:#fff;text-decoration:none}.info-toggle{position:fixed;bottom:40px;left:40px;z-index:9999;align-items:center;justify-content:center;width:48px;color:#1e2e3e;box-shadow:0 6px 18px 0 rgba(0,0,0,.05);background:#22b99a;cursor:pointer;transition:.2s}.info-toggle:hover{background:rgba(34,185,154,.8)!important}.info-toggle.show{background:#22b99a}.info-toggle.show>svg:first-child,.info-toggle>svg:last-child{display:none}.admin-layout .admin-layout__sidebar{z-index:997}.admin-layout__nav .sylius-admin-menu{padding-bottom:94px}.bg-success-subtle.text-success{color:#157247!important}button,html{letter-spacing:.03em}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{text-shadow:0 .01em,.01em 0,.01em .01em}*{font-family:Arial,serif}</style>
\ No newline at end of file
diff --git a/templates/info_box.html.twig b/templates/info_box.html.twig
index 326e67c..0e5400f 100644
--- a/templates/info_box.html.twig
+++ b/templates/info_box.html.twig
@@ -1,147 +1,6 @@
 {% set admin_url = 'https://v2.demo.sylius.com/admin' %}
 {% set api_url = 'https://v2.demo.sylius.com/api/v2' %}
 
-<style>
-    .info-box {
-        position: fixed;
-        bottom: 20px;
-        left: 20px;
-        z-index: 9998;
-        display: none;
-        padding: 25px 25px 80px;
-        border-radius: 6px;
-        color: #fff;
-        font-size: 16px !important;
-        line-height: 1.6;
-        box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.22);
-        background: rgba(16, 116, 93, 0.9);
-        backdrop-filter: blur(10px);
-        overflow: hidden;
-    }
-
-    .info-box.show {
-        display: block;
-    }
-
-    .info-box a {
-        color: rgba(255, 255, 255, 1);
-        text-decoration: underline;
-    }
-
-    .info-box a:hover {
-        color: rgba(255, 255, 255, 0.85) !important;
-        text-decoration: underline;
-    }
-
-    .info-box label {
-        font-size: 16px !important;
-        font-weight: bold;
-        padding: 0 !important;
-        margin: 0 !important;
-    }
-
-    .info-box select {
-        width: 100%;
-        border-radius: 4px;
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        color: rgba(255, 255, 255, 0.85);
-        padding: 4px 10px !important;
-    }
-
-    .info-box__item {
-        margin-bottom: 10px;
-    }
-
-    @media (min-width: 600px) {
-        .info-box__item {
-            display: flex;
-            align-items: center;
-            min-height: 30px;
-        }
-    }
-
-    .info-box__item__label {
-        flex-shrink: 0;
-        width: 130px;
-    }
-
-    .info-box__item__content {
-        flex-grow: 1;
-    }
-
-    .select-color-green {
-        background: rgba(16, 116, 93, 0.9) !important;
-    }
-
-    .info-cta {
-        position: absolute;
-        bottom: 20px;
-        left: 80px;
-        display: flex;
-        align-items: center;
-        height: 48px;
-        padding: 0 20px;
-        border-radius: 6px;
-        background: #1E2E3E;
-    }
-
-    .info-cta a {
-        color: #fff;
-        text-decoration: none;
-    }
-
-    .info-toggle {
-        position: fixed;
-        bottom: 40px;
-        left: 40px;
-        z-index: 9999;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 48px;
-        height: 48px;
-        border-radius: 6px;
-        color: #1E2E3E;
-        box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.05);
-        background: #22B99A;
-        cursor: pointer;
-        transition: all 0.2s;
-    }
-
-    .info-toggle:hover {
-        background: rgba(34, 185, 154, 0.8) !important;
-    }
-
-    .info-toggle.show {
-        background: #22B99A;
-    }
-
-    .info-toggle > svg:first-child {
-        display: block;
-    }
-
-    .info-toggle > svg:last-child {
-        display: none;
-    }
-
-    .info-toggle.show > svg:first-child {
-        display: none;
-    }
-
-    .info-toggle.show > svg:last-child {
-        display: block;
-    }
-
-    .admin-layout .admin-layout__sidebar {
-        z-index: 997;
-    }
-
-    .admin-layout__nav .sylius-admin-menu {
-        padding-bottom: 94px;
-    }
-</style>
-
 <div class="info-toggle" id="info-toggle">
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-info-lg" viewBox="0 0 16 16">
         <path d="m9.708 6.075-3.024.379-.108.502.595.108c.387.093.464.232.38.619l-.975 4.577c-.255 1.183.14 1.74 1.067 1.74.72 0 1.554-.332 1.933-.789l.116-.549c-.263.232-.65.325-.905.325-.363 0-.494-.255-.402-.704l1.323-6.208Zm.091-2.755a1.32 1.32 0 1 1-2.64 0 1.32 1.32 0 0 1 2.64 0Z"/>

From 4ef91d81f9f4932295d8438a5a903305d9f48ecb Mon Sep 17 00:00:00 2001
From: damonsson <damon6363@wp.pl>
Date: Sat, 23 Nov 2024 04:04:30 +0100
Subject: [PATCH 2/2] replace font by Arial to save 800kb, fix contrast problem

---
 config/packages/sylius_twig_hooks.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/packages/sylius_twig_hooks.yaml b/config/packages/sylius_twig_hooks.yaml
index ff68e40..5ec5f11 100644
--- a/config/packages/sylius_twig_hooks.yaml
+++ b/config/packages/sylius_twig_hooks.yaml
@@ -21,7 +21,7 @@ sylius_twig_hooks:
                 priority: 100
 
         'sylius_shop.base#javascripts':
-            info_box:
+            analytics:
                 template: "analytics.html.twig"
                 priority: 100