@momo-kits/foundation 0.169.7-beta.8 → 0.169.7-beta.9

package/Application/BottomTab/ActiveIndicator.tsx

@@ -5,7 +5,6 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { defaultTheme } from '../../Consts';
 import { ApplicationContext } from '../../Context';
 import { getIndicatorShadow, TabBarMotion } from './metrics';
 
@@ -71,10 +70,7 @@ const ActiveIndicator: React.FC<Props> = ({
         styles.indicator,
         {
           borderRadius: radius,
-          // a mini app's own theme may lack `tonal`; without the fallback the indicator is transparent
-          backgroundColor:
-            theme.colors.background.tonal ??
-            defaultTheme.colors.background.tonal,
+          backgroundColor: theme.colors.background.tonal,
           boxShadow: getIndicatorShadow(theme.colors.primary),
         },
         style,

package/Application/BottomTab/BottomTabBar.styles.ts

@@ -2,20 +2,6 @@ import { StyleSheet } from 'react-native';
 import { Colors, Spacing } from '../../Consts';
 import { CTA_SHADOW, TabBarMetrics } from './metrics';
 
-const ITEM_HEIGHT =
-  TabBarMetrics.indicatorHeight +
-  TabBarMetrics.itemIconLabelGap +
-  TabBarMetrics.labelHeight;
-const CONTENT_HEIGHT = TabBarMetrics.height - 2 * TabBarMetrics.paddingVertical;
-// the items are centered in the content, so their label starts this far below the content top
-const ITEM_LABEL_TOP =
-  (CONTENT_HEIGHT - ITEM_HEIGHT) / 2 +
-  TabBarMetrics.indicatorHeight +
-  TabBarMetrics.itemIconLabelGap;
-// the center action column is placed so its label starts on the same line as the tab labels
-const CTA_TOP =
-  ITEM_LABEL_TOP - TabBarMetrics.ctaLabelGap - TabBarMetrics.ctaSize;
-
 export const styles = StyleSheet.create({
   bar: {
     position: 'absolute',
@@ -51,7 +37,7 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     left: 0,
     right: 0,
-    top: CTA_TOP,
+    top: -TabBarMetrics.ctaLift - TabBarMetrics.paddingVertical,
     alignItems: 'center',
     gap: TabBarMetrics.ctaLabelGap,
   },
@@ -60,9 +46,6 @@ export const styles = StyleSheet.create({
     width: TabBarMetrics.ctaSize,
     height: TabBarMetrics.ctaSize,
     borderRadius: TabBarMetrics.ctaSize / 2,
-    // Figma Icon Button border: white 60% hairline
-    borderWidth: 1,
-    borderColor: `rgba(255, 255, 255, ${TabBarMetrics.ctaBorderOpacity})`,
     alignItems: 'center',
     justifyContent: 'center',
   },

package/Application/BottomTab/BottomTabBar.tsx

@@ -181,17 +181,21 @@ const HorizontalTabBar: React.FC<{
     return renderItems(items);
   };
 
+  const customContainer = withCta && floatingButton?.container;
+
   return (
     <View
       style={[styles.container, { width }]}
       accessibilityLabel={'bottom_tab_bar'}
     >
-      <CurvedContainer
-        width={width}
-        height={TabBarMetrics.height}
-        radius={TabBarMetrics.height / 2}
-        notchCenterX={withCta ? width / 2 : undefined}
-      />
+      {customContainer || (
+        <CurvedContainer
+          width={width}
+          height={TabBarMetrics.height}
+          radius={TabBarMetrics.height / 2}
+          notchCenterX={withCta ? width / 2 : undefined}
+        />
+      )}
       <View style={styles.content}>
         <ActiveIndicator
           axis={'x'}
@@ -224,8 +228,6 @@ export default function BottomTabBar(props: Props) {
     window.height,
     insets.left,
     insets.right,
-    state.routes.length,
-    withCta,
   );
 
   return (

package/Application/BottomTab/CurvedContainer.tsx

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import Svg, { Defs, FeGaussianBlur, Filter, Path } from 'react-native-svg';
 import { Colors } from '../../Consts';
 import { ApplicationContext } from '../../Context';
-import { NOTCH_CURVES, NOTCH_HALF_WIDTH, TabBarMetrics } from './metrics';
+import { NOTCH_CURVES, NOTCH_HALF_WIDTH } from './metrics';
 
 type Props = {
   width: number;
@@ -139,13 +139,7 @@ const CurvedContainer: React.FC<Props> = ({
           filter={'url(#keyShadow)'}
         />
       )}
-      <Path
-        d={path}
-        fill={theme.colors.background.surface}
-        fillOpacity={TabBarMetrics.backgroundOpacity}
-        stroke={theme.colors.border.default}
-        strokeWidth={1}
-      />
+      <Path d={path} fill={theme.colors.background.surface} />
     </Svg>
   );
 };

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -13,7 +13,7 @@ import Animated, {
 import { TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 import { MiniAppContext } from '../../Context';
-import { Colors } from '../../Consts';
+import { Colors, Spacing } from '../../Consts';
 import { TabBarMetrics, TabBarMotion } from './metrics';
 
 type IconRenderer = (props: {
@@ -143,7 +143,7 @@ const styles = StyleSheet.create({
     minWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: TabBarMetrics.itemIconLabelGap,
+    gap: Spacing.XXS,
   },
   slot: {
     height: TabBarMetrics.indicatorHeight,

package/Application/BottomTab/DuoTabBar.tsx

@@ -3,11 +3,7 @@ import React from 'react';
 import { useWindowDimensions, View } from 'react-native';
 import { useScreenLayout } from '../../Layout/utils';
 import { FloatingButtonProps } from '../types';
-import {
-  getSystemIndicatorHeight,
-  hasCenterAction,
-  HorizontalTabBar,
-} from './BottomTabBar';
+import { getSystemIndicatorHeight, HorizontalTabBar } from './BottomTabBar';
 import { getHorizontalBarWidth, TabBarMetrics } from './metrics';
 import { getTabItems } from './tabItems';
 import { DuoRailTabBar } from './DuoRailTabBar';
@@ -38,7 +34,6 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
   const { insets } = useScreenLayout();
   const { width, height } = useWindowDimensions();
   const { floatingButton, activeTintColor, inactiveTintColor } = props;
-  const tabItems = getTabItems(props);
 
   return (
     <View
@@ -49,15 +44,8 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
       ]}
     >
       <HorizontalTabBar
-        items={tabItems}
-        width={getHorizontalBarWidth(
-          width,
-          height,
-          insets.left,
-          insets.right,
-          tabItems.length,
-          hasCenterAction(floatingButton, tabItems.length),
-        )}
+        items={getTabItems(props)}
+        width={getHorizontalBarWidth(width, height, insets.left, insets.right)}
         floatingButton={floatingButton}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}

package/Application/BottomTab/metrics.ts

@@ -8,18 +8,11 @@ import { Colors, Radius, Spacing } from '../../Consts';
  * iPhone Duo rail (center action under the container).
  */
 const TabBarMetrics = {
-  height: 60,
+  height: 68,
   margin: Spacing.S,
-  paddingVertical: Spacing.XS,
+  paddingVertical: Spacing.S,
   paddingHorizontal: Spacing.M,
-  itemGap: 1,
-  // gap between the icon slot and the label inside a tab (Figma: none)
-  itemIconLabelGap: 0,
-  // .Nav/Background: no backdrop blur, so use the Figma Blur=Off spec (opacity 95%, no blur) plus the 1px
-  // border — nearly solid, matching the frosted sample; surface keeps dark-mode support
-  backgroundOpacity: 0.95,
-  // white 60% hairline around the center action button (Figma Icon Button border)
-  ctaBorderOpacity: 0.6,
+  itemGap: Spacing.XS,
   iconSize: 24,
   // active indicator behind the icon: 24 icon + XS·M padding
   indicatorPaddingVertical: Spacing.XS,
@@ -32,9 +25,6 @@ const TabBarMetrics = {
   systemIndicatorHeight: 24,
   foldableMinShortSide: 600,
   foldableWidthRatio: 0.65,
-  // a 2-tab bar doesn't stretch to the full width: each item is this fixed width and the bar is
-  // sized to its content, centered (Figma Navigation · 2 Tab: item 100, bar ~225)
-  twoTabItemWidth: 100,
   ctaSlotWidth: 92,
   ctaSize: 48,
   ctaIconSize: 28,
@@ -142,17 +132,7 @@ const getHorizontalBarWidth = (
   height: number,
   insetLeft: number,
   insetRight: number,
-  itemCount: number,
-  hasCta: boolean,
 ) => {
-  // 2 tabs (no center action) stay content-sized and centered instead of filling the window
-  if (itemCount === 2 && !hasCta) {
-    return (
-      TabBarMetrics.twoTabItemWidth * 2 +
-      TabBarMetrics.paddingHorizontal * 2 +
-      TabBarMetrics.itemGap
-    );
-  }
   const shortSide = Math.min(width, height);
   if (shortSide >= TabBarMetrics.foldableMinShortSide) {
     return shortSide * TabBarMetrics.foldableWidthRatio;

package/Application/Components/HeaderAnimated.tsx

@@ -1,5 +1,4 @@
-import { StyleSheet, View } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
+import { StyleSheet } from 'react-native';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -10,7 +9,6 @@ import React from 'react';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
 import { useNormalizedSharedValue } from '../hooks';
-import { HeaderBarMetrics, useHeaderLayout } from '../headerLayout';
 
 const ASPECT_RATIOS: Record<
   NonNullable<HeaderAnimatedProps['aspectRatio']>,
@@ -23,19 +21,16 @@ const ASPECT_RATIOS: Record<
 
 /**
  * Parallax header image (or `children`): stretches when pulled down and fades out
- * as the content scrolls up. Wide windows keep it at phone size, centered.
+ * as the content scrolls up.
  */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
   useScale = true,
   aspectRatio = '16/9',
-  bannerBackgroundColor,
   children,
 }) => {
   const sharedValue = useNormalizedSharedValue(animatedValue);
-  const { isWide, bannerWidth } = useHeaderLayout();
-  const ratio = ASPECT_RATIOS[aspectRatio];
   const animatedStyle = useAnimatedStyle(() => {
     let scale = 1;
     if (useScale) {
@@ -64,36 +59,22 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
     };
   });
 
-  const content = children ?? (
-    <Image
-      source={{
-        uri: image,
-      }}
-      style={styles.full}
-    />
-  );
-
-  if (!isWide) {
-    return (
-      <Animated.View
-        style={[styles.container, { aspectRatio: ratio }, animatedStyle]}
-      >
-        {content}
-      </Animated.View>
-    );
-  }
-
   return (
     <Animated.View
-      style={[styles.container, { height: bannerWidth / ratio }, animatedStyle]}
+      style={[
+        styles.container,
+        { aspectRatio: ASPECT_RATIOS[aspectRatio] },
+        animatedStyle,
+      ]}
     >
-      {!!bannerBackgroundColor && (
-        <LinearGradient
-          colors={[bannerBackgroundColor, bannerBackgroundColor + '00']}
-          style={StyleSheet.absoluteFill}
+      {children ?? (
+        <Image
+          source={{
+            uri: image,
+          }}
+          style={styles.full}
         />
       )}
-      <View style={styles.phoneBanner}>{content}</View>
     </Animated.View>
   );
 };
@@ -109,11 +90,6 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   full: { width: '100%', height: '100%' },
-  phoneBanner: {
-    width: HeaderBarMetrics.bannerWidth,
-    height: '100%',
-    alignSelf: 'center',
-  },
 });
 
 export { HeaderAnimated };

package/Application/Components/HeaderBackground.tsx

@@ -8,12 +8,10 @@ import { Colors, Styles } from '../../Consts';
 import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';
 import { useNormalizedSharedValue } from '../hooks';
-import { HeaderBarMetrics, useHeaderLayout } from '../headerLayout';
 
 /**
  * Header background: surface and image that fade in on scroll, with an optional
- * gradient (custom or theme) on top, at phone height on wide windows. Outlined
- * when `showBaseLineDebug` is on.
+ * gradient (custom or theme) on top. Outlined when `showBaseLineDebug` is on.
  */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
@@ -27,7 +25,6 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerImage = headerBackground ?? theme.assets?.headerBackground;
   const sharedValue = useNormalizedSharedValue(animatedValue);
-  const { isWide } = useHeaderLayout();
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -41,19 +38,14 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       />
       <View style={styles.gradientContainer}>
         {useGradient && !!gradientColor && (
-          <Animated.View
-            style={[styles.extendedHeader, isWide && styles.phoneHeight]}
-          >
+          <Animated.View style={styles.extendedHeader}>
             <LinearGradient
               colors={[gradientColor, gradientColor + '00']}
               style={StyleSheet.absoluteFill}
             >
               {!!headerImage && (
                 <Image
-                  style={[
-                    styles.headerBackground,
-                    isWide && styles.phoneHeight,
-                  ]}
+                  style={styles.headerBackground}
                   source={{ uri: headerImage }}
                   loading={false}
                 />
@@ -83,11 +75,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     aspectRatio: 375 / 154,
   },
-  // wide windows keep the phone gradient height instead of scaling with the width
-  phoneHeight: {
-    aspectRatio: undefined,
-    height: HeaderBarMetrics.gradientHeight,
-  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

package/Application/Components/HeaderExtendHeader.tsx

@@ -17,16 +17,11 @@ import BackgroundImageView from './BackgroundImageView';
 import { type AnimatedCompatValue } from '../utils';
 import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
-import { HeaderMetrics } from '../../Layout/utils';
-import {
-  HeaderBarMetrics,
-  type HeaderContentLayout,
-  useHeaderLayout,
-} from '../headerLayout';
+import { DuoMetrics, HeaderMetrics } from '../../Layout/utils';
 
-const { buttonSize, pillWidth, sidePadding, titleGap } = HeaderBarMetrics;
-const SCREEN_PADDING = sidePadding;
-const TOOLKIT_WIDTH = pillWidth + sidePadding;
+const SCREEN_PADDING = 12;
+const BACK_WIDTH = 28;
+const TOOLKIT_WIDTH = 73;
 
 /**
  * Extended header background: a gradient that collapses on scroll and, with
@@ -43,7 +38,6 @@ const HeaderExtendHeader: React.FC<{
   useShadowHeader?: boolean;
   gradientColor?: string;
   headerBackground?: string;
-  contentLayout?: HeaderContentLayout;
 }> = ({
   headerType = 'default',
   animatedValue,
@@ -54,7 +48,6 @@ const HeaderExtendHeader: React.FC<{
   useShadowHeader: useShadowHeaderProp = true,
   gradientColor: customGradientColor,
   headerBackground: customBackground,
-  contentLayout,
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -62,32 +55,29 @@ const HeaderExtendHeader: React.FC<{
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const layout = useScreenLayout();
-  const headerLayout = useHeaderLayout(contentLayout);
-  // the stretch frame pulls the search in from both bar edges
-  const frameShift = headerLayout.frameInset - sidePadding;
 
-  const backLeft = buttonSize + sidePadding + titleGap;
-  const defaultLeft = layout.sideBar ? SCREEN_PADDING : backLeft;
+  // the iPhone Duo status bar row keeps side bar sized back and toolkit
+  const isStatusBarRow = !!layout.statusBarClearance;
+  const duoToolkitWidth = DuoMetrics.itemPitch * 2 + SCREEN_PADDING;
+  const backWidth = isStatusBarRow ? DuoMetrics.controlSize : BACK_WIDTH;
+  const toolkitWidth = isStatusBarRow ? duoToolkitWidth : TOOLKIT_WIDTH;
+  const defaultLeft = layout.sideBar ? SCREEN_PADDING : backWidth + 20;
   const leftPosition = inputSearchProps?.leftPosition || defaultLeft;
-  const defaultRightWidth = layout.sideBar ? 0 : TOOLKIT_WIDTH;
+  const defaultRightWidth = layout.sideBar ? 0 : toolkitWidth;
   const headerRightWidth = customHeaderRightWidth ?? defaultRightWidth;
-  const contentLeft = layout.insetLeft + SCREEN_PADDING + frameShift;
-  const contentRight = layout.insetLeft + layout.contentWidth - frameShift;
+  const contentLeft = layout.insetLeft + SCREEN_PADDING;
+  const contentRight = layout.insetLeft + layout.contentWidth;
   // collapsed on the status bar row, the search stays between its clusters
   const clearanceLeft = layout.statusBarClearance?.left ?? 0;
   const clearanceRight = layout.statusBarClearance?.right ?? 0;
-  const searchLeft = leftPosition + clearanceLeft + frameShift;
-  const collapsedLeft = layout.insetLeft + searchLeft;
+  const collapsedLeft = layout.insetLeft + leftPosition + clearanceLeft;
   const collapsedRight = contentRight - clearanceRight - headerRightWidth;
-  const searchWidth = contentRight - contentLeft - SCREEN_PADDING;
+  const searchWidth = layout.contentWidth - SCREEN_PADDING * 2;
   const collapsedSearchWidth = collapsedRight - collapsedLeft - SCREEN_PADDING;
   // a row taller than barHeight (iPhone Duo) centers the collapsed search on the title
   const titleRowHeight = layout.headerHeight - layout.headerStatusBarHeight;
   const collapsedRaise = (titleRowHeight - HeaderMetrics.barHeight) / 2;
 
-  // the iPhone Duo side bar keeps the content search size
-  const searchSize = layout.sideBar ? 'default' : 'header';
-
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {
     useShadowHeader = false;
@@ -179,7 +169,6 @@ const HeaderExtendHeader: React.FC<{
             <Animated.View
               style={[
                 styles.extendedHeader,
-                headerLayout.isWide && styles.phoneHeight,
                 // fade out within the header box, as DuoScrollGradient does
                 !!layout.sideBar && styles.fillHeaderBox,
                 gradientOpacityStyle,
@@ -191,10 +180,7 @@ const HeaderExtendHeader: React.FC<{
               >
                 {!!theme.assets?.headerBackground && (
                   <Image
-                    style={[
-                      styles.headerBackground,
-                      headerLayout.isWide && styles.phoneHeight,
-                    ]}
+                    style={styles.headerBackground}
                     source={{ uri: theme.assets?.headerBackground }}
                     loading={false}
                   />
@@ -203,7 +189,9 @@ const HeaderExtendHeader: React.FC<{
             </Animated.View>
           )}
         </Animated.View>
-        <Animated.View style={[styles.searchContainer, heightStyle]}>
+        <Animated.View
+          style={[styles.searchContainer, heightStyle]}
+        >
           <Animated.View
             style={[{ marginVertical: Spacing.S }, searchTranslateStyle]}
           >
@@ -213,7 +201,6 @@ const HeaderExtendHeader: React.FC<{
               <InputSearch
                 {...inputSearchProps}
                 ref={inputSearchRef}
-                size={searchSize}
                 backgroundColor={'transparent'}
                 showButtonText={false}
               />
@@ -249,10 +236,7 @@ const HeaderExtendHeader: React.FC<{
             >
               {!!headerBackground && (
                 <Image
-                  style={[
-                    styles.headerBackground,
-                    headerLayout.isWide && styles.phoneHeight,
-                  ]}
+                  style={styles.headerBackground}
                   source={{ uri: headerBackground }}
                   loading={false}
                 />
@@ -280,11 +264,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
   },
-  // wide windows keep the phone gradient height instead of scaling with the width
-  phoneHeight: {
-    aspectRatio: undefined,
-    height: HeaderBarMetrics.gradientHeight,
-  },
   fillHeaderBox: {
     aspectRatio: undefined,
     height: '100%',
@@ -294,6 +273,14 @@ const styles = StyleSheet.create({
     position: 'absolute',
     overflow: 'hidden',
   },
+  verifiedDot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: Colors.green_03,
+    position: 'absolute',
+    alignSelf: 'center',
+  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
   container: {
     zIndex: 0,

package/Application/Components/HeaderLeft.tsx

@@ -6,13 +6,12 @@ import { PopupNotify } from '../../Popup';
 import { NavigationButton } from './NavigationButton';
 import { SideBarButton } from './SideBarButton';
 import Animated from 'react-native-reanimated';
-import { useSideBarItemStyle } from '../../Layout/utils';
+import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
 import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
-import { HeaderBarMetrics } from '../headerLayout';
 
 /**
  * Header back button, also bound to the Android hardware back. `preventBack`
- * confirms in a popup first; the iPhone Duo side bar uses the 48pt side bar button.
+ * confirms in a popup first; the iPhone Duo layouts use the 48pt side bar button.
  */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
@@ -25,6 +24,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const { navigator } = useContext(ApplicationContext);
   const sideBarStyle = useSideBarItemStyle('left', 0);
   const counterStyle = useSideBarCounterStyle();
+  const { statusBarClearance } = useScreenLayout();
 
   const goBack = useCallback(() => {
     const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -97,6 +97,20 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     );
   }
 
+  // on the status bar row the controls keep the side bar size
+  if (statusBarClearance) {
+    return (
+      <View style={styles.headerLeft}>
+        <SideBarButton
+          accessibilityLabel="btn_navigation_back"
+          icon="arrow-back"
+          tintColor={tintColor}
+          onPress={goBackSafe}
+        />
+      </View>
+    );
+  }
+
   return (
     <View style={styles.headerLeft}>
       <NavigationButton
@@ -111,7 +125,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const styles = StyleSheet.create({
   headerLeft: {
-    marginLeft: HeaderBarMetrics.sidePadding,
+    marginLeft: 12,
   },
 });
 

package/Application/Components/HeaderRight.styles.ts

@@ -1,14 +1,11 @@
 import { Platform, StyleSheet } from 'react-native';
 import { Colors, Spacing } from '../../Consts';
-import { HeaderBarMetrics } from '../headerLayout';
-
-const { buttonSize, pillWidth, pillHeight, sidePadding } = HeaderBarMetrics;
 
 export const styles = StyleSheet.create({
   navigationButton: {
-    height: buttonSize,
-    width: buttonSize,
-    borderRadius: buttonSize / 2,
+    height: 28,
+    width: 28,
+    borderRadius: 14,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: Colors.black_01 + '99',
@@ -48,11 +45,11 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingRight: sidePadding,
+    paddingRight: Spacing.M,
   },
   toolkitContainer: {
-    height: pillHeight,
-    borderRadius: pillHeight / 2,
+    height: 28,
+    borderRadius: 14,
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'row',
@@ -62,10 +59,7 @@ export const styles = StyleSheet.create({
     marginLeft: Spacing.S,
   },
   toolkitButton: {
-    flex: 1,
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
+    padding: 4,
   },
   divider: {
     width: 0.5,
@@ -74,6 +68,10 @@ export const styles = StyleSheet.create({
   sideBarColumn: {
     gap: Spacing.M,
   },
+  sideBarRow: {
+    flexDirection: 'row',
+    gap: Spacing.M,
+  },
   headerLeft: {
     marginLeft: 12,
   },
@@ -138,9 +136,9 @@ export const styles = StyleSheet.create({
     marginRight: Spacing.M,
   },
   toolkitWide: {
-    width: pillWidth,
+    width: 65,
   },
   toolkitNarrow: {
-    width: buttonSize,
+    width: 28,
   },
 });