Material 3 media gallery refresh.

2026-02-15 07:28:30 +00:00 · 2022-07-18 10:08:07 -03:00
parent b78633f9a7
commit 359a39ddaf
56 changed files with 423 additions and 303 deletions
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -366,7 +366,7 @@
              android:configChanges="touchscreen|keyboard|keyboardHidden|orientation|screenLayout|screenSize"/>

        <activity android:name=".mediasend.v2.MediaSelectionActivity"
-            android:theme="@style/TextSecure.FullScreenMedia"
+            android:theme="@style/TextSecure.DarkNoActionBar"
            android:windowSoftInputMode="stateAlwaysHidden|adjustNothing"
            android:launchMode="singleTop"
            android:configChanges="touchscreen|keyboard|keyboardHidden|orientation|screenLayout|screenSize"/>
--- a/app/src/main/java/org/thoughtcrime/securesms/mediasend/CameraXFragment.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/mediasend/CameraXFragment.java
@@ -13,7 +13,6 @@ import android.view.MotionEvent;
 import android.view.Surface;
 import android.view.View;
 import android.view.ViewGroup;
-import android.view.WindowManager;
 import android.view.animation.Animation;
 import android.view.animation.AnimationUtils;
 import android.view.animation.DecelerateInterpolator;
@@ -156,8 +155,6 @@ public class CameraXFragment extends LoggingFragment implements CameraFragment {
    super.onResume();

    camera.bindToLifecycle(getViewLifecycleOwner(),  this::handleCameraInitializationError);
-    requireActivity().getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
-    requireActivity().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
    requireActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
  }

--- a/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/MediaSelectionActivity.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/MediaSelectionActivity.kt
@@ -42,6 +42,7 @@ import org.thoughtcrime.securesms.mediasend.v2.text.send.TextStoryPostSendReposi
 import org.thoughtcrime.securesms.recipients.RecipientId
 import org.thoughtcrime.securesms.safety.SafetyNumberBottomSheet
 import org.thoughtcrime.securesms.stories.Stories
+import org.thoughtcrime.securesms.util.FullscreenHelper
 import org.thoughtcrime.securesms.util.navigation.safeNavigate
 import org.thoughtcrime.securesms.util.visible

@@ -155,6 +156,8 @@ class MediaSelectionActivity :
    }

    onBackPressedDispatcher.addCallback(OnBackPressed())
