From c3c2a4f6af7868bd48e3f21824d68d0f4033d461 Mon Sep 17 00:00:00 2001
From: Mugurell <Mugurell@users.noreply.github.com>
Date: Fri, 19 Aug 2022 16:52:57 +0300
Subject: [PATCH] For #26545 - Update the indicator and the close button of the
 CFR composable.

---
 app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopup.kt | 4 ++--
 .../java/org/mozilla/fenix/compose/cfr/CFRPopupContent.kt   | 6 +++---
 .../java/org/mozilla/fenix/compose/cfr/CFRPopupShape.kt     | 5 ++++-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopup.kt b/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopup.kt
index d2fae90525..64797d367c 100644
--- a/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopup.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopup.kt
@@ -106,9 +106,9 @@ class CFRPopup(
 
         /**
          * How tall the indicator arrow should be.
-         * This will also affect how wide the base of the indicator arrow will be.
+         * This will also affect the width of the indicator's base which is double the height value.
          */
-        internal const val DEFAULT_INDICATOR_HEIGHT = 15
+        internal const val DEFAULT_INDICATOR_HEIGHT = 7
 
         /**
          * Maximum distance between the popup start and the indicator.
diff --git a/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopupContent.kt b/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopupContent.kt
index dfd7e28899..bd48c33760 100644
--- a/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopupContent.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopupContent.kt
@@ -16,19 +16,19 @@ import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
-import androidx.compose.material.icons.Icons.Filled
-import androidx.compose.material.icons.filled.Close
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import org.mozilla.fenix.R
+import org.mozilla.fenix.R.drawable
 import org.mozilla.fenix.theme.FirefoxTheme
 
 /**
@@ -124,7 +124,7 @@ fun CFRPopupContent(
                 .size(48.dp)
         ) {
             Icon(
-                imageVector = Filled.Close,
+                painter = painterResource(drawable.mozac_ic_close_20),
                 contentDescription = stringResource(R.string.cfr_dismiss_button_default_content_description),
                 modifier = Modifier
                     // Following alignment and padding are necessary to visually align the middle
diff --git a/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopupShape.kt b/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopupShape.kt
index 0924f0b136..e84672725a 100644
--- a/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopupShape.kt
+++ b/app/src/main/java/org/mozilla/fenix/compose/cfr/CFRPopupShape.kt
@@ -27,7 +27,10 @@ import androidx.compose.ui.unit.dp
 import org.mozilla.fenix.theme.FirefoxTheme
 import kotlin.math.roundToInt
 
-private const val INDICATOR_BASE_TO_HEIGHT_RATIO = 1f
+/**
+ * How wide the base of the indicator should be in relation with the indicator's height.
+ */
+private const val INDICATOR_BASE_TO_HEIGHT_RATIO = 2f
 
 /**
  * A [Shape] describing a popup with an indicator triangle shown above or below the popup.