From 9a24ee2cf49743b6649413f7d02a022f8ef523e3 Mon Sep 17 00:00:00 2001
From: RoyceDa <admin@rosetta-im.com>
Date: Sat, 31 Jan 2026 03:47:58 +0200
Subject: [PATCH] new design in login alert

---
 app/components/DeviceVerify/DeviceVerify.tsx | 22 ++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/components/DeviceVerify/DeviceVerify.tsx b/app/components/DeviceVerify/DeviceVerify.tsx
index 6b965f6..5ba702f 100644
--- a/app/components/DeviceVerify/DeviceVerify.tsx
+++ b/app/components/DeviceVerify/DeviceVerify.tsx
@@ -1,16 +1,26 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
 import { DeviceEntry } from "@/app/providers/ProtocolProvider/protocol/packets/packet.device.list";
-import { Flex, Text } from "@mantine/core";
+import { Box, Button, Divider, Flex, Text } from "@mantine/core";
 
 export interface DeviceVerifyProps {
     device: DeviceEntry;
 }
 
 export function DeviceVerify(props: DeviceVerifyProps) {
+    const colors = useRosettaColors();
+
     return (
-        <Flex>
-            <Text>
-                New login from {props.device.deviceName}
-            </Text>
-        </Flex>
+        <Box bg={colors.mainColor} h={65}>
+            <Divider orientation={'horizontal'} color={colors.borderColor}></Divider>
+            <Flex mt={'xs'} mb={'xs'} align={'center'} direction={'column'}>
+                <Text size={'xs'} fw={500} c={'dimmed'}>
+                    New login from {props.device.deviceName} ({props.device.deviceOs})
+                </Text>
+                <Flex direction={'row'} mt={'xs'} gap={'md'}>
+                    <Button p={0} h={18} variant={'transparent'} size={'xs'}>Accept</Button>
+                    <Button p={0} h={18} variant={'transparent'} size={'xs'} color={'red'}>Decline</Button>
+                </Flex>
+            </Flex>            
+        </Box>
     );
 }
\ No newline at end of file