Skip to content

Commit c1a848c

Browse files
committed
tweaks and fixes part 1
1 parent 8f8454b commit c1a848c

File tree

13 files changed

+39
-44
lines changed

13 files changed

+39
-44
lines changed

common/styleguide.tsx

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,17 @@ export function useLayout() {
2525
};
2626
}
2727

28-
const baseTextStyles = {
29-
marginVertical: 0,
30-
fontWeight: '400' as const,
31-
fontFamily: 'inherit',
32-
};
33-
3428
const textStyles = StyleSheet.create({
35-
h1: { ...baseTextStyles, fontSize: 57.25, fontWeight: '600' as const },
36-
h2: { ...baseTextStyles, fontSize: 35.5, fontWeight: '600' as const },
37-
h3: { ...baseTextStyles, fontSize: 26.5, fontWeight: '600' as const },
38-
h4: { ...baseTextStyles, fontSize: 22 },
39-
h5: { ...baseTextStyles, fontSize: 20 },
40-
h6: { ...baseTextStyles, fontSize: 18 },
41-
headline: { ...baseTextStyles, fontSize: 16, fontWeight: '500' as const },
42-
p: { ...baseTextStyles, fontSize: 16 },
43-
caption: { ...baseTextStyles, fontSize: 15, lineHeight: 22 },
44-
label: { ...baseTextStyles, fontSize: 12, fontWeight: '500' as const },
29+
h1: tw`text-[57.25px] font-semibold`,
30+
h2: tw`text-[35.5px] font-semibold`,
31+
h3: tw`text-[26.5px] font-semibold`,
32+
h4: tw`text-[22px]`,
33+
h5: tw`text-[20px]`,
34+
h6: tw`text-[18px]`,
35+
headline: tw`text-[16px] font-medium`,
36+
p: tw`text-[16px]`,
37+
caption: tw`text-[15px] leading-[22px]`,
38+
label: tw`text-[12px] font-medium`,
4539
});
4640

4741
type TextStyles = TextStyle | TextStyle[];
@@ -62,7 +56,12 @@ export function createTextComponent(Element: ComponentType<TextProps>, textStyle
6256
<Element
6357
id={id}
6458
numberOfLines={numberOfLines}
65-
style={[elementStyle, textStyle, tw`text-black dark:text-white`, style]}>
59+
style={[
60+
tw`font-sans font-normal my-0 text-black dark:text-white`,
61+
elementStyle as StyleProp<any>,
62+
textStyle,
63+
style,
64+
]}>
6665
{children}
6766
</Element>
6867
);