+
+    FullscreenHelper.setLowProfileMode(window)
  }

  private fun animateTextStyling(selectedSwitch: TextView, unselectedSwitch: TextView, duration: Long) {
--- a/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/gallery/MediaGalleryFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/gallery/MediaGalleryFragment.kt
@@ -132,7 +132,7 @@ class MediaGalleryFragment : Fragment(R.layout.v2_media_gallery_fragment) {
    }

    viewModel.state.observe(viewLifecycleOwner) { state ->
-      toolbar.title = state.bucketTitle
+      toolbar.title = state.bucketTitle ?: requireContext().getString(R.string.AttachmentKeyboard_gallery)
    }

    val galleryItemsWithSelection = LiveDataUtil.combineLatest(
@@ -141,7 +141,7 @@ class MediaGalleryFragment : Fragment(R.layout.v2_media_gallery_fragment) {
    ) { galleryItems, selectedMedia ->
      galleryItems.map {
        if (it is MediaGallerySelectableItem.FileModel) {
-          it.copy(isSelected = selectedMedia.contains(it.media))
+          it.copy(isSelected = selectedMedia.contains(it.media), selectionOneBasedIndex = selectedMedia.indexOf(it.media) + 1)
        } else {
          it
        }
--- a/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/gallery/MediaGallerySelectableItem.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/gallery/MediaGallerySelectableItem.kt
@@ -1,14 +1,17 @@
 package org.thoughtcrime.securesms.mediasend.v2.gallery

+import android.animation.ValueAnimator
 import android.graphics.drawable.Drawable
 import android.view.View
 import android.widget.ImageView
 import android.widget.TextView
+import androidx.core.view.setPadding
 import com.bumptech.glide.load.DataSource
 import com.bumptech.glide.load.engine.GlideException
 import com.bumptech.glide.request.RequestListener
 import com.bumptech.glide.request.target.Target
-import com.google.android.exoplayer2.ui.AspectRatioFrameLayout
+import com.google.android.material.imageview.ShapeableImageView
+import org.signal.core.util.DimensionUnit
 import org.signal.core.util.logging.Log
 import org.thoughtcrime.securesms.R
 import org.thoughtcrime.securesms.mediasend.Media
@@ -26,6 +29,8 @@ typealias OnMediaFolderClicked = (MediaFolder) -> Unit
 typealias OnMediaClicked = (Media, Boolean) -> Unit

 private val FILE_VIEW_HOLDER_TAG = Log.tag(MediaGallerySelectableItem.FileViewHolder::class.java)
+private const val PAYLOAD_CHECK_CHANGED = 0
+private const val PAYLOAD_INDEX_CHANGED = 1

 object MediaGallerySelectableItem {

@@ -51,14 +56,10 @@ object MediaGallerySelectableItem {
  }

  abstract class BaseViewHolder<T : MappingModel<T>>(itemView: View) : MappingViewHolder<T>(itemView) {
-    protected val imageView: ImageView = itemView.findViewById(R.id.media_gallery_image)
+    protected val imageView: ShapeableImageView = itemView.findViewById(R.id.media_gallery_image)
    protected val playOverlay: ImageView = itemView.findViewById(R.id.media_gallery_play_overlay)
-    protected val checkView: ImageView? = itemView.findViewById(R.id.media_gallery_check)
+    protected val checkView: TextView? = itemView.findViewById(R.id.media_gallery_check)
    protected val title: TextView? = itemView.findViewById(R.id.media_gallery_title)
-
-    init {
-      (itemView as AspectRatioFrameLayout).setAspectRatio(1f)
-    }
  }

  class FolderViewHolder(itemView: View, private val onMediaFolderClicked: OnMediaFolderClicked) : BaseViewHolder<FolderModel>(itemView) {
@@ -74,27 +75,81 @@ object MediaGallerySelectableItem {
    }
  }

-  data class FileModel(val media: Media, val isSelected: Boolean) : MappingModel<FileModel> {
+  data class FileModel(val media: Media, val isSelected: Boolean, val selectionOneBasedIndex: Int) : MappingModel<FileModel> {
    override fun areItemsTheSame(newItem: FileModel): Boolean {
      return newItem.media == media
    }

    override fun areContentsTheSame(newItem: FileModel): Boolean {
-      return newItem.media == media && isSelected == newItem.isSelected
+      return newItem.media == media && isSelected == newItem.isSelected && selectionOneBasedIndex == newItem.selectionOneBasedIndex
+    }
+
+    override fun getChangePayload(newItem: FileModel): Any? {
+      return when {
+        newItem.media != media -> null
+        newItem.isSelected != isSelected -> PAYLOAD_CHECK_CHANGED
+        newItem.selectionOneBasedIndex != selectionOneBasedIndex -> PAYLOAD_INDEX_CHANGED
+        else -> null
+      }
    }
  }

  class FileViewHolder(itemView: View, private val onMediaClicked: OnMediaClicked) : BaseViewHolder<FileModel>(itemView) {
+
+    private val selectedPadding = DimensionUnit.DP.toPixels(12f)
+    private val selectedRadius = DimensionUnit.DP.toPixels(12f)
+    private var animator: ValueAnimator? = null
+
    override fun bind(model: FileModel) {
+      checkView?.visible = model.isSelected
+      checkView?.text = "${model.selectionOneBasedIndex}"
+      itemView.setOnClickListener { onMediaClicked(model.media, model.isSelected) }
+      playOverlay.visible = MediaUtil.isVideo(model.media.mimeType) && !model.media.isVideoGif
+      title?.visible = false
+
+      if (PAYLOAD_INDEX_CHANGED in payload) {
+        return
+      }
+
+      if (PAYLOAD_CHECK_CHANGED in payload) {
+        animateCheckState(model.isSelected)
+        return
+      } else {
+        animator?.cancel()
+        updateImageView(if (model.isSelected) 1f else 0f)
+      }
+
      GlideApp.with(imageView)
        .load(DecryptableStreamUriLoader.DecryptableUri(model.media.uri))
        .addListener(ErrorLoggingRequestListener(FILE_VIEW_HOLDER_TAG))
        .into(imageView)
+    }

-      checkView?.isSelected = model.isSelected
-      playOverlay.visible = MediaUtil.isVideo(model.media.mimeType) && !model.media.isVideoGif
-      itemView.setOnClickListener { onMediaClicked(model.media, model.isSelected) }
-      title?.visible = false
+    private fun animateCheckState(isSelected: Boolean) {
+      animator?.cancel()
+
+      val start = if (isSelected) 0f else 1f
+      val end = if (isSelected) 1f else 0f
+
+      animator = ValueAnimator.ofFloat(start, end).apply {
+        addUpdateListener { animator ->
+          val fraction = animator.animatedValue as Float
+          updateImageView(fraction)
+        }
+        start()
+      }
+    }
+
+    override fun onDetachedFromWindow() {
+      animator?.cancel()
+    }
+
+    private fun updateImageView(fraction: Float) {
+      val padding = selectedPadding * fraction
+      imageView.setPadding(padding.toInt())
+
+      val corners = selectedRadius * fraction
+      imageView.shapeAppearanceModel = imageView.shapeAppearanceModel.withCornerSize(corners)
    }
  }

--- a/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/gallery/MediaGalleryViewModel.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/gallery/MediaGalleryViewModel.kt
@@ -47,7 +47,7 @@ class MediaGalleryViewModel(bucketId: String?, bucketTitle: String?, private val
          state.copy(
            bucketId = bucketId, bucketTitle = bucketTitle,
            items = media.map {
-              MediaGallerySelectableItem.FileModel(it, false)
+              MediaGallerySelectableItem.FileModel(it, false, 0)
            }
          )
        }
--- a/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/review/MediaReviewFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/review/MediaReviewFragment.kt
@@ -283,8 +283,8 @@ class MediaReviewFragment : Fragment(R.layout.v2_media_review_fragment) {
  private fun presentImageQualityToggle(quality: SentMediaQuality) {
    qualityButton.setImageResource(
      when (quality) {
-        SentMediaQuality.STANDARD -> R.drawable.ic_sq_36
-        SentMediaQuality.HIGH -> R.drawable.ic_hq_36
+        SentMediaQuality.STANDARD -> R.drawable.ic_sq_24
+        SentMediaQuality.HIGH -> R.drawable.ic_hq_24
      }
    )
  }
--- a/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/review/MediaReviewSelectedItem.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/mediasend/v2/review/MediaReviewSelectedItem.kt
@@ -34,7 +34,6 @@ object MediaReviewSelectedItem {

    private val imageView: ImageView = itemView.findViewById(R.id.media_review_selected_image)
    private val playOverlay: ImageView = itemView.findViewById(R.id.media_review_play_overlay)
-    private val selectedOverlay: ImageView = itemView.findViewById(R.id.media_review_selected_overlay)

    override fun bind(model: Model) {
      Glide.with(imageView)
@@ -43,7 +42,7 @@ object MediaReviewSelectedItem {
        .into(imageView)

      playOverlay.visible = MediaUtil.isNonGifVideo(model.media) && !model.isSelected
-      selectedOverlay.isSelected = model.isSelected
+      imageView.isSelected = model.isSelected

      itemView.contentDescription = if (model.isSelected) {
        context.getString(R.string.MediaReviewSelectedItem__tap_to_remove)
--- a/app/src/main/java/org/thoughtcrime/securesms/scribbles/ImageEditorFragment.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/scribbles/ImageEditorFragment.java
@@ -17,10 +17,12 @@ import android.view.ViewGroup;
 import android.widget.Toast;

 import androidx.activity.OnBackPressedCallback;
+import androidx.annotation.ColorInt;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.annotation.WorkerThread;
 import androidx.appcompat.app.AlertDialog;
+import androidx.core.content.ContextCompat;
 import androidx.fragment.app.Fragment;

 import com.bumptech.glide.load.DataSource;
@@ -249,16 +251,17 @@ public final class ImageEditorFragment extends Fragment implements ImageEditorHu
      restoredModel = null;
    }

+    @ColorInt int blackoutColor = ContextCompat.getColor(requireContext(), R.color.signal_colorBackground);
    if (editorModel == null) {
      switch (mode) {
        case AVATAR_EDIT:
-          editorModel = EditorModel.createForAvatarEdit();
+          editorModel = EditorModel.createForAvatarEdit(blackoutColor);
          break;
        case AVATAR_CAPTURE:
-          editorModel = EditorModel.createForAvatarCapture();
+          editorModel = EditorModel.createForAvatarCapture(blackoutColor);
          break;
        default:
-          editorModel = EditorModel.create();
+          editorModel = EditorModel.create(blackoutColor);
          break;
      }

--- a/app/src/main/java/org/thoughtcrime/securesms/util/FullscreenHelper.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/util/FullscreenHelper.java
@@ -169,4 +169,8 @@ public final class FullscreenHelper {
                                                View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
                                                View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
  }
+
+  public static void setLowProfileMode(@NonNull Window window) {
+    window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE);
+  }
 }
--- a/app/src/main/java/org/thoughtcrime/securesms/wallpaper/crop/WallpaperCropActivity.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/wallpaper/crop/WallpaperCropActivity.java
@@ -179,7 +179,7 @@ public final class WallpaperCropActivity extends BaseActivity {
    int   width  = displayMetrics.widthPixels;
    float ratio  = width / (float) height;

-    EditorModel editorModel = EditorModel.createForWallpaperEditing(ratio);
+    EditorModel editorModel = EditorModel.createForWallpaperEditing(ratio, ContextCompat.getColor(this, R.color.signal_colorBackground));

    EditorElement image = new EditorElement(new UriGlideRenderer(imageUri, true, width, height, UriGlideRenderer.WEAK_BLUR));
    image.getFlags()
--- a/app/src/main/res/color/media_selection_stroke.xml
+++ b/app/src/main/res/color/media_selection_stroke.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="@color/signal_light_colorPrimary" android:state_selected="true" />
+    <item android:color="@color/core_white" android:state_selected="false" />
+</selector>
--- a/app/src/main/res/drawable-ldrtl/persistent_fading_edge.xml
+++ b/app/src/main/res/drawable-ldrtl/persistent_fading_edge.xml
@@ -4,5 +4,5 @@
        android:type="linear"
        android:angle="180"
        android:startColor="@color/transparent"
-        android:endColor="@color/black" />
+        android:endColor="@color/signal_dark_colorBackground" />
 </shape>
--- a/app/src/main/res/drawable/add_media.xml
+++ b/app/src/main/res/drawable/add_media.xml
@@ -1,13 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
-        <shape android:shape="rectangle">
-            <size android:width="36dp" android:height="36dp" />
-            <stroke android:color="@color/core_white" android:width="1.5dp" />
+        <shape android:shape="oval">
+            <size android:width="40dp" android:height="40dp" />
            <corners android:radius="10dp" />
-            <solid android:color="@color/transparent_black_60" />
-            <padding android:bottom="8dp" android:left="8dp" android:right="8dp" android:top="8dp" />
+            <solid android:color="@color/signal_dark_colorSurfaceVariant_92" />
+            <padding android:bottom="9dp" android:left="9dp" android:right="9dp" android:top="9dp" />
        </shape>
    </item>
-    <item android:drawable="@drawable/ic_plus_20" />
+    <item android:drawable="@drawable/ic_add_media_22" />
 </layer-list>
--- a/app/src/main/res/drawable/ic_add_media_22.xml
+++ b/app/src/main/res/drawable/ic_add_media_22.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="22dp"
+    android:height="22dp"
+    android:viewportWidth="22"
+    android:viewportHeight="22">
+  <path
+      android:pathData="M20.634,1.37C19.5,0.245 17.927,0 15.719,0H6.195C4.073,0 2.5,0.245 1.366,1.383C0.244,2.508 0,4.075 0,6.216V15.711C0,17.926 0.232,19.492 1.354,20.617C2.5,21.755 4.061,22 6.268,22H15.719C17.927,22 19.512,21.755 20.634,20.617C21.768,19.492 22,17.926 22,15.711V6.289C22,4.062 21.768,2.496 20.634,1.37ZM20.488,5.959V16.029C20.488,17.485 20.268,18.757 19.524,19.504C18.781,20.263 17.488,20.483 16.049,20.483H5.939C4.512,20.483 3.22,20.25 2.463,19.504C1.72,18.757 1.512,17.485 1.512,16.029V6.032C1.512,4.527 1.72,3.23 2.463,2.484C3.207,1.725 4.524,1.505 6.024,1.505H16.049C17.488,1.505 18.781,1.737 19.524,2.484C20.268,3.242 20.488,4.515 20.488,5.959ZM5.695,10.988C5.695,11.428 6.037,11.759 6.5,11.759H10.219V15.491C10.219,15.955 10.549,16.286 10.988,16.286C11.463,16.286 11.793,15.968 11.793,15.491V11.759H15.512C15.976,11.759 16.305,11.428 16.305,10.988C16.305,10.511 15.988,10.18 15.512,10.18H11.793V6.448C11.793,5.971 11.463,5.641 10.988,5.641C10.549,5.641 10.219,5.983 10.219,6.448V10.18H6.5C6.024,10.18 5.695,10.511 5.695,10.988Z"
+      android:fillColor="@color/signal_dark_colorOnSurface"/>
+</vector>
--- a/app/src/main/res/drawable/ic_crop_24.xml
+++ b/app/src/main/res/drawable/ic_crop_24.xml
@@ -1,9 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-  <path
-      android:fillColor="@color/core_white"
-      android:pathData="M16,6.5L1,6.5L1,5L5,5L5,1L6.5,1L6.5,5L16,5a3,3 0,0 1,3 3v8L17.5,16L17.5,8A1.5,1.5 0,0 0,16 6.5ZM23,17.5L8,17.5A1.5,1.5 0,0 1,6.5 16L6.5,8L5,8v8a3,3 0,0 0,3 3h9.5v4L19,23L19,19h4Z"/>
-</vector>
--- a/app/src/main/res/drawable/ic_crop_rotate_24.xml
+++ b/app/src/main/res/drawable/ic_crop_rotate_24.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M3.341,9.884H14.02C14.213,9.884 14.405,9.884 14.694,10.081L14.694,10.081C14.79,10.278 14.886,10.475 14.886,10.672V15.593C14.886,15.889 14.982,16.085 15.175,16.184L15.175,16.184C15.367,16.282 15.56,16.381 15.752,16.381C15.944,16.381 16.137,16.282 16.329,16.184L16.329,16.184C16.522,15.987 16.618,15.79 16.618,15.593V10.672C16.618,10.377 16.522,9.983 16.426,9.688C16.233,9.392 16.041,9.097 15.848,8.9C15.656,8.605 15.367,8.408 15.079,8.31C14.79,8.211 14.405,8.113 14.116,8.113H7.286V5.849C7.286,5.554 7.189,5.357 6.997,5.258C6.804,5.16 6.612,5.061 6.42,5.061C6.227,5.061 6.035,5.16 5.842,5.258C5.65,5.455 5.554,5.652 5.554,5.849V8.113H3.341C3.052,8.113 2.86,8.211 2.764,8.408C2.667,8.605 2.571,8.802 2.571,8.999C2.571,9.195 2.571,9.392 2.764,9.589C2.956,9.786 3.148,9.884 3.341,9.884Z"
+      android:fillColor="#E2E1E5"/>
+  <path
+      android:pathData="M19.504,18.743C19.601,18.645 19.601,18.546 19.601,18.448C19.601,18.349 19.601,18.251 19.504,18.152C19.504,18.054 19.408,17.956 19.312,17.857C19.216,17.759 19.119,17.66 19.023,17.66C18.927,17.562 18.831,17.562 18.735,17.562H8.151H8.151C7.959,17.562 7.767,17.562 7.574,17.365C7.478,17.168 7.382,16.971 7.382,16.774V11.951C7.382,11.656 7.286,11.459 7.093,11.361L7.093,11.361C6.901,11.262 6.708,11.164 6.516,11.164C6.323,11.164 6.131,11.262 5.939,11.361C5.746,11.558 5.65,11.755 5.65,11.951V16.774C5.65,17.463 5.939,18.054 6.42,18.546C6.901,19.038 7.478,19.334 8.151,19.334H14.982V21.597C14.982,21.794 15.079,21.991 15.271,22.09C15.367,22.188 15.56,22.286 15.752,22.286C15.944,22.286 16.041,22.188 16.233,22.09C16.329,21.991 16.426,21.794 16.522,21.597V19.334H18.735C18.831,19.334 18.927,19.235 19.023,19.235C19.119,19.137 19.216,19.137 19.312,19.038C19.408,18.94 19.504,18.841 19.504,18.743Z"
+      android:fillColor="#E2E1E5"/>
+  <path
+      android:pathData="M21.428,9.786V9.392C21.428,7.621 20.755,5.947 19.504,4.766C18.35,3.585 16.714,2.798 14.982,2.798V2.502C14.982,2.404 14.982,2.207 14.886,2.109C14.79,1.912 14.694,1.813 14.501,1.813C14.405,1.715 14.309,1.715 14.116,1.715C14.02,1.715 13.828,1.715 13.732,1.813L11.807,2.896C11.711,2.896 11.615,3.093 11.519,3.29C11.423,3.388 11.423,3.487 11.423,3.683C11.423,3.782 11.423,3.979 11.519,4.077L11.807,4.372L13.732,5.455C13.828,5.554 13.924,5.554 14.116,5.554C14.309,5.554 14.501,5.455 14.694,5.258C14.886,5.16 14.982,4.865 14.982,4.668V4.471C16.233,4.471 17.484,5.061 18.35,5.947C19.216,6.833 19.697,8.113 19.697,9.392C19.601,9.589 19.697,9.688 19.697,9.786C19.793,9.884 19.793,9.983 19.889,10.081C19.985,10.18 20.081,10.18 20.178,10.278C20.37,10.377 20.37,10.377 20.563,10.377C20.755,10.377 20.851,10.377 20.947,10.278C21.044,10.278 21.14,10.18 21.236,10.081C21.332,9.983 21.428,9.884 21.428,9.786Z"
+      android:fillColor="#E2E1E5"/>
+</vector>
--- a/app/src/main/res/drawable/ic_crop_rotate_36.xml
+++ b/app/src/main/res/drawable/ic_crop_rotate_36.xml
@@ -1,9 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="36dp"
-    android:height="36dp"
-    android:viewportWidth="36"
-    android:viewportHeight="36">
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M18,0A18,18 0,1 0,36 18,18 18,0 0,0 18,0ZM18,34.25A16.25,16.25 0,1 1,34.25 18,16.27 16.27,0 0,1 18,34.25ZM20.11,15.05L9,15.05A0.88,0.88 0,0 1,9 13.3L11.3,13.3L11.3,11a0.88,0.88 0,0 1,1.75 0L13.05,13.3h7.06a2.59,2.59 0,0 1,2.59 2.59v5a0.88,0.88 0,0 1,-1.75 0v-5A0.85,0.85 0,0 0,20.11 15.05ZM25.91,23.82a0.87,0.87 0,0 1,-0.87 0.88L22.7,24.7L22.7,27A0.88,0.88 0,0 1,21 27L21,24.7L13.89,24.7a2.59,2.59 0,0 1,-2.59 -2.59L11.3,17.18a0.88,0.88 0,0 1,1.75 0v4.93a0.85,0.85 0,0 0,0.84 0.84L25,22.95A0.87,0.87 0,0 1,25.91 23.82ZM27.75,14.62a0.88,0.88 0,1 1,-1.75 0,5 5,0 0,0 -4.88,-5v0.24a0.87,0.87 0,0 1,-0.87 0.87,0.92 0.92,0 0,1 -0.43,-0.11l-2,-1.13a0.88,0.88 0,0 1,0 -1.52l2,-1.13a0.87,0.87 0,0 1,1.3 0.76v0.26A6.76,6.76 0,0 1,27.75 14.62Z"/>
-</vector>
--- a/app/src/main/res/drawable/ic_draw_24.xml
+++ b/app/src/main/res/drawable/ic_draw_24.xml
@@ -4,6 +4,6 @@
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
-      android:fillColor="#FF000000"
-      android:pathData="M12,0A12,12 0,1 0,24 12,12 12,0 0,0 12,0ZM6.9,21.2l2,-8.2h6.2l2,8.2A11,11 0,0 1,12 22.5,11 11,0 0,1 6.9,21.2ZM18.5,20.3 L16.6,12.5a1.4,1.4 0,0 0,-1.3 -1h-0.1L12.9,6.6a1,1 0,0 0,-1.8 0L8.8,11.5L8.7,11.5a1.4,1.4 0,0 0,-1.3 1L5.5,20.3a10.7,10.7 0,0 1,-4 -8.3,10.5 10.5,0 0,1 21,0A10.7,10.7 0,0 1,18.5 20.3Z"/>
+      android:pathData="M0,12C0,18.568 5.432,24 12,24C18.568,24 24,18.568 24,12C24,5.42 18.568,0 11.988,0C5.42,0 0,5.42 0,12ZM1.555,12C1.555,6.209 6.209,1.543 11.988,1.543C17.779,1.543 22.445,6.209 22.457,12C22.457,15.793 20.447,19.107 17.42,20.937L15.817,13.555C15.709,13.065 15.314,12.694 14.835,12.67H14.656L12.646,6.544C12.431,5.922 11.569,5.91 11.366,6.544L9.356,12.67H9.176C8.698,12.694 8.303,13.065 8.207,13.543L6.592,20.937C3.577,19.107 1.555,15.793 1.555,12ZM7.729,21.535L9.392,13.902H14.632L16.295,21.535C14.979,22.11 13.531,22.445 12,22.445C10.469,22.445 9.021,22.122 7.729,21.535Z"
+      android:fillColor="#FF000000"/>
 </vector>
--- a/app/src/main/res/drawable/ic_draw_36.xml
+++ b/app/src/main/res/drawable/ic_draw_36.xml
@@ -1,9 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="36dp"
-    android:height="36dp"
-    android:viewportWidth="36"
-    android:viewportHeight="36">
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M18,0A18,18 0,1 0,36 18,18 18,0 0,0 18,0ZM10.07,32.17l3,-13.17h9.82l3,13.17a16.16,16.16 0,0 1,-15.86 0ZM27.5,31.17 L24.5,17.94a0.87,0.87 0,0 0,-0.85 -0.68h-0.92l-3.26,-7.09a1.57,1.57 0,0 0,-2.86 0l-3.26,7.09h-0.92a0.87,0.87 0,0 0,-0.85 0.68l-3,13.23a16.25,16.25 0,1 1,19 0Z"/>
-</vector>
--- a/app/src/main/res/drawable/ic_hq_24.xml
+++ b/app/src/main/res/drawable/ic_hq_24.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M11.067,16.385L14.567,12L19,18H5L8.5,13.5L11.067,16.385Z"
+      android:fillColor="#FF000000"/>
+  <path
+      android:pathData="M6,1.875L18,1.875A4.125,4.125 0,0 1,22.125 6L22.125,18A4.125,4.125 0,0 1,18 22.125L6,22.125A4.125,4.125 0,0 1,1.875 18L1.875,6A4.125,4.125 0,0 1,6 1.875z"
+      android:strokeWidth="1.75"
+      android:fillColor="#00000000"
+      android:strokeColor="#FF000000"/>
+</vector>
--- a/app/src/main/res/drawable/ic_hq_36.xml
+++ b/app/src/main/res/drawable/ic_hq_36.xml
@@ -1,15 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="36dp"
-    android:height="36dp"
-    android:viewportWidth="36"
-    android:viewportHeight="36">
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M18,1.8A16.2,16.2 0,1 1,1.8 18,16.1 16.1,0 0,1 18,1.8ZM18,0A18,18 0,1 0,36 18,18.1 18.1,0 0,0 18,0Z"/>
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M21.9,10.7a3.4,3.4 0,0 1,3.4 3.4v7.8a3.4,3.4 0,0 1,-3.4 3.4H14.1a3.4,3.4 0,0 1,-3.4 -3.4V14.1a3.4,3.4 0,0 1,3.4 -3.4h7.8m0,-1.5H14.1a4.9,4.9 0,0 0,-4.9 4.9v7.8a4.9,4.9 0,0 0,4.9 4.9h7.8a4.9,4.9 0,0 0,4.9 -4.9V14.1a4.9,4.9 0,0 0,-4.9 -4.9Z"/>
-  <path
-      android:fillColor="#FF000000"
-      android:pathData="M24.2,22.1l-12.3,0l3.1,-3.5l2.2,2.2l3.1,-3.3l3.9,4.6z"/>
-</vector>
--- a/app/src/main/res/drawable/ic_sq_24.xml
+++ b/app/src/main/res/drawable/ic_sq_24.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M3.389,3.518C3.163,3.669 2.897,3.75 2.625,3.75C2.26,3.75 1.911,3.605 1.653,3.347C1.395,3.089 1.25,2.74 1.25,2.375C1.25,2.103 1.331,1.837 1.482,1.611C1.633,1.385 1.848,1.209 2.099,1.105C2.35,1.001 2.627,0.973 2.893,1.026C3.16,1.079 3.405,1.21 3.597,1.403C3.79,1.595 3.921,1.84 3.974,2.107C4.027,2.373 3.999,2.65 3.895,2.901C3.791,3.152 3.615,3.367 3.389,3.518ZM9.764,3.518C9.538,3.669 9.272,3.75 9,3.75C8.635,3.75 8.286,3.605 8.028,3.347C7.77,3.089 7.625,2.74 7.625,2.375C7.625,2.103 7.706,1.837 7.857,1.611C8.008,1.385 8.223,1.209 8.474,1.105C8.725,1.001 9.002,0.973 9.268,1.026C9.535,1.079 9.78,1.21 9.972,1.403C10.165,1.595 10.295,1.84 10.349,2.107C10.402,2.373 10.374,2.65 10.27,2.901C10.166,3.152 9.99,3.367 9.764,3.518ZM15.25,3.75C15.522,3.75 15.788,3.669 16.014,3.518C16.24,3.367 16.416,3.152 16.52,2.901C16.624,2.65 16.652,2.373 16.599,2.107C16.545,1.84 16.415,1.595 16.222,1.403C16.03,1.21 15.785,1.079 15.518,1.026C15.252,0.973 14.975,1.001 14.724,1.105C14.473,1.209 14.258,1.385 14.107,1.611C13.956,1.837 13.875,2.103 13.875,2.375C13.875,2.74 14.02,3.089 14.278,3.347C14.536,3.605 14.885,3.75 15.25,3.75ZM22.389,22.518C22.163,22.669 21.897,22.75 21.625,22.75C21.444,22.75 21.266,22.714 21.099,22.645C20.932,22.576 20.78,22.475 20.653,22.347C20.525,22.219 20.424,22.068 20.355,21.901C20.286,21.734 20.25,21.556 20.25,21.375C20.25,21.103 20.331,20.837 20.482,20.611C20.633,20.385 20.848,20.209 21.099,20.105C21.35,20 21.626,19.973 21.893,20.026C22.16,20.079 22.405,20.21 22.597,20.403C22.79,20.595 22.92,20.84 22.974,21.107C23.027,21.373 22.999,21.65 22.895,21.901C22.791,22.152 22.615,22.367 22.389,22.518ZM21.625,16.375C21.897,16.375 22.163,16.294 22.389,16.143C22.615,15.992 22.791,15.777 22.895,15.526C22.999,15.275 23.027,14.998 22.974,14.732C22.92,14.465 22.79,14.22 22.597,14.028C22.405,13.835 22.16,13.705 21.893,13.651C21.626,13.598 21.35,13.626 21.099,13.73C20.848,13.834 20.633,14.01 20.482,14.236C20.331,14.462 20.25,14.728 20.25,15C20.25,15.181 20.286,15.359 20.355,15.526C20.424,15.693 20.525,15.845 20.653,15.972C20.78,16.1 20.932,16.201 21.099,16.27C21.266,16.339 21.444,16.375 21.625,16.375ZM22.389,9.893C22.163,10.044 21.897,10.125 21.625,10.125C21.444,10.125 21.266,10.089 21.099,10.02C20.932,9.951 20.78,9.85 20.653,9.722C20.525,9.595 20.424,9.443 20.355,9.276C20.286,9.109 20.25,8.931 20.25,8.75C20.25,8.478 20.331,8.212 20.482,7.986C20.633,7.76 20.848,7.584 21.099,7.48C21.35,7.376 21.626,7.348 21.893,7.401C22.16,7.454 22.405,7.585 22.597,7.778C22.79,7.97 22.92,8.215 22.974,8.482C23.027,8.748 22.999,9.025 22.895,9.276C22.791,9.527 22.615,9.742 22.389,9.893ZM21.625,3.875C21.897,3.875 22.163,3.794 22.389,3.643C22.615,3.492 22.791,3.277 22.895,3.026C22.999,2.775 23.027,2.498 22.974,2.232C22.92,1.965 22.79,1.72 22.597,1.528C22.405,1.335 22.16,1.204 21.893,1.151C21.626,1.098 21.35,1.126 21.099,1.23C20.848,1.334 20.633,1.51 20.482,1.736C20.331,1.962 20.25,2.228 20.25,2.5C20.25,2.681 20.286,2.859 20.355,3.026C20.424,3.193 20.525,3.345 20.653,3.472C20.78,3.6 20.932,3.701 21.099,3.77C21.266,3.839 21.444,3.875 21.625,3.875ZM5.125,7.75H11.875C12.969,7.75 14.018,8.184 14.792,8.958C15.565,9.732 16,10.781 16,11.875V18.625C16,19.167 15.893,19.703 15.686,20.203C15.479,20.704 15.175,21.159 14.792,21.542C14.409,21.925 13.954,22.229 13.454,22.436C12.953,22.643 12.417,22.75 11.875,22.75H5.125C4.583,22.75 4.047,22.643 3.546,22.436C3.046,22.229 2.591,21.925 2.208,21.542C1.825,21.159 1.521,20.704 1.314,20.203C1.107,19.703 1,19.167 1,18.625V11.875C1,10.781 1.435,9.732 2.208,8.958C2.982,8.184 4.031,7.75 5.125,7.75ZM5.375,15.875L2.375,19.25H14.375L10.625,14.75L7.625,18L5.375,15.875Z"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"/>
+</vector>
--- a/app/src/main/res/drawable/ic_view_infinite_24.xml
+++ b/app/src/main/res/drawable/ic_view_infinite_24.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M22.239,16a11.009,11.009 0,1 0,-2.448 3.755L19.5,21.5L19.5,23L21,23L21,17.5L15.5,17.5L15.5,19L17,19l1.7,-0.284A9.56,9.56 0,1 1,20.605 16ZM11.455,10.231a7.3,7.3 0,0 1,0.55 0.6,4.531 4.531,0 0,1 0.535,-0.6 3.76,3.76 0,0 1,2.635 -1.156,2.925 2.925,0 1,1 0,5.85 3.82,3.82 0,0 1,-2.63 -1.126,5.967 5.967,0 0,1 -0.54,-0.617c-0.168,0.2 -0.336,0.4 -0.556,0.617a3.784,3.784 0,0 1,-2.614 1.126,2.925 2.925,0 1,1 0,-5.85A3.738,3.738 0,0 1,11.455 10.231ZM8.835,13.519a2.365,2.365 0,0 0,1.631 -0.754,4.967 4.967,0 0,0 0.652,-0.77 6.146,6.146 0,0 0,-0.652 -0.749,2.355 2.355,0 0,0 -1.631,-0.765 1.519,1.519 0,1 0,0 3.038ZM15.175,10.481a2.377,2.377 0,0 0,-1.646 0.765,7.391 7.391,0 0,0 -0.652,0.749 5.493,5.493 0,0 0,0.652 0.77,2.382 2.382,0 0,0 1.646,0.754 1.519,1.519 0,1 0,0 -3.038Z"/>
+</vector>
--- a/app/src/main/res/drawable/ic_view_infinite_28.xml
+++ b/app/src/main/res/drawable/ic_view_infinite_28.xml
@@ -1,4 +0,0 @@
-<vector android:height="28dp" android:viewportHeight="28"
-    android:viewportWidth="28" android:width="28dp" xmlns:android="http://schemas.android.com/apk/res/android">
-    <path android:fillColor="#FF000000" android:pathData="M14,1a13,13 0,1 0,9.046 22.3l-0.3,1.232L22.75,26.5h1.5L24.241,21L18.775,21v1.5h1.491l1.858,-0.378A11.587,11.587 0,1 1,24.34 19L26,19A12.994,12.994 0,0 0,14 1ZM13.178,11.565a8.783,8.783 0,0 1,0.836 0.917,5.774 5.774,0 0,1 0.809,-0.917 4.692,4.692 0,0 1,3.345 -1.484,3.71 3.71,0 0,1 0,7.419 4.785,4.785 0,0 1,-3.345 -1.457,7.813 7.813,0 0,1 -0.809,-0.944 12.411,12.411 0,0 1,-0.836 0.944A4.775,4.775 0,0 1,9.859 17.5a3.71,3.71 0,1 1,0 -7.419A4.683,4.683 0,0 1,13.178 11.565ZM9.859,15.965A3.253,3.253 0,0 0,12.1 14.91a8.024,8.024 0,0 0,0.943 -1.133,7.663 7.663,0 0,0 -0.943,-1.106 3.205,3.205 0,0 0,-2.24 -1.052,2.172 2.172,0 1,0 0,4.343ZM18.168,11.622A3.211,3.211 0,0 0,15.9 12.671a9.093,9.093 0,0 0,-0.944 1.106A7.969,7.969 0,0 0,15.9 14.91a3.258,3.258 0,0 0,2.266 1.052,2.172 2.172,0 0,0 0,-4.343Z"/>
-</vector>
--- a/app/src/main/res/drawable/ic_view_once_28.xml
+++ b/app/src/main/res/drawable/ic_view_once_28.xml
@@ -1,4 +0,0 @@
-<vector android:height="28dp" android:viewportHeight="28"
-    android:viewportWidth="28" android:width="28dp" xmlns:android="http://schemas.android.com/apk/res/android">
-    <path android:fillColor="#FF000000" android:pathData="M11.165,19L9.627,19L9.627,10.912L9.543,10.912a2.687,2.687 0,0 1,-2.117 0.754v-1.26a2.546,2.546 0,0 0,2.31 -1.562h1.429ZM16.785,14.348 L18.485,11.383L20.1,11.383l-2.376,3.808L20.122,19L18.5,19l-1.716,-2.847L15.074,19L13.447,19l2.37,-3.809 -2.339,-3.808L15.1,11.383ZM14,1a13,13 0,1 0,9.046 22.3l-0.3,1.232L22.75,26.5h1.5L24.241,21L18.775,21v1.5h1.491l1.858,-0.378A11.587,11.587 0,1 1,24.34 19L26,19A12.994,12.994 0,0 0,14 1Z"/>
-</vector>
--- a/app/src/main/res/drawable/image_editor_hud_clear_all_background.xml
+++ b/app/src/main/res/drawable/image_editor_hud_clear_all_background.xml
@@ -2,7 +2,7 @@
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
-            <solid android:color="@color/transparent_black_40" />
+            <solid android:color="@color/signal_dark_colorSurfaceVariant_92" />
            <corners android:radius="50dp" />
        </shape>
    </item>
--- a/app/src/main/res/drawable/media_selection_pill.xml
+++ b/app/src/main/res/drawable/media_selection_pill.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape>
+            <padding android:right="2dp" android:top="2dp" android:bottom="2dp" android:left="2dp" />
+            <corners android:radius="1000dp" />
+            <solid android:color="@color/signal_colorSurfaceVariant" />
+        </shape>
+    </item>
+    <item>
+        <shape>
+            <corners android:radius="1000dp" />
+            <solid android:color="@color/signal_light_colorPrimary" />
+        </shape>
+    </item>
+</layer-list>
+
--- a/app/src/main/res/drawable/persistent_fading_edge.xml
+++ b/app/src/main/res/drawable/persistent_fading_edge.xml
@@ -4,5 +4,5 @@
        android:type="linear"
        android:angle="0"
        android:startColor="@color/transparent"
-        android:endColor="@color/black" />
+        android:endColor="@color/signal_dark_colorBackground" />
 </shape>
--- a/app/src/main/res/drawable/v2_media_count_indicator_background.xml
+++ b/app/src/main/res/drawable/v2_media_count_indicator_background.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
-    <solid android:color="@color/signal_light_colorNeutral"/>
+    <solid android:color="@color/signal_colorSurfaceVariant"/>
    <corners android:radius="32dp"/>
 </shape>
--- a/app/src/main/res/drawable/v2_media_review_selected_item_overlay.xml
+++ b/app/src/main/res/drawable/v2_media_review_selected_item_overlay.xml
@@ -4,32 +4,21 @@
        <layer-list>
            <item>
                <shape android:shape="rectangle">
-                    <size android:width="44dp" android:height="44dp" />
+                    <size android:width="48dp" android:height="48dp" />
                    <solid android:color="@color/transparent_black_40" />
-                    <stroke android:color="@color/core_ultramarine" android:width="2dp"/>
-                    <corners android:radius="10dp" />
-                    <padding android:right="12dp" android:bottom="12dp" android:top="12dp" android:left="12dp" />
+                    <stroke android:width="2dp" android:color="@color/signal_light_colorPrimary" />
+                    <corners android:radius="8dp" />
+                    <padding android:bottom="12dp" android:left="12dp" android:right="12dp" android:top="12dp" />
                </shape>
            </item>
            <item android:drawable="@drawable/ic_trash_white_24" />
        </layer-list>
    </item>
    <item>
-        <layer-list>
-            <item>
-                <shape android:shape="rectangle">
-                    <size android:width="44dp" android:height="44dp" />
-                    <stroke android:color="@color/core_ultramarine" android:width="2dp"/>
-                    <corners android:radius="10dp" />
-                </shape>
-            </item>
-            <item>
-                <shape android:shape="rectangle">
-                    <size android:width="44dp" android:height="44dp" />
-                    <stroke android:color="@color/core_white" android:width="1.5dp"/>
-                    <corners android:radius="10dp" />
-                </shape>
-            </item>
-        </layer-list>
+        <shape android:shape="rectangle">
+            <size android:width="48dp" android:height="48dp" />
+            <stroke android:width="2dp" android:color="@color/core_white" />
+            <corners android:radius="8dp" />
+        </shape>
    </item>
 </selector>
--- a/app/src/main/res/layout/camera_fragment.xml
+++ b/app/src/main/res/layout/camera_fragment.xml
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:background="@color/core_black"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

--- a/app/src/main/res/layout/camerax_fragment.xml
+++ b/app/src/main/res/layout/camerax_fragment.xml
@@ -2,8 +2,7 @@
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:background="@color/core_black">
+    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:id="@+id/camerax_camera_parent"
--- a/app/src/main/res/layout/chat_wallpaper_crop_activity.xml
+++ b/app/src/main/res/layout/chat_wallpaper_crop_activity.xml
@@ -23,6 +23,7 @@
        android:id="@+id/image_editor"
        android:layout_width="0dp"
        android:layout_height="0dp"
+        app:imageEditorView_blackoutColor="@color/signal_colorBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
--- a/app/src/main/res/layout/image_editor_fragment.xml
+++ b/app/src/main/res/layout/image_editor_fragment.xml
@@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
-<FrameLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
-    android:background="@color/core_black"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

@@ -11,7 +10,8 @@
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
-        android:gravity="center" />
+        android:gravity="center"
+        app:imageEditorView_blackoutColor="@color/signal_colorBackground" />

    <org.thoughtcrime.securesms.scribbles.ImageEditorHudV2
        android:id="@+id/scribble_hud"
--- a/app/src/main/res/layout/mediasend_video_fragment.xml
+++ b/app/src/main/res/layout/mediasend_video_fragment.xml
@@ -6,8 +6,7 @@
    <org.thoughtcrime.securesms.video.VideoPlayer
        android:id="@+id/video_player"
        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:background="@color/core_black" />
+        android:layout_height="match_parent" />

    <org.thoughtcrime.securesms.scribbles.VideoEditorHud
        android:id="@+id/video_editor_hud"
--- a/app/src/main/res/layout/v2_media_count_indicator_button.xml
+++ b/app/src/main/res/layout/v2_media_count_indicator_button.xml
@@ -38,6 +38,7 @@
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/media_count_indicator_text"
        app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/ic_chevron_end_24" />
+        app:srcCompat="@drawable/ic_chevron_end_24"
+        app:tint="@color/signal_colorOnSurface" />

 </merge>
--- a/app/src/main/res/layout/v2_media_gallery_folder_item.xml
+++ b/app/src/main/res/layout/v2_media_gallery_folder_item.xml
@@ -1,51 +1,51 @@
 <?xml version="1.0" encoding="utf-8"?>
-<com.google.android.exoplayer2.ui.AspectRatioFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="wrap_content">

-    <androidx.constraintlayout.widget.ConstraintLayout
+    <com.google.android.material.imageview.ShapeableImageView
+        android:id="@+id/media_gallery_image"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:layout_marginTop="4dp"
+        android:importantForAccessibility="no"
+        android:padding="8dp"
+        android:scaleType="centerCrop"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Signal.MediaOverviewItem" />
+
+    <ImageView
+        android:id="@+id/media_gallery_play_overlay"
+        android:layout_width="36dp"
+        android:layout_height="36dp"
+        android:importantForAccessibility="no"
+        android:scaleType="centerCrop"
+        app:layout_constraintBottom_toBottomOf="@id/media_gallery_image"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/v2_media_gallery_item_video_overlay" />
+
+    <androidx.appcompat.widget.AppCompatTextView
+        android:id="@+id/media_gallery_title"
        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        tools:layout_height="190dp"
-        tools:layout_width="190dp">
+        android:layout_height="wrap_content"
+        android:layout_marginTop="4dp"
+        android:layout_marginBottom="12dp"
+        android:drawablePadding="4dp"
+        android:ellipsize="end"
+        android:gravity="center"
+        android:lines="1"
+        android:paddingHorizontal="8dp"
+        android:textAppearance="@style/Signal.Text.BodyMedium"
+        android:textColor="@color/signal_colorOnSurface"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/media_gallery_image"
+        tools:text="Lorem ipsum dolor sit amet" />

-        <ImageView
-            android:id="@+id/media_gallery_image"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:importantForAccessibility="no"
-            android:scaleType="centerCrop" />
-
-        <ImageView
-            android:id="@+id/media_gallery_play_overlay"
-            android:layout_width="36dp"
-            android:layout_height="36dp"
-            android:importantForAccessibility="no"
-            android:scaleType="centerCrop"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:srcCompat="@drawable/v2_media_gallery_item_video_overlay" />
-
-        <androidx.appcompat.widget.AppCompatTextView
-            android:id="@+id/media_gallery_title"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:background="@drawable/webrtc_call_screen_footer_gradient"
-            android:drawablePadding="4dp"
-            android:ellipsize="end"
-            android:lines="1"
-            android:paddingStart="8dp"
-            android:paddingEnd="8dp"
-            android:textAppearance="@style/Signal.Text.Body"
-            android:textColor="@color/core_white"
-            app:drawableStartCompat="@drawable/ic_folder_24"
-            app:drawableTint="@color/core_white"
-            app:layout_constraintBottom_toBottomOf="parent"
-            tools:text="Lorem ipsum dolor sit amet" />
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-</com.google.android.exoplayer2.ui.AspectRatioFrameLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>
--- a/app/src/main/res/layout/v2_media_gallery_fragment.xml
+++ b/app/src/main/res/layout/v2_media_gallery_fragment.xml
@@ -3,23 +3,24 @@
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:background="@color/core_black">
+    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/media_gallery_toolbar"
        android:layout_width="match_parent"
-        android:layout_height="?attr/actionBarSize"
-        android:background="@color/core_black"
+        android:layout_height="@dimen/signal_m3_toolbar_height"
+        android:minHeight="@dimen/signal_m3_toolbar_height"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/v2_media_gallery_fragment_toolbar_menu"
-        app:navigationIcon="@drawable/ic_arrow_left_white_24"
-        app:title="" />
+        app:navigationIcon="@drawable/ic_arrow_left_24"
+        app:title="@string/AttachmentKeyboard_gallery"
+        app:titleTextAppearance="@style/Signal.Text.TitleLarge" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/media_gallery_grid"
        android:layout_width="match_parent"
        android:layout_height="0dp"
+        android:paddingHorizontal="12dp"
        app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
        app:layout_constraintBottom_toTopOf="@id/media_gallery_bottom_bar_barrier"
        app:layout_constraintTop_toBottomOf="@id/media_gallery_toolbar"
@@ -31,7 +32,7 @@
        android:id="@+id/bottom_bar_shade"
        android:layout_width="match_parent"
        android:layout_height="0dp"
-        android:background="@color/core_black"
+        android:background="@color/signal_colorSurface"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="@id/media_gallery_bottom_bar_barrier" />

--- a/app/src/main/res/layout/v2_media_gallery_item.xml
+++ b/app/src/main/res/layout/v2_media_gallery_item.xml
@@ -1,47 +1,48 @@
 <?xml version="1.0" encoding="utf-8"?>
-<com.google.android.exoplayer2.ui.AspectRatioFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="wrap_content"
+    android:background="@color/signal_colorSurfaceVariant"
+    tools:layout_height="95dp"
+    tools:layout_width="95dp">

-    <androidx.constraintlayout.widget.ConstraintLayout
+    <com.google.android.material.imageview.ShapeableImageView
+        android:id="@+id/media_gallery_image"
        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        tools:layout_height="95dp"
-        tools:layout_width="95dp">
+        android:layout_height="0dp"
+        android:importantForAccessibility="no"
+        android:scaleType="centerCrop"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:src="@drawable/test_gradient" />

-        <ImageView
-            android:id="@+id/media_gallery_image"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:importantForAccessibility="no"
-            android:scaleType="centerCrop"
-            tools:src="@drawable/test_gradient" />
+    <ImageView
+        android:id="@+id/media_gallery_play_overlay"
+        android:layout_width="36dp"
+        android:layout_height="36dp"
+        android:importantForAccessibility="no"
+        android:scaleType="centerCrop"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/v2_media_gallery_item_video_overlay" />

-        <ImageView
-            android:id="@+id/media_gallery_play_overlay"
-            android:layout_width="36dp"
-            android:layout_height="36dp"
-            android:importantForAccessibility="no"
-            android:scaleType="centerCrop"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:srcCompat="@drawable/v2_media_gallery_item_video_overlay" />
+    <TextView
+        android:id="@+id/media_gallery_check"
+        android:layout_width="wrap_content"
+        android:layout_height="26dp"
+        android:layout_marginStart="3dp"
+        android:layout_marginTop="3dp"
+        android:background="@drawable/media_selection_pill"
+        android:gravity="center"
+        android:minWidth="26dp"
+        android:paddingHorizontal="9.5dp"
+        android:textColor="@color/signal_light_colorNeutral"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:text="1" />

-        <ImageView
-            android:id="@+id/media_gallery_check"
-            android:layout_width="25dp"
-            android:layout_height="25dp"
-            android:layout_marginTop="8dp"
-            android:layout_marginEnd="8dp"
-            android:importantForAccessibility="no"
-            android:scaleType="centerCrop"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:srcCompat="@drawable/v2_media_check" />
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-</com.google.android.exoplayer2.ui.AspectRatioFrameLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>
--- a/app/src/main/res/layout/v2_media_gallery_item_no_check.xml
+++ b/app/src/main/res/layout/v2_media_gallery_item_no_check.xml
@@ -11,7 +11,7 @@
        tools:layout_height="95dp"
        tools:layout_width="95dp">

-        <ImageView
+        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/media_gallery_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
--- a/app/src/main/res/layout/v2_media_image_editor_hud.xml
+++ b/app/src/main/res/layout/v2_media_image_editor_hud.xml
@@ -5,7 +5,6 @@
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
-    tools:background="@color/core_grey_60"
    tools:parentTag="android.widget.FrameLayout">

    <androidx.constraintlayout.widget.ConstraintLayout
--- a/app/src/main/res/layout/v2_media_review_add_media_item.xml
+++ b/app/src/main/res/layout/v2_media_review_add_media_item.xml
@@ -6,6 +6,7 @@
    android:layout_height="44dp"
    android:layout_marginStart="8dp"
    android:background="?selectableItemBackgroundBorderless"
+    android:padding="4dp"
    android:scaleType="fitCenter"
    app:layout_constraintBottom_toTopOf="@+id/controls_shade"
    app:layout_constraintStart_toStartOf="parent"
--- a/app/src/main/res/layout/v2_media_review_fragment.xml
+++ b/app/src/main/res/layout/v2_media_review_fragment.xml
@@ -20,7 +20,7 @@
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:alpha="0"
-            android:background="@color/transparent_black_80"
+            android:background="@color/signal_dark_colorBackground_92"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="@id/add_a_message_barrier"
@@ -55,13 +55,13 @@
            android:id="@+id/selection_recycler"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
+            android:layout_marginBottom="15dp"
+            android:alpha="0"
+            android:clipToPadding="false"
+            android:orientation="horizontal"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
-            android:layout_marginBottom="2dp"
-            android:alpha="0"
-            android:orientation="horizontal"
            android:visibility="gone"
-            android:clipToPadding="false"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintBottom_toTopOf="@id/controls_shade"
            tools:alpha="1"
@@ -73,11 +73,10 @@
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginStart="10dp"
-            android:layout_marginBottom="2dp"
+            android:layout_marginBottom="15dp"
            android:alpha="0"
            android:background="?selectableItemBackgroundBorderless"
-            android:padding="6dp"
-            android:scaleType="fitCenter"
+            android:scaleType="centerInside"
            android:visibility="gone"
            app:layout_constraintBottom_toTopOf="@+id/controls_shade"
            app:layout_constraintStart_toStartOf="parent"
@@ -87,10 +86,10 @@

        <ViewSwitcher
            android:id="@+id/view_once_toggle"
-            android:layout_width="36dp"
-            android:layout_height="36dp"
-            android:layout_marginEnd="16dp"
-            android:layout_marginBottom="8dp"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            android:layout_marginEnd="20dp"
+            android:layout_marginBottom="15dp"
            android:alpha="0"
            android:animateFirstView="false"
            android:inAnimation="@anim/fade_in"
@@ -102,23 +101,23 @@
            tools:visibility="visible">

            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
+                android:layout_width="40dp"
+                android:layout_height="40dp"
+                android:layout_gravity="center"
                android:background="@drawable/circle_tintable"
-                android:padding="6dp"
-                android:scaleType="fitCenter"
-                app:backgroundTint="@color/transparent_black_60"
-                app:srcCompat="@drawable/ic_view_infinite_28"
+                android:scaleType="centerInside"
+                app:backgroundTint="@color/signal_dark_colorSurfaceVariant_92"
+                app:srcCompat="@drawable/ic_view_infinite_24"
                app:tint="@color/core_white" />

            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
+                android:layout_width="40dp"
+                android:layout_height="40dp"
+                android:layout_gravity="center"
                android:background="@drawable/circle_tintable"
-                android:padding="6dp"
-                android:scaleType="fitCenter"
-                app:backgroundTint="@color/transparent_black_60"
-                app:srcCompat="@drawable/ic_view_once_28"
+                android:scaleType="centerInside"
+                app:backgroundTint="@color/signal_dark_colorSurfaceVariant_92"
+                app:srcCompat="@drawable/ic_view_once_24"
                app:tint="@color/core_white" />

        </ViewSwitcher>
@@ -160,20 +159,20 @@
            android:layout_marginEnd="16dp"
            android:layout_marginBottom="20dp"
            android:background="@drawable/rounded_rectangle_secondary_dark"
+            android:cursorVisible="false"
+            android:enabled="false"
+            android:focusable="false"
            android:gravity="start|center_vertical"
+            android:inputType="none"
+            android:maxLines="3"
            android:minHeight="36dp"
            android:paddingStart="12dp"
-            android:paddingEnd="12dp"
            android:paddingTop="6dp"
+            android:paddingEnd="12dp"
            android:paddingBottom="6dp"
            android:textAppearance="@style/Signal.Text.Body"
            android:textColor="@color/core_white"
            android:visibility="gone"
-            android:inputType="none"
-            android:enabled="false"
-            android:focusable="false"
-            android:cursorVisible="false"
-            android:maxLines="3"
            app:layout_constraintBottom_toTopOf="@id/button_barrier"
            app:layout_constraintTop_toTopOf="@id/add_a_message_barrier"
            tools:visibility="visible" />
@@ -194,79 +193,87 @@
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

-        <androidx.appcompat.widget.AppCompatImageView
+        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/draw_tool"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginStart="10dp"
            android:layout_marginBottom="16dp"
            android:alpha="0"
-            android:background="?selectableItemBackgroundBorderless"
+            android:background="@color/signal_dark_colorSurfaceVariant"
            android:padding="6dp"
+            android:scaleType="centerInside"
            android:translationY="48dp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
-            app:srcCompat="@drawable/ic_draw_36"
-            app:tint="@color/core_white"
+            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Signal.Circle"
+            app:srcCompat="@drawable/ic_draw_24"
+            app:tint="@color/signal_dark_colorOnSurface"
            tools:alpha="1"
            tools:translationY="0dp"
            tools:visibility="visible" />

-        <androidx.appcompat.widget.AppCompatImageView
+        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/crop_and_rotate_tool"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginStart="12dp"
            android:layout_marginBottom="16dp"
            android:alpha="0"
-            android:background="?selectableItemBackgroundBorderless"
-            android:padding="6dp"
+            android:background="@color/signal_dark_colorSurfaceVariant"
+            android:padding="4dp"
+            android:scaleType="centerInside"
            android:translationY="48dp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/draw_tool"
            app:layout_goneMarginStart="10dp"
-            app:srcCompat="@drawable/ic_crop_rotate_36"
-            app:tint="@color/core_white"
+            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Signal.Circle"
+            app:srcCompat="@drawable/ic_crop_rotate_24"
+            app:tint="@color/signal_dark_colorOnSurface"
            tools:alpha="1"
            tools:translationY="0dp"
            tools:visibility="visible" />

-        <androidx.appcompat.widget.AppCompatImageView
+        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/quality_selector"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginStart="12dp"
            android:layout_marginBottom="16dp"
            android:alpha="0"
-            android:background="?selectableItemBackgroundBorderless"
-            android:padding="6dp"
+            android:background="@color/signal_dark_colorSurfaceVariant"
+            android:padding="4dp"
+            android:scaleType="centerInside"
            android:translationY="48dp"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/crop_and_rotate_tool"
            app:layout_goneMarginStart="10dp"
-            app:srcCompat="@drawable/ic_sq_36"
-            app:tint="@color/core_white"
+            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Signal.Circle"
+            app:srcCompat="@drawable/ic_sq_24"
+            app:tint="@color/signal_dark_colorOnSurface"
            tools:alpha="1"
            tools:translationY="0dp"
            tools:visibility="visible" />

-        <androidx.appcompat.widget.AppCompatImageView
+        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/save_to_media"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginStart="12dp"
            android:layout_marginBottom="16dp"
-            android:background="?selectableItemBackgroundBorderless"
-            android:padding="6dp"
+            android:background="@color/signal_dark_colorSurfaceVariant"
+            android:padding="4dp"
+            android:scaleType="centerInside"
            android:translationY="48dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/quality_selector"
            app:layout_goneMarginStart="10dp"
-            app:srcCompat="@drawable/ic_save_36"
-            app:tint="@color/core_white"
+            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Signal.Circle"
+            app:srcCompat="@drawable/ic_save_24"
+            app:tint="@color/signal_dark_colorOnSurface"
            tools:translationY="0dp" />

        <androidx.appcompat.widget.AppCompatImageView
--- a/app/src/main/res/layout/v2_media_review_selected_item.xml
+++ b/app/src/main/res/layout/v2_media_review_selected_item.xml
@@ -2,9 +2,10 @@
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="44dp"
-    android:layout_height="44dp"
-    android:layout_marginStart="8dp">
+    android:layout_width="48dp"
+    android:layout_height="48dp"
+    android:layout_marginStart="12dp"
+    tools:background="@color/signal_dark_colorSurface">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/media_review_selected_image"
@@ -12,7 +13,10 @@
        android:layout_height="match_parent"
        android:importantForAccessibility="no"
        android:scaleType="centerCrop"
-        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Signal.MediaSelection"
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Signal.MediaSelection.Selected"
+        app:strokeColor="@color/media_selection_stroke"
+        app:strokeWidth="2dp"
+        android:padding="1dp"
        tools:background="@drawable/test_gradient" />

    <ImageView
@@ -24,11 +28,4 @@
        android:importantForAccessibility="no"
        app:srcCompat="@drawable/exo_icon_play_ultramarine" />

-    <ImageView
-        android:id="@+id/media_review_selected_overlay"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:importantForAccessibility="no"
-        android:src="@drawable/v2_media_review_selected_item_overlay" />
-
 </FrameLayout>
--- a/app/src/main/res/menu/v2_media_gallery_fragment_toolbar_menu.xml
+++ b/app/src/main/res/menu/v2_media_gallery_fragment_toolbar_menu.xml
@@ -7,7 +7,7 @@
        android:title="@string/MediaPickerActivity__menu_open_camera"
        android:id="@+id/action_camera"
        android:visible="true"
-        android:icon="@drawable/ic_camera_solid_white_24"
+        android:icon="@drawable/ic_camera_24"
        app:showAsAction="always" />

 </menu>
--- a/app/src/main/res/values-v21/themes.xml
+++ b/app/src/main/res/values-v21/themes.xml
@@ -29,8 +29,6 @@

    <style name="TextSecure.FullScreenMedia" parent="TextSecure.DarkNoActionBar">
        <item name="android:windowFullscreen">true</item>
-        <item name="android:navigationBarColor">@color/black</item>
-        <item name="android:statusBarColor">@color/black</item>
    </style>

    <style name="TextSecure.LightRegistrationTheme" parent="TextSecure.LightNoActionBar">
--- a/app/src/main/res/values/material3_colors_dark.xml
+++ b/app/src/main/res/values/material3_colors_dark.xml
@@ -41,4 +41,7 @@
    <color name="signal_dark_colorTransparentInverse5">#F5000000</color>
    <color name="signal_dark_colorNeutralInverse">#E0FFFFFF</color>
    <color name="signal_dark_colorNeutralVariantInverse">#A3FFFFFF</color>
+
+    <color name="signal_dark_colorBackground_92">#EB1B1C1F</color>
+    <color name="signal_dark_colorSurfaceVariant_92">#EB303133</color>
 </resources>
--- a/app/src/main/res/values/signal_styles.xml
+++ b/app/src/main/res/values/signal_styles.xml
@@ -78,7 +78,7 @@
        <item name="android:textColor">@color/signal_button_secondary_text_selector</item>
        <item name="background">@color/signal_background_tertiary</item>
        <item name="rippleColor">@color/core_ultramarine</item>
-        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.Signal.Button.Rounded</item>
+        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.Signal.Circle</item>
    </style>

    <style name="Widget.Signal.Button.Small" parent="Widget.Material3.Button.TonalButton">
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -546,11 +546,21 @@
        <item name="cornerSizeBottomRight">10dp</item>
    </style>

+    <style name="ShapeAppearanceOverlay.Signal.MediaSelection.Selected" parent="">
+        <item name="cornerFamily">rounded</item>
+        <item name="cornerSize">8dp</item>
+    </style>
+
    <style name="ShapeAppearanceOverlay.Signal.Circle" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

+    <style name="ShapeAppearanceOverlay.Signal.MediaOverviewItem" parent="">
+        <item name="cornerFamily">rounded</item>
+        <item name="cornerSize">18dp</item>
+    </style>
+
    <style name="Widget.Signal.BottomSheet.Rounded" parent="Widget.Material3.BottomSheet">
        <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.Signal.BottomSheet.Rounded</item>
        <item name="backgroundTint">@color/signal_colorSurface1</item>
--- a/image-editor/app/src/main/java/org/signal/imageeditor/app/MainActivity.java
+++ b/image-editor/app/src/main/java/org/signal/imageeditor/app/MainActivity.java
@@ -119,7 +119,7 @@ public final class MainActivity extends AppCompatActivity {

  private static EditorModel initialModel() {

-    EditorModel model = EditorModel.create();
+    EditorModel model = EditorModel.create(0xFF000000);

    EditorElement image = new EditorElement(new UrlRenderer("https://cdn.aarp.net/content/dam/aarp/home-and-family/your-home/2018/06/1140-house-inheriting.imgcache.rev68c065601779c5d76b913cf9ec3a977e.jpg"));
    image.getFlags().setSelectable(false).persist();
--- a/image-editor/lib/src/main/java/org/signal/imageeditor/core/ImageEditorView.java
+++ b/image-editor/lib/src/main/java/org/signal/imageeditor/core/ImageEditorView.java
@@ -1,6 +1,7 @@
 package org.signal.imageeditor.core;

 import android.content.Context;
+import android.content.res.TypedArray;
 import android.graphics.Canvas;
 import android.graphics.Matrix;
 import android.graphics.Paint;
@@ -15,8 +16,11 @@ import android.widget.FrameLayout;
 import androidx.annotation.ColorInt;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+import androidx.core.content.ContextCompat;
+import androidx.core.content.res.TypedArrayUtils;
 import androidx.core.view.GestureDetectorCompat;

+import org.signal.imageeditor.R;
 import org.signal.imageeditor.core.model.EditorElement;
 import org.signal.imageeditor.core.model.EditorModel;
 import org.signal.imageeditor.core.model.ThumbRenderer;
@@ -45,6 +49,8 @@ import java.util.List;
 */
 public final class ImageEditorView extends FrameLayout {

+  private static final int DEFAULT_BLACKOUT_COLOR = 0xFF000000;
+
  private HiddenEditText editText;

  @NonNull
@@ -91,22 +97,32 @@ public final class ImageEditorView extends FrameLayout {

  public ImageEditorView(Context context) {
    super(context);
-    init();
+    init(null);
  }

  public ImageEditorView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
-    init();
+    init(attrs);
  }

  public ImageEditorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
-    init();
+    init(attrs);
  }

-  private void init() {
+  private void init(@Nullable AttributeSet attributeSet) {
    setWillNotDraw(false);
-    setModel(EditorModel.create());
+
+    final int blackoutColor;
+    if (attributeSet != null) {
+      TypedArray typedArray = getContext().obtainStyledAttributes(attributeSet, R.styleable.ImageEditorView);
+      blackoutColor = typedArray.getColor(R.styleable.ImageEditorView_imageEditorView_blackoutColor, DEFAULT_BLACKOUT_COLOR);
+      typedArray.recycle();
+    } else {
+      blackoutColor = DEFAULT_BLACKOUT_COLOR;
+    }
+
+    setModel(EditorModel.create(blackoutColor));

    editText = createAHiddenTextEntryField();

--- a/image-editor/lib/src/main/java/org/signal/imageeditor/core/model/EditorElementHierarchy.java
+++ b/image-editor/lib/src/main/java/org/signal/imageeditor/core/model/EditorElementHierarchy.java
@@ -5,8 +5,10 @@ import android.graphics.Point;
 import android.graphics.PointF;
 import android.graphics.RectF;

+import androidx.annotation.ColorInt;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+import androidx.core.graphics.ColorUtils;

 import org.signal.imageeditor.core.Bounds;
 import org.signal.imageeditor.R;
@@ -53,16 +55,16 @@ import org.signal.imageeditor.core.renderers.TrashRenderer;
 */
 final class EditorElementHierarchy {

-  static @NonNull EditorElementHierarchy create() {
-    return new EditorElementHierarchy(createRoot(CropStyle.RECTANGLE));
+  static @NonNull EditorElementHierarchy create(@ColorInt int blackoutColor) {
+    return new EditorElementHierarchy(createRoot(CropStyle.RECTANGLE, blackoutColor));
  }

-  static @NonNull EditorElementHierarchy createForCircleEditing() {
-    return new EditorElementHierarchy(createRoot(CropStyle.CIRCLE));
+  static @NonNull EditorElementHierarchy createForCircleEditing(@ColorInt int blackoutColor) {
+    return new EditorElementHierarchy(createRoot(CropStyle.CIRCLE, blackoutColor));
  }

-  static @NonNull EditorElementHierarchy createForPinchAndPanCropping() {
-    return new EditorElementHierarchy(createRoot(CropStyle.PINCH_AND_PAN));
+  static @NonNull EditorElementHierarchy createForPinchAndPanCropping(@ColorInt int blackoutColor) {
+    return new EditorElementHierarchy(createRoot(CropStyle.PINCH_AND_PAN, blackoutColor));
  }

  static @NonNull EditorElementHierarchy create(@NonNull EditorElement root) {
@@ -116,7 +118,7 @@ final class EditorElementHierarchy {
    PINCH_AND_PAN
  }

-  private static @NonNull EditorElement createRoot(@NonNull CropStyle cropStyle) {
+  private static @NonNull EditorElement createRoot(@NonNull CropStyle cropStyle, @ColorInt int blackoutColor) {
    EditorElement root = new EditorElement(null);

    EditorElement imageRoot = new EditorElement(null);
@@ -138,7 +140,7 @@ final class EditorElementHierarchy {
    overlay.addElement(selection);

    boolean       renderCenterThumbs = cropStyle == CropStyle.RECTANGLE;
-    EditorElement cropEditorElement  = new EditorElement(new CropAreaRenderer(R.color.crop_area_renderer_outer_color, renderCenterThumbs));
+    EditorElement cropEditorElement  = new EditorElement(new CropAreaRenderer(ColorUtils.setAlphaComponent(blackoutColor, 0x7F), renderCenterThumbs));

    cropEditorElement.getFlags()
                     .setRotateLocked(true)
@@ -149,7 +151,8 @@ final class EditorElementHierarchy {

    imageCrop.addElement(cropEditorElement);

-    EditorElement fade = new EditorElement(new FillRenderer(0x66000000), EditorModel.Z_FADE);
+
+    EditorElement fade = new EditorElement(new FillRenderer(ColorUtils.setAlphaComponent(blackoutColor, 0x66)), EditorModel.Z_FADE);
    fade.getFlags()
        .setSelectable(false)
        .setEditable(false)
@@ -165,7 +168,7 @@ final class EditorElementHierarchy {
         .persist();
    cropEditorElement.addElement(trash);

-    EditorElement blackout = new EditorElement(new InverseFillRenderer(0xff000000));
+    EditorElement blackout = new EditorElement(new InverseFillRenderer(ColorUtils.setAlphaComponent(blackoutColor, 0xFF)));

    blackout.getFlags()
            .setSelectable(false)
--- a/image-editor/lib/src/main/java/org/signal/imageeditor/core/model/EditorModel.java
+++ b/image-editor/lib/src/main/java/org/signal/imageeditor/core/model/EditorModel.java
@@ -10,6 +10,7 @@ import android.graphics.RectF;
 import android.os.Parcel;
 import android.os.Parcelable;

+import androidx.annotation.ColorInt;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.annotation.WorkerThread;
@@ -116,26 +117,26 @@ public final class EditorModel implements Parcelable, RendererContext.Ready {
    this.cropUndoRedoStacks     = new UndoRedoStacks(50);
  }

-  public static EditorModel create() {
-    EditorModel model = new EditorModel(EditingPurpose.IMAGE, 0, EditorElementHierarchy.create());
+  public static EditorModel create(@ColorInt int blackoutColor) {
+    EditorModel model = new EditorModel(EditingPurpose.IMAGE, 0, EditorElementHierarchy.create(blackoutColor));
    model.setCropAspectLock(false);
    return model;
  }

-  public static EditorModel createForAvatarCapture() {
-    EditorModel editorModel = new EditorModel(EditingPurpose.AVATAR_CAPTURE, 1, EditorElementHierarchy.createForCircleEditing());
+  public static EditorModel createForAvatarCapture(@ColorInt int blackoutColor) {
+    EditorModel editorModel = new EditorModel(EditingPurpose.AVATAR_CAPTURE, 1, EditorElementHierarchy.createForCircleEditing(blackoutColor));
    editorModel.setCropAspectLock(true);
    return editorModel;
  }

-  public static EditorModel createForAvatarEdit() {
-    EditorModel editorModel = new EditorModel(EditingPurpose.AVATAR_EDIT, 1, EditorElementHierarchy.createForCircleEditing());
+  public static EditorModel createForAvatarEdit(@ColorInt int blackoutColor) {
+    EditorModel editorModel = new EditorModel(EditingPurpose.AVATAR_EDIT, 1, EditorElementHierarchy.createForCircleEditing(blackoutColor));
    editorModel.setCropAspectLock(true);
    return editorModel;
  }

-  public static EditorModel createForWallpaperEditing(float fixedRatio) {
-    EditorModel editorModel = new EditorModel(EditingPurpose.WALLPAPER, fixedRatio, EditorElementHierarchy.createForPinchAndPanCropping());
+  public static EditorModel createForWallpaperEditing(float fixedRatio, @ColorInt int blackoutColor) {
+    EditorModel editorModel = new EditorModel(EditingPurpose.WALLPAPER, fixedRatio, EditorElementHierarchy.createForPinchAndPanCropping(blackoutColor));
    editorModel.setCropAspectLock(true);
    return editorModel;
  }
--- a/image-editor/lib/src/main/java/org/signal/imageeditor/core/renderers/CropAreaRenderer.java
+++ b/image-editor/lib/src/main/java/org/signal/imageeditor/core/renderers/CropAreaRenderer.java
@@ -7,7 +7,7 @@ import android.graphics.Path;
 import android.graphics.RectF;
 import android.os.Parcel;

-import androidx.annotation.ColorRes;
+import androidx.annotation.ColorInt;
 import androidx.annotation.NonNull;
 import androidx.core.content.res.ResourcesCompat;

@@ -25,7 +25,7 @@ import org.signal.imageeditor.core.RendererContext;
 */
 public final class CropAreaRenderer implements Renderer {

-  @ColorRes
+  @ColorInt
  private final int     color;
  private final boolean renderCenterThumbs;

@@ -43,7 +43,7 @@ public final class CropAreaRenderer implements Renderer {
    Resources resources = rendererContext.context.getResources();

    canvas.clipPath(cropClipPath);
-    canvas.drawColor(ResourcesCompat.getColor(resources, color, null));
+    canvas.drawColor(color);

    rendererContext.mapRect(dst, Bounds.FULL_BOUNDS);

@@ -91,7 +91,7 @@ public final class CropAreaRenderer implements Renderer {
    rendererContext.restore();
  }

-  public CropAreaRenderer(@ColorRes int color, boolean renderCenterThumbs) {
+  public CropAreaRenderer(@ColorInt int color, boolean renderCenterThumbs) {
    this.color              = color;
    this.renderCenterThumbs = renderCenterThumbs;

--- a/image-editor/lib/src/main/res/values/styles.xml
+++ b/image-editor/lib/src/main/res/values/styles.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <declare-styleable name="ImageEditorView">
+        <attr name="imageEditorView_blackoutColor" format="color" />
+    </declare-styleable>
+</resources>