Update Send button bg color (#5170)

* Update Send button bg color Change the gradient bg to accent/rest. * Tidy-up ComposerToolbar to match iOS 18 Figma. Also simplifies the tests a bit. * Add a .glassEffect to Compound's SendButton. * Add a border to TimelineReplyView. Also use the same sizes in both the message bubbles and the composer. * Change icon size and container in message bubbles - Container size = 36x36px - Icon size = 24x24px * Update icon of reply contents to be 24x24 * Update the VoiceMessageButton to match the designs. * Adopt Liquid Glass in the ComposerToolbar. * Generate and fix snapshots. --------- Co-authored-by: Doug <douglase@element.io>
2026-11-03 06:55:59 +00:00 · 2026-03-25 18:42:10 +01:00
parent a2481b59ba
commit 96b6d69d5a
181 changed files with 790 additions and 719 deletions
@@ -1,6 +0,0 @@
-{
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  }
-}
@@ -1,25 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "close-rte.svg",
-      "idiom" : "universal"
-    },
-    {
-      "appearances" : [
-        {
-          "appearance" : "luminosity",
-          "value" : "dark"
-        }
-      ],
-      "filename" : "close-rte-dark.svg",
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  },
-  "properties" : {
-    "preserves-vector-representation" : true
-  }
-}
@@ -1,3 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M4.3934 4.3934C-1.46447 10.2513 -1.46447 19.7487 4.3934 25.6066C10.2513 31.4645 19.7487 31.4645 25.6066 25.6066C31.4645 19.7487 31.4645 10.2513 25.6066 4.3934C19.7487 -1.46447 10.2513 -1.46447 4.3934 4.3934ZM11.4645 19.9497L15 16.4142L18.5355 19.9497C18.7359 20.1501 18.9716 20.2503 19.2426 20.2503C19.5137 20.2503 19.7494 20.1501 19.9497 19.9497C20.1501 19.7494 20.2503 19.5137 20.2503 19.2426C20.2503 18.9716 20.1501 18.7359 19.9497 18.5355L16.4142 15L19.9497 11.4645C20.1501 11.2641 20.2503 11.0284 20.2503 10.7574C20.2503 10.4863 20.1501 10.2506 19.9497 10.0503C19.7494 9.84991 19.5137 9.74973 19.2426 9.74973C18.9716 9.74973 18.7359 9.84991 18.5355 10.0503L15 13.5858L11.4645 10.0503C11.2641 9.84991 11.0284 9.74973 10.7574 9.74973C10.4863 9.74973 10.2506 9.84991 10.0503 10.0503C9.84991 10.2506 9.74973 10.4863 9.74973 10.7574C9.74973 11.0284 9.84991 11.2641 10.0503 11.4645L13.5858 15L10.0503 18.5355C9.84991 18.7359 9.74973 18.9716 9.74973 19.2426C9.74973 19.5137 9.84991 19.7494 10.0503 19.9497C10.2506 20.1501 10.4863 20.2503 10.7574 20.2503C11.0284 20.2503 11.2641 20.1501 11.4645 19.9497Z" fill="#EBEEF2"/>
-</svg>
@@ -1,3 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M4.3934 4.3934C-1.46447 10.2513 -1.46447 19.7487 4.3934 25.6066C10.2513 31.4645 19.7487 31.4645 25.6066 25.6066C31.4645 19.7487 31.4645 10.2513 25.6066 4.3934C19.7487 -1.46447 10.2513 -1.46447 4.3934 4.3934ZM11.4645 19.9497L15 16.4142L18.5355 19.9497C18.7359 20.1501 18.9716 20.2503 19.2426 20.2503C19.5137 20.2503 19.7494 20.1501 19.9497 19.9497C20.1501 19.7494 20.2503 19.5137 20.2503 19.2426C20.2503 18.9716 20.1501 18.7359 19.9497 18.5355L16.4142 15L19.9497 11.4645C20.1501 11.2641 20.2503 11.0284 20.2503 10.7574C20.2503 10.4863 20.1501 10.2506 19.9497 10.0503C19.7494 9.84991 19.5137 9.74973 19.2426 9.74973C18.9716 9.74973 18.7359 9.84991 18.5355 10.0503L15 13.5858L11.4645 10.0503C11.2641 9.84991 11.0284 9.74973 10.7574 9.74973C10.4863 9.74973 10.2506 9.84991 10.0503 10.0503C9.84991 10.2506 9.74973 10.4863 9.74973 10.7574C9.74973 11.0284 9.84991 11.2641 10.0503 11.4645L13.5858 15L10.0503 18.5355C9.84991 18.7359 9.74973 18.9716 9.74973 19.2426C9.74973 19.5137 9.84991 19.7494 10.0503 19.9497C10.2506 20.1501 10.4863 20.2503 10.7574 20.2503C11.0284 20.2503 11.2641 20.1501 11.4645 19.9497Z" fill="#1B1D22"/>
-</svg>
@@ -1,16 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "composer-attachment-light.svg",
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  },
-  "properties" : {
-    "preserves-vector-representation" : true,
-    "template-rendering-intent" : "template"
-  }
-}
@@ -1,3 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 23.2843 6.71573 30 15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15ZM16 21V16H21C21.2833 16 21.5208 15.9042 21.7125 15.7125C21.9042 15.5208 22 15.2833 22 15C22 14.7167 21.9042 14.4792 21.7125 14.2875C21.5208 14.0958 21.2833 14 21 14H16V9C16 8.71667 15.9042 8.47917 15.7125 8.2875C15.5208 8.09583 15.2833 8 15 8C14.7167 8 14.4792 8.09583 14.2875 8.2875C14.0958 8.47917 14 8.71667 14 9L14 14L9 14C8.71667 14 8.47917 14.0958 8.2875 14.2875C8.09583 14.4792 8 14.7167 8 15C8 15.2833 8.09583 15.5208 8.2875 15.7125C8.47917 15.9042 8.71667 16 9 16H14V21C14 21.2833 14.0958 21.5208 14.2875 21.7125C14.4792 21.9042 14.7167 22 15 22C15.2833 22 15.5208 21.9042 15.7125 21.7125C15.9042 21.5208 16 21.2833 16 21Z" fill="#1B1D22"/>
-</svg>
@@ -1,16 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "stop-recording.svg",
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  },
-  "properties" : {
-    "preserves-vector-representation" : true,
-    "template-rendering-intent" : "template"
-  }
-}
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="stop_FILL1_wght400_GRAD0_opsz24 1">
-<path id="Vector" d="M6 16V8C6 7.45 6.19583 6.97917 6.5875 6.5875C6.97917 6.19583 7.45 6 8 6H16C16.55 6 17.0208 6.19583 17.4125 6.5875C17.8042 6.97917 18 7.45 18 8V16C18 16.55 17.8042 17.0208 17.4125 17.4125C17.0208 17.8042 16.55 18 16 18H8C7.45 18 6.97917 17.8042 6.5875 17.4125C6.19583 17.0208 6 16.55 6 16Z" fill="white"/>
-</g>
-</svg>
@@ -1,6 +0,0 @@
-{
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  }
-}
@@ -1,16 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "media-pause.svg",
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  },
-  "properties" : {
-    "preserves-vector-representation" : true,
-    "template-rendering-intent" : "template"
-  }
-}
@@ -1,3 +0,0 @@
-<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 14C9.45 14 8.97917 13.8042 8.5875 13.4125C8.19583 13.0208 8 12.55 8 12V2C8 1.45 8.19583 0.979167 8.5875 0.5875C8.97917 0.195833 9.45 0 10 0C10.55 0 11.0208 0.195833 11.4125 0.5875C11.8042 0.979167 12 1.45 12 2V12C12 12.55 11.8042 13.0208 11.4125 13.4125C11.0208 13.8042 10.55 14 10 14ZM2 14C1.45 14 0.979167 13.8042 0.5875 13.4125C0.195833 13.0208 0 12.55 0 12V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0C2.55 0 3.02083 0.195833 3.4125 0.5875C3.80417 0.979167 4 1.45 4 2V12C4 12.55 3.80417 13.0208 3.4125 13.4125C3.02083 13.8042 2.55 14 2 14Z" fill="#656D77"/>
-</svg>
@@ -1,16 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "media-play.svg",
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  },
-  "properties" : {
-    "preserves-vector-representation" : true,
-    "template-rendering-intent" : "template"
-  }
-}
@@ -1,3 +0,0 @@
-<svg width="11" height="14" viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.525 13.0252C1.19167 13.2418 0.854167 13.2543 0.5125 13.0627C0.170833 12.871 0 12.5752 0 12.1752V1.82518C0 1.42518 0.170833 1.12935 0.5125 0.937683C0.854167 0.746017 1.19167 0.758517 1.525 0.975183L9.675 6.15018C9.975 6.35018 10.125 6.63352 10.125 7.00018C10.125 7.36685 9.975 7.65018 9.675 7.85018L1.525 13.0252Z" fill="#656D77"/>
-</svg>