remove formatted expiry logic and fix sent expires_in (#220)

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

.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/AccessControlNew.tsx

@@ -29,7 +29,7 @@ import { uniq } from "lodash";
 import { Header } from "antd/es/layout/layout";
 import { RuleObject } from "antd/lib/form";
 import { useGetTokenSilently } from "../utils/token";
-import {useGetGroupTagHelpers} from "../utils/groups";
+import { useGetGroupTagHelpers } from "../utils/groups";
 
 const { Paragraph } = Typography;
 const { Option } = Select;
@@ -50,11 +50,8 @@ interface FormPolicy {
 }
 
 const AccessControlNew = () => {
-  const {
-    optionRender,
-      grayTagRender,
-      blueTagRender
-  } = useGetGroupTagHelpers()
+  const { optionRender, grayTagRender, blueTagRender } =
+    useGetGroupTagHelpers();
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
   const setupNewPolicyVisible = useSelector(
@@ -71,6 +68,8 @@ const AccessControlNew = () => {
     { label: "UDP", value: "udp" },
     { label: "ICMP", value: "icmp" },
   ];
+  const formPolicyCopy: any = ["ALL"];
+
   const policy = useSelector((state: RootState) => state.policy.policy);
   const savedPolicy = useSelector(
     (state: RootState) => state.policy.savedPolicy
@@ -274,9 +273,7 @@ const AccessControlNew = () => {
       <Divider style={{ margin: "8px 0" }} />
       <Row style={{ padding: "0 8px 4px" }}>
         <Col flex="auto">
-          <Text type={"secondary"}>
-            Add new ports by pressing "Enter"
-          </Text>
+          <Text type={"secondary"}>Add new ports by pressing "Enter"</Text>
         </Col>
         <Col flex="none">
           <svg
@@ -458,19 +455,20 @@ const AccessControlNew = () => {
                     style={{
                       textAlign: "start",
                       whiteSpace: "pre-line",
-                      fontSize: "22px",
+                      fontSize: "18px",
                       margin: "0px",
+                      fontWeight: "500",
                     }}
                   >
                     Create Rule
                   </Paragraph>
                   <Paragraph
-                      type={"secondary"}
-                      style={{
-                        textAlign: "start",
-                        whiteSpace: "pre-line",
-                        paddingBottom: "15px",
-                      }}
+                    type={"secondary"}
+                    style={{
+                      textAlign: "start",
+                      whiteSpace: "pre-line",
+                      paddingBottom: "15px",
+                    }}
                   >
                     Use this rule to restrict access to groups of resources
                   </Paragraph>
@@ -480,7 +478,7 @@ const AccessControlNew = () => {
                         style={{
                           whiteSpace: "pre-line",
                           margin: 0,
-                          fontWeight: "bold",
+                          fontWeight: "500",
                         }}
                       >
                         Rule name
@@ -531,7 +529,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 +551,7 @@ const AccessControlNew = () => {
                       name="tagSourceGroups"
                       label="Source"
                       rules={[{ validator: selectValidator }]}
-                      style={{ fontWeight: "600" }}
+                      style={{ fontWeight: "500" }}
                     >
                       <Select
                         mode="tags"
@@ -706,7 +704,7 @@ const AccessControlNew = () => {
                       name="tagDestinationGroups"
                       label="Destination"
                       rules={[{ validator: selectValidator }]}
-                      style={{ fontWeight: "600" }}
+                      style={{ fontWeight: "500" }}
                     >
                       <Select
                         mode="tags"
@@ -726,24 +724,25 @@ const AccessControlNew = () => {
               </Col>
               <Col span={24}>
                 <Paragraph
-                    type={"secondary"}
-                    style={{  marginTop: "-15px", marginBottom: "30px" }}
+                  type={"secondary"}
+                  style={{ marginTop: "-15px", marginBottom: "30px" }}
                 >
-                  To change traffic direction and ports, select TCP or UDP protocol below
+                  To change traffic direction and ports, select TCP or UDP
+                  protocol below
                 </Paragraph>
               </Col>
               <Col span={24}>
                 <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 +766,7 @@ const AccessControlNew = () => {
                     style={{
                       color: "rgba(0, 0, 0, 0.88)",
                       fontSize: "14px",
-                      fontWeight: "600",
+                      fontWeight: "500",
                     }}
                   >
                     Ports
@@ -776,57 +775,80 @@ const AccessControlNew = () => {
                     type={"secondary"}
                     style={{
                       marginTop: "-5px",
-                      fontWeight: "500",
+                      fontWeight: "400",
                       marginBottom: "8px",
                     }}
                   >
                     Allow network traffic and access only to specified ports
                   </Paragraph>
                 </div>
-                <Form.Item
-                  name="ports"
-                  label=""
-                  style={{ fontWeight: "600" }}
-                  rules={[
-                    {
-                      message: "Directional traffic requires at least one port",
-                      validator: selectPortProtocolValidator,
-                      required: false,
-                    },
-                    {
-                      message: "Port value must be in 1..65535 range",
-                      validator: selectPortRangeValidator,
-                      required: false,
-                    },
-                  ]}
-                >
-                  <Select
-                    mode="tags"
-                    style={{
-                      width: "100%",
-                      maxWidth: "280px",
-                      fontWeight: "500",
-                    }}
-                    className="menlo-font"
-                    placeholder={ (formPolicy.protocol === "all" || formPolicy.protocol === "icmp") ? "Change protocol to add ports" : "Add ports"}
-                    tagRender={grayTagRender}
-                    onChange={handleChangePorts}
-                    dropdownRender={dropDownRenderPorts}
-                    disabled={
-                      formPolicy.protocol === "all" ||
-                      formPolicy.protocol === "icmp"
-                    }
+
+                {formPolicy.protocol === "all" ||
+                formPolicy.protocol === "icmp" ? (
+                  <Form.Item>
+                    <Select
+                      mode="tags"
+                      style={{
+                        width: "100%",
+                        maxWidth: "260px",
+                        fontWeight: "500",
+                      }}
+                      placeholder={<Text>Select ports</Text>}
+                      className="menlo-font"
+                      value={formPolicyCopy}
+                      disabled={true}
+                    ></Select>
+                  </Form.Item>
+                ) : (
+                  <Form.Item
+                    name="ports"
+                    label=""
+                    style={{ fontWeight: "500" }}
+                    rules={[
+                      {
+                        message:
+                          "Directional traffic requires at least one port",
+                        validator: selectPortProtocolValidator,
+                        required: false,
+                      },
+                      {
+                        message: "Port value must be in 1..65535 range",
+                        validator: selectPortRangeValidator,
+                        required: false,
+                      },
+                    ]}
                   >
-                    {formPolicy &&
-                      formPolicy.ports?.map((m) => (
-                        <Option key={m}>
-                          <Tag style={{ marginRight: 3 }}>
-                            {m}
-                          </Tag>
-                        </Option>
-                      ))}
-                  </Select>
-                </Form.Item>
+                    <Select
+                      mode="tags"
+                      style={{
+                        width: "100%",
+                        maxWidth: "280px",
+                        fontWeight: "500",
+                      }}
+                      className="menlo-font"
+                      placeholder={
+                        formPolicy.protocol === "all" ||
+                        formPolicy.protocol === "icmp"
+                          ? "All"
+                          : (<div color={"rgba(0,0,0,0.25)"} className="arimo-font">Select ports</div>)
+                      }
+                      tagRender={grayTagRender}
+                      onChange={handleChangePorts}
+                      dropdownRender={dropDownRenderPorts}
+                      disabled={
+                        formPolicy.protocol === "all" ||
+                        formPolicy.protocol === "icmp"
+                      }
+                    >
+                      {formPolicy &&
+                        formPolicy.ports?.map((m) => (
+                          <Option key={m}>
+                            <Tag style={{ marginRight: 3 }}>{m}</Tag>
+                          </Option>
+                        ))}
+                    </Select>
+                  </Form.Item>
+                )}
               </Col>
               <Col span={24}>
                 <Form.Item name="enabled" label="">
@@ -845,7 +867,7 @@ const AccessControlNew = () => {
                         style={{
                           color: "rgba(0, 0, 0, 0.88)",
                           fontSize: "14px",
-                          fontWeight: "bold",
+                          fontWeight: "500",
                         }}
                       >
                         Enabled
@@ -854,7 +876,7 @@ const AccessControlNew = () => {
                         type={"secondary"}
                         style={{
                           marginTop: "-2",
-                          fontWeight: "500",
+                          fontWeight: "400",
                           marginBottom: "0",
                         }}
                       >
@@ -878,7 +900,7 @@ const AccessControlNew = () => {
                     href="https://docs.netbird.io/how-to/manage-network-access"
                   >
                     {" "}
-                    access controls
+                    Access Controls
                   </a>
                 </Text>
               </Col>

src/components/FooterComponent.tsx

@@ -6,7 +6,7 @@ const { Footer } = Layout
 export default () => {
   return (
       <Footer style={{ textAlign: 'center',  bottom: "0"}}>
-          Copyright © 2022 <a href="https://netbird.io">NetBird Authors</a>
+          Copyright © 2023 <a href="https://netbird.io">NetBird Authors</a>
       </Footer>
   );
-};
+};

src/components/SetupKeyEdit.tsx

@@ -27,27 +27,22 @@ import { RuleObject } from "antd/lib/form";
 import { CustomTagProps } from "rc-select/lib/BaseSelect";
 import { Group } from "../store/group/types";
 import { useGetTokenSilently } from "../utils/token";
-import { expiresInToSeconds, ExpiresInValue } from "../views/ExpiresInInput";
 import moment from "moment";
 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;
-const ExpiresInDefault: ExpiresInValue = { number: 30, interval: "day" };
 
 const customExpiresFormat = (value: Date): string | null => {
   return formatDate(value);
 };
 
 const SetupKeyNew = () => {
-  const {
-    optionRender,
-      blueTagRender
-  } = useGetGroupTagHelpers()
+  const { optionRender, blueTagRender } = useGetGroupTagHelpers();
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
 
@@ -62,14 +57,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;
 
@@ -98,7 +93,6 @@ const SetupKeyNew = () => {
     const fSetupKey = {
       ...setupKey,
       autoGroupNames: setupKey.auto_groups ? formKeyGroups : [],
-      expiresInFormatted: ExpiresInDefault,
       exp: moment(setupKey.expires),
       last: moment(setupKey.last_used),
     } as FormSetupKey;
@@ -118,7 +112,7 @@ const SetupKeyNew = () => {
       (s) => !allGroupsNames.includes(s)
     );
 
-    const expiresIn = expiresInToSeconds(formSetupKey.expiresInFormatted);
+    const expiresIn = formSetupKey.expires_in * 24 * 3600 // the api expects seconds while the form returns days
     return {
       id: formSetupKey.id,
       name: formSetupKey.name,
@@ -269,7 +263,7 @@ const SetupKeyNew = () => {
   return (
     <>
       <Breadcrumb
-        style={{ marginBottom: "30px" }}
+        style={{ marginBottom: "25px" }}
         items={[
           {
             title: <a onClick={onBreadcrumbUsersClick}>Setup Keys</a>,
@@ -279,19 +273,17 @@ 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}
             form={form}
             onValuesChange={onChange}
             initialValues={{
-              expiresIn: ExpiresInDefault,
               usage_limit: 1,
             }}
           >
@@ -309,7 +301,7 @@ const SetupKeyNew = () => {
                 <Paragraph
                   style={{
                     whiteSpace: "pre-line",
-                    fontWeight: "bold",
+                    fontWeight: "500",
                     margin: 0,
                   }}
                 >
@@ -340,14 +332,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 +376,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Auto-assigned groups
@@ -414,7 +406,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 +429,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

@@ -26,7 +26,6 @@ import { RuleObject } from "antd/lib/form";
 import { CustomTagProps } from "rc-select/lib/BaseSelect";
 import { Group } from "../store/group/types";
 import { useGetTokenSilently } from "../utils/token";
-import { expiresInToSeconds, ExpiresInValue } from "../views/ExpiresInInput";
 import moment from "moment";
 import { Container } from "./Container";
 import Paragraph from "antd/es/typography/Paragraph";
@@ -36,12 +35,9 @@ import {useGetGroupTagHelpers} from "../utils/groups";
 
 const { Option } = Select;
 const { Text } = Typography;
-const ExpiresInDefault: ExpiresInValue = { number: 30, interval: "day" };
 
 const SetupKeyNew = () => {
-  const {
-    optionRender,
-  } = useGetGroupTagHelpers()
+  const { optionRender, blueTagRender } = useGetGroupTagHelpers();
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
   const setupNewKeyVisible = useSelector(
@@ -90,7 +86,6 @@ const SetupKeyNew = () => {
     const fSetupKey = {
       ...setupKey,
       autoGroupNames: setupKey.auto_groups ? formKeyGroups : [],
-      expiresInFormatted: ExpiresInDefault,
       exp: moment(setupKey.expires),
       last: moment(setupKey.last_used),
     } as FormSetupKey;
@@ -110,7 +105,7 @@ const SetupKeyNew = () => {
       (s) => !allGroupsNames.includes(s)
     );
 
-    const expiresIn = expiresInToSeconds(formSetupKey.expiresInFormatted);
+    const expiresIn = formSetupKey.expires_in * 24 * 3600 // the api expects seconds we have days
     return {
       id: formSetupKey.id,
       name: formSetupKey.name,
@@ -227,26 +222,6 @@ const SetupKeyNew = () => {
     return Promise.resolve();
   };
 
-  const tagRender = (props: CustomTagProps) => {
-    const { value, closable, onClose } = props;
-    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    return (
-      <Tag
-        color="blue"
-        onMouseDown={onPreventMouseDown}
-        closable={closable}
-        onClose={onClose}
-        style={{ marginRight: 3 }}
-      >
-        <strong>{value}</strong>
-      </Tag>
-    );
-  };
-
   const dropDownRender = (menu: React.ReactElement) => (
     <>
       {menu}
@@ -369,8 +344,9 @@ const SetupKeyNew = () => {
           style={{
             textAlign: "start",
             whiteSpace: "pre-line",
-            fontSize: "22px",
+            fontSize: "18px",
             margin: "0px",
+            fontWeight:"500"
           }}
         >
           {showPlainToken
@@ -382,7 +358,6 @@ const SetupKeyNew = () => {
           style={{
             textAlign: "start",
             whiteSpace: "pre-line",
-            paddingBottom: "15px",
           }}
         >
           {showPlainToken
@@ -396,14 +371,17 @@ const SetupKeyNew = () => {
             form={form}
             onValuesChange={onChange}
             initialValues={{
-              expiresIn: ExpiresInDefault,
+              expires_in: 7,
               usage_limit: 1,
             }}
           >
             <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 +405,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Reusable
@@ -461,7 +439,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Usage limit
@@ -499,7 +477,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Expires in
@@ -507,13 +485,12 @@ const SetupKeyNew = () => {
               </Col>
               <Col>
                 <Form.Item
-                  name="expiresIn"
+                  name="expires_in"
                   rules={[
                     { required: true, message: "Please enter expiration date" },
                   ]}
                 >
                   <InputNumber
-                    defaultValue={7}
                     placeholder={`2`}
                     type="number"
                     addonAfter=" Days"
@@ -535,6 +512,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
+                    fontWeight: "500",
                   }}
                 >
                   Auto-assigned groups
@@ -552,9 +530,9 @@ const SetupKeyNew = () => {
                 >
                   <Select
                     mode="tags"
-                    style={{ width: "100%" }}
+                    style={{ width: "100%"}}
                     placeholder="Associate groups with the key"
-                    tagRender={tagRender}
+                    tagRender={blueTagRender}
                     dropdownRender={dropDownRender}
                     // enabled only when we have a new key !setupkey.id or when the key is valid
                     disabled={!(!setupKey.id || setupKey.valid)}

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;