<Button> Improvements + Landing Page Adjustments + Bug Fixes

src/interface/components/BottomSheetOrModal.web.css → src/interface/components/BottomSheetOrModal.web.scss

@@ -4,7 +4,7 @@ dialog {
 }
 
 dialog:not([open]) {
-    pointer-events: none;
+    &, * {  pointer-events: none !important;  }
 
     opacity: 0;
     transform: translateY(10%);

src/interface/components/BottomSheetOrModal.web.tsx

@@ -3,7 +3,7 @@
 import { View, useSx } from 'dripsy';
 import React from 'react';
 
-import './BottomSheetOrModal.web.css';
+import './BottomSheetOrModal.web.scss';
 
 export function BottomSheetOrModal({ hide, isVisible, children }: { hide(): void, isVisible: boolean, children: React.ReactNode }) {
     const sx = useSx();

src/interface/components/Button.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentProps, ComponentPropsWithRef } from 'react';
 import { styled } from 'dripsy';
-import { Pressable as NativePressable, Platform } from 'react-native';
+import { Pressable as NativePressable, Platform, type View } from 'react-native';
 
 declare module 'react-native' {
     interface PressableStateCallbackType {
@@ -22,15 +22,32 @@ const StyledPressable = styled(NativePressable, {
     })
 );
 
+function mergeVariants<T extends string>(componentProps: {variant?: T, variants?: T[]}, variantsToMerge: T[]): T[] {
+    return [...(componentProps.variants || []), componentProps.variant, ...variantsToMerge].filter(v => v !== undefined) as T[];
+}
+
 export const Button = React.forwardRef(function Button(
-    props: Omit<
+    {webButtonProps,
+onHoverIn, onHoverOut, onPressIn, onPressOut, onFocus, onBlur, ...props}: Omit<
         ComponentProps<typeof StyledPressable>,
         'showCursor' | 'children'
     > & {
         children?: ComponentProps<typeof NativePressable>['children'];
+        webButtonProps?: Omit<ComponentPropsWithRef<'button'>, 'style'|'disabled'>;
     },
     ref?: ComponentPropsWithRef<typeof NativePressable>['ref']
 ) {
+    const ourRef = React.useRef<View>(null)
+    const mergedRef = useMergeRefs(ref, ourRef)
+
+    const [hovering, setHovering] = React.useState(false) // also includes focus
+    const [pressing, setPressing] = React.useState(false)
+
+    const variantsToMerge: NonNullable<typeof props['variants']> = []
+    if (props.disabled) variantsToMerge.push('disabled')
+    if (hovering) variantsToMerge.push(props.disabled ? 'hover_disabled' : 'hover_enabled')
+    if (pressing) variantsToMerge.push(props.disabled ? 'being_pressed_disabled' : 'being_pressed_enabled')
+
     return <StyledPressable
         showCursor={
             !!(
@@ -40,10 +57,36 @@ export const Button = React.forwardRef(function Button(
             )
         }
         {...props}
-        ref={ref}
+        variants={mergeVariants(props, variantsToMerge)}
+        ref={mergedRef}
+
+
+        // TODO Make web support WAY less hacky
+        // We're currently relying on react-native-web to pass the event props verbatim---which
+        // is fair game to be broken at any time and absolutely does not give correct types.
+
+        // @ts-ignore -- react-native-web seems to just pass the events verbatim
+        onMouseOver={React.useCallback((...args: Parameters<NonNullable<typeof onHoverIn>>) => {setHovering(true); onHoverIn?.(...args)}, [onHoverIn])}
+        onHoverIn={React.useCallback((...args: Parameters<NonNullable<typeof onHoverIn>>) => {setHovering(true); onHoverIn?.(...args)}, [onHoverIn])}
+
+        // @ts-ignore -- react-native-web seems to just pass the events verbatim
+        onMouseOut={React.useCallback((...args: Parameters<NonNullable<typeof onHoverOut>>) => {setHovering(false); setPressing(false); onHoverOut?.(...args)}, [onHoverOut])}
+        onHoverOut={React.useCallback((...args: Parameters<NonNullable<typeof onHoverOut>>) => {setHovering(false); setPressing(false); onHoverOut?.(...args)}, [onHoverOut])}
+
+        // @ts-ignore -- react-native-web seems to just pass the events verbatim
+        onMouseDown={React.useCallback((...args: Parameters<NonNullable<typeof onPressIn>>) => {setPressing(true); onPressIn?.(...args)}, [onPressIn])}
+        onPressIn={React.useCallback((...args: Parameters<NonNullable<typeof onPressIn>>) => {setPressing(true); onPressIn?.(...args)}, [onPressIn])}
+
+        // @ts-ignore -- react-native-web seems to just pass the events verbatim
+        onMouseUp={React.useCallback((...args: Parameters<NonNullable<typeof onPressOut>>) => {setPressing(false); ourRef.current?.blur(); onPressOut?.(...args)}, [ourRef, onPressOut])}
+        onPressOut={React.useCallback((...args: Parameters<NonNullable<typeof onPressOut>>) => {setPressing(false); ourRef.current?.blur(); onPressOut?.(...args)}, [ourRef, onPressOut])}
+
+        pointerEvents='auto'
+        onFocus={React.useCallback((...args: Parameters<NonNullable<typeof onFocus>>) => {setHovering(true); onFocus?.(...args)}, [onFocus])}
+        onBlur={React.useCallback((...args: Parameters<NonNullable<typeof onBlur>>) => {setHovering(false); onBlur?.(...args)}, [onBlur])}
     >
         { Platform.select({
-            web: () => <button style={{display: 'contents'}} disabled={!!props.disabled} type='button'>{props.children as any}</button>,
+            web: () => <button type='button' {...webButtonProps} style={{display: 'contents', pointerEvents: 'none'}} disabled={!!props.disabled}>{props.children as any}</button>,
             default: () => props.children as any,
         }) as any }
     </StyledPressable>
@@ -52,6 +95,7 @@ export const Button = React.forwardRef(function Button(
 import { P as ExpoP } from '@expo/html-elements';
 import { createThemedComponent } from 'dripsy';
 import { defaultFontStyle } from 'dripsy/build/core/components/defaultStyle'
+import { useMergeRefs } from '../hooks/useMergeHooks';
 
 const ButtonText_ = createThemedComponent(ExpoP, {
     themeKey: 'text',

src/interface/features/home-screen.tsx

@@ -20,7 +20,7 @@ function HomeScreenInternal() {
     const { showLogInScreen } = useLogInScreen();
 
     return <>
-        <H1 sx={{marginTop: 0}}>Stockedhome  <Text sx={{fontWeight: 400}}>(Authentication)</Text></H1>
+        <H1 sx={{marginTop: 0}}>Stockedhome  <Text sx={{fontWeight: 400, letterSpacing: 0.15}}>(Authentication)</Text></H1>
 
         <View sx={{ maxWidth: 600 }}>
             <P sx={{ textAlign: 'center' }}>
@@ -34,7 +34,7 @@ function HomeScreenInternal() {
             {
                 auth.loading ? <P>Loading...</P>
                 : auth.user ? <>
-                    <P sx={{marginBottom: 0}}>Logged in as <Text sx={{ color: '#aaffaa' }}>{auth.user.username}</Text>.</P>
+                    <P sx={{marginBottom: 0}}>Logged in as <P style={{ color: '#7bdb7b', fontWeight: 600, letterSpacing: 0.25 }}>{auth.user.username}</P>.</P>
                     <Button sx={{marginBottom: 0}} onPress={auth.logOut}><ButtonText>Log Out</ButtonText></Button>
                 </>
                 : <>

src/interface/provider/theme.tsx

@@ -38,7 +38,7 @@ export function Fonts({ children }: React.PropsWithChildren<{}>) {
 const theme = makeTheme({
     customFonts: {
         rubik: {
-            bold: 'Rubik_400Regular',
+            bold: 'Rubik_600SemiBold',
             default: 'Rubik_400Regular',
             normal: 'Rubik_400Regular',
             400: 'Rubik_400Regular',
@@ -70,7 +70,10 @@ const theme = makeTheme({
         textSecondary: '#aaaaaa',
         secondary: '#aaaaaa',
         textMuted: '#666666',
+
+        mutedBrighter: '#777777',
         muted: '#666666',
+        mutedDarker: '#555555',
 
         errorRed: '#ff6666',
         successGreen: '#66ff66',
@@ -201,8 +204,8 @@ const theme = makeTheme({
             //    backgroundColor: 'highlight', // TODO: Find a way to actually do this
             //},
 
-            borderRadius: 4,
-            borderWidth: 2,
+            borderRadius: 8,
+            borderWidth: 3,
 
             paddingTop: 5,
             paddingBottom: 5,
@@ -215,7 +218,27 @@ const theme = makeTheme({
             marginRight: 10,
 
             cursor: 'pointer',
+        },
+
+        disabled: {
+            backgroundColor: 'muted',
+            borderColor: 'highlight',
+        },
+
+        hover_disabled: {
+            backgroundColor: 'mutedBrighter',
+        },
+
+        hover_enabled: {
+            backgroundColor: 'accent',
+        },
+
+        being_pressed_disabled: {
+            backgroundColor: 'mutedDarker',
+        },
 
+        being_pressed_enabled: {
+            backgroundColor: 'highlight',
         },
     },
     "styles": {

src/platforms/next/package.json

@@ -4,23 +4,24 @@
   "type": "module",
   "___COMMENT_ON_DEPENDENCIES": "Any local packages MUST use the `link` protocol for the Next.js platform; otherwise, it doesn't watch files for changes properly",
   "dependencies": {
+    "@expo/next-adapter": "6.0.0",
     "@react-native/assets-registry": "link:../../forks/assets-registry",
     "interface": "link:../../interface",
-    "lib": "link:../../lib",
-    "@expo/next-adapter": "6.0.0",
     "json-loader": "^0.5.7",
+    "lib": "link:../../lib",
     "next-compose-plugins": "^2.2.1",
     "next-fonts": "^1.5.1",
     "next-images": "^1.8.5",
     "raf": "^3.4.1",
+    "sass": "^1.80.4",
     "setimmediate": "^1.0.5"
   },
   "peerDependencies": {
-    "next": "*",
     "@trpc/client": "*",
     "@trpc/next": "*",
     "@trpc/react-query": "*",
-    "@trpc/server": "*"
+    "@trpc/server": "*",
+    "next": "*"
   },
   "devDependencies": {
     "@types/node": "20.13.0",