Use new design

observation · May 3, 2024 · 2e6e8d5 · 2e6e8d5
1 parent 9f4ee72
commit 2e6e8d5
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 56 deletions.
diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
@@ -59,16 +59,18 @@ const getLightboxFooterComponent =
           </View>
         )}
         {content && <View style={styles.footerItem}>{content}</View>}
+        {onPressDelete && (
+          <View style={styles.buttonsContainer}>
+            <View style={styles.buttonContainer}>
+              <IconButton
+                testID="delete-photo"
+                icon={{ name: 'trash-alt', size: 20, color: theme.color.white }}
+                onPress={onPressDelete}
+              />
+            </View>
+          </View>
+        )}
       </View>
-      {onPressDelete && (
-        <View style={styles.editButtons}>
-          <IconButton
-            testID="delete-photo"
-            icon={{ name: 'trash-alt', size: 20, color: theme.color.white }}
-            onPress={onPressDelete}
-          />
-        </View>
-      )}
     </SafeAreaView>
   )
 
@@ -150,9 +152,13 @@ const styles = StyleSheet.create({
     ...textStyle.body,
     color: theme.color.white,
   },
-  editButtons: {
+  buttonsContainer: {
     flexDirection: 'row',
-    marginVertical: 30,
-    marginHorizontal: 48,
+    marginVertical: theme.margin.large,
+    marginHorizontal: theme.margin.common,
+  },
+  buttonContainer: {
+    width: '50%',
+    alignItems: 'center',
   },
 })
diff --git a/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap b/src/components/__tests__/__snapshots__/Lightbox.test.tsx.snap
@@ -1953,57 +1953,67 @@ exports[`Lightbox Rendering With a delete button 1`] = `
               "paddingVertical": 8,
             }
           }
-        />
-        <View
-          style={
-            {
-              "flexDirection": "row",
-              "marginHorizontal": 48,
-              "marginVertical": 30,
-            }
-          }
         >
           <View
-            accessibilityState={
-              {
-                "busy": undefined,
-                "checked": undefined,
-                "disabled": undefined,
-                "expanded": undefined,
-                "selected": undefined,
-              }
-            }
-            accessibilityValue={
-              {
-                "max": undefined,
-                "min": undefined,
-                "now": undefined,
-                "text": undefined,
-              }
-            }
-            accessible={true}
-            collapsable={false}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
             style={
               {
-                "opacity": 1,
+                "flexDirection": "row",
+                "marginHorizontal": 16,
+                "marginVertical": 24,
               }
             }
-            testID="delete-photo"
           >
-            <Icon
-              color="#FFFFFF"
-              name="trash-can"
-              size={20}
-              type="light"
-            />
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "width": "50%",
+                }
+              }
+            >
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  {
+                    "opacity": 1,
+                  }
+                }
+                testID="delete-photo"
+              >
+                <Icon
+                  color="#FFFFFF"
+                  name="trash-can"
+                  size={20}
+                  type="light"
+                />
+              </View>
+            </View>
           </View>
         </View>
       </RCTSafeAreaView>