Add pkg installer to MacOS popup (#188)

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

@@ -49,7 +49,7 @@ export const AddPeerPopup: React.FC<Props> = ({
         },
         {
             key: "3",
-            label: <span><AppleFilled/>macOS</span>,
+            label: <span><AppleFilled/>MacOS</span>,
             children: <MacTab/>,
         },
         {

src/components/popups/addpeer/addpeer/MacTab.tsx

@@ -1,12 +1,14 @@
 import React, {useState} from 'react';
 
-import {Button, Typography} from "antd";
+import {Button, Divider, Row, Tooltip, Typography} from "antd";
 import TabSteps from "./TabSteps";
 import {StepCommand} from "./types"
 import {formatNetBirdUP} from "./common"
 import {Collapse} from "antd";
 import SyntaxHighlighter from "react-syntax-highlighter";
-const { Panel } = Collapse;
+import {QuestionCircleOutlined} from "@ant-design/icons";
+
+const {Panel} = Collapse;
 
 const {Text} = Typography;
 
@@ -15,10 +17,28 @@ export const LinuxTab = () => {
     const [quickSteps, setQuickSteps] = useState([
         {
             key: 1,
-            title: 'Download and run installer:',
+            title: (
+                <Row>
+                    <Text>Download and run MacOS installer: </Text>
+                    <Tooltip title={
+                        <text>If you don't know what chip your Mac has, you can find out by clicking on the Apple logo
+                            in the top left corner of your screen and selecting 'About This Mac'. For more information
+                            click <a href="https://support.apple.com/en-us/HT211814" target="_blank">here</a></text>
+                    }
+                             className={"ant-form-item-tooltip"}>
+                        <QuestionCircleOutlined
+                            style={{color: "rgba(0, 0, 0, 0.45)", cursor: "help", marginLeft: "3px"}}/>
+                    </Tooltip>
+                </Row>
+
+            ),
             commands: (
-                <Button style={{marginTop: "5px"}} type="primary" href="https://pkgs.netbird.io/windows/x64"
-                        target="_blank">Download NetBird</Button>
+                <Row style={{paddingTop: "5px"}}>
+                    <Button style={{marginRight: "10px"}} type="primary" href="https://pkgs.netbird.io/macos/amd64">Download
+                        for Intel</Button>
+                    <Button style={{marginRight: "10px"}} type="default" href="https://pkgs.netbird.io/macos/arm64">Download
+                        for M1 & M2</Button>
+                </Row>
             ),
             copied: false
         } as StepCommand,
@@ -78,35 +98,38 @@ export const LinuxTab = () => {
             showCopyButton: true
         } as StepCommand
     ])
-
     return (
         <div style={{marginTop: 10}}>
             <Text style={{fontWeight: "bold"}}>
-                Install with one command
+                Install on MacOS
             </Text>
-            <div style={{fontSize: ".85em", marginTop: 5, marginBottom: 25}}>
-                <SyntaxHighlighter language="bash">
-                    curl -fsSL https://pkgs.netbird.io/install.sh | sh
-                </SyntaxHighlighter>
-            </div>
-            <Text style={{fontWeight: "bold"}}>
-                Or install manually with HomeBrew
-            </Text>
-            <div style={{marginTop: 5}}>
-                <TabSteps stepsItems={steps}/>
-            </div>
-        </div>
-    /*<div style={{marginTop: 5}}>
+            <div style={{marginTop: 5, marginBottom: 5}}>
                 <TabSteps stepsItems={quickSteps}/>
-            </div>*/
-        /*<div style={{marginTop: 10}}>
-            <Text style={{fontWeight: "bold"}}>
-                Install on macOS with Homebrew
-            </Text>
-            <div style={{marginTop: 5}}>
-                <TabSteps stepsItems={steps}/>
             </div>
-        </div>*/
+            <div style={{marginTop: 0}}/>
+            {/*<Divider style={{marginTop: "5px"}} />*/}
+            <Collapse bordered={false} style={{backgroundColor: "unset"}}>
+                <Panel className="CustomPopupCollapse" header={<Text strong={true}>Or install via command line</Text>}
+                       key="1">
+                    <div style={{marginLeft: "25px"}}>
+                        <Text style={{fontWeight: "bold"}}>
+                            Install with one command
+                        </Text>
+                        <div style={{fontSize: ".85em", marginTop: 5, marginBottom: 25}}>
+                            <SyntaxHighlighter language="bash">
+                                curl -fsSL https://pkgs.netbird.io/install.sh | sh
+                            </SyntaxHighlighter>
+                        </div>
+                        <Text style={{fontWeight: "bold"}}>
+                            Or install manually with HomeBrew
+                        </Text>
+                        <div style={{marginTop: 5}}>
+                            <TabSteps stepsItems={steps}/>
+                        </div>
+                    </div>
+                </Panel>
+            </Collapse>
+        </div>
     )
 }
 

src/index.css

@@ -151,4 +151,9 @@ td.non-highlighted-table-column {
 
 .ant-table-thead .ant-table-cell {
   font-weight: normal !important;
+}
+
+.CustomPopupCollapse .ant-collapse-content-box, .CustomPopupCollapse .ant-collapse-header {
+  padding-left: 0 !important;
+  padding-top: 0 !important;
 }