delete modals mobile view

theme/components/Textarea.ts

@@ -4,6 +4,12 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
 const sizes = {
+  md: defineStyle({
+    fontSize: 'md',
+    lineHeight: '20px',
+    h: '160px',
+    borderRadius: 'base',
+  }),
   lg: defineStyle({
     fontSize: 'md',
     lineHeight: '20px',

ui/apiKey/DeleteApiKeyModal.tsx

@@ -28,7 +28,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
 
   const renderText = useCallback(() => {
     return (
-      <Text display="flex">API key for<Text fontWeight="600" whiteSpace="pre">{ ` "${ data.name || 'name' }" ` }</Text>will be deleted</Text>
+      <Text> API key for <Text fontWeight="600" as="span">{ ` "${ data.name || 'name' }" ` }</Text> will be deleted </Text>
     );
   }, [ data.name ]);
 

ui/customAbi/DeleteCustomAbiModal.tsx

@@ -28,7 +28,7 @@ const DeleteCustomAbiModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
 
   const renderText = useCallback(() => {
     return (
-      <Text display="flex">Custom ABI for<Text fontWeight="600" whiteSpace="pre">{ ` "${ data.name || 'name' }" ` }</Text>will be deleted</Text>
+      <Text>Custom ABI for<Text fontWeight="600" as="span">{ ` "${ data.name || 'name' }" ` }</Text>will be deleted</Text>
     );
   }, [ data.name ]);
 

ui/privateTags/DeletePrivateTagModal.tsx

@@ -37,7 +37,7 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type })
 
   const renderText = useCallback(() => {
     return (
-      <Text display="flex">Tag<Text fontWeight="600" whiteSpace="pre">{ ` "${ tag || 'tag' }" ` }</Text>will be deleted</Text>
+      <Text>Tag<Text fontWeight="600" as="span">{ ` "${ tag || 'tag' }" ` }</Text>will be deleted</Text>
     );
   }, [ tag ]);
 

ui/publicTags/DeletePublicTagModal.tsx

-import { Flex, Text, FormControl, FormLabel, Textarea } from '@chakra-ui/react';
+import { Box, Text, FormControl, FormLabel, Textarea, useColorModeValue } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 import type { ChangeEvent } from 'react';
@@ -22,6 +22,7 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, data, onDelete
   const tags = data.tags.split(';');
 
   const queryClient = useQueryClient();
+  const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   const deleteApiKey = useCallback(() => {
     const body = JSON.stringify({ remove_reason: reason });
@@ -44,9 +45,9 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, data, onDelete
     if (tags.length === 1) {
       text = (
         <>
-          <Text display="flex">Public tag</Text>
-          <Text fontWeight="600" whiteSpace="pre">{ ` "${ tags[0] }" ` }</Text>
-          <Text>will be removed.</Text>
+          <Text display="inline" as="span">Public tag</Text>
+          <Text fontWeight="600" whiteSpace="pre" as="span">{ ` "${ tags[0] }" ` }</Text>
+          <Text as="span">will be removed.</Text>
         </>
       );
     }
@@ -54,29 +55,29 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, data, onDelete
       const tagsText: Array<JSX.Element | string> = [];
       tags.forEach((tag, index) => {
         if (index < tags.length - 2) {
-          tagsText.push(<Text fontWeight="600" whiteSpace="pre">{ ` "${ tag }"` }</Text>);
+          tagsText.push(<Text fontWeight="600" whiteSpace="pre" as="span">{ ` "${ tag }"` }</Text>);
           tagsText.push(',');
         }
         if (index === tags.length - 2) {
-          tagsText.push(<Text fontWeight="600" whiteSpace="pre">{ ` "${ tag }" ` }</Text>);
+          tagsText.push(<Text fontWeight="600" whiteSpace="pre" as="span">{ ` "${ tag }" ` }</Text>);
           tagsText.push('and');
         }
         if (index === tags.length - 1) {
-          tagsText.push(<Text fontWeight="600" whiteSpace="pre">{ ` "${ tag }" ` }</Text>);
+          tagsText.push(<Text fontWeight="600" whiteSpace="pre" as="span">{ ` "${ tag }" ` }</Text>);
         }
       });
       text = (
         <>
-          <Text>Public tags</Text>{ tagsText }<Text>will be removed.</Text>
+          <Text as="span">Public tags</Text>{ tagsText }<Text as="span">will be removed.</Text>
         </>
       );
     }
     return (
       <>
-        <Flex marginBottom={ 12 }>
+        <Box marginBottom={ 12 }>
           { text }
-        </Flex>
-        <FormControl variant="floating" id="tag-delete">
+        </Box>
+        <FormControl variant="floating" id="tag-delete" backgroundColor={ formBackgroundColor }>
           <Textarea
             size="lg"
             value={ reason }
@@ -86,7 +87,7 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, data, onDelete
         </FormControl>
       </>
     );
-  }, [ tags, reason, onFieldChange ]);
+  }, [ tags, reason, onFieldChange, formBackgroundColor ]);
 
   return (
     <DeleteModal

ui/watchlist/DeleteAddressModal.tsx

@@ -33,7 +33,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   const renderModalContent = useCallback(() => {
     const addressString = isMobile ? [ address.slice(0, 4), address.slice(-4) ].join('...') : address;
     return (
-      <Text display="flex">Address <Text fontWeight="600" whiteSpace="pre"> { addressString || 'address' } </Text>   will be deleted</Text>
+      <Text>Address <Text fontWeight="600" as="span"> { addressString || 'address' }</Text> will be deleted</Text>
     );
   }, [ address, isMobile ]);