table route layout (#213)

Co-authored-by: Sarooj Bukhari <120650489+saroojbukhari2022@users.noreply.github.com>
Co-authored-by: braginini <misha@netbird.io>

.gitignore

@@ -26,6 +26,6 @@ yarn-error.log*
 src/auth_config.json
 .idea
 .eslintcache
-src/.local-config.json
+src/.local-config*.json
 /public/OidcServiceWorker.js
 /public/OidcTrustedDomains.js

package.json

@@ -39,6 +39,7 @@
     "react-redux": "^8.0.2",
     "react-router-dom": "^5.3.3",
     "react-scripts": "^5.0.1",
+    "react-select": "^5.7.3",
     "react-syntax-highlighter": "^15.5.0",
     "react-table": "^7.7.0",
     "redux": "^4.2.0",

src/.local-config.json.bac

@@ -0,0 +1,11 @@
+{
+  "auth0Auth": "true",
+  "authAuthority": "https://netbird-localdev.eu.auth0.com",
+  "authClientId": "kBRMAOqIZ7hvpVCaypQLCJvTzkYYIXVt",
+  "authScopesSupported": "openid profile email api offline_access email_verified",
+  "authAudience": "http://localhost:3000/",
+
+  "apiOrigin": "http://0.0.0.0",
+  "grpcApiOrigin": "http://0.0.0.0:80",
+  "latestVersion": "v0.6.3"
+}

src/components/AccessControlEdit.tsx

@@ -450,7 +450,7 @@ const AccessControlEdit = () => {
             {policy && (
                 <Container style={{paddingTop: "40px"}}>
                     <Breadcrumb
-                        style={{marginBottom: "30px"}}
+                        style={{marginBottom: "25px"}}
                         items={[
                             {
                                 title: <a onClick={onBreadcrumbUsersClick}>Access Control</a>,
@@ -488,6 +488,7 @@ const AccessControlEdit = () => {
                                                         margin: "0px",
                                                         marginBottom: "10px",
                                                         cursor: "pointer",
+                                                        fontWeight:"500"
                                                     }}
                                                     onDoubleClick={() => toggleEditName(true)}
                                                 >
@@ -502,7 +503,7 @@ const AccessControlEdit = () => {
                                                                 style={{
                                                                     whiteSpace: "pre-line",
                                                                     margin: 0,
-                                                                    fontWeight: "bold",
+                                                                    fontWeight: "500",
                                                                 }}
                                                             >
                                                                 Rule name
@@ -553,7 +554,7 @@ const AccessControlEdit = () => {
                                                         <Form.Item
                                                             name="description"
                                                             label="Description"
-                                                            style={{marginTop: 24, fontWeight: "600"}}
+                                                            style={{marginTop: 24, fontWeight: "500"}}
                                                         >
                                                             <Input
                                                                 placeholder="Add description..."
@@ -587,7 +588,7 @@ const AccessControlEdit = () => {
                                                         style={{
                                                             color: "rgba(0, 0, 0, 0.88)",
                                                             fontSize: "14px",
-                                                            fontWeight: "bold",
+                                                            fontWeight: "500",
                                                         }}
                                                     >
                                                         Enabled
@@ -596,7 +597,7 @@ const AccessControlEdit = () => {
                                                         type={"secondary"}
                                                         style={{
                                                             marginTop: "-2",
-                                                            fontWeight: "500",
+                                                            fontWeight: "400",
                                                             marginBottom: "0",
                                                         }}
                                                     >
@@ -615,7 +616,7 @@ const AccessControlEdit = () => {
                                                     name="tagSourceGroups"
                                                     label="Source groups"
                                                     rules={[{validator: selectValidator}]}
-                                                    style={{fontWeight: "600"}}
+                                                    style={{fontWeight: "500"}}
                                                 >
                                                     <Select
                                                         mode="tags"
@@ -768,7 +769,7 @@ const AccessControlEdit = () => {
                                                     name="tagDestinationGroups"
                                                     label="Destination groups"
                                                     rules={[{validator: selectValidator}]}
-                                                    style={{fontWeight: "600"}}
+                                                    style={{fontWeight: "500"}}
                                                 >
                                                     <Select
                                                         mode="tags"
@@ -798,7 +799,7 @@ const AccessControlEdit = () => {
                                         <Form.Item
                                             name="protocol"
                                             label="Protocol"
-                                            style={{fontWeight: "600"}}
+                                            style={{fontWeight: "500"}}
                                             className="tag-box"
                                         >
                                             <Select
@@ -814,7 +815,7 @@ const AccessControlEdit = () => {
                                         <Form.Item
                                             name="ports"
                                             label="Ports"
-                                            style={{fontWeight: "600"}}
+                                            style={{fontWeight: "500"}}
                                             rules={[
                                                 {
                                                     message:

src/components/AccessControlNew.tsx

@@ -458,8 +458,9 @@ const AccessControlNew = () => {
                     style={{
                       textAlign: "start",
                       whiteSpace: "pre-line",
-                      fontSize: "22px",
+                      fontSize: "18px",
                       margin: "0px",
+                      fontWeight:"500"
                     }}
                   >
                     Create Rule
@@ -480,7 +481,7 @@ const AccessControlNew = () => {
                         style={{
                           whiteSpace: "pre-line",
                           margin: 0,
-                          fontWeight: "bold",
+                          fontWeight: "500",
                         }}
                       >
                         Rule name
@@ -531,7 +532,7 @@ const AccessControlNew = () => {
                         <Form.Item
                           name="description"
                           label="Description"
-                          style={{ marginTop: 24, fontWeight: "600" }}
+                          style={{ marginTop: 24, fontWeight: "500" }}
                         >
                           <Input
                             placeholder="Add description..."
@@ -553,7 +554,7 @@ const AccessControlNew = () => {
                       name="tagSourceGroups"
                       label="Source"
                       rules={[{ validator: selectValidator }]}
-                      style={{ fontWeight: "600" }}
+                      style={{ fontWeight: "500" }}
                     >
                       <Select
                         mode="tags"
@@ -706,7 +707,7 @@ const AccessControlNew = () => {
                       name="tagDestinationGroups"
                       label="Destination"
                       rules={[{ validator: selectValidator }]}
-                      style={{ fontWeight: "600" }}
+                      style={{ fontWeight: "500" }}
                     >
                       <Select
                         mode="tags"
@@ -736,14 +737,14 @@ const AccessControlNew = () => {
                 <Form.Item
                   name="protocol"
                   label="Protocol"
-                  style={{ fontWeight: "600" }}
+                  style={{ fontWeight: "500" }}
                   className="tag-box"
                 >
                   <Paragraph
                     type={"secondary"}
                     style={{
                       marginTop: "-10px",
-                      fontWeight: "500",
+                      fontWeight: "400",
                       marginBottom: "8px",
                     }}
                   >
@@ -767,7 +768,7 @@ const AccessControlNew = () => {
                     style={{
                       color: "rgba(0, 0, 0, 0.88)",
                       fontSize: "14px",
-                      fontWeight: "600",
+                      fontWeight: "500",
                     }}
                   >
                     Ports
@@ -776,7 +777,7 @@ const AccessControlNew = () => {
                     type={"secondary"}
                     style={{
                       marginTop: "-5px",
-                      fontWeight: "500",
+                      fontWeight: "400",
                       marginBottom: "8px",
                     }}
                   >
@@ -786,7 +787,7 @@ const AccessControlNew = () => {
                 <Form.Item
                   name="ports"
                   label=""
-                  style={{ fontWeight: "600" }}
+                  style={{ fontWeight: "500" }}
                   rules={[
                     {
                       message: "Directional traffic requires at least one port",
@@ -845,7 +846,7 @@ const AccessControlNew = () => {
                         style={{
                           color: "rgba(0, 0, 0, 0.88)",
                           fontSize: "14px",
-                          fontWeight: "bold",
+                          fontWeight: "500",
                         }}
                       >
                         Enabled
@@ -854,7 +855,7 @@ const AccessControlNew = () => {
                         type={"secondary"}
                         style={{
                           marginTop: "-2",
-                          fontWeight: "500",
+                          fontWeight: "400",
                           marginBottom: "0",
                         }}
                       >
@@ -878,7 +879,7 @@ const AccessControlNew = () => {
                     href="https://docs.netbird.io/how-to/manage-network-access"
                   >
                     {" "}
-                    access controls
+                    Access Controls
                   </a>
                 </Text>
               </Col>

src/components/SetupKeyEdit.tsx

@@ -33,7 +33,7 @@ import { Container } from "./Container";
 import Paragraph from "antd/es/typography/Paragraph";
 import { EditOutlined, LockOutlined } from "@ant-design/icons";
 import { actions as personalAccessTokenActions } from "../store/personal-access-token";
-import {useGetGroupTagHelpers} from "../utils/groups";
+import { useGetGroupTagHelpers } from "../utils/groups";
 
 const { Option } = Select;
 const { Text } = Typography;
@@ -44,10 +44,7 @@ const customExpiresFormat = (value: Date): string | null => {
 };
 
 const SetupKeyNew = () => {
-  const {
-    optionRender,
-      blueTagRender
-  } = useGetGroupTagHelpers()
+  const { optionRender, blueTagRender } = useGetGroupTagHelpers();
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
 
@@ -62,14 +59,14 @@ const SetupKeyNew = () => {
   const [tagGroups, setTagGroups] = useState([] as string[]);
   const [formSetupKey, setFormSetupKey] = useState({} as FormSetupKey);
   const inputNameRef = useRef<any>(null);
- 
-   useEffect(() => {
-     //Unmounting component clean
-     return () => {
-       setVisibleNewSetupKey(false)
-     };
-   }, []);
-  
+
+  useEffect(() => {
+    //Unmounting component clean
+    return () => {
+      setVisibleNewSetupKey(false);
+    };
+  }, []);
+
   useEffect(() => {
     if (!editName) return;
 
@@ -269,7 +266,7 @@ const SetupKeyNew = () => {
   return (
     <>
       <Breadcrumb
-        style={{ marginBottom: "30px" }}
+        style={{ marginBottom: "25px" }}
         items={[
           {
             title: <a onClick={onBreadcrumbUsersClick}>Setup Keys</a>,
@@ -279,12 +276,11 @@ const SetupKeyNew = () => {
           },
         ]}
       />
-      <Card
-        bordered={true}
-        title={setupKey.name}
-        style={{ marginBottom: "7px" }}
-      >
+      <Card bordered={true} style={{ marginBottom: "7px", border: "none" }}>
         <div style={{ maxWidth: "800px" }}>
+          <h3 style={{ fontSize: "22px", fontWeight: "500",marginBottom:"30px" }}>
+            {setupKey.name}
+          </h3>
           <Form
             layout="vertical"
             requiredMark={false}
@@ -309,7 +305,7 @@ const SetupKeyNew = () => {
                 <Paragraph
                   style={{
                     whiteSpace: "pre-line",
-                    fontWeight: "bold",
+                    fontWeight: "500",
                     margin: 0,
                   }}
                 >
@@ -340,14 +336,14 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   <Paragraph
                     style={{
                       whiteSpace: "pre-line",
                       margin: 0,
-                      fontWeight: "bold",
+                      fontWeight: "500",
                     }}
                   ></Paragraph>
                   {formSetupKey.type === "one-off" ? "One-off" : "Reusable"},
@@ -384,7 +380,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Auto-assigned groups
@@ -414,7 +410,7 @@ const SetupKeyNew = () => {
               </Col>
 
               <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
-                <Paragraph style={{ margin: 0, fontWeight: "bold" }}>
+                <Paragraph style={{ margin: 0, fontWeight: "500" }}>
                   Expires
                 </Paragraph>
                 <Row>
@@ -437,7 +433,7 @@ const SetupKeyNew = () => {
                   href="https://docs.netbird.io/how-to/register-machines-using-setup-keys"
                 >
                   {" "}
-                  setup keys
+                  Setup Keys
                 </a>
               </Text>
             </Row>

src/components/SetupKeyNew.tsx

@@ -369,8 +369,9 @@ const SetupKeyNew = () => {
           style={{
             textAlign: "start",
             whiteSpace: "pre-line",
-            fontSize: "22px",
+            fontSize: "18px",
             margin: "0px",
+            fontWeight:"500"
           }}
         >
           {showPlainToken
@@ -382,7 +383,6 @@ const SetupKeyNew = () => {
           style={{
             textAlign: "start",
             whiteSpace: "pre-line",
-            paddingBottom: "15px",
           }}
         >
           {showPlainToken
@@ -402,8 +402,11 @@ const SetupKeyNew = () => {
           >
             <Row>
               <Col span={24}>
-                <Paragraph style={{ fontWeight: "bold" }}>Name</Paragraph>
-                <Paragraph type={"secondary"} style={{ marginTop: "-15px" }}>
+                <Paragraph style={{ fontWeight: "500" }}>Name</Paragraph>
+                <Paragraph
+                  type={"secondary"}
+                  style={{ marginTop: "-15px", marginBottom: "-5px" }}
+                >
                   Set an easily identifiable name for your key
                 </Paragraph>
               </Col>
@@ -427,7 +430,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Reusable
@@ -461,7 +464,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Usage limit
@@ -499,7 +502,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Expires in
@@ -535,6 +538,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
+                    fontWeight: "500",
                   }}
                 >
                   Auto-assigned groups

src/components/UserEdit.tsx

@@ -192,25 +192,29 @@ const UserEdit = () => {
 
     const showConfirmDelete = (token: TokenDataTable) => {
         confirmModal.confirm({
-            icon: <ExclamationCircleOutlined/>,
-            title: "Delete token \"" + token.name + "\"",
-            width: 600,
-            content: <Space direction="vertical" size="small">
-                <Paragraph>Are you sure you want to delete this token?</Paragraph>
-            </Space>,
-            onOk() {
-                dispatch(personalAccessTokenActions.deletePersonalAccessToken.request({
-                    getAccessTokenSilently: getTokenSilently,
-                    payload: {
-                        user_id: user.id,
-                        id: token.id,
-                        name: token.name,
-                    } as SpecificPAT
-                }));
-            },
-            onCancel() {
-                // noop
-            },
+          icon: <ExclamationCircleOutlined />,
+          title: <span className="font-500">Delete token {token.name}</span>,
+          width: 600,
+          content: (
+            <Space direction="vertical" size="small">
+              <Paragraph>Are you sure you want to delete this token?</Paragraph>
+            </Space>
+          ),
+          onOk() {
+            dispatch(
+              personalAccessTokenActions.deletePersonalAccessToken.request({
+                getAccessTokenSilently: getTokenSilently,
+                payload: {
+                  user_id: user.id,
+                  id: token.id,
+                  name: token.name,
+                } as SpecificPAT,
+              })
+            );
+          },
+          onCancel() {
+            // noop
+          },
         });
     }
 
@@ -283,10 +287,10 @@ const UserEdit = () => {
 
           <Card
             bordered={true}
-            title={user.name}
             loading={loading}
             style={{ marginBottom: "7px" }}
           >
+            <h3 style={{fontSize:"22px",fontWeight:"500",marginBottom:"25px"}}>{user.name}</h3>
             <div style={{ maxWidth: "800px" }}>
               <Form
                 layout="vertical"
@@ -314,12 +318,12 @@ const UserEdit = () => {
                       <Form.Item
                         name="email"
                         label={<Text style={{}}>Email</Text>}
-                        style={{ marginRight: "70px", fontWeight: "bold" }}
+                        style={{ marginRight: "70px", fontWeight: "500" }}
                       >
                         <Input
                           disabled={user.id}
                           value={formUser.email}
-                          style={{ color: "#8c8c8c"}}
+                          style={{ color: "#8c8c8c" }}
                           autoComplete="off"
                         />
                       </Form.Item>
@@ -328,16 +332,19 @@ const UserEdit = () => {
                   <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
                     <Form.Item
                       name="role"
-                      label={<Text style={{}}>Role</Text>}
-                      style={{ marginRight: "50px", fontWeight: "bold" }}
+                      label={<Text style={{fontWeight:"500"}}>Role</Text>}
+                      style={{ marginRight: "50px", fontWeight: "500" }}
                     >
                       <Select
                         style={{ width: "100%" }}
-
                         disabled={user.is_current}
                       >
-                        <Option value="admin"><Text type={"secondary"}>admin</Text></Option>
-                        <Option value="user"><Text type={"secondary"}>user</Text></Option>
+                        <Option value="admin">
+                          <Text type={"secondary"}>admin</Text>
+                        </Option>
+                        <Option value="user">
+                          <Text type={"secondary"}>user</Text>
+                        </Option>
                       </Select>
                     </Form.Item>
                   </Col>
@@ -356,7 +363,11 @@ const UserEdit = () => {
                     >
                       <Form.Item
                         name="autoGroupsNames"
-                        label={<Text style={{}}>Auto-assigned groups</Text>}
+                        label={
+                          <Text style={{ fontWeight: "500" }}>
+                            Auto-assigned groups
+                          </Text>
+                        }
                         tooltip="Every peer enrolled with this user will be automatically added to these groups"
                         rules={[{ validator: selectValidator }]}
                         style={{ marginRight: "70px" }}
@@ -389,7 +400,7 @@ const UserEdit = () => {
                           valuePropName="checked"
                           name="is_blocked"
                           label="Block user"
-                          style={{ marginRight: "50px", fontWeight: "bold" }}
+                          style={{ marginRight: "50px", fontWeight: "500" }}
                         >
                           <Switch />
                         </Form.Item>
@@ -421,8 +432,8 @@ const UserEdit = () => {
                   style={{
                     textAlign: "left",
                     whiteSpace: "pre-line",
-                    fontSize: "16px",
-                    fontWeight: "bold",
+                    fontSize: "18px",
+                    fontWeight: "500",
                   }}
                 >
                   Access tokens

src/components/popups/AddPATPopup.tsx

@@ -116,7 +116,7 @@ const AddPATPopup = () => {
             >
                 <Container style={{textAlign: "start", marginLeft: "-15px", marginRight: "-15px"}}>
                     <Paragraph
-                        style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px"}}>
+                        style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "18px",fontWeight:"500"}}>
                         {showPlainToken ? "Token created successfully!" : "Create token"}
                     </Paragraph>
                     {!showPlainToken && <Paragraph type={"secondary"}
@@ -142,7 +142,7 @@ const AddPATPopup = () => {
                             <Col span={24}>
                                 <Row align="top">
                                     <Col flex="auto">
-                                        <Paragraph style={{fontWeight: "bold", marginTop: "-10px"}}>Name</Paragraph>
+                                        <Paragraph style={{fontWeight: "500", marginTop: "-10px"}}>Name</Paragraph>
                                         <Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Set an easily identifiable name for your token</Paragraph>
                                         <Form.Item
                                             name="name"
@@ -162,7 +162,7 @@ const AddPATPopup = () => {
                                 </Row>
                             </Col>
                             <Col span={24} style={{textAlign: "left", marginTop: "10px"}}>
-                                <Paragraph style={{fontWeight: "bold", marginTop: "-10px"}}>Expires in</Paragraph>
+                                <Paragraph style={{fontWeight: "500", marginTop: "-10px"}}>Expires in</Paragraph>
                                 <Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Number of days this token will be valid for</Paragraph>
                                 <Form.Item
                                     name="expires_in"

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

@@ -79,7 +79,7 @@ export const AddPeerPopup: React.FC<Props> = ({
                        textAlign: "center",
                        whiteSpace: "pre-line",
                    }}>
-            To get started install NetBird and log in using your {"\n"} email account.
+            To get started, install NetBird and log in using your {"\n"} email account.
         </Paragraph>
 
         <Tabs centered={!isMobile}

src/components/popups/addpeer/addpeer/DockerTab.tsx

@@ -11,32 +11,45 @@ const {Title, Paragraph, Text} = Typography;
 export const DockerTab = () => {
 
     const [steps, setSteps] = useState([
-        {
-            key: 1,
-            title: 'Install Docker',
-            commands: (
-                <Button style={{marginTop: "5px"}} type="primary" href="https://docs.docker.com/engine/install/" target="_blank">Official Docker website</Button>
-            ),
-            copied: false,
-            showCopyButton: false
-        } as StepCommand,
-        {
-            key: 2,
-            title: 'Run NetBird container',
-            commands: formatDockerCommand(),
-            copied: false,
-            showCopyButton: false
-        } as StepCommand,
-        {
-            key: 3,
-            title: "Read docs",
-            commands: (
-                <Link href="https://docs.netbird.io/how-to/getting-started#running-net-bird-in-docker" target="_blank">Running NetBird in Docker</Link>
-            ),
-            copied: false,
-            showCopyButton: false
-        } as StepCommand
-    ])
+      {
+        key: 1,
+        title: "Install Docker",
+        commands: (
+          <Button
+            style={{ marginTop: "5px" }}
+            type="primary"
+            href="https://docs.docker.com/engine/install/"
+            target="_blank"
+          >
+            Official Docker website
+          </Button>
+        ),
+        copied: false,
+        showCopyButton: false,
+      } as StepCommand,
+      {
+        key: 2,
+        title: "Run NetBird container",
+        commands: formatDockerCommand(),
+        commandsForCopy: formatDockerCommand(),
+        copied: false,
+        showCopyButton: false,
+      } as StepCommand,
+      {
+        key: 3,
+        title: "Read docs",
+        commands: (
+          <Link
+            href="https://docs.netbird.io/how-to/getting-started#running-net-bird-in-docker"
+            target="_blank"
+          >
+            Running NetBird in Docker
+          </Link>
+        ),
+        copied: false,
+        showCopyButton: false,
+      } as StepCommand,
+    ]);
 
     return (
         <div style={{marginTop: 10}}>

src/components/popups/addpeer/addpeer/LinuxTab.tsx

@@ -1,28 +1,28 @@
-import { useState } from 'react';
+import { useState } from "react";
 
 import { Button } from "antd";
 import TabSteps from "./TabSteps";
-import { StepCommand } from "./types"
-
+import { StepCommand } from "./types";
 
 export const OtherTab = () => {
+  const [steps, _] = useState([
+    {
+      key: 1,
+      title: "For other installation options check our documentation.",
+      commands: (
+        <Button
+          type="primary"
+          href={`https://docs.netbird.io/how-to/getting-started#binary-install`}
+          target="_blank"
+        >
+          Documentation
+        </Button>
+      ),
+      copied: false,
+    } as StepCommand,
+  ]);
 
-    const [steps, _] = useState([
-        {
-            key: 1,
-            title: 'For other installation options check our documentation.',
-            commands: (
-                <Button type="primary" href={`https://docs.netbird.io/how-to/getting-started#binary-install`} target="_blank">
-                    Documentation
-                </Button>
-            ),
-            copied: false,
-        } as StepCommand,
-    ])
+  return <TabSteps stepsItems={steps} />;
+};
 
-    return (
-        <TabSteps stepsItems={steps} />
-    )
-}
-
-export default OtherTab
+export default OtherTab;

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

@@ -1,136 +1,211 @@
-import React, {useState} from 'react';
+import React, { useState } from "react";
 
-import {Button, Divider, Row, Tooltip, 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 { StepCommand } from "./types";
+import { formatNetBirdUP } from "./common";
+import { Collapse } from "antd";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import {QuestionCircleOutlined} from "@ant-design/icons";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import { CheckOutlined, CopyOutlined } from "@ant-design/icons";
+import { copyToClipboard } from "../../../../utils/common";
 
-const {Panel} = Collapse;
+const { Panel } = Collapse;
 
-const {Text} = Typography;
+const { Text } = Typography;
 
 export const LinuxTab = () => {
+  const [copied, setCopied] = useState(false);
+  const [quickSteps, setQuickSteps] = useState([
+    {
+      key: 1,
+      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: (
+        <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,
+    {
+      key: 2,
+      title: 'Click on "Connect" from the NetBird icon in your system tray',
+      commands: "",
+      copied: false,
+      showCopyButton: false,
+    },
+    {
+      key: 3,
+      title: "Sign up using your email address",
+      commands: "",
+      copied: false,
+      showCopyButton: false,
+    },
+  ]);
 
-    const [quickSteps, setQuickSteps] = useState([
-        {
-            key: 1,
-            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>
+  const [steps, setSteps] = useState([
+    {
+      key: 1,
+      title: "Download and install Homebrew",
+      commands: (
+        <Button
+          style={{ marginTop: "5px" }}
+          type="primary"
+          href="https://brew.sh/"
+          target="_blank"
+        >
+          Download Brew
+        </Button>
+      ),
+      copied: false,
+    } as StepCommand,
+    {
+      key: 2,
+      title: "Install NetBird:",
+      commands: [
+        `# for CLI only`,
+        `brew install netbirdio/tap/netbird`,
+        `# for GUI package`,
+        `brew install --cask netbirdio/tap/netbird-ui`,
+      ].join("\n"),
+      commandsForCopy: [
+        `brew install netbirdio/tap/netbird`,
+        `brew install --cask netbirdio/tap/netbird-ui`,
+      ].join("\n"),
+      copied: false,
+      showCopyButton: true,
+    } as StepCommand,
+    {
+      key: 3,
+      title: "Start NetBird daemon:",
+      commands: [
+        `sudo netbird service install`,
+        `sudo netbird service start`,
+      ].join("\n"),
+      commandsForCopy: [
+        `sudo netbird service install`,
+        `sudo netbird service start`,
+      ].join("\n"),
+      copied: false,
+      showCopyButton: true,
+    } as StepCommand,
+    {
+      key: 4,
+      title: "Run NetBird and log in the browser:",
+      commands: formatNetBirdUP(),
+      commandsForCopy: formatNetBirdUP(),
+      copied: false,
+      showCopyButton: true,
+    } as StepCommand,
+  ]);
 
-            ),
-            commands: (
-                <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,
-        {
-            key: 2,
-            title: 'Click on "Connect" from the NetBird icon in your system tray',
-            commands: '',
-            copied: false,
-            showCopyButton: false
-        },
-        {
-            key: 3,
-            title: 'Sign up using your email address',
-            commands: '',
-            copied: false,
-            showCopyButton: false
-        }
-    ])
-
-    const [steps, setSteps] = useState([
-        {
-            key: 1,
-            title: 'Download and install Homebrew',
-            commands: (
-                <Button style={{marginTop: "5px"}} type="primary" href="https://brew.sh/" target="_blank">Download
-                    Brew</Button>
-            ),
-            copied: false
-        } as StepCommand,
-        {
-            key: 2,
-            title: 'Install NetBird:',
-            commands: [
-                `# for CLI only`,
-                `brew install netbirdio/tap/netbird`,
-                `# for GUI package`,
-                `brew install --cask netbirdio/tap/netbird-ui`
-            ].join('\n'),
-            copied: false,
-            showCopyButton: true
-        } as StepCommand,
-        {
-            key: 3,
-            title: 'Start NetBird daemon:',
-            commands: [
-                `sudo netbird service install`,
-                `sudo netbird service start`
-            ].join('\n'),
-            copied: false,
-            showCopyButton: true
-        } as StepCommand,
-        {
-            key: 4,
-            title: 'Run NetBird and log in the browser:',
-            commands: formatNetBirdUP(),
-            copied: false,
-            showCopyButton: true
-        } as StepCommand
-    ])
-    return (
-        <div style={{marginTop: 10}}>
-            <Text style={{fontWeight: "bold"}}>
-                Install on MacOS
-            </Text>
-            <div style={{marginTop: 5, marginBottom: 5}}>
-                <TabSteps stepsItems={quickSteps}/>
+  const onCopyClick = () => {
+    const stringToCopy = "curl -fsSL https://pkgs.netbird.io/install.sh | sh";
+    copyToClipboard(stringToCopy);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+    
+  return (
+    <div style={{ marginTop: 10 }}>
+      <Text style={{ fontWeight: "bold" }}>Install on MacOS</Text>
+      <div style={{ marginTop: 5, marginBottom: 5 }}>
+        <TabSteps stepsItems={quickSteps} />
+      </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,
+                position: "relative",
+              }}
+            >
+              {!copied ? (
+                <Button
+                  type="text"
+                  size="middle"
+                  className="btn-copy-code peer"
+                  icon={<CopyOutlined />}
+                  style={{ color: "rgb(107, 114, 128)", top: "0", zIndex: "3" }}
+                  onClick={onCopyClick}
+                />
+              ) : (
+                <Button
+                  type="text"
+                  size="middle"
+                  className="btn-copy-code peer"
+                  icon={<CheckOutlined />}
+                  style={{ color: "green", top: "0", zIndex: "3" }}
+                />
+              )}
+              <SyntaxHighlighter language="bash">
+                curl -fsSL https://pkgs.netbird.io/install.sh | sh
+              </SyntaxHighlighter>
             </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>
-    )
-}
+            <Text style={{ fontWeight: "bold" }}>
+              Or install manually with HomeBrew
+            </Text>
+            <div style={{ marginTop: 5 }}>
+              <TabSteps stepsItems={steps} />
+            </div>
+          </div>
+        </Panel>
+      </Collapse>
+    </div>
+  );
+};
 
-export default LinuxTab
+export default LinuxTab;