components/Button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function Button({
2424
}: Props) {
2525
const isLink = !!href;
2626
const buttonStyle = [
27-
tw`justify-center items-center rounded outline-offset-1 bg-primary-darker dark:bg-primary-dark`,
27+
tw`justify-center items-center rounded outline-offset-1 select-none bg-primary-darker dark:bg-primary-dark`,
2828
style,
2929
];
3030

components/Filters/FilterButton.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export function FilterButton({ isFilterVisible, query, onPress, onClearAllPress,
4545
<Button
4646
onPress={onPress}
4747
style={[
48-
tw`h-full px-2 bg-palette-gray5 dark:bg-dark-brighter`,
48+
tw`h-full px-2 bg-accented`,
4949
isFilterVisible && tw`bg-primary-dark`,
5050
isFilterCount && tw`rounded-r-none`,
5151
style,
@@ -65,7 +65,7 @@ export function FilterButton({ isFilterVisible, query, onPress, onClearAllPress,
6565
</Button>
6666
{filterCount > 0 && (
6767
<View
68-
style={tw`h-full justify-center items-center rounded-r border-l border-palette-gray6 bg-palette-gray5 dark:bg-dark-brighter dark:border-dark`}>
68+
style={tw`h-full justify-center items-center rounded-r border-l border-palette-gray6 bg-accented dark:border-dark`}>
6969
<ClearButton onPress={onClearAllPress} />
7070
</View>
7171
)}

components/Library/Thumbnail.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ function Thumbnail({ url }: Props) {
4747
<HoverCard.Content sideOffset={6} sticky="always">
4848
<View
4949
style={[
50-
tw`p-2.5 rounded-lg box-border hidden shadow-offset-0/0.5 shadow-radius-2 shadow-palette-gray3 bg-white dark:shadow-dark-brighter dark:bg-black`,
50+
tw`p-2.5 rounded-lg box-border hidden shadow-offset-0/0.5 shadow-radius-2 shadow-palette-gray3 bg-white dark:shadow-accented dark:bg-black`,
5151
showPreview && isLoaded && tw`flex`,
5252
{
5353
maxWidth: maxPreviewWidth,

components/Library/TrendingMark.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function TrendingMark({ library, style, markOnly = false }: Props
1919
<>
2020
<View
2121
style={[
22-
tw`absolute h-1.5 w-8 rounded bg-palette-gray2 dark:bg-dark-brighter`,
22+
tw`absolute h-1.5 w-8 rounded bg-palette-gray2 dark:bg-accented`,
2323
markOnly ? tw`top-[11px]` : tw`top-[7px]`,
2424
]}
2525
/>

components/NavigationTab.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,7 @@ function NavigationTab({ title, counter, path = `/${title.toLowerCase()}` }: Pro
3333
<Label
3434
style={[
3535
tw`py-0.5 px-1.5 rounded-xl text-[11px] text-white mt-[3px]`,
36-
isActive
37-
? tw`bg-primary-dark text-black dark:text-white`
38-
: tw`bg-palette-gray5 dark:bg-dark-brighter`,
36+
isActive ? tw`bg-primary-dark text-black dark:text-white` : tw`bg-accented`,
3937
]}>
4038
{counter}
4139
</Label>

components/Pagination.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ function BackArrow({ disabled }: ArrowButtonProps) {
7777
return (
7878
<View
7979
style={[
80-
tw`size-6 items-center justify-center rounded rotate-180 bg-palette-gray2 dark:bg-dark-brighter`,
80+
tw`size-6 items-center justify-center rounded rotate-180 bg-palette-gray2 dark:bg-accented`,
8181
disabled && tw`opacity-50`,
8282
]}>
8383
<Arrow height={12} width={9} style={tw`text-black dark:text-white`} />
@@ -89,7 +89,7 @@ function ForwardArrow({ disabled }: ArrowButtonProps) {
8989
return (
9090
<View
9191
style={[
92-
tw`size-6 items-center justify-center rounded bg-palette-gray2 dark:bg-dark-brighter`,
92+
tw`size-6 items-center justify-center rounded bg-palette-gray2 dark:bg-accented`,
9393
disabled && tw`opacity-50`,
9494
]}>
9595
<Arrow height={12} width={9} style={tw`text-black dark:text-white`} />

components/Sort.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@ export function SortButton({ query: { order, direction, search }, query }: SortB
3030
}
3131

3232
return (
33-
<View
34-
style={tw`flex-row items-center bg-palette-gray5 h-6 ml-2 pl-2 rounded dark:bg-dark-brighter`}>
33+
<View style={tw`flex-row items-center bg-accented h-6 ml-2 pl-2 rounded`}>
3534
<View style={tw`flex-row items-center`}>
3635
<Tooltip
3736
sideOffset={8}

components/Tools/ToolEntry.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function ToolEntry({ name, description, githubUrl, buttons }: Pro
3030
href={href}
3131
style={[
3232
tw`flex-row px-3 min-h-8 gap-1.5 text-sm bg-palette-gray3`,
33-
tw`dark:bg-dark-brighter dark:text-white`,
33+
tw`dark:bg-accented dark:text-white`,
3434
]}>
3535
<span>{label}</span>
3636
</Button>

context/CustomAppearanceProvider.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,10 @@ export default function CustomAppearanceProvider({ children }: PropsWithChildren
1717
const [isDark, setIsDark] = useState(colorScheme === 'dark');
1818

1919
function toggleTheme(isDark: boolean) {
20-
const el = document.documentElement;
21-
2220
if (isDark) {
23-
el.classList.add('dark');
21+
document.documentElement.classList.add('dark');
2422
} else {
25-
el.classList.remove('dark');
23+
document.documentElement.classList.remove('dark');
2624
}
2725

2826
setColorScheme(isDark ? 'dark' : 'light');
@@ -47,7 +45,7 @@ export default function CustomAppearanceProvider({ children }: PropsWithChildren
4745

4846
return (
4947
<CustomAppearanceContext.Provider
50-
key={tw.memoBuster}
48+
key={colorScheme}
5149
value={{
5250
isDark,
5351
setIsDark: isDark => {

0 commit comments

Comments
 (0)