mirror of
https://github.com/getpaseo/paseo.git
synced 2026-07-29 12:01:31 +00:00
Align sidebar header rows and tighten button spacing
This commit is contained in:
@@ -1131,9 +1131,11 @@ const staticStyles = RNStyleSheet.create({
|
||||
const styles = StyleSheet.create((theme) => ({
|
||||
sidebarHeaderGroup: {
|
||||
paddingTop: theme.spacing[2],
|
||||
// Match WorkspacesSectionHeader's paddingTop below the divider so the divider
|
||||
// sits visually centered between the Sessions row and the Workspaces header.
|
||||
paddingBottom: theme.spacing[2],
|
||||
gap: 2,
|
||||
// Distance from History's bottom edge to the divider. WorkspacesSectionHeader
|
||||
// uses a slightly smaller paddingTop to balance the action buttons' centering
|
||||
// offset so the divider reads as visually centered between the two.
|
||||
paddingBottom: theme.spacing[1.5],
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: theme.colors.border,
|
||||
},
|
||||
@@ -1142,9 +1144,16 @@ const styles = StyleSheet.create((theme) => ({
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: theme.spacing[2],
|
||||
paddingLeft: theme.spacing[2] + theme.spacing[3],
|
||||
paddingRight: theme.spacing[4],
|
||||
paddingTop: theme.spacing[2],
|
||||
// Align the title with the compact rows' icons and the project icons below
|
||||
// (listContent + projectRow inner padding both spacing[2]).
|
||||
paddingLeft: theme.spacing[2] + theme.spacing[2],
|
||||
// Align the trailing action pill's right edge with the New workspace and
|
||||
// project row pills (both 8px from the sidebar edge).
|
||||
paddingRight: theme.spacing[2],
|
||||
// Less than sidebarHeaderGroup's paddingBottom: the 28px-tall action buttons
|
||||
// center the title and add their own offset above it, so equal padding reads
|
||||
// as a larger gap than History's. Trim paddingTop to balance it visually.
|
||||
paddingTop: theme.spacing[1],
|
||||
paddingBottom: theme.spacing[1],
|
||||
},
|
||||
workspacesSectionTitle: {
|
||||
|
||||
@@ -45,7 +45,6 @@ import {
|
||||
ChevronRight,
|
||||
Copy,
|
||||
ExternalLink,
|
||||
FolderPlus,
|
||||
GitPullRequest,
|
||||
Settings,
|
||||
MoreVertical,
|
||||
@@ -139,7 +138,7 @@ const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
|
||||
const ThemedCircleAlert = withUnistyles(CircleAlert);
|
||||
const ThemedCircleCheck = withUnistyles(CircleCheck);
|
||||
const ThemedSyncedLoader = withUnistyles(SyncedLoader);
|
||||
const ThemedFolderPlus = withUnistyles(FolderPlus);
|
||||
const ThemedPlus = withUnistyles(Plus);
|
||||
const ThemedMoreVertical = withUnistyles(MoreVertical);
|
||||
const ThemedTrash2 = withUnistyles(Trash2);
|
||||
const ThemedSettings = withUnistyles(Settings);
|
||||
@@ -948,7 +947,7 @@ function NewWorktreeButton({
|
||||
loading ? (
|
||||
<ThemedActivityIndicator size={14} uniProps={foregroundMutedColorMapping} />
|
||||
) : (
|
||||
<ThemedFolderPlus
|
||||
<ThemedPlus
|
||||
size={15}
|
||||
uniProps={
|
||||
hovered || pressed ? foregroundColorMapping : foregroundMutedColorMapping
|
||||
|
||||
@@ -52,9 +52,10 @@ export function SidebarHeaderRow({
|
||||
const buttonStyle = useCallback(
|
||||
({ hovered }: PressableStateCallbackType & { hovered?: boolean }) => [
|
||||
styles.button,
|
||||
variant === "compact" && styles.buttonCompact,
|
||||
(Boolean(hovered) || isActive) && styles.buttonHovered,
|
||||
],
|
||||
[isActive],
|
||||
[isActive, variant],
|
||||
);
|
||||
|
||||
const renderChildren = useCallback(
|
||||
@@ -135,6 +136,15 @@ const styles = StyleSheet.create((theme) => ({
|
||||
paddingHorizontal: theme.spacing[3],
|
||||
borderRadius: theme.borderRadius.lg,
|
||||
},
|
||||
// Compact header entries (New workspace / History) sit tighter than the
|
||||
// workspace-row shape the base button mirrors.
|
||||
buttonCompact: {
|
||||
minHeight: 32,
|
||||
paddingVertical: theme.spacing[1.5],
|
||||
// Match the project rows' inner padding so the icons align on one vertical
|
||||
// edge with the workspace list below (base button uses a wider spacing[3]).
|
||||
paddingHorizontal: theme.spacing[2],
|
||||
},
|
||||
buttonHovered: {
|
||||
backgroundColor: theme.colors.surfaceSidebarHover,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user