Cookie and footer changes (#2400)

Author: d2eight

_includes/cookie-consent.html

@@ -13,41 +13,46 @@
         color: rgba(255, 255, 255, 1);
     }
 
-    #cookie-notice-text {
+    .buttons-block {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        width: 65%;
+        gap: 16px;
     }
 
-    #cookie-notice-close {
-        position: absolute;
-        top: 1.5rem;
-        right: 1.5rem;
-        color: #fff;
+    .buttons-block button {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 28px;
+        border-radius: 4px;
+        height: 40px;
+        width: 140px;
+        color: #FFF;
     }
 
-    #cookie-notice-close i {
-        font-size: 20px;
+    .buttons-block button:hover {
+        opacity: 0.8;
     }
 
-    #cookie-notice-text span {
-        font-size: 14px;
+    .buttons-block button#cookie-notice-accept {
+        background: #2A7DEC;
     }
 
-    #cookie-notice-text label {
-        font-size: 20px;
+    .buttons-block button#cookie-notice-close {
+        background: rgba(255, 255, 255, 0.05);
     }
 
-    #cookie-notice #cookie-notice-accept {
+    #cookie-notice-text {
         display: flex;
-        text-align: center;
+        flex-direction: column;
         justify-content: center;
-        cursor: pointer;
-        margin-left: 3.5rem;
-        height: 40px;
-        font-size: 18px;
-        width: 140px;
+        width: 65%;
+    }
+
+    #cookie-notice-text span {
+        font-size: 14px;
+    }
+
+    #cookie-notice-text label {
+        font-size: 20px;
     }
 
     @media (max-width: 767px) {
@@ -58,12 +63,7 @@
 
         #cookie-notice-text {
             width: 100%;
-        }
-
-        #cookie-notice #cookie-notice-accept {
-            margin-top: 1.3rem;
-            margin-left: 0;
-            width: 100%;
+            margin-bottom: 40px;
         }
     }
 </style>
@@ -74,10 +74,10 @@
                 href="/cookie-policy/" target="_blank">cookie policy.</a><span class=""></span>
         </span>
     </div>
-    <button id="cookie-notice-accept" class="btn btn-primary btn-sm">Accept</button>
-    <button id="cookie-notice-close" aria-label="Close the cookie notice button">
-        <i class="fa fa-times"></i>
-    </button>
+    <div class="buttons-block">
+        <button id="cookie-notice-accept">Accept</button>
+        <button id="cookie-notice-close" aria-label="Close the cookie notice button">Deny</button>
+    </div>
 </div>
 <script>
     function readCookieValue(value) {

_includes/footer.html

@@ -12,8 +12,15 @@
                     $('#mlb2-7341216').css('display', 'block');
                 }
             </script>
-            <button id="Footer_SignUpForNews" class="n-button try subscribe gtm_button "
-                    onClick="subscribeForNewsletter(event)">Sign up for ThingsBoard news</button>
+            <div class="footer-top-section">
+                <button id="Footer_SignUpForNews" class="n-button try subscribe gtm_button "
+                        onClick="subscribeForNewsletter(event)">Sign up for ThingsBoard news</button>
+                <div class="footer-top-img-section">
+                    <img src="/images/crozdesk-2.webp" alt="ThingsBoard achievement — Crozdesk Quality Choice Top-Ranked Solution 2025">
+                    <img src="/images/crozdesk-1.webp" alt="ThingsBoard achievement — Crozdesk Trusted Vendor High Market Presence 2025">
+                    <img src="/images/supplier-retail.webp" alt="ThingsBoard achievement — Top Supplier in Retail 2024">
+                </div>
+            </div>
             <div id="mlb2-7341216" class="ml-subscribe-form ml-subscribe-form-7341216" style="display: none; max-width: 100%;">
                 <!--            <div id="mlb2-7341216" class="ml-subscribe-form ml-subscribe-form-7341216" style="display: block;">-->
                 <div class="ml-vertical-align-center">

_sass/_base.sass

@@ -678,6 +678,19 @@ footer
   .newsletterSubsContainer
     height: 106px
 
+    .footer-top-section
+      display: flex
+      align-items: center
+      flex-wrap: wrap
+      justify-content: space-between
+      width: 100%
+      gap: 30px
+      @media (max-width: 655px)
+        justify-content: center
+      .footer-top-img-section
+        display: flex
+        gap: 40px
+
     .loading
       margin: 0
       height: 47px