🐛 Fix TextBubble 'Edit Link' background color in dark mode (#653)

TextBubble's "Edit link" card had a white background in dark mode,
making it impossible to read the content. I was studying React with your
project so I already took the opportunity to implement this small
correction for you lol.

Before:
![Captura de tela de 2023-07-27
21-34-09](https://github.com/baptisteArno/typebot.io/assets/48826783/09473f5e-635d-4e65-afdf-04230f05fd79)

After:
![Captura de tela de 2023-07-27
21-33-44](https://github.com/baptisteArno/typebot.io/assets/48826783/1971edae-b453-49eb-a01a-7e5fabc57c6b)

Note: I also added some direct links to project files cited in the
CONTRIBUTING.md file. They help to find these files more easily.

CONTRIBUTING.md

@@ -8,8 +8,8 @@ Let's [discuss](https://github.com/baptisteArno/typebot.io/discussions/new) abou
 
 Typebot is a Monorepo powered by [Turborepo](https://turborepo.org/). It is composed of 2 main applications:
 
-- the builder (`./apps/builder`), where you build your typebots
-- the viewer (`./apps/builder`), where your user answer the typebot
+- the builder ([`./apps/builder`](apps/builder)), where you build your typebots
+- the viewer ([`./apps/viewer`](./apps/viewer)), where your user answer the typebot
 
 These apps are built with awesome web technologies including [Typescript](https://www.typescriptlang.org/), [Next.js](https://nextjs.org/), [Prisma](https://www.prisma.io/), [Chakra UI](https://chakra-ui.com/), [Tailwind CSS](https://tailwindcss.com/).
 
@@ -36,11 +36,11 @@ These apps are built with awesome web technologies including [Typescript](https:
 
 2. Set up environment variables
 
-   Copy `apps/builder/.env.local.example` to `apps/builder/.env.local`
+   Copy [`apps/builder/.env.local.example`](apps/builder/.env.local.example) to `apps/builder/.env.local`
 
-   Copy `apps/viewer/.env.local.example` to `apps/viewer/.env.local`
+   Copy [`apps/viewer/.env.local.example`](apps/viewer/.env.local.example) to `apps/viewer/.env.local`
 
-   Copy `packages/prisma/.env.example` to `packages/prisma/.env`
+   Copy [`packages/prisma/.env.example` ](packages/prisma/.env.example)to `packages/prisma/.env`
 
    Check out the [Configuration guide](https://docs.typebot.io/self-hosting/configuration) if you want to enable more options
 
@@ -51,17 +51,17 @@ These apps are built with awesome web technologies including [Typescript](https:
    pnpm dev
    ```
 
-   Builder is available at `http://localhost:3000`
+   Builder is available at [`http://localhost:3000`](http://localhost:3000)
 
-   Viewer is available at `http://localhost:3001`
+   Viewer is available at [`http://localhost:3001`](http://localhost:3001)
 
-   Database inspector is available at `http://localhost:5555`
+   Database inspector is available at [`http://localhost:5555`](http://localhost:5555)
 
    By default, you can easily authenticate in the builder using the "Github Sign In" button. For other options, check out the [Configuration guide](https://docs.typebot.io/self-hosting/configuration)
 
 5. (Optionnal) Start the landing page
 
-   Copy `apps/landing-page/.env.local.example` to `apps/landing-page/.env.local`
+   Copy [`apps/landing-page/.env.local.example`](apps/landing-page/.env.local.example) to `apps/landing-page/.env.local`
 
    ```sh
    cd apps/landing-page
@@ -81,8 +81,8 @@ I know the project can be a bit hard to understand at first. I'm working on impr
 
 The first step to create a new Typebot block is to define its schema. For this you need to
 
-1. Add your integration in the enum `IntegrationBlockType` in `packages/schemas/features/blocks/integrations/enums.ts`
-2. Create a new file in `packages/schemas/features/blocks/integrations`.
+1. Add your integration in the enum `IntegrationBlockType` in [`packages/schemas/features/blocks/integrations/enums.ts`](packages/schemas/features/blocks/integrations/enums.ts)
+2. Create a new file in [`packages/schemas/features/blocks/integrations`](packages/schemas/features/blocks/integrations).
 
    Your schema should look like:
 
@@ -107,4 +107,4 @@ The first step to create a new Typebot block is to define its schema. For this y
 As soon as you have defined your schema, you can start implementing your block in the builder and the viewer.
 Since the code is strictly typed, you should see exactly where you need to add your integration-specific code.
 
-To sum it up you need to create a folder in `apps/builder/src/features/blocks/integrations` and in `apps/viewer/src/features/blocks/integrations`
+To sum it up you need to create a folder in [`apps/builder/src/features/blocks/integrations`](apps/builder/src/features/blocks/integrations) and in [`apps/viewer/src/features/blocks/integrations`](apps/viewer/src/features/blocks/integrations)

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx

@@ -103,12 +103,15 @@ const TextBubbleEditorContent = ({
         '.slate-ToolbarButton-active': {
           color: useColorModeValue('blue.500', 'blue.300') + ' !important',
         },
-        '.PlateFloatingLink___StyledFloatingLinkInsertRoot-sc-1bralnd-8': {
+        '[class^="PlateFloatingLink___Styled"]': {
+          '--tw-bg-opacity': useColorModeValue('1', '.1') + '!important',
           backgroundColor: useColorModeValue('white', 'gray.800'),
-          borderWidth: 1,
+          borderRadius: 'md',
+          transitionProperty: 'background-color',
+          transitionDuration: 'normal'
         },
-        '.PlateFloatingLink___StyledDiv2-sc-1bralnd-2': {
-          backgroundColor: useColorModeValue('gray.200', 'gray.600'),
+        '[class^="FloatingVerticalDivider___"]': {
+          '--tw-bg-opacity': useColorModeValue('1', '.4') + '!important',
         },
         '.slate-a': {
           color: useColorModeValue('blue.500', 'blue.300'),