Add iOS peer screen

src/components/popups/addpeer/addpeer/AddPeerPopup.tsx

@@ -11,6 +11,8 @@ import MacTab from "./MacTab";
 import Link from "antd/lib/typography/Link";
 import DockerTab from "./DockerTab";
 import AndroidTab from "./AndroidTab";
+import IOSTab from "./IOSTab";
+import {IOSIcon} from "./IOSIcon";
 
 type Props = {
     greeting?: string;
@@ -54,11 +56,16 @@ export const AddPeerPopup: React.FC<Props> = ({
         },
         {
             key: "4",
+            label: <span data-testid="add-peer-modal-android-tab"><IOSIcon/>iOS</span>,
+            children: <IOSTab/>,
+        },
+        {
+            key: "5",
             label: <span data-testid="add-peer-modal-android-tab"><AndroidFilled/>Android</span>,
             children: <AndroidTab/>,
         },
         {
-            key: "5",
+            key: "6",
             label: <span data-testid="add-peer-modal-docker-tab"><Icon component={DockerSVG}/>Docker</span>,
             children: <DockerTab/>,
         }

src/components/popups/addpeer/addpeer/IOSIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Icon, { HomeOutlined } from '@ant-design/icons';
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import { Space } from 'antd';
+
+
+const SvgIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="15"
+         height="15"
+         viewBox="0 0 30 30"
+    >
+        <path
+            d="M 27.126316,5.731579 C 26.889474,5.1078948 26.321052,4.231579 25.51579,3.6078948 25.042106,3.2526316 24.505264,2.9052632 23.747368,2.6842106 22.926316,2.4473684 21.91579,2.368421 20.68421,2.368421 H 9.3157894 c -1.2394736,0 -2.2421052,0.078948 -3.055263,0.3236842 C 5.5026316,2.9210526 4.9421052,3.2605264 4.4842106,3.6157894 3.6789474,4.231579 3.1105264,5.1157894 2.8657894,5.7394736 2.3763158,6.9947368 2.368421,8.4157894 2.368421,9.3157894 V 20.68421 c 0,0.9 0.0079,2.321054 0.4973684,3.584212 0.244737,0.623684 0.813158,1.5 1.6184212,2.123684 0.4657894,0.355262 1.018421,0.70263 1.7763158,0.923684 0.8131578,0.236842 1.8157894,0.315788 3.055263,0.315788 H 20.68421 c 1.239474,0 2.242106,-0.07894 3.055264,-0.323684 0.757894,-0.228946 1.31842,-0.56842 1.776316,-0.923684 0.805262,-0.615788 1.373684,-1.5 1.61842,-2.123684 0.497368,-1.255262 0.497368,-2.68421 0.497368,-3.58421 V 9.3078948 c 0,-0.9 -0.0078,-2.3210526 -0.497368,-3.5842106 z M 7.3736842,19.736842 H 6.4342106 V 14.123684 H 7.3736842 Z M 6.9078948,13.176316 c -0.3157896,0 -0.5842106,-0.260527 -0.5842106,-0.584211 0,-0.323684 0.2605264,-0.58421 0.5842106,-0.58421 0.3236842,0 0.5921052,0.260526 0.5921052,0.58421 -0.0079,0.323684 -0.268421,0.584211 -0.5921052,0.584211 z m 5.6447372,6.702631 c -2.478948,0 -4.0421056,-1.768421 -4.0421056,-4.586842 0,-2.818421 1.5631576,-4.594737 4.0421056,-4.594737 2.478947,0 4.042105,1.776316 4.042105,4.594737 0,2.818421 -1.563158,4.586842 -4.042105,4.586842 z m 8.178946,0 c -1.863157,0 -3.173683,-1.026315 -3.260525,-2.557894 h 0.844736 c 0.09474,1.065789 1.097369,1.792105 2.494737,1.792105 1.33421,0 2.289474,-0.726316 2.289474,-1.728947 0,-0.828948 -0.576316,-1.326316 -1.894736,-1.657895 L 20.1,15.442105 c -1.65,-0.418421 -2.384211,-1.113158 -2.384211,-2.289473 0,-1.436843 1.294737,-2.463158 3.047369,-2.463158 1.736842,0 3,1.026315 3.055264,2.439473 h -0.844738 c -0.07894,-1.002631 -0.971052,-1.673684 -2.23421,-1.673684 -1.231579,0 -2.147369,0.686842 -2.147369,1.66579 0,0.765789 0.552632,1.215789 1.863159,1.547368 l 0.963158,0.244737 c 1.792104,0.45 2.542104,1.136842 2.542104,2.376316 0,1.563158 -1.255262,2.589473 -3.228948,2.589473 z m -4.997367,-4.586842 c 0,2.328948 -1.231579,3.805263 -3.181579,3.805263 -1.95,0 -3.1736846,-1.476315 -3.1736846,-3.805263 0,-2.336842 1.2236846,-3.813158 3.1736846,-3.813158 1.95,0 3.181579,1.476316 3.181579,3.813158 z"
+        />
+    </svg>
+);
+
+export const IOSIcon = (props: Partial<CustomIconComponentProps>) => (
+    <Icon component={SvgIcon} {...props} />
+);

src/components/popups/addpeer/addpeer/IOSTab.tsx

@@ -0,0 +1,62 @@
+import React, {useState} from 'react';
+
+import {Button, Image, Typography} from "antd";
+import TabSteps from "./TabSteps";
+import { StepCommand } from "./types"
+import applestore from '../../../../assets/app-store-badge.png';
+import {getConfig} from "../../../../config";
+const { grpcApiOrigin } = getConfig();
+
+const {Text} = Typography;
+
+export const IOSTab = () => {
+
+    const [steps, setSteps] = useState([
+        {
+            key: 1,
+            title: 'Download and install the application from App Store:',
+            commands: (
+                <a data-testid="download-android-button" href="https://apps.apple.com/us/app/netbird-p2p-vpn/id6469329339" target="_blank">
+                    <Image width="12em" preview={false} style={{marginTop: "5px"}} src={applestore}/>
+                </a>
+            ),
+            copied: false
+        } as StepCommand,
+        ... grpcApiOrigin ? [{
+            key: 2,
+            title: 'Click on "Change Server" and enter the following "Server"',
+            commands: grpcApiOrigin,
+            commandsForCopy: grpcApiOrigin,
+            copied: false,
+            showCopyButton: false
+        }] : [],
+        {
+            key: 2 + (grpcApiOrigin ? 1 : 0),
+            title: 'Click on the "Connect" button in the middle of the screen',
+            commands: '',
+            copied: false,
+            showCopyButton: false
+        },
+        {
+            key: 3 + (grpcApiOrigin ? 1 : 0),
+            title: 'Sign up using your email address',
+            commands: '',
+            copied: false,
+            showCopyButton: false
+        }
+    ])
+
+    return (
+        <div style={{marginTop: 10}}>
+            <Text style={{fontWeight: "bold"}}>
+                Install on Android
+            </Text>
+            <div style={{marginTop: 5}}>
+                <TabSteps stepsItems={steps}/>
+            </div>
+
+        </div>
+    )
+}
+
+export default IOSTab