From 58d041c4738a27f5c8e725fe05ef8e97aa01a634 Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Sat, 14 Dec 2024 02:17:09 +0100
Subject: [PATCH] feat: change button design, change textpic mobile layout

---
 .../textimage/templates/frontend.html         | 20 +++++++++----------
 .../Public/Scss/components/_buttons.scss      |  4 ++--
 .../Public/Scss/components/_news.scss         |  5 +++--
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
index 013b29f..93be9fb 100644
--- a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
@@ -5,16 +5,6 @@
   <f:asset.css identifier="CBTextImage" href="{cb:assetPath()}/frontend.css" />
 
   <div class="textimage-container image-pos-{data.imageorient}">
-    <div class="textimage-wrapper">
-      <f:if condition="{data.header}">
-        <h2 class="textimage-header">{data.header}</h2>
-      </f:if>
-      <f:if condition="{data.bodytext}">
-        <div class="textimage-text">
-          <f:format.html>{data.bodytext}</f:format.html>
-        </div>
-      </f:if>
-    </div>
     <div class="textimage-image-wrapper">
       <f:if condition="{data.image}">
         <f:then>
@@ -25,5 +15,15 @@
         </f:else>
       </f:if>
     </div>
+    <div class="textimage-wrapper">
+      <f:if condition="{data.header}">
+        <h2 class="textimage-header">{data.header}</h2>
+      </f:if>
+      <f:if condition="{data.bodytext}">
+        <div class="textimage-text">
+          <f:format.html>{data.bodytext}</f:format.html>
+        </div>
+      </f:if>
+    </div>
   </div>
 </f:section>
diff --git a/packages/base/Resources/Public/Scss/components/_buttons.scss b/packages/base/Resources/Public/Scss/components/_buttons.scss
index c79b2ce..1835daf 100644
--- a/packages/base/Resources/Public/Scss/components/_buttons.scss
+++ b/packages/base/Resources/Public/Scss/components/_buttons.scss
@@ -1,8 +1,8 @@
 .btn {
   background-color: var(--bs-primary);
   color: var(--bs-yellow);
-  font-family: 'Hajime Sans', sans-serif;
-  border-radius: 2rem;
+  font-family: 'Inter', sans-serif;
+  border-radius: .5rem;
   padding: 0.75rem 1.5rem;
   border: none;
   cursor: pointer;
diff --git a/packages/base/Resources/Public/Scss/components/_news.scss b/packages/base/Resources/Public/Scss/components/_news.scss
index 5ad6c9a..5fbf2b0 100644
--- a/packages/base/Resources/Public/Scss/components/_news.scss
+++ b/packages/base/Resources/Public/Scss/components/_news.scss
@@ -3,6 +3,7 @@
   grid-template-columns: repeat(6, 1fr);
   gap: 1rem;
   grid-auto-rows: auto;
+  margin-bottom: 1rem; /* Ensure space below the news list */
 
   .news-list-item {
       grid-column: span 6;
@@ -131,9 +132,9 @@
   }
 }
 
-/* Show mobile button only below desktop breakpoint, add space above */
+/* Show mobile button only below desktop breakpoint, inline-block and margin-top */
 .mobile-btn {
-  margin-top: 2rem; /* Added space between the news list and the show all button */
+  display: inline-block;
   @media (min-width: $breakpoint-lg) {
     display: none;
   }