From 404f88d8e0fea00e8748f9b96c6400d66456dc1c Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Thu, 9 Nov 2023 19:46:00 +0300
Subject: [PATCH] packages/ui: add Divider apps/web: ui improvements

---
 apps/web/components/Form.tsx | 5 +++--
 packages/ui/background.tsx   | 2 +-
 packages/ui/divider.tsx      | 3 +++
 packages/ui/index.tsx        | 1 +
 4 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 packages/ui/divider.tsx

diff --git a/apps/web/components/Form.tsx b/apps/web/components/Form.tsx
index dba97e8..f797f72 100644
--- a/apps/web/components/Form.tsx
+++ b/apps/web/components/Form.tsx
@@ -1,6 +1,6 @@
 import type { ResponseGetData, ResponseMetaData } from '@/api/ius/types';
 import { mapFieldTypeElement } from '@/config/elements';
-import { Background, Button, ElementContainer } from 'ui';
+import { Background, Button, Divider, ElementContainer } from 'ui';
 
 type Props = {
   readonly data: ResponseGetData;
@@ -35,7 +35,8 @@ export function Form({ data, metaData }: Props) {
           );
         })}
       </div>
-      <div className="grid grid-cols-1 gap-5 pt-3 lg:grid-cols-3">
+      <Divider />
+      <div className="grid grid-cols-1 gap-2 lg:grid-cols-3">
         <Button>Сохранить</Button>
         <Button>Возврат на доработку</Button>
         <Button color="danger">Отмена</Button>
diff --git a/packages/ui/background.tsx b/packages/ui/background.tsx
index 86d5825..09c79b9 100644
--- a/packages/ui/background.tsx
+++ b/packages/ui/background.tsx
@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 
 export function Background({ children }: PropsWithChildren) {
   return (
-    <div className="w-full rounded-sm border border-slate-100 bg-white p-5 md:w-auto">
+    <div className="grid w-full gap-2 rounded-sm border border-slate-100 bg-white p-5 md:w-auto">
       {children}
     </div>
   );
diff --git a/packages/ui/divider.tsx b/packages/ui/divider.tsx
new file mode 100644
index 0000000..75d4444
--- /dev/null
+++ b/packages/ui/divider.tsx
@@ -0,0 +1,3 @@
+export function Divider() {
+  return <hr className="my-4 rounded-md border border-y-[1px] bg-gray-300 opacity-30 " />;
+}
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 48f1192..2743c41 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -3,5 +3,6 @@ export * from './button';
 export * from './checkbox';
 export * from './container';
 export * from './content';
+export * from './divider';
 export * from './header';
 export * from './input';