new design in login alert

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}
+        <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>
     );
 }