From 3f93fc8af609c570dcf373e38340f367570b7406 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Fri, 29 Mar 2024 18:20:28 +0530
Subject: [PATCH] style fixes

---
 src/components/CreateNewModal.jsx |  1 +
 src/components/ItemTile.jsx       | 55 ++++++++++++++++---------------
 src/components/ProBadge.jsx       |  2 +-
 src/components/common.jsx         |  2 +-
 src/style.css                     | 26 +++++++--------
 5 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/components/CreateNewModal.jsx b/src/components/CreateNewModal.jsx
index 9bd5abb..16019a7 100644
--- a/src/components/CreateNewModal.jsx
+++ b/src/components/CreateNewModal.jsx
@@ -169,6 +169,7 @@ export class CreateNewModal extends Component {
 										item={template}
 										focusable
 										onClick={onTemplateSelect.bind(null, template, false)}
+										hasOptions={false}
 									/>
 								);
 							})}
diff --git a/src/components/ItemTile.jsx b/src/components/ItemTile.jsx
index c97204b..03c1a1a 100644
--- a/src/components/ItemTile.jsx
+++ b/src/components/ItemTile.jsx
@@ -11,7 +11,8 @@ export function ItemTile({
 	onRemoveBtnClick,
 	onToggleVisibilityBtnClick,
 	focusable,
-	inline
+	inline,
+	hasOptions = true
 }) {
 	return (
 		<div
@@ -58,7 +59,7 @@ export function ItemTile({
 			</div>
 			<div className="flex flex-v-center">
 				{item.img ? (
-					<div>
+					<div class="d-f">
 						<img
 							class="saved-item-tile__img"
 							height="40"
@@ -82,30 +83,32 @@ export function ItemTile({
 					</div>
 				) : null}
 			</div>
-			<div class="saved-item-tile__meta">
-				<HStack justify="space-between">
-					<div>
-						{item.updatedOn ? (
-							<>
-								Last updated:{' '}
-								<time dateTime={item.updatedOn}>
-									{getHumanDate(item.updatedOn)}
-								</time>
-							</>
-						) : null}
-					</div>
-					<div>
-						<Stack gap={1} align="center">
-							<Icon
-								size="16"
-								color="currentColor"
-								name={item.isPublic ? 'eye' : 'eye-striked'}
-							/>
-							{item.isPublic ? 'Public' : ''}
-						</Stack>
-					</div>
-				</HStack>
-			</div>
+			{hasOptions && (
+				<div class="saved-item-tile__meta">
+					<HStack justify="space-between">
+						<div>
+							{item.updatedOn ? (
+								<>
+									Last updated:{' '}
+									<time dateTime={item.updatedOn}>
+										{getHumanDate(item.updatedOn)}
+									</time>
+								</>
+							) : null}
+						</div>
+						<div>
+							<Stack gap={1} align="center">
+								<Icon
+									size="16"
+									color="currentColor"
+									name={item.isPublic ? 'eye' : 'eye-striked'}
+								/>
+								{item.isPublic ? 'Public' : ''}
+							</Stack>
+						</div>
+					</HStack>
+				</div>
+			)}
 		</div>
 	);
 }
diff --git a/src/components/ProBadge.jsx b/src/components/ProBadge.jsx
index 92575f2..2fffa40 100644
--- a/src/components/ProBadge.jsx
+++ b/src/components/ProBadge.jsx
@@ -1,3 +1,3 @@
 export const ProBadge = () => {
-	return <div className="pro-badge">PRO</div>;
+	return <div className="badge pro-badge">PRO</div>;
 };
diff --git a/src/components/common.jsx b/src/components/common.jsx
index 6a35a98..b6e55ab 100644
--- a/src/components/common.jsx
+++ b/src/components/common.jsx
@@ -42,5 +42,5 @@ export function Divider(props) {
 }
 
 export function BetaTag() {
-	return <span class="beta-tag">Beta</span>;
+	return <span class="badge beta-tag">Beta</span>;
 }
diff --git a/src/style.css b/src/style.css
index a83dc28..cad4e5e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1697,16 +1697,6 @@ body > #demo-frame {
 	display: inline-block;
 }
 
-.beta-tag {
-	border-radius: 4px;
-	text-transform: uppercase;
-	background: #c68955;
-	color: white;
-	letter-spacing: 0.6px;
-	padding: 2px 5px;
-	font-size: 0.9em;
-}
-
 .is-extension .web-maker-with-tag:after {
 	display: none;
 }
@@ -2184,18 +2174,26 @@ while the theme CSS file is loading */
 .stack > * {
 	margin: 0;
 }
-
-.pro-badge {
+.badge {
+	text-transform: uppercase;
 	display: inline-block;
 	padding: 0.1rem 0.3rem;
-	background: linear-gradient(45deg, var(--color-pro-1), var(--color-pro-2));
+	background: crimson;
 	border-radius: 1rem;
 	font-size: 0.7em;
 	color: #222;
-	box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
 	font-weight: 800;
 	line-height: 1;
 }
+.beta-tag {
+	background: #ee9d59;
+}
+.pro-badge {
+	display: inline-block;
+	background: linear-gradient(45deg, var(--color-pro-1), var(--color-pro-2));
+	color: #222;
+	box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
+}
 .templates-container {
 	display: flex;
 	flex-wrap: wrap;