fix(styles): improve editor styling

konstantinmuenster · Dec 10, 2023 · 3f872c6 · 3f872c6
1 parent 57b73ca
commit 3f872c6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/packages/strapi-plugin-rich-text/admin/src/components/RichText/Editor.styles.tsx b/packages/strapi-plugin-rich-text/admin/src/components/RichText/Editor.styles.tsx
@@ -2,13 +2,14 @@ import styled from "styled-components";
 
 export const StyledEditor = styled("div")`
   margin-top: 10px;
+  background-color: ${({ theme }) => theme.colors.neutral0};
 
   .tiptap {
     outline: none;
     line-height: 1.25rem;
     color: ${({ theme }) => theme.colors.neutral800};
     min-height: 80px;
-    padding: 1rem 0.5rem;
+    padding: 0 1.5rem 1.5rem 1.5rem;
 
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;

diff --git a/packages/strapi-plugin-rich-text/admin/src/components/RichText/Toolbar.styles.tsx b/packages/strapi-plugin-rich-text/admin/src/components/RichText/Toolbar.styles.tsx
@@ -6,6 +6,10 @@ export const StyledToolbar = styled("div")`
   border: 1px solid ${({ theme }) => theme.colors.neutral150};
   border-bottom: transparent;
 
+  .toolbar-controls {
+    padding: 1.5rem 1.5rem;
+  }
+
   .is-active {
     background: ${({ theme }) => theme.colors.primary200};
     color: ${({ theme }) => theme.colors.neutral0};

diff --git a/packages/strapi-plugin-rich-text/admin/src/components/RichText/Toolbar.tsx b/packages/strapi-plugin-rich-text/admin/src/components/RichText/Toolbar.tsx
@@ -38,7 +38,7 @@ export default function Toolbar({ editor }: ToolbarProps) {
   return (
     <>
       <StyledToolbar>
-        <Box padding={2} className="toolbar-controls">
+        <Box className="toolbar-controls">
           <Flex justifyContent="space-between">
             <Flex style={{ flexWrap: "wrap", gap: "8px" }}>
               <Box>