diff --git a/src/index.css b/src/index.css index f873da8..6051c60 100644 --- a/src/index.css +++ b/src/index.css @@ -328,6 +328,27 @@ h1 { display: contents; } +.new-store-redirect { + grid-column-start: 2; + padding: 0; + margin-top: -0.85em; + border: none; + background: none; + justify-self: start; + cursor: pointer; + font-size: 14px; +} + +.new-store-redirect svg { + margin-right: 0.25rem; + vertical-align: middle; +} + +.new-store-redirect:hover { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 4px; +} + .discount-group label { grid-column: 1; align-self: center; @@ -641,6 +662,11 @@ h1 { .add-form .big-chain-group [type="checkbox"] { transform: scale(1.4); } + + .new-store-redirect { + grid-column-start: auto; + font-size: 16px; + } } @media (max-width: 650px) { /* small screens */ diff --git a/src/pages/CreateNewItem.tsx b/src/pages/CreateNewItem.tsx index 6cc4e4c..3d15557 100644 --- a/src/pages/CreateNewItem.tsx +++ b/src/pages/CreateNewItem.tsx @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; import DOMPurify from "dompurify"; import Swal from 'sweetalert2' import { isSafeUrl } from "../utils/isSafeUrl"; @@ -9,6 +10,8 @@ import StoresDropdownSelect from "../custom-dropdown-select/StoresDropdownSelect import { generateClient } from "aws-amplify/data"; import type { Schema } from "../../amplify/data/resource"; import Scanner from "../components/Scanner"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faCircleInfo } from '@fortawesome/free-solid-svg-icons'; const client = generateClient(); @@ -30,6 +33,8 @@ const CreateNewItem: React.FC = () => { const [inputs, setInputs] = useState(initialItemInputs); const [selectedStore, setSelectedStore] = useState(); + const navigate = useNavigate(); + // Generic change handler for text, number, and checkbox fields const handleChange = ( e: React.ChangeEvent @@ -170,6 +175,20 @@ const CreateNewItem: React.FC = () => { onSubmit={handleSubmit} method="POST" > + + + handleStoreSelect(store)} + /> + { maxLength={2000} /> - - handleStoreSelect(store)} - /> -