Projects Refinements (#2949)

frontend/app/components/Client/CustomFields/CustomFieldForm.js

@@ -15,7 +15,7 @@ const CustomFieldForm = ({ field, saving, errors, edit, save, onSave, onClose, o
 
   return (
     <div className="bg-white h-screen overflow-y-auto">
-      <h3 className="p-5 text-2xl">{exists ? 'Update' : 'Add'} Metadata Field</h3>
+      <h3 className="p-5 text-xl">{exists ? 'Update' : 'Add'} Metadata Field</h3>
       <Form className={styles.wrapper}>
         <Form.Field>
           <label>{'Field Name'}</label>

frontend/app/components/Client/CustomFields/CustomFieldForm.tsx

@@ -51,7 +51,7 @@ const CustomFieldForm: React.FC<CustomFieldFormProps> = ({ siteId }) => {
 
   return (
     <div className="bg-white h-screen overflow-y-auto">
-      <h3 className="p-5 text-2xl">{exists ? 'Update' : 'Add'} Metadata Field</h3>
+      <h3 className="p-5 text-xl">{exists ? 'Update' : 'Add'} Metadata Field</h3>
       <Form className={styles.wrapper}>
         <Form.Field>
           <label>{'Field Name'}</label>
@@ -60,7 +60,7 @@ const CustomFieldForm: React.FC<CustomFieldFormProps> = ({ siteId }) => {
             name="key"
             value={field?.key}
             onChange={write}
-            placeholder="Field Name"
+            placeholder="E.g. plan"
             maxLength={50}
           />
         </Form.Field>
@@ -76,7 +76,7 @@ const CustomFieldForm: React.FC<CustomFieldFormProps> = ({ siteId }) => {
             >
               {exists ? 'Update' : 'Add'}
             </Button>
-            <Button data-hidden={!exists} onClick={hideModal}>
+            <Button type='text' data-hidden={!exists} onClick={hideModal}>
               {'Cancel'}
             </Button>
           </div>

frontend/app/components/Client/CustomFields/CustomFields.tsx

@@ -6,6 +6,7 @@ import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { List, Space, Typography, Button, Tooltip } from 'antd';
 import { PencilIcon, PlusIcon, Tags } from 'lucide-react';
+import {EditOutlined } from '@ant-design/icons';
 import usePageTitle from '@/hooks/usePageTitle';
 import { Empty } from '.store/antd-virtual-7db13b4af6/package';
 
@@ -37,7 +38,7 @@ const CustomFields = () => {
     <div className="flex flex-col gap-6">
       <Typography.Text>
         Attach key-value pairs to session replays for enhanced filtering, searching, and identifying relevant user
-        sessions. Learn More.
+        sessions.
         <a href="https://docs.openreplay.com/installation/metadata" className="link ml-1" target="_blank">
           Learn more
         </a>
@@ -47,7 +48,7 @@ const CustomFields = () => {
         <Tooltip
           title={remaining > 0 ? '' : 'You\'ve reached the limit of 10 metadata.'}
         >
-          <Button icon={<PlusIcon size={18} />} type="primary"
+          <Button icon={<PlusIcon size={18} />} type="primary" size='small'
                   disabled={remaining === 0}
                   onClick={() => handleInit()}>
             Add Metadata
@@ -70,7 +71,7 @@ const CustomFields = () => {
             onClick={() => handleInit(field)}
             className="cursor-pointer group hover:bg-active-blue !px-4"
             actions={[
-              <Button className="opacity-0 group-hover:!opacity-100" icon={<PencilIcon size={14} />} />
+              <Button type='link' className="opacity-0 group-hover:!opacity-100" icon={<EditOutlined size={14} />} />
             ]}
           >
             <List.Item.Meta

frontend/app/components/Client/Projects/ProjectList.tsx

@@ -3,8 +3,8 @@ import { Avatar, Button, Input, Menu, MenuProps, Progress, Typography, Tooltip }
 import { useStore } from '@/mstore';
 import Project from '@/mstore/types/project';
 import { observer } from 'mobx-react-lite';
-import { AppWindowMac, EditIcon, Smartphone,  } from 'lucide-react';
-import {PlusOutlined, SearchOutlined, EditOutlined} from '@ant-design/icons'
+import { Globe, Smartphone,  } from 'lucide-react';
+import {SearchOutlined, EditOutlined} from '@ant-design/icons'
 import ProjectForm from 'Components/Client/Projects/ProjectForm';
 import { useModal } from 'Components/ModalContext';
 
@@ -51,20 +51,13 @@ const ProjectList: React.FC = () => {
     )
   }));
 
-  const createProject = () => {
-    openModal(<ProjectForm onClose={closeModal} project={new Project()} />, {
-      title: 'New Project'
-    });
-  };
+
 
   return (
     <div className="h-full flex flex-col gap-4">
       <div className="flex flex-row gap-2 items-center p-3">
-        <Tooltip title='Create Project' placement='bottom'>
-          <Button onClick={createProject} type='primary' ghost size='middle' shape="circle" icon={<PlusOutlined size={16}/>}></Button>
-        </Tooltip>
         <Input
-          placeholder="Search projects"
+          placeholder="Search"
           // onSearch={handleSearch}
           prefix={<SearchOutlined />}
           onChange={(e) => setSearch(e.target.value)}
@@ -111,7 +104,7 @@ const ProjectIconWithProgress: React.FC<{
         size={26}
         icon={
           platform === 'web' ? (
-            <AppWindowMac size={16} color="teal" />
+            <Globe size={16} color="teal" />
           ) : (
             <Smartphone size={16} color="teal" />
           )

frontend/app/components/Client/Projects/ProjectTags.tsx

@@ -2,7 +2,8 @@ import React, { useEffect } from 'react';
 import { useStore } from '@/mstore';
 import { List, Button, Typography, Space, Empty } from 'antd';
 import { observer } from 'mobx-react-lite';
-import { PencilIcon, ScanSearch } from 'lucide-react';
+import { ScanSearch } from 'lucide-react';
+import {EditOutlined} from '@ant-design/icons'
 import { useModal } from 'Components/ModalContext';
 import TagForm from 'Components/Client/Projects/TagForm';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
@@ -46,7 +47,7 @@ function ProjectTags() {
           <List.Item
             className="cursor-pointer group hover:bg-active-blue !px-4"
             actions={[
-              <Button className="opacity-0 group-hover:!opacity-100" icon={<PencilIcon size={14} />} />
+              <Button type='link' className="opacity-0 group-hover:!opacity-100" icon={<EditOutlined size={14} />} />
             ]}
             onClick={() => handleInit(item)}
           >

frontend/app/components/Client/Projects/Projects.tsx

@@ -5,7 +5,7 @@ import ProjectTabs from 'Components/Client/Projects/ProjectTabs';
 import { useHistory } from 'react-router-dom';
 import { useStore } from '@/mstore';
 import { observer } from 'mobx-react-lite';
-import { KeyIcon, PlusIcon } from 'lucide-react';
+import {PlusOutlined, KeyOutlined} from '@ant-design/icons'
 import ProjectTabContent from 'Components/Client/Projects/ProjectTabContent';
 import { useModal } from 'Components/ModalContext';
 import ProjectForm from 'Components/Client/Projects/ProjectForm';
@@ -37,6 +37,11 @@ function Projects() {
     history.push({ search: params.toString() });
   }, [pid, tab]);
 
+  const createProject = () => {
+    openModal(<ProjectForm onClose={closeModal} project={new Project()} />, {
+      title: 'Add Project'
+    });
+  };
 
   return (
     <Card
@@ -47,7 +52,8 @@ function Projects() {
         body: '!p-0 !border-t',
       }}
       title={<Typography.Title level={4} className="!m-0">Projects</Typography.Title>}
-    >
+      extra={<Button onClick={createProject} type='default' size='middle' icon={<PlusOutlined size={16}/>}>Add Project</Button>}
+       >
       <Layout>
         <Layout.Sider width={260} trigger={null}
                       className="!bg-white border-r">
@@ -97,7 +103,7 @@ function ProjectKeyButton({ project }: { project: Project | null }) {
 
   return (
     <Tooltip title="Copy Project Key">
-      <Button onClick={copyKey} icon={<KeyIcon size={14} />} size="small" />
+      <Button onClick={copyKey} icon={<KeyOutlined size={14} />} size="small" />
     </Tooltip>
   );
 }

frontend/app/components/Client/Projects/TagForm.tsx

@@ -44,7 +44,7 @@ function TagForm(props: Props) {
 
   return (
     <Form layout="vertical">
-      <Form.Item label="Name:">
+      <Form.Item label="Name:" className='font-medium'>
         <Input
           autoFocus
           name="name"
@@ -52,6 +52,7 @@ function TagForm(props: Props) {
           onChange={write}
           placeholder="Name"
           maxLength={50}
+          className='font-normal rounded-lg'
         />
       </Form.Item>
 
@@ -62,11 +63,11 @@ function TagForm(props: Props) {
             disabled={name.length === 0 || name === tag.name || loading}
             loading={loading}
             type="primary"
-            className="float-left mr-2"
+            className="float-left mr-1"
           >
             Update
           </Button>
-          <Button onClick={closeModal}>
+          <Button type='text' onClick={closeModal}>
             Cancel
           </Button>
         </Space>