From 707ed01f33ec2b95aa88415366ada555bbc9c088 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 5 Nov 2020 09:55:35 -0500
Subject: [PATCH] UX: Wider canvas buttons in wizard (#11124)

---
 .../wizard/components/font-preview.js         | 22 +++++++++++--------
 .../wizard/components/theme-preview.js        | 13 ++++++-----
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/wizard/components/font-preview.js b/app/assets/javascripts/wizard/components/font-preview.js
index 99d42a5212b..df6d9ef0e98 100644
--- a/app/assets/javascripts/wizard/components/font-preview.js
+++ b/app/assets/javascripts/wizard/components/font-preview.js
@@ -38,7 +38,7 @@ export default createPreviewComponent(659, 320, {
       this.drawFullHeader(colors, headingFont, this.logo);
     }
 
-    const margin = width * 0.04;
+    const margin = 20;
     const avatarSize = height * 0.2;
     const lineHeight = height / 11;
 
@@ -69,25 +69,29 @@ export default createPreviewComponent(659, 320, {
     }
 
     // Share Button
+    const shareButtonWidth = I18n.t("wizard.previews.share_button").length * 11;
+
     ctx.beginPath();
-    ctx.rect(margin, line + lineHeight, width * 0.1, height * 0.12);
+    ctx.rect(margin, line + lineHeight, shareButtonWidth, height * 0.1);
     ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 90, 65);
     ctx.fill();
     ctx.fillStyle = chooseDarker(colors.primary, colors.secondary);
     ctx.font = `${bodyFontSize}em '${font}'`;
     ctx.fillText(
       I18n.t("wizard.previews.share_button"),
-      margin + width / 55,
-      line + lineHeight * 1.85
+      margin + 10,
+      line + lineHeight * 1.7
     );
 
     // Reply Button
+    const replyButtonWidth = I18n.t("wizard.previews.reply_button").length * 11;
+
     ctx.beginPath();
     ctx.rect(
-      margin + width * 0.12,
+      shareButtonWidth + margin + 10,
       line + lineHeight,
-      width * 0.1,
-      height * 0.12
+      replyButtonWidth,
+      height * 0.1
     );
     ctx.fillStyle = colors.tertiary;
     ctx.fill();
@@ -95,8 +99,8 @@ export default createPreviewComponent(659, 320, {
     ctx.font = `${bodyFontSize}em '${font}'`;
     ctx.fillText(
       I18n.t("wizard.previews.reply_button"),
-      margin + width * 0.12 + width / 55,
-      line + lineHeight * 1.85
+      shareButtonWidth + margin + 20,
+      line + lineHeight * 1.7
     );
 
     // Draw Timeline
diff --git a/app/assets/javascripts/wizard/components/theme-preview.js b/app/assets/javascripts/wizard/components/theme-preview.js
index 0abbb21583b..3209b14a4b3 100644
--- a/app/assets/javascripts/wizard/components/theme-preview.js
+++ b/app/assets/javascripts/wizard/components/theme-preview.js
@@ -71,24 +71,27 @@ export default createPreviewComponent(305, 165, {
     }
 
     // Share Button
+    const shareButtonWidth = I18n.t("wizard.previews.share_button").length * 9;
+
     ctx.beginPath();
-    ctx.rect(margin, line + lineHeight, width * 0.14, height * 0.14);
+    ctx.rect(margin, line + lineHeight, shareButtonWidth, height * 0.14);
     ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 90, 65);
     ctx.fill();
     ctx.fillStyle = chooseDarker(colors.primary, colors.secondary);
     ctx.font = `${bodyFontSize}em '${font}'`;
     ctx.fillText(
       I18n.t("wizard.previews.share_button"),
-      margin + width / 55,
+      margin + 8,
       line + lineHeight * 1.85
     );
 
     // Reply Button
+    const replyButtonWidth = I18n.t("wizard.previews.reply_button").length * 9;
     ctx.beginPath();
     ctx.rect(
-      margin * 2 + width * 0.14,
+      shareButtonWidth + margin + 10,
       line + lineHeight,
-      width * 0.14,
+      replyButtonWidth,
       height * 0.14
     );
     ctx.fillStyle = colors.tertiary;
@@ -97,7 +100,7 @@ export default createPreviewComponent(305, 165, {
     ctx.font = `${bodyFontSize}em '${font}'`;
     ctx.fillText(
       I18n.t("wizard.previews.reply_button"),
-      margin * 2 + width * 0.14 + width / 55,
+      shareButtonWidth + margin + 18,
       line + lineHeight * 1.85
     );