styling

src/components/Assets.jsx

@@ -6,6 +6,7 @@ import { copyToClipboard } from '../utils';
 import { Trans } from '@lingui/macro';
 import { ProBadge } from './ProBadge';
 import { LoaderWithText } from './Loader';
+import { Text } from './Text';
 
 const Assets = () => {
 	const [files, setFiles] = useState([]);
@@ -174,12 +175,19 @@ const Assets = () => {
 				{isUploading ? <div class="asset-manager__progress-bar"></div> : null}
 
 				<div style={{ visibility: isUploading ? 'hidden' : 'visible' }}>
-					<p>Drop file here to upload</p>
-					<input
-						type="file"
-						onChange={handleFileUpload}
-						style={{ marginTop: 'auto' }}
-					/>
+					<VStack gap={1} align="center">
+						<Text tag="p" align="center">
+							Drop files here to upload
+						</Text>
+						<Text tag="p" appearance="secondary" align="center">
+							File should be max 300KB in size
+						</Text>
+						<input
+							type="file"
+							onChange={handleFileUpload}
+							style={{ marginTop: 'auto' }}
+						/>
+					</VStack>
 				</div>
 			</div>
 			{isFetchingFiles && <LoaderWithText>Fetching files...</LoaderWithText>}

src/components/Loader.jsx

@@ -0,0 +1,52 @@
+export function Loader({ height, noMargin, leftMargin }) {
+	return (
+		<svg
+			viewBox="0 0 166 166"
+			height={height || '1.6em'}
+			style={{
+				margin: noMargin
+					? null
+					: leftMargin
+					? ` 0 0 0 ${leftMargin}`
+					: '0 0.8rem'
+			}}
+			class="new-loader"
+		>
+			<g fill="none" fillRule="evenodd">
+				<path
+					d="M83 166c-45.84 0-83-37.16-83-83S37.16 0 83 0s83 37.16 83 83-37.16 83-83 83zm0-29c29.823 0 54-24.177 54-54s-24.177-54-54-54-54 24.177-54 54 24.177 54 54 54z"
+					fill="currentColor"
+					style={{ opacity: 0.2 }}
+				/>
+				<path
+					d="M137.008 83H137c0-29.823-24.177-54-54-54S29 53.177 29 83h-.008c.005.166.008.333.008.5C29 91.508 22.508 98 14.5 98S0 91.508 0 83.5c0-.167.003-.334.008-.5H0C0 37.16 37.16 0 83 0s83 37.16 83 83h-.008c.005.166.008.333.008.5 0 8.008-6.492 14.5-14.5 14.5S137 91.508 137 83.5c0-.167.003-.334.008-.5z"
+					fill="currentColor"
+				/>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="rotate"
+					dur="1s"
+					from="0 83 83"
+					to="360 83 83"
+					repeatCount="indefinite"
+				/>
+			</g>
+		</svg>
+	);
+}
+
+export function LoaderWithText({ children }) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+				margin: '2rem 1rem'
+			}}
+		>
+			<Loader /> {children}
+		</div>
+	);
+}

src/components/Text.jsx

@@ -0,0 +1,56 @@
+import { forwardRef } from 'preact/compat';
+
+const appearanceStyles = {
+	normal: {
+		color: 'var(--color-text)'
+	},
+	primary: {
+		color: 'var(--color-heading)'
+	},
+	secondary: {
+		color: 'var(--color-text-light)'
+	},
+	tertiary: {
+		color: 'var(--color-text-lightest-final)'
+	},
+	brand: {
+		color: 'var(--color-brand)'
+	}
+};
+
+export const Text = forwardRef(
+	(
+		{
+			size = 0,
+			weight = 'normal',
+			tag,
+			style = 'normal',
+			appearance = 'normal',
+			letterSpacing = 0,
+			lineHeight = 1.4,
+			align = 'left',
+			classes = '',
+			children
+		},
+		ref
+	) => {
+		const Tag = tag || 'span';
+
+		const styles = {
+			letterSpacing: letterSpacing,
+			fontSize: `var(--font-size-${size})`,
+
+			fontWeight: weight,
+			textAlign: align,
+			lineHeight: lineHeight,
+			fontStyle: style === 'italic' ? 'italic' : 'normal',
+			...appearanceStyles[appearance]
+		};
+
+		return (
+			<Tag style={styles} className={classes} ref={ref}>
+				{children}
+			</Tag>
+		);
+	}
+);

src/style.css

@@ -10,6 +10,11 @@
 	--color-focus-outline: #d3a447;
 	--color-form-control-bg: #2c214b;
 
+	--color-heading: #efecf9;
+	--color-text-light: #b0a5d6;
+	--color-text-lightest-final: #787090;
+	--clr-brand: purple;
+
 	--footer-height: 37px;
 	--console-height: 32px;