From f8af76d34799f4e26de53efee4781f703d782c34 Mon Sep 17 00:00:00 2001 From: Lucas Moraes <48826783+lucasdemoraesc@users.noreply.github.com> Date: Mon, 31 Jul 2023 02:30:45 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20TextBubble=20'Edit=20Link'?= =?UTF-8?q?=20background=20color=20in=20dark=20mode=20(#653)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 24 +++++++++---------- .../components/TextBubbleEditor.tsx | 11 +++++---- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f760538c4..3e299dc81 100644 --- a/CONTRIBUTING.md +++ b/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) diff --git a/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx b/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx index d678674ff..800b161aa 100644 --- a/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx +++ b/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'),