fix: add small styling changes

rebeckerspecialties · Nov 12, 2024 · de07c61 · de07c61
1 parent 6df9676
commit de07c61
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/packages/react-native-benchmarking-library/src/Benchmark.tsx b/packages/react-native-benchmarking-library/src/Benchmark.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useState } from "react";
-import { Button, Text } from "react-native";
+import { Button, Text, View } from "react-native";
 import { startProfiling, stopProfiling } from "react-native-release-profiler";
 
 export interface BenchmarkProps {
@@ -43,16 +43,20 @@ export const Benchmark: React.FC<BenchmarkProps> = ({
   }
 
   if (running) {
-    return <Text>Running benchmark, please wait</Text>;
+    return (
+      <View style={{ justifyContent: "center", alignItems: "center" }}>
+        <Text>Running benchmark, please wait</Text>
+      </View>
+    );
   }
 
   if (benchmarkRunTime) {
     const completedLabel = `${name}Completed`;
     return (
-      <>
-        <Text testID={completedLabel}>{benchmarkRunTime}</Text>
+      <View style={{justifyContent: 'center', alignItems: 'center'}}>
+        <Text style={{fontWeight: 'bold'}} testID={completedLabel} accessibilityValue={{text: `${benchmarkRunTime}`}}>Benchmark took: {benchmarkRunTime}ms</Text>
         <Text testID="profileLocation">{profileLocation}</Text>
-      </>
+      </View>
     );
   }
 

diff --git a/packages/react-native-benchmarking-library/src/BenchmarkHarness.tsx b/packages/react-native-benchmarking-library/src/BenchmarkHarness.tsx
@@ -44,15 +44,17 @@ export const BenchmarkHarness: React.FC<{ items: BenchmarkDescriptor[] }> = ({
   return (
     <>
       <View
-        style={{ flex: 1, backgroundColor: "white" }}
+        style={{ flex: 1 }}
         accessibilityLabel="benchmarkView"
       >
         <JavaScriptEngineVersion />
-        <Button
-          testID="toggleFlamegraph"
-          title={toggleFlamegraphTitle}
-          onPress={toggleFlamegraph}
-        />
+        <View style={{marginBottom:20}}>
+          <Button
+            testID="toggleFlamegraph"
+            title={toggleFlamegraphTitle}
+            onPress={toggleFlamegraph}
+          />
+        </View>
         {items.map(({ benchmarkType, title, benchmarkFn }) => {
           switch (benchmarkType) {
             case "graphics":