styling

src/components/Assets.jsx

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import firebase from 'firebase/app';
 import 'firebase/storage';
-import { Stack } from './Stack';
+import { HStack, Stack, VStack } from './Stack';
 import { copyToClipboard } from '../utils';
+import { Trans } from '@lingui/macro';
+import { ProBadge } from './ProBadge';
 
 const Assets = () => {
 	const [files, setFiles] = useState([]);
@@ -142,6 +144,13 @@ const Assets = () => {
 			onDragOver={handleDragDropEvent}
 			onDrop={handleDrop}
 		>
+			<HStack gap={1} align="center">
+				<h1>
+					<Trans>Assets</Trans>
+				</h1>
+				<ProBadge />
+			</HStack>
+
 			<div
 				class="asset-manager__upload-box"
 				style={{
@@ -161,6 +170,7 @@ const Assets = () => {
 				</div>
 			</div>
 			{isFetchingFiles && <p>Fetching your files...</p>}
+			<VStack align="stretch" gap={1}>
 				{files.length ? (
 					<Stack>
 						<input
@@ -195,6 +205,7 @@ const Assets = () => {
 						</button>
 					))}
 				</div>
+			</VStack>
 		</div>
 	);
 };

src/components/MainHeader.jsx

@@ -48,9 +48,7 @@ export function MainHeader(props) {
 							class="btn btn--dark hint--rounded hint--bottom-left"
 							aria-label={i18n._(t`Upload/Use assets`)}
 						>
-							<Stack gap={1}>
-								<Trans>Assets</Trans> <ProBadge />
-							</Stack>
+							<Trans>Assets</Trans>
 						</Button>
 
 						{!props.isFileMode && (

src/style.css

@@ -946,6 +946,11 @@ body > #demo-frame {
 	position: absolute;
 	border: none;
 	background: var(--color-close-btn);
+	background: linear-gradient(
+		to bottom,
+		var(--color-close-btn),
+		color-mix(in lch, var(--color-close-btn), black)
+	);
 	color: white;
 	border-radius: 0.3rem;
 	padding: 0.4rem 0.5rem;
@@ -994,7 +999,7 @@ body > #demo-frame {
 	background: var(--color-popup);
 
 	/* fix me */
-	background: linear-gradient(45deg, #2d063c, #3a2b63);
+	background: linear-gradient(45deg, #2d063cad, #3a2b63);
 	box-shadow:
 		inset 1px -1px 0 0 #ffffff17,
 		0 20px 31px 0 #0000008a;
@@ -1038,6 +1043,7 @@ body > #demo-frame {
 	/* transition-duration: 0.3s; */
 	/* transform: translateY(0px) scale(1); */
 	/* opacity: 1; */
+	backdrop-filter: (3px);
 }
 
 .modal-overlay {
@@ -1050,7 +1056,8 @@ body > #demo-frame {
 	z-index: 5;
 	opacity: 0;
 	will-change: opacity;
-	background: var(--color-overlay);
+	/* background: var(--color-overlay); */
+	backdrop-filter: blur(5px) grayscale(1);
 	transition: opacity var(--duration-modal-overlay-show);
 }