feat: change background color, show & hide toolbars

src/App.css

@@ -1,5 +1,4 @@
 .App {
-  background-color: #00a000;
   width: 100vw;
   height: 100vh;
   display: flex;
@@ -8,7 +7,17 @@
 }
 
 .picker {
-  position: fixed!important;
-  top: 0;
+  display: flex;
+  gap: 10px;
+  position: fixed !important;
   right: 0;
-}
+  top: -20px;
+}
+
+.toggle-toolbars {
+  color: #fff;
+  position: fixed;
+  top: 0;
+  right: 5px;
+  z-index: 100;
+}

src/App.tsx

@@ -6,13 +6,13 @@ import BubbleInput from './bubble-input'
 import Chat from './chat'
 import useMessages from './use-messages'
 import { SketchPicker } from 'react-color'
-import React from 'react'
-
 function App() {
   const [messages, addMessage] = useMessages([])
   const [newMessage, setNewMessage] = useState('')
   const [fillColour, setFillColour] = useState('#eee')
   const [strokeColour, setStrokeColour] = useState('#000')
+  const [backgroundColour, setBackgroudColour] = useState('#00a000')
+  const [isChecked, setIsChecked] = useState(false)
 
   const handleSubmit = useCallback(
     (bubbleHeight: number) => {
@@ -29,24 +29,44 @@ function App() {
   )
 
   const handleFillColourChange = (color: { hex: string }) => {
-    setFillColour(color.hex);
-      console.log(color);
-  };
+    setFillColour(color.hex)
+    console.log(color)
+  }
 
   const handleStrokeColourChange = (color: { hex: string }) => {
-    setStrokeColour(color.hex);
-      console.log(color);
-  };
+    setStrokeColour(color.hex)
+    console.log(color)
+  }
+
+  const handleBackgroundColourChange = (color: { hex: string }) => {
+    setBackgroudColour(color.hex)
+  }
 
   const lastMessage = messages[messages.length - 1]
   const dy = lastMessage ? lastMessage.height : 0
 
   return (
-    <div className="App">
+    <div className="App" style={{ backgroundColor: backgroundColour }}>
+      <label className="toggle-toolbars">
+        <input
+          type="checkbox"
+          checked={isChecked}
+          onChange={() => setIsChecked(!isChecked)}
+        />
+        {isChecked ? 'Show Toolbars' : 'Hide Toolbars'}
+      </label>
+
       <Chat>
         <AnimatePresence>
           {messages.map(m => (
-            <Bubble key={m.id} id={m.id} dy={dy} fillColour={fillColour} strokeColour={strokeColour}>
+            <Bubble
+              backgroundColor={backgroundColour}
+              key={m.id}
+              id={m.id}
+              dy={dy}
+              fillColour={fillColour}
+              strokeColour={strokeColour}
+            >
               {m.text}
             </Bubble>
           ))}
@@ -59,13 +79,31 @@ function App() {
           strokeColour={strokeColour}
         />
       </Chat>
-
-      <div className="picker">
-        <p>Fill</p>
-        <SketchPicker color={fillColour} onChange={handleFillColourChange}/>
-        <p>Stroke</p>
-        <SketchPicker color={strokeColour} onChange={handleStrokeColourChange}/>
-      </div>
+
+      {!isChecked && (
+        <div className="picker">
+          <div>
+            <p>Background</p>
+            <SketchPicker
+              color={backgroundColour}
+              onChange={handleBackgroundColourChange}
+            />
+          </div>
+
+          <div>
+            <p>Fill</p>
+            <SketchPicker
+              color={fillColour}
+              onChange={handleFillColourChange}
+            />
+            <p>Stroke</p>
+            <SketchPicker
+              color={strokeColour}
+              onChange={handleStrokeColourChange}
+            />
+          </div>
+        </div>
+      )}
     </div>
   )
 }

src/bubble.css

@@ -32,15 +32,19 @@
   border-bottom-right-radius: 20px;
 }
 
+.bubble-content::after {
+  background-color: #00a000;
+}
+
 .bubble:last-child .bubble-content:after,
 .bubble:nth-last-child(2) .bubble-content:after {
-  background: #00a000!important;
   border-bottom-right-radius: 15px;
   bottom: 0;
-  content: "";
+  content: '';
   height: 27px;
   left: -15px;
   position: absolute;
   width: 15px;
   z-index: 1;
+  overflow: hidden;
 }

src/bubble.tsx

@@ -1,5 +1,5 @@
 import { motion, usePresence } from 'framer-motion'
-import React from 'react'
+import React, { useLayoutEffect } from 'react'
 import './bubble.css'
 
 const transition = {
@@ -17,9 +17,17 @@ interface BubbleProps {
   children: React.ReactNode
   fillColour: string
   strokeColour: string
+  backgroundColor: string
 }
 
-const Bubble = ({ id, children, dy, fillColour, strokeColour }: BubbleProps) => {
+const Bubble = ({
+  id,
+  children,
+  dy,
+  fillColour,
+  strokeColour,
+  backgroundColor
+}: BubbleProps) => {
   const [isPresent, safeToRemove] = usePresence()
 
   const animations = {
@@ -35,10 +43,43 @@ const Bubble = ({ id, children, dy, fillColour, strokeColour }: BubbleProps) =>
     transition
   }
 
+  useLayoutEffect(() => {
+    const bubbleContent = document.querySelector('.bubble-content')
+    if (bubbleContent) {
+      const styleSheet = document.styleSheets[0] as CSSStyleSheet
+      styleSheet.insertRule(
+        `
+        .bubble-content::after {
+          background-color: ${backgroundColor} !important;
+        }
+      `,
+        styleSheet.cssRules.length
+      )
+    }
+  }, [backgroundColor])
+
   return (
     <motion.div key={id} className="bubble" {...animations}>
       <div style={{ position: 'static' }}>
-        <div className="bubble-content" style={{backgroundColor: fillColour, color: strokeColour}}>{children}</div>
+        <style>{`
+        .bubble:last-child .bubble-content:after,
+        .bubble:nth-last-child(2) .bubble-content:after {
+          background: ${backgroundColor} !important;
+        }
+
+
+
+        `}</style>
+
+        <div
+          className="bubble-content"
+          style={{
+            backgroundColor: fillColour,
+            color: strokeColour
+          }}
+        >
+          {children}
+        </div>
       </div>
     </motion.div>
   )

src/index.css

@@ -1,22 +1,21 @@
-:root{
+:root {
   --bubble-background-color: #eee;
   --bubble-color: #000;
-  --background-color: #00a000
+  --background-color: #00a000;
 }
 
 html,
 body,
 #root {
   width: 100vw;
   height: 100vh;
-
 }
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: black;

src/use-messages.ts

@@ -18,7 +18,7 @@ const useMessages = (initialValue: Array<Message> = []) => {
           n.shift()
           return n
         })
-      }, 15000)
+      }, 5000)
     },
     [setMessages]
   )