Use a less sharp edge

src/apps/call/CallWizard.tsx

@@ -4,10 +4,10 @@ import { Box, Button, Card, CardContent, IconButton, ListItemDecorator, Typograp
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import ChatIcon from '@mui/icons-material/Chat';
 import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import MicIcon from '@mui/icons-material/Mic';
 import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
-import WarningIcon from '@mui/icons-material/Warning';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
 import { PreferencesTab, useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { cssRainbowColorKeyframes } from '~/common/app.theme';
@@ -67,7 +67,7 @@ function StatusCard(props: { icon: React.JSX.Element, hasIssue: boolean, text: s
           {props.button}
         </Typography>
         <ListItemDecorator>
-          {props.hasIssue ? <WarningIcon color='warning' /> : <CheckIcon color='success' />}
+          {props.hasIssue ? <WarningRoundedIcon color='warning' /> : <CheckIcon color='success' />}
         </ListItemDecorator>
       </CardContent>
     </Card>
@@ -208,7 +208,7 @@ export function CallWizard(props: { strict?: boolean, conversationId: string | n
           // boxShadow: allGood ? 'md' : 'none',
         }}
       >
-        {allGood ? <ArrowForwardIcon sx={{ fontSize: '1.5em' }} /> : <CloseIcon sx={{ fontSize: '1.5em' }} />}
+        {allGood ? <ArrowForwardIcon sx={{ fontSize: '1.5em' }} /> : <CloseRoundedIcon sx={{ fontSize: '1.5em' }} />}
       </IconButton>
     </Box>
 

src/apps/chat/components/ChatDrawerItem.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Avatar, Box, IconButton, ListItem, ListItemButton, ListItemDecorator, Sheet, styled, Tooltip, Typography } from '@mui/joy';
 import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import EditIcon from '@mui/icons-material/Edit';
@@ -312,17 +312,17 @@ function ChatDrawerItem(props: {
                   </FadeInButton>
                 </Tooltip>
 
-                <Tooltip disableInteractive title='Export Chat'>
-                  <FadeInButton size='sm' onClick={handleConversationExport}>
-                    <FileDownloadOutlinedIcon />
-                  </FadeInButton>
-                </Tooltip>
-
                 <Tooltip disableInteractive title='Branch'>
                   <FadeInButton size='sm' onClick={handleConversationBranch}>
                     <ForkRightIcon />
                   </FadeInButton>
                 </Tooltip>
+
+                <Tooltip disableInteractive title='Export Chat'>
+                  <FadeInButton size='sm' onClick={handleConversationExport}>
+                    <FileDownloadOutlinedIcon />
+                  </FadeInButton>
+                </Tooltip>
               </>}
 
             </>}
@@ -342,7 +342,7 @@ function ChatDrawerItem(props: {
 
             <Tooltip disableInteractive title={deleteArmed ? 'Cancel Delete' : 'Delete'}>
               <FadeInButton key='btn-arm' size='sm' onClick={deleteArmed ? handleDeleteButtonHide : handleDeleteButtonShow} sx={deleteArmed ? { opacity: 1 } : {}}>
-                {deleteArmed ? <CloseIcon /> : <DeleteOutlineIcon />}
+                {deleteArmed ? <CloseRoundedIcon /> : <DeleteOutlineIcon />}
               </FadeInButton>
             </Tooltip>
             {/*</>}*/}

src/apps/chat/components/Ephemerals.tsx

@@ -3,7 +3,7 @@ import { shallow } from 'zustand/shallow';
 
 import { Box, Grid, IconButton, Sheet, styled, Typography } from '@mui/joy';
 import { SxProps } from '@mui/joy/styles/types';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 
 import { DConversationId, DEphemeral, useChatStore } from '~/common/state/store-chats';
 import { lineHeightChatTextMd } from '~/common/app.theme';
@@ -117,7 +117,7 @@ function EphemeralItem({ conversationId, ephemeral }: { conversationId: string,
         position: 'absolute', top: 8, right: 8,
         opacity: { xs: 1, sm: 0.5 }, transition: 'opacity 0.3s',
       }}>
-      <CloseIcon />
+      <CloseRoundedIcon />
     </IconButton>
 
   </Box>;

src/apps/chat/components/folders/AddFolderButton.tsx

@@ -43,7 +43,7 @@ export function AddFolderButton() {
         sx={{ ml: -1.5, mr: -0.5, flexGrow: 1, minWidth: 100 }}
       />
       {/*<IconButton color='danger' onClick={handleCancelAddFolder}>*/}
-      {/*  <CloseIcon />*/}
+      {/*  <CloseRoundedIcon />*/}
       {/*</IconButton>*/}
     </ListItem>
   ) : (

src/apps/chat/components/folders/FolderListItem.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import type { DraggableProvided, DraggableStateSnapshot, DraggingStyle, NotDraggingStyle } from 'react-beautiful-dnd';
 
 import { FormLabel, IconButton, ListItem, ListItemButton, ListItemContent, ListItemDecorator, MenuItem, Radio, radioClasses, RadioGroup, Sheet, Typography } from '@mui/joy';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Done from '@mui/icons-material/Done';
 import EditIcon from '@mui/icons-material/Edit';
@@ -230,7 +230,7 @@ export function FolderListItem(props: {
               <>
                 <MenuItem onClick={handleDeleteCanceled}>
                   <ListItemDecorator>
-                    <CloseIcon />
+                    <CloseRoundedIcon />
                   </ListItemDecorator>
                   Cancel
                 </MenuItem>

src/apps/personas/creator/CreatorDrawerItem.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import TimeAgo from 'react-timeago';
 
 import { Box, Checkbox, IconButton, ListItemButton, ListItemDecorator, Typography } from '@mui/joy';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import TextFieldsIcon from '@mui/icons-material/TextFields';
 import YouTubeIcon from '@mui/icons-material/YouTube';
@@ -91,7 +91,7 @@ export function CreatorDrawerItem(props: {
           <DeleteOutlineIcon />
         </IconButton>
         <IconButton size='sm' variant='solid' color='neutral' onClick={() => setDeleteArmed(false)}>
-          <CloseIcon />
+          <CloseRoundedIcon />
         </IconButton>
       </>}
 

src/apps/personas/creator/FromYouTube.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import type { SxProps } from '@mui/joy/styles/types';
 import { Box, Button, Card, IconButton, Input, Typography } from '@mui/joy';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import YouTubeIcon from '@mui/icons-material/YouTube';
 
 import { useYouTubeTranscript, YTVideoTranscript } from '~/modules/youtube/useYouTubeTranscript';
@@ -60,7 +60,7 @@ function YouTubeVideoTranscriptCard(props: { transcript: YTVideoTranscript, onCl
             position: 'absolute', top: -8, right: -8,
             borderRadius: 'md',
           }}>
-          <CloseIcon />
+          <CloseRoundedIcon />
         </IconButton>
       </Box>
     </Card>

src/common/components/useIsBrowserTranslating.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { Alert, IconButton } from '@mui/joy';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import WarningIcon from '@mui/icons-material/Warning';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { useUICounter } from '~/common/state/store-ui';
 
 
@@ -51,7 +51,7 @@ export function useBrowserTranslationWarning() {
   return React.useMemo(() => showWarning ? (
     <Alert
       variant='outlined' color='warning'
-      startDecorator={<WarningIcon />}
+      startDecorator={<WarningRoundedIcon />}
       endDecorator={
         <IconButton color='warning'>
           <CloseRoundedIcon onClick={() => {

src/common/layout/optima/components/PageDrawerHeader.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import type { SxProps } from '@mui/joy/styles/types';
 import { IconButton, Sheet, Typography } from '@mui/joy';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 
 
 export const PageDrawerHeader = (props: {
@@ -38,7 +38,7 @@ export const PageDrawerHeader = (props: {
     </Typography>
 
     <IconButton aria-label='Close Drawer' onClick={props.onClose}>
-      <CloseIcon />
+      <CloseRoundedIcon />
     </IconButton>
 
   </Sheet>;

src/common/providers/ProviderSnacks.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { IconButton, Snackbar, SnackbarTypeMap } from '@mui/joy';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 
 import { SNACKBAR_ANIMATION_DURATION, SnackbarMessage, useSnackbarsStore } from '../components/useSnackbarsStore';
 
@@ -80,7 +80,7 @@ export const ProviderSnacks = (props: { children: React.ReactNode }) => {
             size='sm'
             sx={{ my: '-0.4rem' }}
           >
-            <CloseIcon />
+            <CloseRoundedIcon />
           </IconButton>
         )}
         sx={theme => ({

src/modules/llms/vendors/localai/LocalAIAdmin.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Alert, Box, Button, Card, CircularProgress, IconButton, LinearProgress, List, ListItem, Switch, Typography } from '@mui/joy';
-import CloseIcon from '@mui/icons-material/Close';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 
 import { ExpanderAccordion } from '~/common/components/ExpanderAccordion';
 import { GoodModal } from '~/common/components/GoodModal';
@@ -102,7 +102,7 @@ function ModelInstallPanel(props: { access: OpenAIAccessSchema, modelName: strin
           Installing <strong>{props.modelName}</strong> from the <strong>{props.galleryName}</strong>
         </Typography>
         <IconButton size='sm' onClick={() => setHideSelf(true)} sx={{ ml: 'auto' }}>
-          <CloseIcon />
+          <CloseRoundedIcon />
         </IconButton>
       </Box>
 

src/modules/t2i/dalle/DallESettings.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { FormControl, Option, Select, Switch, Typography } from '@mui/joy';
-import WarningIcon from '@mui/icons-material/Warning';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 
 import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
 import { FormRadioControl } from '~/common/components/forms/FormRadioControl';
@@ -75,7 +75,7 @@ export function DallESettings() {
       <Select
         variant='outlined'
         value={dalleSize} onChange={handleResolutionChange}
-        startDecorator={hasResolution ? undefined : <WarningIcon color='warning' />}
+        startDecorator={hasResolution ? undefined : <WarningRoundedIcon color='warning' />}
         slotProps={{
           root: { sx: { minWidth: '140px' } },
           indicator: { sx: { opacity: 0.5 } },