fix asset and new creation modal

src/components/Assets.jsx

@@ -15,7 +15,7 @@ const Assets = () => {
 	const [uploadProgress, setUploadProgress] = useState();
 	const [listType, setListType] = useState('grid');
 
-	const storageRef = firebase.storage().ref(`assets/${window.user.uid}`);
+	const storageRef = firebase.storage().ref(`assets/${window.user?.uid}`);
 
 	const uploadFile = file => {
 		if (file.size > 5 * 1024 * 1024) {
@@ -137,6 +137,18 @@ const Assets = () => {
 		});
 	};
 
+	if (!window.user?.isPro) {
+		return (
+			<VStack align="stretch" gap={2}>
+				<p>Assets feature is available in PRO plan.</p>
+				<button class="btn  btn--primary ">
+					<HStack gap={1} fullWidth justify="center">
+						Upgrade to <ProBadge />
+					</HStack>
+				</button>
+			</VStack>
+		);
+	}
 	return (
 		<div
 			onDragEnter={handleDragDropEvent}

src/components/CreateNewModal.jsx

@@ -150,11 +150,10 @@ export class CreateNewModal extends Component {
 				<h1 class="mt-0">Create New</h1>
 				<Tabs horizontal onChange={this.modeChangeHandler}>
 					<TabPanel label={option1}>
-						<div class="d-f fxw-w">
+						<div class="templates-container">
 							<button
 								type="button"
 								class="btn btn--primary"
-								style="margin:20px 10px"
 								onClick={() => {
 									trackEvent('ui', 'startBlankBtnClick');
 									onBlankTemplateSelect();
@@ -176,11 +175,10 @@ export class CreateNewModal extends Component {
 						</div>
 					</TabPanel>
 					<TabPanel label={option2}>
-						<div class="d-f fxw-w show-when-app">
+						<div class="templates-container show-when-app">
 							<button
 								type="button"
 								class="btn btn--primary"
-								style="margin:20px 10px"
 								onClick={() => {
 									trackEvent('ui', 'startBlankFileBtnClick');
 									onBlankFileTemplateSelect();

src/style.css

@@ -397,10 +397,15 @@ a > svg {
 }
 
 .btn--primary {
-	background: var(--color-button)
-		linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0px, transparent);
+	background: linear-gradient(
+		180deg,
+		var(--color-button),
+		color-mix(in lch, var(--color-button), black)
+	);
 	color: black;
 	font-weight: 600;
+	border: 1px solid color-mix(in lch, var(--color-button), black 70%);
+	box-shadow: inset 0 1px 0px 0 rgba(255, 255, 255, 0.15);
 }
 
 .btn--big {
@@ -2137,6 +2142,14 @@ while the theme CSS file is loading */
 	font-weight: 800;
 	line-height: 1;
 }
+.templates-container {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+}
+.templates-container .saved-item-tile {
+	margin: 0;
+}
 @media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;