For #26545 - Update the indicator and the close button of the CFR composable.

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.

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

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.