feat: added new save icon

updated DataExtractNotification and Lightbox download icons

ts/components/conversation/message/message-item/DataExtractionNotification.tsx

@@ -35,7 +35,7 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
         id={`msg-${messageId}`}
         style={{ textAlign: 'center' }}
       >
-        <SessionIcon iconType="upload" iconColor="inherit" iconSize="medium" iconRotation={180} />
+        <SessionIcon iconType="save" iconColor="inherit" iconSize="large" />
         <SpacerSM />
         <Text text={contentText} ellipsisOverflow={true} />
       </Flex>

ts/components/icon/Icons.tsx

@@ -52,6 +52,7 @@ export type SessionIconType =
   | 'plusThin'
   | 'plusFat'
   | 'reply'
+  | 'save'
   | 'send'
   | 'search'
   | 'shield'
@@ -60,7 +61,6 @@ export type SessionIconType =
   | 'stopwatch'
   | 'qr'
   | 'users'
-  | 'upload'
   | 'warning'
   | 'sending'
   | 'doubleCheckCircle'
@@ -392,6 +392,12 @@ export const icons: Record<string, { path: string; viewBox: string; ratio: numbe
     viewBox: '-0.5 0.3 23 22',
     ratio: 1,
   },
+  save: {
+    path:
+      'M24.5771 6C23.4412 6 22.624 6.79418 22.624 7.93005V29.897L22.7949 34.5813L16.238 27.3968L11.3587 22.5957C11.0122 22.2492 10.4996 22.0506 9.98225 22.0506C8.86942 22.0506 8.08892 22.8725 8.08892 23.9623C8.08892 24.4937 8.30166 24.9602 8.72674 25.4267L23.1089 39.8409C23.5382 40.2702 24.0461 40.4919 24.5771 40.4919C25.1128 40.4919 25.6208 40.2702 26.0271 39.8409L40.4139 25.4267C40.862 24.9602 41.0748 24.4937 41.0748 23.9623C41.0748 22.8725 40.2712 22.0506 39.1815 22.0506C38.6641 22.0506 38.1515 22.2492 37.782 22.5957L32.898 27.3968L26.3641 34.5582L26.5119 29.897V7.93005C26.5119 6.79418 25.7178 6 24.5771 6ZM9.88864 40.4364C8.77109 40.4364 8 41.2583 8 42.3942C8 43.5301 8.77109 44.3473 9.88864 44.3473H39.2242C40.3648 44.3473 41.1359 43.5301 41.1359 42.3942C41.1359 41.2583 40.3648 40.4364 39.2242 40.4364H9.88864Z',
+    viewBox: '0 0 50 50',
+    ratio: 1,
+  },
   search: {
     path:
       'M16.5260392,16.2168725 L13.3593725,12.879521 C13.2567964,12.7688667 13.1425871,12.670895 13.0189558,12.5875028 L12.2272892,12.0118096 L12.2272892,12.0118096 C13.8556873,9.88830358 13.8708099,6.85915463 12.2637039,4.71770761 C10.6565979,2.57626059 7.85617522,1.8940349 5.52036814,3.07492811 C3.18456106,4.25582133 1.93676065,6.98467116 2.51570128,9.64591861 C3.09464191,12.3071661 5.34581319,14.190565 7.93645584,14.1810881 C9.19365936,14.1814736 10.4136244,13.7313239 11.3960392,12.9045511 L11.3960392,12.9045511 L11.9897892,13.738889 C12.0602158,13.8463397 12.1397052,13.9468684 12.2272892,14.0392507 L15.3939558,17.3766021 C15.4682801,17.4555775 15.5694535,17.5 15.6749975,17.5 C15.7805415,17.5 15.8817149,17.4555775 15.9560392,17.3766021 L16.5102058,16.7925656 C16.6604889,16.6359051 16.6674599,16.3824439 16.5260392,16.2168725 Z M7.93645584,12.5124123 C5.7503287,12.5124123 3.9781225,10.6446834 3.9781225,8.340723 C3.9781225,6.03676259 5.7503287,4.16903366 7.93645584,4.16903366 C10.122583,4.16903366 11.8947892,6.03676259 11.8947892,8.340723 C11.8947892,9.44712381 11.4777517,10.5082093 10.7354202,11.2905528 C9.99308868,12.0728963 8.98627111,12.5124123 7.93645584,12.5124123',
@@ -440,12 +446,6 @@ export const icons: Record<string, { path: string; viewBox: string; ratio: numbe
     viewBox: '0 0 25 21',
     ratio: 1,
   },
-  upload: {
-    path:
-      'M380.032,133.472l-112-128C264.992,2.016,260.608,0,256,0c-4.608,0-8.992,2.016-12.032,5.472l-112,128 c-4.128,4.736-5.152,11.424-2.528,17.152C132.032,156.32,137.728,160,144,160h64v208c0,8.832,7.168,16,16,16h64	c8.832,0,16-7.168,16-16V160h64c6.272,0,11.968-3.648,14.56-9.376C385.152,144.896,384.192,138.176,380.032,133.472z M432,352v96H80v-96H16v128c0,17.696,14.336,32,32,32h416c17.696,0,32-14.304,32-32V352H432z',
-    viewBox: '0 0 512 512',
-    ratio: 1,
-  },
   warning: {
     path:
       'M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4 C268.225,344.682,256.925,333.382,243.225,333.382z M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4 l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8 C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8	c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8 l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7 c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9 c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z',

ts/components/lightbox/Lightbox.tsx

@@ -9,7 +9,7 @@ import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
 import { showLightBox } from '../../state/ducks/conversations';
 import { GoogleChrome } from '../../util';
 import { Flex } from '../basic/Flex';
-import { SessionIconButton, SessionIconType } from '../icon';
+import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
 import * as MIME from '../../types/MIME';
 import { assertUnreachable } from '../../types/sqlSharedTypes';
 
@@ -147,6 +147,7 @@ const IconButton = ({ onClick, type }: IconButtonProps) => {
   };
   let iconRotation = 0;
   let iconType: SessionIconType = 'chevron';
+  let iconSize: SessionIconSize = 'huge';
   switch (type) {
     case 'next':
       iconRotation = 270;
@@ -158,9 +159,8 @@ const IconButton = ({ onClick, type }: IconButtonProps) => {
       iconType = 'exit';
       break;
     case 'save':
-      iconType = 'upload';
-      iconRotation = 180;
-
+      iconType = 'save';
+      iconSize = 'huge2';
       break;
     default:
       assertUnreachable(type, `Invalid button type: ${type}`);
@@ -170,7 +170,7 @@ const IconButton = ({ onClick, type }: IconButtonProps) => {
     <StyledIconButton>
       <SessionIconButton
         iconType={iconType}
-        iconSize={'huge'}
+        iconSize={iconSize}
         iconRotation={iconRotation}
         // the lightbox has a dark background
         iconColor="var(--lightbox-icon-stroke-color)"