From 5fc2b879c7845f13acbd9e525e857b5ca4af0be9 Mon Sep 17 00:00:00 2001
From: Denis Nebytov <nebytov.d@gmail.com>
Date: Thu, 16 Jan 2025 15:45:22 +0300
Subject: [PATCH 1/2] fix YOEXT-1107

---
 .../app/components/swap/SwapInput.js          | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/yoroi-extension/app/components/swap/SwapInput.js b/packages/yoroi-extension/app/components/swap/SwapInput.js
index e9f0db4a38..4b927ba155 100644
--- a/packages/yoroi-extension/app/components/swap/SwapInput.js
+++ b/packages/yoroi-extension/app/components/swap/SwapInput.js
@@ -87,8 +87,8 @@ export default function SwapInput({
           position: 'relative',
           bgcolor: 'ds.bg_color_max',
           columnGap: '6px',
-          rowGap: '8px',
-          maxHeight: '95px',
+          rowGap: '6px',
+          maxHeight: '80px',
           '&:hover': {
             borderColor: !error && 'grayscale.max',
           },
@@ -121,12 +121,13 @@ export default function SwapInput({
           variant="body1"
           color="grayscale.max"
           placeholder="0"
+          padding="0"
           onChange={handleChange}
           value={disabled ? '' : value}
           onFocus={() => focusState.update(true)}
           onBlur={() => focusState.update(false)}
         />
-        <Box sx={{ justifySelf: 'end', cursor: 'pointer' }} onClick={onAssetSelect}>
+        <Box sx={{ justifySelf: 'end', cursor: 'pointer', maxHeight: '24px' }} onClick={onAssetSelect}>
           <Box height="100%" width="min-content" display="flex" gap="8px" alignItems="center">
             <Box
               width="24px"
@@ -156,15 +157,23 @@ export default function SwapInput({
           <Box>
             <Typography
               component="button"
-              variant="caption"
+              variant="caption1"
               fontWeight={500}
+              maxHeight="18px"
+              maxWidth="34px"
               sx={{
-                p: '4px 8px',
-                bgcolor: 'grayscale.50',
-                borderRadius: '8px',
+                p: '2px 4px',
+                bgcolor: 'ds.gray_50',
+                borderRadius: '4px',
                 ':disabled': {
                   cursor: 'not-allowed',
                 },
+                ':hover': {
+                  bgcolor: 'ds.gray_100',
+                },
+                ':active': {
+                  bgcolor: 'ds.gray_200',
+                },
                 color: 'ds.text_gray_medium',
               }}
               onClick={() => {
@@ -176,10 +185,10 @@ export default function SwapInput({
             </Typography>
           </Box>
         ) : (
-          <Box minHeight="31px" />
+          <Box minHeight="18px" />
         )}
         <Box sx={{ justifySelf: 'end', alignSelf: 'end' }}>
-          <Typography component="div" variant="caption" color="grayscale.600">
+          <Typography component="div" variant="caption1" color="ds.text_gray_low">
             {strings.currentBalance} {quantity || 0} {ticker}
           </Typography>
         </Box>

From 548f6cfe547af403659289198b909d28dd8c387a Mon Sep 17 00:00:00 2001
From: Denis Nebytov <nebytov.d@gmail.com>
Date: Thu, 16 Jan 2025 17:53:32 +0300
Subject: [PATCH 2/2] fix YOEXT-1331

---
 .../app/assets/images/calendar-24.inline.svg  |  9 +++++
 .../app/components/wallet/export/DateRange.js | 36 +++++++++++++------
 2 files changed, 34 insertions(+), 11 deletions(-)
 create mode 100644 packages/yoroi-extension/app/assets/images/calendar-24.inline.svg

diff --git a/packages/yoroi-extension/app/assets/images/calendar-24.inline.svg b/packages/yoroi-extension/app/assets/images/calendar-24.inline.svg
new file mode 100644
index 0000000000..4cfc23b927
--- /dev/null
+++ b/packages/yoroi-extension/app/assets/images/calendar-24.inline.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 14.5C7 13.9477 7.44772 13.5 8 13.5H8.01C8.56228 13.5 9.01 13.9477 9.01 14.5C9.01 15.0523 8.56228 15.5 8.01 15.5H8C7.44772 15.5 7 15.0523 7 14.5Z" fill="white"/>
+<path d="M12 13.5C11.4477 13.5 11 13.9477 11 14.5C11 15.0523 11.4477 15.5 12 15.5H12.01C12.5623 15.5 13.01 15.0523 13.01 14.5C13.01 13.9477 12.5623 13.5 12.01 13.5H12Z" fill="white"/>
+<path d="M15 14.5C15 13.9477 15.4477 13.5 16 13.5H16.01C16.5623 13.5 17.01 13.9477 17.01 14.5C17.01 15.0523 16.5623 15.5 16.01 15.5H16C15.4477 15.5 15 15.0523 15 14.5Z" fill="white"/>
+<path d="M8 16.5C7.44772 16.5 7 16.9477 7 17.5C7 18.0523 7.44772 18.5 8 18.5H8.01C8.56228 18.5 9.01 18.0523 9.01 17.5C9.01 16.9477 8.56228 16.5 8.01 16.5H8Z" fill="white"/>
+<path d="M11 17.5C11 16.9477 11.4477 16.5 12 16.5H12.01C12.5623 16.5 13.01 16.9477 13.01 17.5C13.01 18.0523 12.5623 18.5 12.01 18.5H12C11.4477 18.5 11 18.0523 11 17.5Z" fill="white"/>
+<path d="M16 16.5C15.4477 16.5 15 16.9477 15 17.5C15 18.0523 15.4477 18.5 16 18.5H16.01C16.5623 18.5 17.01 18.0523 17.01 17.5C17.01 16.9477 16.5623 16.5 16.01 16.5H16Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 3.5C17 2.94772 16.5523 2.5 16 2.5C15.4477 2.5 15 2.94772 15 3.5V4.5H9V3.5C9 2.94772 8.55228 2.5 8 2.5C7.44772 2.5 7 2.94772 7 3.5V4.5H5C3.45713 4.5 2 5.63618 2 7.27778V19.7222C2 21.3638 3.45713 22.5 5 22.5H19C20.5429 22.5 22 21.3638 22 19.7222V7.27778C22 5.63618 20.5429 4.5 19 4.5H17V3.5ZM20 9.5V7.27778C20 6.9557 19.6663 6.5 19 6.5H17V7.5C17 8.05228 16.5523 8.5 16 8.5C15.4477 8.5 15 8.05228 15 7.5V6.5H9V7.5C9 8.05228 8.55228 8.5 8 8.5C7.44772 8.5 7 8.05228 7 7.5V6.5H5C4.33373 6.5 4 6.9557 4 7.27778V9.5H20ZM4 11.5H20V19.7222C20 20.0443 19.6663 20.5 19 20.5H5C4.33373 20.5 4 20.0443 4 19.7222V11.5Z" fill="white"/>
+</svg>
diff --git a/packages/yoroi-extension/app/components/wallet/export/DateRange.js b/packages/yoroi-extension/app/components/wallet/export/DateRange.js
index 194902891a..2dd3dbdeb0 100644
--- a/packages/yoroi-extension/app/components/wallet/export/DateRange.js
+++ b/packages/yoroi-extension/app/components/wallet/export/DateRange.js
@@ -1,13 +1,14 @@
 // @flow
 import { Component } from 'react';
 import type { Node } from 'react';
-import TextField from '@mui/material/TextField';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DatePicker } from '@mui/x-date-pickers';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+import { ReactComponent as CalendarIcon } from '../../../assets/images/calendar-24.inline.svg';
+import { styled, Box, TextField } from '@mui/material';
 
 const messages = defineMessages({
   startDate: {
@@ -34,6 +35,24 @@ type Props = {|
   initialId: string,
 |};
 
+const IconWrapper = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignContent: 'center',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '& svg': {
+    '& path': {
+      fill: theme.palette.ds.el_gray_max,
+    },
+  },
+}));
+
+const OpenPickerIcon = () => (
+  <IconWrapper>
+    <CalendarIcon />
+  </IconWrapper>
+);
+
 @observer
 export default class ExportTransactionDialog extends Component<Props> {
   static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
@@ -79,15 +98,10 @@ export default class ExportTransactionDialog extends Component<Props> {
             }}
             className={componentId}
             renderInput={params => {
-              return (
-                <TextField
-                  {...params}
-                  sx={{
-                    mb: '24px',
-                    svg: { color: 'ds.gray_max' },
-                  }}
-                />
-              );
+              return <TextField {...params} sx={{ mb: '24px' }} />;
+            }}
+            components={{
+              OpenPickerIcon,
             }}
           />
         ))}