More minor fixes

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>

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,
             }}
           />
         ))}