Make `caret-right` icon consistent with pattern library

The contents of the `caret-right` icon weren’t consistent with the
`caret-*` icons in the pattern library, but the icon is used by
`Thread`. Rename to `collapsed` (for `Thread` use) and update
`caret-right` to match the pattern library-style carets.

src/images/icons/caret-right.svg

-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <g transform="matrix(6.12323e-17,1,-1,6.12323e-17,15.9996,0.000432345)">
-        <path fill="currentColor" d="M7.456,4.212C7.762,3.931 8.238,3.931 8.544,4.212L14.774,10.079C15.075,10.362 15.075,10.821 14.774,11.104L14.048,11.788C13.742,12.069 13.267,12.069 12.961,11.789L8,7.139L3.039,11.789C2.733,12.069 2.258,12.069 1.952,11.788L1.225,11.104C1.081,10.972 0.999,10.786 0.999,10.592C0.999,10.397 1.081,10.211 1.225,10.079L7.455,4.212L7.456,4.212Z" />
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--caret-right"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 4l4 4-4 4"></path></g></svg>

src/images/icons/collapsed.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(6.12323e-17,1,-1,6.12323e-17,15.9996,0.000432345)">
+        <path fill="currentColor" d="M7.456,4.212C7.762,3.931 8.238,3.931 8.544,4.212L14.774,10.079C15.075,10.362 15.075,10.821 14.774,11.104L14.048,11.788C13.742,12.069 13.267,12.069 12.961,11.789L8,7.139L3.039,11.789C2.733,12.069 2.258,12.069 1.952,11.788L1.225,11.104C1.081,10.972 0.999,10.786 0.999,10.592C0.999,10.397 1.081,10.211 1.225,10.079L7.455,4.212L7.456,4.212Z" />
+    </g>
+</svg>

src/sidebar/components/thread.js

@@ -31,7 +31,7 @@ function Thread({ showDocumentInfo = false, thread, threadsService }) {
   // Render a control to expand/collapse the current thread if this thread has
   // a parent (i.e. is a reply thread)
   const showThreadToggle = !!thread.parent;
-  const toggleIcon = thread.collapsed ? 'caret-right' : 'expand-menu';
+  const toggleIcon = thread.collapsed ? 'collapsed' : 'expand-menu';
   const toggleTitle = thread.collapsed ? 'Expand replies' : 'Collapse replies';
 
   // If rendering child threads, only render those that have at least one

src/sidebar/icons.js

@@ -12,6 +12,7 @@ export default {
   'cc-std': require('../images/icons/cc-std.svg'),
   'cc-zero': require('../images/icons/cc-zero.svg'),
   'collapse-menu': require('../images/icons/collapse-menu.svg'),
+  collapsed: require('../images/icons/collapsed.svg'),
   copy: require('../images/icons/copy.svg'),
   cursor: require('../images/icons/cursor.svg'),
   edit: require('../images/icons/edit.svg'),