Upgrade React Navigation + Brutalist UI refresh (#521)

duolicious · Dec 22, 2024 · 4e876af · 4e876af
1 parent 0943fdf
commit 4e876af
Show file tree

Hide file tree

Showing 26 changed files with 299 additions and 303 deletions.
diff --git a/App.tsx b/App.tsx
@@ -78,7 +78,7 @@ const HomeTabs = () => {
   return (
     <Tab.Navigator
       backBehavior="history"
-      screenOptions={{ headerShown: false }}
+      screenOptions={{ headerShown: false, animation: 'shift' }}
       tabBar={props => <TabBar {...props} />}
     >
       <Tab.Screen name="Q&A" component={QuizTab} />

diff --git a/components/audio-bio.tsx b/components/audio-bio.tsx
@@ -315,7 +315,7 @@ const AudioBio = ({
         width: '100%',
         borderRadius: 10,
         borderWidth: 1,
-        borderColor: '#ccc',
+        borderColor: '#999',
         padding: 10,
         gap: 15,
       }}

diff --git a/components/avatar.tsx b/components/avatar.tsx
@@ -30,16 +30,6 @@ const Avatar = ({percentage, ...props}) => {
     verificationRequired = null,
   } = props;
 
-  const shadowStyle = (shadow && !isSkipped && !verificationRequired) ? {
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 6,
-    elevation: 6,
-  } : {};
-
   const Element = navigation ? Pressable : View;
   const elementStyle = useRef({
     height: 90,
@@ -70,44 +60,32 @@ const Avatar = ({percentage, ...props}) => {
       onPress={onPress}
       style={elementStyle}
     >
-      <View
+      <ImageBackground
+        source={imageUuid && {
+          uri: `${IMAGES_URL}/450-${imageUuid}.jpg`,
+          height: 450,
+          width: 450,
+        }}
+        placeholder={imageBlurhash && { blurhash: imageBlurhash }}
+        transition={150}
         style={{
+          flex: 1,
           aspectRatio: 1,
           borderRadius: 999,
-          margin: 2,
-          borderColor: 'white',
-          backgroundColor: imageUuid ? 'white' : '#f1e5ff',
-          borderWidth: 2,
-          overflow: 'visible',
-          ...shadowStyle,
-
+          overflow: 'hidden',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: '#f1e5ff',
+          margin: 4,
         }}
       >
-        <ImageBackground
-          source={imageUuid && {
-            uri: `${IMAGES_URL}/450-${imageUuid}.jpg`,
-            height: 450,
-            width: 450,
-          }}
-          placeholder={imageBlurhash && { blurhash: imageBlurhash }}
-          transition={150}
-          style={{
-            flex: 1,
-            aspectRatio: 1,
-            borderRadius: 999,
-            overflow: 'hidden',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          {!imageUuid &&
-            <Ionicons
-              style={{fontSize: 40, color: 'rgba(119, 0, 255, 0.2)'}}
-              name={'person'}
-            />
-          }
-        </ImageBackground>
-      </View>
+        {!imageUuid &&
+          <Ionicons
+            style={{fontSize: 40, color: 'rgba(119, 0, 255, 0.2)'}}
+            name={'person'}
+          />
+        }
+      </ImageBackground>
       <View
         style={{
           position: 'absolute',

diff --git a/components/basic.tsx b/components/basic.tsx
@@ -49,7 +49,7 @@ const Basic = ({children, ...rest}) => {
     <Animated.View
       style={[
         {
-          borderColor: 'rgba(0, 0, 0, 0.1)',
+          borderColor: 'rgba(0, 0, 0, 0.4)',
           borderWidth: 1,
           borderRadius: 999,
           justifyContent: 'center',

diff --git a/components/button-group.tsx b/components/button-group.tsx
@@ -33,6 +33,9 @@ const ButtonGroup = (props) => {
       selectedButtonStyle={{
         backgroundColor: 'rgb(228, 204, 255)', // = #70f, 0.2 opacity
         borderRadius: secondary === true ? secondaryBorderRadius : borderRadius,
+        borderWidth: 1,
+        borderBottomWidth: 3,
+        borderColor: '#70f',
       }}
       selectedTextStyle={{
         color: '#70f',
@@ -45,7 +48,6 @@ const ButtonGroup = (props) => {
         marginBottom: 10,
         borderWidth: 0,
         overflow: 'visible',
-        backgroundColor: 'rgb(245, 245, 245)',
         borderRadius: secondary === true ? secondaryBorderRadius : borderRadius,
         height: 48,
         ...(secondary === true ? secondaryContainerStyle : {}),

diff --git a/components/button/centered-text.tsx b/components/button/centered-text.tsx
@@ -95,7 +95,7 @@ const ButtonWithCenteredText = (props) => {
             containerStyle?.height === undefined
           ) ? undefined : '100%',
           borderRadius: 999,
-          borderColor: borderColor === undefined ? '#ccc' : borderColor,
+          borderColor: borderColor === undefined ? 'black' : borderColor,
           borderWidth: borderWidth === undefined ? (secondary ? 1 : 0) : borderWidth,
           backgroundColor: backgroundColor || (secondary ? 'white' : '#70f'),
           opacity: animatedOpacity,

diff --git a/components/button/option.tsx b/components/button/option.tsx
@@ -87,8 +87,9 @@ const ButtonForOption = (props) => {
         style={{
           width: '100%',
           height: '100%',
-          borderColor: '#aaa',
+          borderColor: '#999',
           borderWidth: 1,
+          borderBottomWidth: 2,
           borderRadius: 999,
           paddingLeft: 10,
           paddingRight: 20,

diff --git a/components/chart.tsx b/components/chart.tsx
@@ -1,5 +1,6 @@
 import {
   Animated,
+  DimensionValue,
   LayoutAnimation,
   Pressable,
   View,
@@ -83,7 +84,11 @@ const Chart = ({name1, percentage1, name2, percentage2, ...props}) => {
     const position_ = position && Math.round(position);
     const extraHeight_ = extraHeight || 0;
 
-    const labelPosition = position_ < 50 ?
+    const labelPosition: {
+      left: DimensionValue
+    } | {
+      right: DimensionValue
+    } = position_ < 50 ?
       {left: `${position_}%`} :
       {right: `${100 - position_}%`};
 
@@ -185,14 +190,17 @@ const Chart = ({name1, percentage1, name2, percentage2, ...props}) => {
         borderRadius: 5,
         marginTop: 10,
         marginBottom: 10,
-        shadowOffset: {
-          width: 0,
-          height: 2,
-        },
-        shadowOpacity: 0.2,
-        shadowRadius: 3,
-        elevation: 8,
         overflow: 'visible',
+
+        borderTopWidth: 1,
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderBottomWidth: 3,
+
+        borderTopColor: '#eee',
+        borderLeftColor: '#eee',
+        borderRightColor: '#eee',
+        borderBottomColor: '#ddd',
       }}
     >
       <Pressable

diff --git a/components/check-chip.tsx b/components/check-chip.tsx
@@ -40,8 +40,10 @@ const CheckChip = ({label, ...props}) => {
     <Pressable
       style={{
         borderRadius: 999,
-        borderWidth: 3,
-        borderColor: 'white',
+        borderWidth: 1,
+        borderRightWidth: 2,
+        borderBottomWidth: 4,
+        borderColor: 'black',
         paddingLeft: 20,
         paddingRight: 20,
         paddingTop: 12,

diff --git a/components/club-selector.tsx b/components/club-selector.tsx
@@ -47,6 +47,7 @@ const SelectedClub = ({
         style={{
           backgroundColor: 'rgba(119, 0, 255, 0.1)',
           flexShrink: 1,
+          borderBottomWidth: 3,
         }}
         textStyle={{
           color: '#70f',
@@ -110,8 +111,11 @@ const UnselectedClub = ({
             marginBottom: 5,
             flexWrap: 'wrap',
             flexShrink: 1,
+            borderBottomWidth: 3,
           }}
-        >{clubItem.name}</Basic>
+        >
+          {clubItem.name}
+        </Basic>
         <DefaultText style={{fontWeight: '700'}}>
           {clubItem.count_members}
           {' '}

diff --git a/components/club.tsx b/components/club.tsx
@@ -16,7 +16,10 @@ const Club = ({
   return (
     <Basic
       onPress={onPress}
-      style={style}
+      style={{
+        borderBottomWidth: 3,
+        ...style
+      }}
       textStyle={{
         fontFamily: isMutual ? 'TruenoBold' : 'Trueno',
         fontWeight: isMutual ? '900' : '400',