From 34d3c452c16f9e69f3f0df42b3274dbbfcb2cd83 Mon Sep 17 00:00:00 2001
From: Abhishek Bindra <35190737+Abhi3685@users.noreply.github.com>
Date: Tue, 10 Oct 2023 02:16:37 +0530
Subject: [PATCH] Objects Settings - Add the "New object" button (#1928)

* Objects Settings - Add the "New object" button

* addressing review comments
---
 .../ui/typography/components/H1Title.tsx      | 10 ++++++-
 front/src/pages/settings/SettingsObjects.tsx  | 26 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/front/src/modules/ui/typography/components/H1Title.tsx b/front/src/modules/ui/typography/components/H1Title.tsx
index 063546d42..c0adc8ceb 100644
--- a/front/src/modules/ui/typography/components/H1Title.tsx
+++ b/front/src/modules/ui/typography/components/H1Title.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 type H1TitleProps = {
   title: string;
   fontColor?: H1TitleFontColor;
+  className?: string;
 };
 
 export enum H1TitleFontColor {
@@ -25,4 +26,11 @@ const StyledTitle = styled.h2<{
 export const H1Title = ({
   title,
   fontColor = H1TitleFontColor.Tertiary,
-}: H1TitleProps) => <StyledTitle fontColor={fontColor}>{title}</StyledTitle>;
+  className,
+}: H1TitleProps) => {
+  return (
+    <StyledTitle fontColor={fontColor} className={className}>
+      {title}
+    </StyledTitle>
+  );
+};
diff --git a/front/src/pages/settings/SettingsObjects.tsx b/front/src/pages/settings/SettingsObjects.tsx
index 0e5bdfdd1..d5d5e965c 100644
--- a/front/src/pages/settings/SettingsObjects.tsx
+++ b/front/src/pages/settings/SettingsObjects.tsx
@@ -2,12 +2,14 @@ import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { Button } from '@/ui/button/components/Button';
 import {
   IconBuildingSkyscraper,
   IconChevronRight,
   IconDotsVertical,
   IconLuggage,
   IconPlane,
+  IconPlus,
   IconSettings,
   IconUser,
 } from '@/ui/icon';
@@ -55,6 +57,17 @@ const StyledIconDotsVertical = styled(IconDotsVertical)`
   color: ${({ theme }) => theme.font.color.tertiary};
 `;
 
+const StyledHeader = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.spacing(8)};
+`;
+
+const StyledH1Title = styled(H1Title)`
+  margin-bottom: 0;
+`;
+
 const activeObjectItems = [
   {
     name: 'Companies',
@@ -96,7 +109,18 @@ export const SettingsObjects = () => {
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <StyledContainer>
-        <H1Title title="Objects" />
+        <StyledHeader>
+          <StyledH1Title title="Objects" />
+          <Button
+            Icon={IconPlus}
+            title="New object"
+            accent="blue"
+            size="small"
+            onClick={() => {
+              navigate('/settings/objects/new');
+            }}
+          />
+        </StyledHeader>
         <H2Title title="Existing objects" />
         <Table>
           <StyledTableRow>