dynamic button width for message popup

Author: AmyrAhmady

src/containers/MessageBox/index.tsx

@@ -25,7 +25,7 @@ const MessageBox = () => {
         style={{
           position: "absolute",
           top: height / 2 - 90 - 25, // titlebar height is 25
-          left: width / 2 - 160,
+          left: width / 2 - Number(args.boxWidth) / 2,
           width: args.boxWidth,
           borderRadius: 4,
           backgroundColor: theme.listHeaderBackgroundColor,
@@ -81,6 +81,7 @@ const MessageBox = () => {
                 style={{
                   paddingHorizontal: 10,
                   height: 30,
+                  width: args.buttonWidth,
                   marginTop: 5,
                   backgroundColor: theme.primary,
                   borderRadius: 8,

src/states/messageModal.ts

@@ -8,6 +8,7 @@ export interface MessageBoxArgs {
     onPress: () => void;
   }[];
   boxWidth?: number;
+  buttonWidth?: number;
 }
 
 interface MessageModalState {
@@ -18,6 +19,7 @@ interface MessageModalState {
 }
 
 const MESSAGE_BOX_WIDTH = 320;
+const MESSAGE_BOX_BUTTON_WIDTH = 120;
 
 const useMessageBox = create<MessageModalState>()((set) => ({
   visible: false,
@@ -32,6 +34,9 @@ const useMessageBox = create<MessageModalState>()((set) => ({
       args: {
         ...args,
         boxWidth: args.boxWidth ? args.boxWidth : MESSAGE_BOX_WIDTH,
+        buttonWidth: args.buttonWidth
+          ? args.buttonWidth
+          : MESSAGE_BOX_BUTTON_WIDTH,
       },
     })),
   hideMessageBox: () =>

src/utils/helpers.ts

@@ -113,7 +113,8 @@ export const fetchUpdateInfo = async () => {
 Your launcher build version: #${version}
 Current launcher vuild version: #${updateInfo.version}
 Click "Download" to open release page`,
-        boxWidth: 500,
+        boxWidth: 550,
+        buttonWidth: 160,
         buttons: [
           {
             title: "Download",