From 3c833fe842e4149d3f791a6d554f9def68026060 Mon Sep 17 00:00:00 2001
From: MatthieuLP <matthieu.leproux@gmail.com>
Date: Mon, 6 Feb 2023 17:13:29 +0100
Subject: [PATCH] (cp 9ca4837) related to #1859 New design for mobile app
 banner

---
 .../default/template/photos_add_direct.tpl    | 16 +++---
 admin/themes/default/theme.css                | 51 ++++++++++---------
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/admin/themes/default/template/photos_add_direct.tpl b/admin/themes/default/template/photos_add_direct.tpl
index 7a74549a9..3b0bc0e7c 100644
--- a/admin/themes/default/template/photos_add_direct.tpl
+++ b/admin/themes/default/template/photos_add_direct.tpl
@@ -417,21 +417,19 @@ jQuery(document).ready(function(){
     <div class="promote-apps">
       <div class="promote-content">
         <div class="left-side">
-        <img src="https://de.piwigo.org/./plugins/piwigo-piwigodotorg/images/mobile_applications/Group_77.png">
-          <div class="promote-text">
-            <span>{"Piwigo is also on mobile."|@translate|escape:javascript}</span>
-            <span>{"Try now !"|@translate|escape:javascript}</span>
-          </div>
+          <img src="https://sandbox.piwigo.com/uploads/4/y/1/4y1zzhnrnw//2023/01/24/20230124175152-015bc1e3.png">
+        </div>
+        <div class="promote-text">
+          <span>{"Piwigo is also on mobile."|@translate|escape:javascript}</span>
+          <span>{"Try now !"|@translate|escape:javascript}</span>
         </div>
-        <div class="mid-side"></div>
         <div class="right-side">
-          <div class="promote-text">
-            <span>{"Install Piwigo on mobile"|@translate|escape:javascript}</span>
+          <div>
             <a href="{$PHPWG_URL}/mobile-applications" target="_blank"><span class="go-to-porg icon-link-1">{"Discover"|@translate|escape:javascript}</span></a>
           </div>
         </div>
       </div>
-      <span class="dont-show-again">{'Understood, do not show again'|translate|escape:javascript}</span>
+      <span class="dont-show-again icon-cancel tiptip" title="{'Understood, do not show again'|translate|escape:javascript}"></span>
     </div>
   {/if}
 
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index bdfa188f7..2923ab480 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -6684,9 +6684,14 @@ color:#FF7B00;
   flex-direction: column;
   justify-content: flex-end;
 
-  border-bottom: 1px solid lightgray;
-  padding: 0 15px 15px 15px;
-  margin-bottom: 15px;
+  padding: 15px;
+  margin: 0 20px 15px 20px;
+  border-radius: 5px;
+
+  background: #f5d8b0;
+  position: relative;
+
+  box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.1)
 }
 
 .close-apps {
@@ -6702,11 +6707,11 @@ color:#FF7B00;
 }
 
 .dont-show-again {
-  margin-left: auto;
-  color: #555;
-  border-radius: 20px;
-  padding: 3px 8px;
-  font-weight: 700;
+  position: absolute;
+  color: #333;
+  top: 5px;
+  right: 5px;
+  font-size: 25px;
 }
 
 .dont-show-again:hover, 
@@ -6717,28 +6722,26 @@ color:#FF7B00;
 .promote-content {
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
+  justify-content: center;
+  flex: 2;
 }
 
 .promote-content .left-side {
   display: flex;
   flex-direction: row;
-  align-items: center;
-}
-.promote-content .mid-side {
-  border-right: 1px solid gray;
+  flex: 1;
 }
 .promote-content .right-side {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  flex: 1;
 }
 
 .promote-content .left-side img {
   width: 170px;
-  margin-left: 60px;
-  margin-right: 80px;
+  margin-left: 25px;
 }
 
 .promote-text {
@@ -6747,8 +6750,13 @@ color:#FF7B00;
   font-size: 30px;
   font-weight: 700;
   color: #000;
+  justify-content: center;
+  flex: 2;
 }
 
+.promote-text span {
+  font-size: 35px;
+}
 .promote-text span:first-child {
   margin-bottom: 5px;
 }
@@ -6765,6 +6773,7 @@ color:#FF7B00;
   color: #3c3c3c;
   width: 150px;
   text-align: center;
+  white-space: nowrap;
 }
 
 .go-to-porg::before {
@@ -6787,23 +6796,19 @@ color:#FF7B00;
 
 @media (max-width: 1450px) {
   .promote-text span {
-    font-size: 20px;
-  }
-
-  .promote-content .left-side img {
-    margin-left: 60px;
+    font-size: 30px;
   }
 }
 
 @media (max-width: 1170px) {
-  .promote-content .left-side img {
-    margin: 0 20px 0 0;
+  .promote-text span {
+    font-size: 25px;
   }
 }
 
 @media (max-width: 1050px) {
   .promote-text span {
-    font-size: 15px;
+    font-size: 20px;
   }
 
   .promote-content .left-side img {