From fa1abe7f2f71bd19256b64dc6920df4f3051d556 Mon Sep 17 00:00:00 2001
From: "Antoine (anso)" <anso@odoo.com>
Date: Wed, 26 Oct 2022 08:23:37 +0000
Subject: [PATCH] [IMP] web_unsplash: improve credentials inputs layout

Inputs are displayed on a colored background that made the placeholder
invisible -> fixed in PR https://github.com/odoo/odoo/pull/104136

Apply button's placement made it related only to the second input but
it should not be the case -> Space was created between button and
second input

task-2984182

closes odoo/odoo#107089

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
---
 .../media_dialog/image_selector.xml           | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml b/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
index 5d7bbb6fd60..39058abbeca 100644
--- a/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
+++ b/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
@@ -11,10 +11,10 @@
 <t t-name="web_unsplash.UnsplashCredentials" owl="1">
     <div class="d-flex align-items-center flex-wrap">
         <a href="https://www.odoo.com/documentation/master/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-access-key"
-           class="mx-2" target="_blank">Get an Access key</a>
+           class="me-1" target="_blank">Get an Access key</a>
         and paste it here:
         <input type="text"
-            class="o_input form-control w-auto mx-2"
+            class="o_input o_required_modifier form-control w-auto mx-2"
             id="accessKeyInput"
             placeholder="Paste your access key here"
             t-model="state.key"
@@ -22,17 +22,15 @@
             t-att-class="{ 'is-invalid': state.hasKeyError }"/>
         and paste
         <a href="https://www.odoo.com/documentation/master/applications/websites/website/optimize/unsplash.html#generate-an-unsplash-application-id"
-           class="mx-2" target="_blank">Application ID</a>
+           class="mx-1" target="_blank">Application ID</a>
         here:
-        <div class="input-group d-flex justify-content-end align-items-center w-auto mx-2">
-            <input type="text"
-                class="o_input form-control w-auto"
-                placeholder="Paste your application ID here"
-                t-model="state.appId"
-                t-on-input="() => this.state.hasAppIdError = false"
-                t-att-class="{ 'is-invalid': state.hasAppIdError }"/>
-            <button type="button" class="btn btn-primary btn-block w-auto p-auto save_unsplash" t-on-click="() => this.submitCredentials()">Apply</button>
-        </div>
+        <input type="text"
+            class="o_input o_required_modifier form-control w-auto ms-2"
+            placeholder="Paste your application ID here"
+            t-model="state.appId"
+            t-on-input="() => this.state.hasAppIdError = false"
+            t-att-class="{ 'is-invalid': state.hasAppIdError }"/>
+        <button type="button" class="btn btn-primary w-auto ms-3 p-auto save_unsplash" t-on-click="() => this.submitCredentials()">Apply</button>
     </div>
 </t>