Lottie icons 2408 (Milestone 3)

src/components/SearchIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './icons/AnimatedIcon'
 import animationData from './icons/animations/12-search.json'
 
 /** Search Icon with Conditional Lottie Animation. */
-const SearchIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const SearchIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/ToolbarButton.tsx

@@ -177,7 +177,7 @@ const ToolbarButton: FC<ToolbarButtonProps> = ({
         toolbarPointerEvents({ override: true }),
         css({
           display: 'inline-block',
-          padding: '15px 8px 5px 8px',
+          padding: '12px 8px 5px 8px',
           borderRadius: '3px',
           zIndex: 'stack',
           // animate maxWidth to avoid having to know the exact width of the toolbar icon
@@ -203,7 +203,7 @@ const ToolbarButton: FC<ToolbarButtonProps> = ({
             'transform {durations.veryFastDuration} ease-out, max-width {durations.veryFastDuration} ease-out, margin-left {durations.veryFastDuration} ease-out',
           // extend drop area down, otherwise the drop hover is blocked by the user's finger
           // must match toolbar marginBottom
-          paddingBottom: isDraggingAny ? '7em' : 0,
+          paddingBottom: isDraggingAny ? '7em' : '10px',
         }),
       )}
       onMouseLeave={onMouseLeave}

src/components/icons/AnimatedIcon.tsx

@@ -1,10 +1,22 @@
+import { useRef } from 'react'
+import { useSelector } from 'react-redux'
 import { css, cx } from '../../../styled-system/css'
 import { icon } from '../../../styled-system/recipes'
 import { token } from '../../../styled-system/tokens'
 import AnimatedIconType from '../../@types/AnimatedIconType'
 import { ICON_SCALING_FACTOR } from '../../constants'
+import theme from '../../selectors/theme'
 import LottieAnimation from './LottieAnimation'
 
+/** Function to Convert RGB Color to Hex. */
+const rgbToHex = (color: string): string => {
+  const result = color.match(/\d+/g)
+  if (!result) return ''
+
+  const [r, g, b] = result.map(Number)
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+}
+
 /** Animated Icon with Conditional Lottie Animation. */
 const AnimatedIcon = ({
   fill,
@@ -16,11 +28,21 @@ const AnimatedIcon = ({
   children,
   animationComplete,
 }: AnimatedIconType) => {
+  const isLightTheme = useSelector(state => theme(state) === 'Light')
+  const lottieColor = isLightTheme ? '#000000' : '#FFFFFF'
   const newSize = size * ICON_SCALING_FACTOR
   const color = style.fill || fill || token('colors.fg')
 
+  // Create a ref to the parent div
+  const divRef = useRef<HTMLDivElement | null>(null)
+
+  // Calculate dynamic color directly
+  const computedStyle = divRef.current ? getComputedStyle(divRef.current) : null
+  const dynamicColor = computedStyle ? rgbToHex(computedStyle.color) : lottieColor
+
   return (
     <div
+      ref={divRef}
       className={cx(icon(), css(cssRaw))}
       style={{
         ...style,
@@ -30,7 +52,11 @@ const AnimatedIcon = ({
         display: 'inline-flex',
       }}
     >
-      {animated ? <LottieAnimation animationData={animationData} onComplete={animationComplete} /> : children}
+      {animated ? (
+        <LottieAnimation animationData={animationData} onComplete={animationComplete} color={dynamicColor} />
+      ) : (
+        children
+      )}
     </div>
   )
 }

src/components/icons/ArchiveIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/22-trash_3.json'
 
 /** Archive Icon with Conditional Lottie Animation. */
-const ArchiveIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const ArchiveIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/BackIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/06-back.json'
 
 /** Back Icon with Conditional Lottie Animation. */
-const BackIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const BackIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/BoldTextIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/13-bold_4.json'
 
 /** Bold Text Icon with Conditional Lottie Animation. */
-const BoldTextIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const BoldTextIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/BumpThoughtDownIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/14-bump-thought-down_2.json'
 
 /** Bump Thought Down Icon with Conditional Lottie Animation. */
-const BumpThoughtDownIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const BumpThoughtDownIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/Check.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/12-mark-as-done_3.json'
 
 /** Check Icon Component used for toggleDone with Conditional Lottie Animation. */
-const CheckIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const CheckIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/ClearThoughtIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/25-clear-thought.json'
 
 /** Clear Thought Icon with Conditional Lottie Animation. */
-const ClearThoughtIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const ClearThoughtIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/CollapseIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/26-collaps_2.json'
 
 /** Collapse Icon with Conditional Lottie Animation. */
-const CollapseIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const CollapseIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/CommandPaletteIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/27-command-palette.json'
 
 /** CommandPalette Icon with Conditional Lottie Animation. */
-const CommandPaletteIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const CommandPaletteIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/ContextViewIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/18-context-view_3.json'
 
 /** Context View Icon with Conditional Lottie Animation. */
-const ContextViewIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const ContextViewIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/ConvertToNoteIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/24-convert-to-note.json'
 
 /** Convert To Note Icon with Conditional Lottie Animation. */
-const ConvertToNoteIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const ConvertToNoteIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/DeleteIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/31-parmanently-delete_2.json'
 
 /** Delete Icon with Conditional Lottie Animation. */
-const DeleteIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const DeleteIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/DeviceIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/26-device-management_2.json'
 
 /** Device Icon with Conditional Lottie Animation. */
-const DeviceIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const DeviceIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/ExtractThoughtIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/28-extract_2.json'
 
 /** Extract Thought Icon with Conditional Lottie Animation. */
-const ExtractThoughtIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const ExtractThoughtIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/FavoritesIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/04-favorite_3.json'
 
 /** Favorites Icon with Conditional Lottie Animation. */
-const FavoritesIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const FavoritesIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/GenerateThoughtIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/29-generate-thought_2.json'
 
 /** Generate Thought Icon with Conditional Lottie Animation. */
-const GenerateThoughtIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const GenerateThoughtIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/Heading1Icon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/18-heading-one.json'
 
 /** Heading1 Icon with Conditional Lottie Animation. */
-const Heading1Icon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const Heading1Icon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/Heading2Icon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/19-heading-two.json'
 
 /** Heading2 Icon with Conditional Lottie Animation. */
-const Heading2Icon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const Heading2Icon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/Heading3Icon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/20-heading-three.json'
 
 /** Heading3 Icon with Conditional Lottie Animation. */
-const Heading3Icon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const Heading3Icon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/Heading4Icon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/21-heading-four.json'
 
 /** Heading4 Icon with Conditional Lottie Animation. */
-const Heading4Icon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const Heading4Icon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/Heading5Icon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/22-heading-five.json'
 
 /** Heading5 Icon with Conditional Lottie Animation. */
-const Heading5Icon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const Heading5Icon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/HelpIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/13-help_2.json'
 
 /** Help Icon with Conditional Lottie Animation. */
-const HelpIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const HelpIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/HiddenThoughtsIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/24-show-hidden-thoughts_4.json'
 
 /** Hidden Thoughts Icon with Conditional Lottie Animation. */
-const HiddenThoughtsIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const HiddenThoughtsIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/HomeToolbarIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/11-home.json'
 
 /** HomeToolbar Icon with Conditional Lottie Animation. */
-const HomeToolbarIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const HomeToolbarIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/IndentIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/06-indent_2.json'
 
 /** Indent Icon with Conditional Lottie Animation. */
-const IndentIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const IndentIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/ItalicTextIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/14-italic_4.json'
 
 /** Italic Text Icon with Conditional Lottie Animation. */
-const ItalicTextIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const ItalicTextIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/JoinThoughtsIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/30-join-thought.json'
 
 /** Join Thoughts Icon with Conditional Lottie Animation. */
-const JoinThoughtsIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const JoinThoughtsIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/JumpBackIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/07-jump-back.json'
 
 /** JumpBack Icon with Conditional Lottie Animation. */
-const JumpBackIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const JumpBackIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/JumpForwardIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/08-jump-forward.json'
 
 /** JumpForward Icon with Conditional Lottie Animation. */
-const JumpForwardIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const JumpForwardIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg