Update toolbar styles to align with feedback

personalizedrefrigerator · Dec 10, 2024 · 1576ca0 · 1576ca0
1 parent 279a8a6
commit 1576ca0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 23 deletions.
diff --git a/packages/app-mobile/components/EditorToolbar/ButtonGroup.tsx b/packages/app-mobile/components/EditorToolbar/ButtonGroup.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { ToolbarButtonInfo } from '@joplin/lib/services/commands/ToolbarButtonUtils';
-import { useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { themeStyle } from '../global-style';
+import { View, ViewStyle } from 'react-native';
 import ToolbarButton from './ToolbarButton';
 import isSelected from './utils/isSelected';
 import { EditorState } from './types';
@@ -13,26 +11,11 @@ interface Props {
 	editorState: EditorState;
 }
 
-const useStyles = (themeId: number) => {
-	return useMemo(() => {
-		const theme = themeStyle(themeId);
-		return StyleSheet.create({
-			container: {
-				backgroundColor: theme.backgroundColor,
-				borderRadius: 10,
-				borderWidth: 1,
-				borderColor: theme.color3,
-				overflow: 'hidden',
-				flexDirection: 'row',
-				marginHorizontal: 4,
-			},
-		});
-	}, [themeId]);
+const containerStyle: ViewStyle = {
+	flexDirection: 'row',
 };
 
 const ButtonGroup: React.FC<Props> = props => {
-	const styles = useStyles(props.themeId);
-
 	const renderButton = (info: ToolbarButtonInfo) => {
 		return <ToolbarButton
 			key={`command-${info.name}`}
@@ -42,7 +25,7 @@ const ButtonGroup: React.FC<Props> = props => {
 		/>;
 	};
 
-	return <View style={styles.container}>
+	return <View style={containerStyle}>
 		{props.buttonInfos.map(renderButton)}
 	</View>;
 };

diff --git a/packages/app-mobile/components/EditorToolbar/EditorToolbar.tsx b/packages/app-mobile/components/EditorToolbar/EditorToolbar.tsx
@@ -27,7 +27,7 @@ const useStyles = (themeId: number) => {
 				backgroundColor: theme.backgroundColor3,
 			},
 			contentContainer: {
-				paddingVertical: 4,
+				paddingVertical: 0,
 				flexDirection: 'row',
 			},
 		});

diff --git a/packages/app-mobile/components/EditorToolbar/ToolbarButton.tsx b/packages/app-mobile/components/EditorToolbar/ToolbarButton.tsx
@@ -20,7 +20,7 @@ const useStyles = (themeId: number, selected: boolean, enabled: boolean) => {
 				fontSize: 22,
 			},
 			button: {
-				backgroundColor: selected ? theme.backgroundColorHover3 : theme.backgroundColor,
+				backgroundColor: selected ? theme.backgroundColorHover3 : theme.backgroundColor3,
 				width: 48,
 				height: 48,
 				justifyContent: 'center',