From 04161d2f7d7d2f05bbcf611d04608c0e885232b8 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Tue, 23 Aug 2022 18:07:12 +0200
Subject: [PATCH] Refined radio buttons on Offer screen

- radio button checkbox and colors were a bit off on Offer screen
---
 ghost/admin/app/styles/layouts/offers.css | 14 +++++++++-----
 ghost/admin/app/templates/offer.hbs       |  6 +++---
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/offers.css b/ghost/admin/app/styles/layouts/offers.css
index d2649aedf1..20919c21a5 100644
--- a/ghost/admin/app/styles/layouts/offers.css
+++ b/ghost/admin/app/styles/layouts/offers.css
@@ -205,10 +205,14 @@
 .gh-offer-type-container {
     display: flex;
     width: 100%;
-    border: 1px solid #dddedf;
+    border: 1px solid var(--whitegrey-d2);
     background: #fff;
     color: #394047;
-    border-radius: 3px;
+    border-radius: 4px;
+}
+
+.gh-offer-type-container.disabled {
+    border: 1px solid var(--whitegrey);
 }
 
 .gh-offer-tier-and-trial {
@@ -239,7 +243,7 @@
 }
 
 .gh-offer-type-container .gh-radio:not(:first-child) {
-    border-left: 1px solid #F6F6F6;
+    border-left: 1px solid var(--whitegrey);
 }
 
 .gh-offer-type-container .gh-radio-button {
@@ -251,8 +255,8 @@
     content: "";
     position: absolute;
     top: 4px;
-    left: 4px;
-    width: 9px;
+    left: 3px;
+    width: 10px;
     height: 5px;
     border: 2px solid #fff;
     border-top: none;
diff --git a/ghost/admin/app/templates/offer.hbs b/ghost/admin/app/templates/offer.hbs
index 4d32cf6fec..39052ac8b7 100644
--- a/ghost/admin/app/templates/offer.hbs
+++ b/ghost/admin/app/templates/offer.hbs
@@ -43,11 +43,11 @@
                         {{#if (feature 'freeTrial')}}
                         <h4 class="gh-main-section-header gh-main-section-header-with-info small bn">
                             <span>Discount information</span>
-                            <span class="midgrey gh-main-section-header-info tooltip-top-left" data-tooltip="Once saved, this cannot be changed" >{{svg-jar "info"}}</span>
+                            <span class="midgrey gh-main-section-header-info tooltip-left" data-tooltip="Once saved, this cannot be changed" >{{svg-jar "info"}}</span>
                         </h4>
                         {{else}}
                         <h4 class="gh-main-section-header small bn">
-                            Discount information <span class="midgrey"> – Once saved, this cannot be changed.</span>
+                            Discount information <span class="midgrey"> &ndash; Once saved, this cannot be changed.</span>
                         </h4>
                         {{/if}}
                         <div class="gh-main-section-content grey">
@@ -55,7 +55,7 @@
                             <GhFormGroup>
                                 <div>
                                     <label class="fw6">Offer type</label>
-                                    <div class="gh-offer-type-container">
+                                    <div class="gh-offer-type-container {{if this.isDiscountSectionDisabled "disabled"}}">
                                         <button class="gh-radio {{if this.isDiscountOffer "active"}}" type="button" {{on "click" (fn this.changeType "discount")}} disabled={{this.isDiscountSectionDisabled}}>
                                             <div class="gh-radio-button"></div>
                                             <div class="gh-radio-content">