chatButton new icon does not get cropped properly

[saitnyalcin]

Bug Description after upgrading to version 1.7.0 to "react-chatbotify": "^2.0.0-beta.5", in my react app, my custom chatButton does not get cropped properly to show better looking. It shows the corners and does not replace the whole chatButton image. Please be advised

Steps To Reproduce Steps to reproduce the bug behavior:

1. implement the following code in the chatbot

import customImage from "./assets/customImage .jpg";

  return (
    <ChatBot
      settings={{
        chatButton: { icon: customImage },
      }}
      styles={{
      }}
      flow={flow}
    />
  );

3. run the app
4. and you will see that the new custom image is not cropped properly after upgrading to the latest version

Expected behavior supposed to cover the whole background image of the chatbutton

Screenshots

• OS: Windows
• Browser: chrome

[saitnyalcin]

@tjtanjin What if we can add border-radius: inherit style to the "rcb-toggle-icon" as mentioned below and can be seen in the screenshot as well, the issue will be resolved, please let me know what you think

<span class="rcb-toggle-icon" style="background-image: url(&quot;/src/assets/customeImage.jpg&quot;);border-radius: inherit;"></span>

[tjtanjin]

Hey @saitnyalcin, thank you for raising this up. Your proposed solution works, and I can work on a possible patch tomorrow along with some other fixes. The earliest I'll work on this is tomorrow, so feel free to open a PR for this fix if you'd like 😛

[tjtanjin]

Thank you for the PR 😄