From 046c9af4b34cf572ae834cf6745990828fddcfa2 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Thu, 18 Mar 2021 03:54:07 +0300
Subject: feat: improve components style

---
 src/components/Button.tsx      | 6 +++---
 src/components/Input.tsx       | 7 +++++--
 src/components/Paper.tsx       | 8 ++++----
 src/components/Select.tsx      | 7 +++++--
 src/containers/WaybillForm.tsx | 5 ++---
 tailwind.config.js             | 4 +++-
 6 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index b715ba9..56915d4 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -10,8 +10,8 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const variants = {
-  contained: 'bg-black text-white',
-  outlined: '',
+  contained: 'bg-black text-white hover:underline ring-gray-400',
+  outlined: 'hover:shadow border border-gray-300 ring-gray-200',
 };
 
 const sizes = {
@@ -20,7 +20,7 @@ const sizes = {
   sm: 'p-3',
 };
 
-const style = 'm-3 font-bold tracking-wide hover:underline focus:outline-none border-2 border-black';
+const style = 'm-3 rounded-sm font-semibold focus:outline-none active:ring-2';
 
 const Button: React.FC<Props> = ({ onClick, route, variant = 'contained', size = 'md', type = 'button', ...props }) => {
   const history = useHistory();
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 896a974..a8a6f31 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -5,14 +5,17 @@ export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
 }
 
+const focusStyles = 'focus:outline-none focus:shadow focus:border-gray-400';
+const baseStyles = 'p-2 border bg-white border-gray-300 rounded-sm';
+
 const InputBase: React.FC<Props> = ({ label, ...props }) => {
   return (
     <div className="m-2 mb-4 flex flex-col">
-      <label htmlFor={props?.name} className="mb-1 text-gray-700">{label}</label>
+      <label htmlFor={props?.name} className="mb-1 text-sm text-gray-600">{label}</label>
       <input
         id={props?.name}
         placeholder={label}
-        className="p-2 border-2 border-black focus:outline-none"
+        className={`${baseStyles} ${focusStyles}`}
         {...props}
       />
     </div>
diff --git a/src/components/Paper.tsx b/src/components/Paper.tsx
index 2d64261..5e2604f 100644
--- a/src/components/Paper.tsx
+++ b/src/components/Paper.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 
 interface Props {
-  variant?: 'elevation' | 'outlined'
+  variant?: 'elevation' | 'outlined';
 }
 
 const style = {
-  elevation: 'shadow',
-  outlined: 'border-black border-2',
+  elevation: '',
+  outlined: 'bg-gray-50 border border-gray-300',
 };
 
 const Paper: React.FC<Props> = ({ variant = 'elevation', children }) => {
   return (
-    <div className={`p-5 m-5 bg-white rounded-md ${style[variant]}`}>
+    <div className={`p-5 m-5 bg-white rounded-md shadow ${style[variant]}`}>
       {children}
     </div>
   );
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 595208d..6b04e20 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -11,14 +11,17 @@ export interface Props extends React.SelectHTMLAttributes<HTMLSelectElement> {
   options: Option[];
 }
 
+const focusStyles = 'focus:outline-none focus:shadow focus:border-gray-400';
+const baseStyles = 'p-2 border bg-white border-gray-300 rounded-sm';
+
 const SelectBase: React.FC<Props> = ({ label, options, ...props }) => {
   return (
     <div className="m-2 mb-4 flex flex-col">
-      <label htmlFor={props?.name} className="mb-1 text-gray-700">{label}</label>
+      <label htmlFor={props?.name} className="mb-1 text-sm text-gray-600">{label}</label>
       <select
         id={props?.name}
         placeholder={label}
-        className="p-2 border-2 border-black bg-white focus:outline-none"
+        className={`${baseStyles} ${focusStyles}`}
         {...props}
       >
         {options?.map(option => (
diff --git a/src/containers/WaybillForm.tsx b/src/containers/WaybillForm.tsx
index 1297a0f..6976652 100644
--- a/src/containers/WaybillForm.tsx
+++ b/src/containers/WaybillForm.tsx
@@ -33,9 +33,8 @@ const WaybillForm: React.FC<FormikProps> = ({ setFieldValue, values }) => {
           { key: 'out', label: 'Расход' },
         ]}
       />
-      <Button onClick={handleAddRecord}>+</Button>
       {_.times(recordsNumber).map(index => (
-        <Paper>
+        <Paper variant="outlined">
           <Select
             name={`records.${index}.productId`}
             label="Товар"
@@ -51,9 +50,9 @@ const WaybillForm: React.FC<FormikProps> = ({ setFieldValue, values }) => {
             type="number"
             label="Количество"
           />
-          {values.records[index]?.price * values.records[index]?.quantity || 0}
         </Paper>
       ))}
+      <Button onClick={handleAddRecord} variant="outlined" size="sm">Добавить товар</Button>
     </Form>
   );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 47699f6..f53b55d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,9 @@ module.exports = {
     extend: {},
   },
   variants: {
-    extend: {},
+    extend: {
+      ringWidth: ['active']
+    },
   },
   plugins: []
 }
-- 
cgit v1.2.3