Adjust modal display with new react-navigation look

src/components/Colors.ts

@@ -28,7 +28,7 @@ function generateStyles(scheme: ColorSchemeName) {
             backgroundColor: scheme === 'dark' ? '#333' : '#ddd',
         },
         modal: {
-            backgroundColor: scheme === 'dark' ? '#222222ee' : '#eeeeeeee',
+            backgroundColor: scheme === 'dark' ? '#22222200' : '#eeeeee00',
         },
         modalInner: {
             backgroundColor: scheme === 'dark' ? '#000' : '#fff',

src/components/Modal.tsx

@@ -9,17 +9,20 @@ interface Props {
 }
 
 const Background = styled(Pressable)`
-    padding: 100px 25px;
     flex: 1;
     justify-content: center;
 `;
 
 const Container = styled(Pressable)<Pick<Props, 'fullSize'>>`
-    border-radius: 20px;
+    margin: auto 20px;
-    margin: auto 0;
+    padding: 4px;
-
+    border-radius: 8px;
+    overflow: hidden;
+    
     ${props => props.fullSize && css`
         flex: 1;
+        margin: auto 0;
+        border-radius: 0px;
     `}
 `;
 

src/screens/modals/TrackPopupMenu.tsx

@@ -20,12 +20,11 @@ const Container = styled.View`
 
 const Buttons = styled.View`
     margin-top: 20px;
-    flex-direction: row;
-    /* justify-content: space-around; */
 `;
 
 const ButtonSpacing = styled.View`
     width: 8px;
+    height: 4px;
 `;
 
 function TrackPopupMenu() {