Fix group change loader (#211)

* remove admin check depending on oidc user on autogroups field

* fix admin check on peers view

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/assets/forward_default.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3846 3.68889C38.5213 3.55221 38.5213 3.3306 38.3846 3.19392L36.1572 0.966532C36.0205 0.829849 35.7989 0.829849 35.6622 0.966532C35.5255 1.10322 35.5255 1.32482 35.6622 1.46151L37.6421 3.44141L35.6622 5.42131C35.5255 5.55799 35.5255 5.7796 35.6622 5.91628C35.7989 6.05296 36.0205 6.05296 36.1572 5.91628L38.3846 3.68889ZM0.703125 3.79141H38.1371V3.09141H0.703125V3.79141Z" fill="#D9D9D9"/>
+</svg>

src/assets/in_bound.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.615425 3.3111C0.478741 3.44779 0.478741 3.66939 0.615425 3.80608L2.84281 6.03346C2.97949 6.17015 3.2011 6.17015 3.33778 6.03346C3.47447 5.89678 3.47447 5.67517 3.33778 5.53849L1.35789 3.55859L3.33778 1.57869C3.47447 1.44201 3.47447 1.2204 3.33778 1.08372C3.2011 0.947033 2.97949 0.947033 2.84281 1.08372L0.615425 3.3111ZM38.2969 3.20859L0.862911 3.20859L0.862911 3.90859L38.2969 3.90859L38.2969 3.20859Z" fill="#2B4DA5"/>
+</svg>

src/assets/out_bound_blue.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3807 3.68889C38.5174 3.55221 38.5174 3.3306 38.3807 3.19392L36.1533 0.966532C36.0166 0.829849 35.795 0.829849 35.6583 0.966532C35.5216 1.10322 35.5216 1.32482 35.6583 1.46151L37.6382 3.44141L35.6583 5.42131C35.5216 5.55799 35.5216 5.7796 35.6583 5.91628C35.795 6.05296 36.0166 6.05296 36.1533 5.91628L38.3807 3.68889ZM0.699219 3.79141L38.1332 3.79141V3.09141L0.699219 3.09141V3.79141Z" fill="#2B4DA5"/>
+</svg>

src/assets/out_bound_green.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3846 3.68889C38.5213 3.55221 38.5213 3.3306 38.3846 3.19392L36.1572 0.966532C36.0205 0.829849 35.7989 0.829849 35.6622 0.966532C35.5255 1.10322 35.5255 1.32482 35.6622 1.46151L37.6421 3.44141L35.6622 5.42131C35.5255 5.55799 35.5255 5.7796 35.6622 5.91628C35.7989 6.05296 36.0205 6.05296 36.1572 5.91628L38.3846 3.68889ZM0.703125 3.79141H38.1371V3.09141H0.703125V3.79141Z" fill="#03543F"/>
+</svg>

src/assets/reverse_default.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.615425 3.3111C0.478741 3.44779 0.478741 3.66939 0.615425 3.80608L2.84281 6.03346C2.97949 6.17015 3.2011 6.17015 3.33778 6.03346C3.47447 5.89678 3.47447 5.67517 3.33778 5.53849L1.35789 3.55859L3.33778 1.57869C3.47447 1.44201 3.47447 1.2204 3.33778 1.08372C3.2011 0.947033 2.97949 0.947033 2.84281 1.08372L0.615425 3.3111ZM38.2969 3.20859L0.862911 3.20859L0.862911 3.90859L38.2969 3.90859L38.2969 3.20859Z" fill="#D9D9D9"/>
+</svg>

src/assets/reverse_green.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.615425 3.3111C0.478741 3.44779 0.478741 3.66939 0.615425 3.80608L2.84281 6.03346C2.97949 6.17015 3.2011 6.17015 3.33778 6.03346C3.47447 5.89678 3.47447 5.67517 3.33778 5.53849L1.35789 3.55859L3.33778 1.57869C3.47447 1.44201 3.47447 1.2204 3.33778 1.08372C3.2011 0.947033 2.97949 0.947033 2.84281 1.08372L0.615425 3.3111ZM38.2969 3.20859L0.862911 3.20859L0.862911 3.90859L38.2969 3.90859L38.2969 3.20859Z" fill="#03543F"/>
+</svg>

src/components/NameServerGroupUpdate.tsx

@@ -41,7 +41,7 @@ interface formNSGroup extends NameServerGroup {
 
 const NameServerGroupUpdate = () => {
     const {
-        tagRender,
+        blueTagRender,
         handleChangeTags,
         dropDownRender,
         optionRender,
@@ -572,7 +572,7 @@ const NameServerGroupUpdate = () => {
                                         <Select mode="tags"
                                                 style={{width: '100%'}}
                                                 placeholder="Associate groups with the NS group"
-                                                tagRender={tagRender}
+                                                tagRender={blueTagRender}
                                                 onChange={handleChangeTags}
                                                 dropdownRender={dropDownRender}
                                         >

src/components/SetupKeyEdit.tsx

@@ -33,6 +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";
 
 const { Option } = Select;
 const { Text } = Typography;
@@ -43,6 +44,7 @@ const customExpiresFormat = (value: Date): string | null => {
 };
 
 const SetupKeyNew = () => {
+  const { optionRender, blueTagRender } = useGetGroupTagHelpers();
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
 
@@ -57,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;
 
@@ -195,46 +197,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 optionRender = (label: string) => {
-    let peersCount = "";
-    const g = groups.find((_g) => _g.name === label);
-
-    if (g) {
-      peersCount = ` - ${g.peers_count || 0} ${
-        !g.peers_count || parseInt(g.peers_count) !== 1 ? "peers" : "peer"
-      } `;
-    }
-
-    return (
-      <>
-        <Tag color="blue" style={{ marginRight: 3 }}>
-          <strong>{label}</strong>
-        </Tag>
-        <span style={{ fontSize: ".85em" }}>{peersCount}</span>
-      </>
-    );
-  };
-
   const dropDownRender = (menu: React.ReactElement) => (
     <>
       {menu}
@@ -304,7 +266,7 @@ const SetupKeyNew = () => {
   return (
     <>
       <Breadcrumb
-        style={{ marginBottom: "30px" }}
+        style={{ marginBottom: "25px" }}
         items={[
           {
             title: <a onClick={onBreadcrumbUsersClick}>Setup Keys</a>,
@@ -314,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}
@@ -344,7 +305,7 @@ const SetupKeyNew = () => {
                 <Paragraph
                   style={{
                     whiteSpace: "pre-line",
-                    fontWeight: "bold",
+                    fontWeight: "500",
                     margin: 0,
                   }}
                 >
@@ -375,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"},
@@ -419,7 +380,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Auto-assigned groups
@@ -435,7 +396,7 @@ const SetupKeyNew = () => {
                       mode="tags"
                       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)}
@@ -449,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>
@@ -472,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

@@ -32,12 +32,16 @@ import { Container } from "./Container";
 import Paragraph from "antd/es/typography/Paragraph";
 import { CheckOutlined, CopyOutlined } from "@ant-design/icons";
 import { copyToClipboard } from "../utils/common";
+import {useGetGroupTagHelpers} from "../utils/groups";
 
 const { Option } = Select;
 const { Text } = Typography;
 const ExpiresInDefault: ExpiresInValue = { number: 30, interval: "day" };
 
 const SetupKeyNew = () => {
+  const {
+    optionRender,
+  } = useGetGroupTagHelpers()
   const { getTokenSilently } = useGetTokenSilently();
   const dispatch = useDispatch();
   const setupNewKeyVisible = useSelector(
@@ -243,26 +247,6 @@ const SetupKeyNew = () => {
     );
   };
 
-  const optionRender = (label: string) => {
-    let peersCount = "";
-    const g = groups.find((_g) => _g.name === label);
-
-    if (g) {
-      peersCount = ` - ${g.peers_count || 0} ${
-        !g.peers_count || parseInt(g.peers_count) !== 1 ? "peers" : "peer"
-      } `;
-    }
-
-    return (
-      <>
-        <Tag color="blue" style={{ marginRight: 3 }}>
-          <strong>{label}</strong>
-        </Tag>
-        <span style={{ fontSize: ".85em" }}>{peersCount}</span>
-      </>
-    );
-  };
-
   const dropDownRender = (menu: React.ReactElement) => (
     <>
       {menu}
@@ -385,8 +369,9 @@ const SetupKeyNew = () => {
           style={{
             textAlign: "start",
             whiteSpace: "pre-line",
-            fontSize: "22px",
+            fontSize: "18px",
             margin: "0px",
+            fontWeight:"500"
           }}
         >
           {showPlainToken
@@ -398,7 +383,6 @@ const SetupKeyNew = () => {
           style={{
             textAlign: "start",
             whiteSpace: "pre-line",
-            paddingBottom: "15px",
           }}
         >
           {showPlainToken
@@ -418,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>
@@ -443,7 +430,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Reusable
@@ -477,7 +464,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Usage limit
@@ -515,7 +502,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Expires in
@@ -551,7 +538,7 @@ const SetupKeyNew = () => {
                   style={{
                     whiteSpace: "pre-line",
                     margin: 0,
-                    fontWeight: "bold",
+                    fontWeight: "500",
                   }}
                 >
                   Auto-assigned groups

src/components/UserEdit.tsx

@@ -28,9 +28,9 @@ import tableSpin from "./Spin";
 import AddPATPopup from "./popups/AddPATPopup";
 import {fullDate} from "../utils/common";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
-import {Container} from "./Container";
 import Column from "antd/lib/table/Column";
 import {useOidcUser} from "@axa-fr/react-oidc";
+import {useGetGroupTagHelpers} from "../utils/groups";
 
 const {Option} = Select;
 const {Meta} = Card;
@@ -45,6 +45,10 @@ interface TokenDataTable extends PersonalAccessToken {
 const UserEdit = () => {
     const {getTokenSilently} = useGetTokenSilently()
     const dispatch = useDispatch()
+    const {
+        optionRender,
+        blueTagRender
+    } = useGetGroupTagHelpers()
 
     const groups = useSelector((state: RootState) => state.group.data)
     const users = useSelector((state: RootState) => state.user.data)
@@ -151,26 +155,6 @@ const UserEdit = () => {
         return Promise.resolve()
     }
 
-    const tagRender = (props: CustomTagProps) => {
-        const {label, 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}
@@ -190,23 +174,6 @@ const UserEdit = () => {
         </>
     )
 
-    const optionRender = (label: string) => {
-        let peersCount = ''
-        const g = groups.find(_g => _g.name === label)
-        if (g) peersCount = ` - ${g.peers_count || 0} ${(!g.peers_count || parseInt(g.peers_count) !== 1) ? 'peers' : 'peer'} `
-        return (
-            <>
-                <Tag
-                    color="blue"
-                    style={{marginRight: 3}}
-                >
-                    <strong>{label}</strong>
-                </Tag>
-                <span style={{fontSize: ".85em"}}>{peersCount}</span>
-            </>
-        )
-    }
-
     const transformTokenTable = (d: PersonalAccessToken[]): TokenDataTable[] => {
         if (!d) {
             return []
@@ -225,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
+          },
         });
     }
 
@@ -291,11 +262,6 @@ const UserEdit = () => {
         }
     }, [form, user, currentGroups])
 
-
-    const isUserAdmin = (userId: string): boolean => {
-        return users.find(u => u.id === userId)?.role === "admin"
-    }
-
     return (
       <>
         <div style={{ paddingTop: "13px" }}>
@@ -321,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"
@@ -352,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>
@@ -366,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>
@@ -394,17 +363,21 @@ 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", fontWeight: "bold" }}
+                        style={{ marginRight: "70px" }}
                       >
                         <Select
                           mode="tags"
                           placeholder="Associate groups with the user"
-                          tagRender={tagRender}
+                          tagRender={blueTagRender}
                           dropdownRender={dropDownRender}
-                          disabled={oidcUser && !isUserAdmin(oidcUser.sub)}
+                          disabled={!isAdmin}
                         >
                           {tagGroups.map((m) => (
                             <Option key={m}>{optionRender(m)}</Option>
@@ -427,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>
@@ -459,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

@@ -98,22 +98,6 @@ const AddPATPopup = () => {
         }
     }, [savedPersonalAccessToken])
 
-    useEffect(() => {
-        const keyDownHandler = (event: any) => {
-            console.log('User pressed: ', event.key);
-
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                handleFormSubmit();
-            }
-        };
-
-        document.addEventListener('keydown', keyDownHandler);
-
-        return () => {
-            document.removeEventListener('keydown', keyDownHandler);
-        };
-    }, []);
 
     return (
         <>
@@ -132,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"}
@@ -158,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"
@@ -178,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"