Merge pull request #44 from the-collab-lab/ss-add-item-page

Layout of Add Item Page
the-collab-lab · Oct 7, 2023 · 9cc1cd1 · 9cc1cd1
2 parents 68c1309 + 602eeba
commit 9cc1cd1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/UrgencyTag.jsx b/src/components/UrgencyTag.jsx
@@ -6,7 +6,7 @@ export const UrgencyTag = ({
 	tagName,
 }) => {
 	return (
-		<div className="h-[120px]">
+		<div className="h-[100px] sm:h-[120px]  -translate-y-10 sm:translate-y-0">
 			<div
 				className={
 					frequency === value

diff --git a/src/views/AddItem.jsx b/src/views/AddItem.jsx
@@ -124,7 +124,7 @@ export function AddItem({ listId, data }) {
 					<label htmlFor="item" className="px-3 mt-2">
 						Item:
 					</label>
-					<div className="w-full sm:w-1/2 flex items-center border-2 rounded-lg py-2 px-3">
+					<div className="w-1/2 min-w-[280px] flex items-center border-2 rounded-lg py-2 px-3">
 						<FontAwesomeIcon
 							icon={plus}
 							title="Enter item name"
@@ -144,8 +144,8 @@ export function AddItem({ listId, data }) {
 					</div>
 				</div>
 
-				<p className="mt-3 pt-10">How soon do you need to buy this item?</p>
-				<div className="flex flex-col sm:flex-row sm:gap-6 justify-center mb-10 sm:py-44">
+				<p className="mt-3 pt-2 sm:pt-10">How soon will you buy this item?</p>
+				<div className="flex flex-col sm:flex-row sm:gap-6 justify-center mb-10 sm:py-10">
 					<UrgencyTag
 						color={'bg-light-blue'}
 						value={'soon'}
@@ -178,7 +178,7 @@ export function AddItem({ listId, data }) {
 					text="ADD ITEM"
 					withIcon={true}
 					onClick={handleSubmit}
-					className="mb-5"
+					className="mb-5 sm:m-16"
 				/>
 			</form>
 		</div>