feat: "create new note" floating button on mobile (#1857)

packages/web/src/javascripts/Components/Button/RoundIconButton.tsx

@@ -1,32 +1,37 @@
-import { FunctionComponent, MouseEventHandler } from 'react'
+import { ForwardedRef, forwardRef, MouseEventHandler } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { IconType } from '@standardnotes/snjs'
-
-type ButtonType = 'normal' | 'primary'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   onClick: () => void
-  type: ButtonType
   className?: string
   icon: IconType
+  iconClassName?: string
+  label: string
+  id?: string
 }
 
-const RoundIconButton: FunctionComponent<Props> = ({ onClick, type, className, icon: iconType }) => {
-  const click: MouseEventHandler = (e) => {
-    e.preventDefault()
-    onClick()
-  }
-  const classes = type === 'primary' ? 'info ' : ''
-  return (
-    <button
-      className={`m-0 flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-transparent bg-clip-padding text-neutral hover:bg-contrast hover:text-text focus:bg-contrast focus:text-text focus:outline-none focus:ring-info ${classes} ${
-        className ?? ''
-      }`}
-      onClick={click}
-    >
-      <Icon type={iconType} />
-    </button>
-  )
-}
+const RoundIconButton = forwardRef(
+  ({ onClick, className, icon: iconType, iconClassName, id }: Props, ref: ForwardedRef<HTMLButtonElement>) => {
+    const click: MouseEventHandler = (e) => {
+      e.preventDefault()
+      onClick()
+    }
+    return (
+      <button
+        className={classNames(
+          'bg-text-padding min-w-8.5 m-0 flex h-8.5 cursor-pointer items-center justify-center rounded-full border border-solid border-border bg-clip-padding text-neutral hover:bg-contrast hover:text-text focus:bg-contrast focus:text-text focus:outline-none focus:ring-info md:h-8 md:min-w-8',
+          className,
+        )}
+        onClick={click}
+        ref={ref}
+        id={id}
+      >
+        <Icon type={iconType} className={iconClassName} />
+      </button>
+    )
+  },
+)
 
 export default RoundIconButton