refactor: turn "phone" icon into actual element

Instead of it being an `::after` element.
We are going to turn it into a button next.

Author: WofWca

packages/frontend/scss/message/_message.scss

@@ -97,19 +97,13 @@ $info-text-max-width: 400px;
           margin-inline-end: var(--call-icon-size);
           white-space: nowrap;
           font-weight: bold;
-          &::after {
-            content: '';
+          .phone-icon {
             position: absolute;
             top: 18px;
             inset-inline-end: 8px;
             transform: translateY(-50%);
             width: var(--call-icon-size);
             height: var(--call-icon-size);
-            @include mixins.color-svg(
-              './images/icons/phone.svg',
-              var(--messageText),
-              100%
-            );
           }
         }
       }
@@ -240,14 +234,6 @@ $info-text-max-width: 400px;
 .message.incoming {
   margin-inline-start: 0;
 
-  .msg-body.call > .text::after {
-    @include mixins.color-svg(
-      './images/icons/phone.svg',
-      var(--messageText),
-      100%
-    );
-  }
-
   .metadata:not(.with-image-no-caption) {
     .email-icon {
       @include mixins.color-svg(

packages/frontend/src/components/message/Message.tsx

@@ -65,6 +65,7 @@ import { mouseEventToPosition } from '../../utils/mouseEventToPosition'
 import { useRovingTabindex } from '../../contexts/RovingTabindex'
 import { avatarInitial } from '@deltachat-desktop/shared/avatarInitial'
 import { getLogger } from '@deltachat-desktop/shared/logger'
+import Icon from '../Icon'
 
 const log = getLogger('Message')
 
@@ -815,6 +816,15 @@ export default function Message(props: {
           tabindexForInteractiveContents={tabindexForInteractiveContents}
         />
       ) : null}
+      {message.viewType === 'Call' && (
+        <Icon
+          icon='phone'
+          className='phone-icon'
+          coloring='currentColor'
+          // `size` will be overridden in CSS
+          size={24}
+        />
+      )}
     </div>
   )