chore: fix preferences count bubble size & position

packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx

@@ -7,6 +7,7 @@ import Icon from '../Icon/Icon'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import RoundIconButton from '../Button/RoundIconButton'
+import CountBubble from '../Preferences/PreferencesComponents/CountBubble'
 
 type Props = {
   openPreferences: (openWhatsNew: boolean) => void
@@ -54,11 +55,7 @@ const PreferencesButton = ({ openPreferences }: Props) => {
     return (
       <div className="relative">
         <RoundIconButton className="ml-2.5 bg-default" onClick={onClick} label="Go to preferences" icon="tune" />
-        {bubbleCount && (
-          <div className="absolute right-0 top-0 aspect-square -translate-y-1/2 translate-x-2 rounded-full border border-info-contrast bg-info px-2 py-0.5 text-[0.65rem] font-bold text-info-contrast">
-            {bubbleCount}
-          </div>
-        )}
+        <CountBubble position="right" count={bubbleCount} />
       </div>
     )
   }
@@ -68,11 +65,7 @@ const PreferencesButton = ({ openPreferences }: Props) => {
       <button onClick={onClick} className="group relative flex h-full w-8 cursor-pointer items-center justify-center">
         <div className="relative h-5">
           <Icon type="tune" className="rounded group-hover:text-info" />
-          {bubbleCount && (
-            <div className="absolute bottom-full left-full aspect-square -translate-x-1/2 translate-y-1/2 rounded-full border border-info-contrast bg-info px-1.5 py-px text-[0.575rem] font-bold text-info-contrast">
-              {bubbleCount}
-            </div>
-          )}
+          <CountBubble position="right" count={bubbleCount} />
         </div>
         {isChangelogUnread && <div className="absolute right-0.5 top-0.5 h-2 w-2 rounded-full bg-info" />}
       </button>

packages/web/src/javascripts/Components/NavigationMenu/NavigationMenu.tsx

@@ -5,6 +5,7 @@ import RoundIconButton from '../Button/RoundIconButton'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
 import { useState, useEffect } from 'react'
 import { useApplication } from '../ApplicationProvider'
+import CountBubble from '../Preferences/PreferencesComponents/CountBubble'
 
 /** This button is displayed in the items list header */
 export const NavigationMenuButton = () => {
@@ -35,11 +36,7 @@ export const NavigationMenuButton = () => {
         label="Open navigation menu"
         icon="menu-variant"
       />
-      {isMobile && bubbleCount && (
-        <div className="absolute -right-2 -top-2 aspect-square rounded-full border border-info-contrast bg-info px-2 py-0.5 text-[0.65rem] font-bold text-info-contrast">
-          {bubbleCount}
-        </div>
-      )}
+      {isMobile && bubbleCount && <CountBubble position="right" count={bubbleCount} />}
     </div>
   )
 }

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/CountBubble.tsx

@@ -0,0 +1,28 @@
+import { classNames } from '@standardnotes/snjs'
+
+type Props = {
+  count: string | number | undefined
+  position: 'left' | 'right'
+  className?: string
+}
+
+const CountBubble = ({ count, position, className }: Props) => {
+  if (!count) {
+    return null
+  }
+
+  return (
+    <div
+      className={classNames(
+        'flex aspect-square h-5 w-5 items-center justify-center rounded-full border border-info-contrast bg-info text-[0.75rem] font-bold text-info-contrast md:h-4 md:w-4 md:text-[0.5rem]',
+        'absolute bottom-full translate-y-3 md:translate-y-2',
+        position === 'left' ? 'right-full md:translate-x-2' : 'left-full -translate-x-3 md:-translate-x-2',
+        className,
+      )}
+    >
+      {count}
+    </div>
+  )
+}
+
+export default CountBubble

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx

@@ -2,6 +2,7 @@ import Icon from '@/Components/Icon/Icon'
 import { FunctionComponent } from 'react'
 import { IconType, classNames } from '@standardnotes/snjs'
 import { ErrorCircle } from '@/Components/UIElements/ErrorCircle'
+import CountBubble from './CountBubble'
 
 interface Props {
   iconType: IconType
@@ -31,11 +32,7 @@ const PreferencesMenuItem: FunctionComponent<Props> = ({
   >
     <div className="relative mr-1">
       <Icon className={classNames('text-base', selected ? 'text-info' : 'text-neutral')} type={iconType} />
-      {bubbleCount ? (
-        <div className="absolute bottom-full right-full flex aspect-square h-4 w-4 translate-x-2 translate-y-2 items-center justify-center rounded-full border border-info-contrast bg-info text-[0.5rem] font-bold text-info-contrast">
-          {bubbleCount}
-        </div>
-      ) : null}
+      <CountBubble position="left" count={bubbleCount} />
     </div>
     <div className="min-w-1" />
     {label}