banner / thumbnail removal

permaweb · Aug 30, 2024 · 35f5d0b · 35f5d0b
1 parent 14ee6c3
commit 35f5d0b
Show file tree

Hide file tree

Showing 17 changed files with 266 additions and 177 deletions.
diff --git a/package.json b/package.json
@@ -6,13 +6,13 @@
 	"author": "",
 	"license": "ISC",
 	"scripts": {
-		"start:development": "NODE_ENV=development webpack serve --port 3001",
-		"start:production": "NODE_ENV=production webpack serve --port 3001",
+		"start:development": "NODE_ENV=development webpack serve --port 3000",
+		"start:staging": "NODE_ENV=staging webpack serve --port 3000",
 		"format": "eslint --fix . && npx prettier --write .",
 		"test": "npm test",
 		"test:verbose": "npm test -- --verbose",
 		"test:coverage": "CI=true npm test -- --env=jsdom --coverage",
-		"build:staging": "NODE_ENV=development webpack",
+		"build:staging": "NODE_ENV=staging webpack",
 		"build:production": "NODE_ENV=production webpack",
 		"deploy:main": "npm run build:production && permaweb-deploy --ant-process Y_0sEnzlPZGmbhknubMBhFmkK9AAylOnx4Tl3Mz_uQM",
 		"deploy:staging": "npm run build:staging && permaweb-deploy --ant-process Y_0sEnzlPZGmbhknubMBhFmkK9AAylOnx4Tl3Mz_uQM --undername staging",

diff --git a/src/app/styles.ts b/src/app/styles.ts
@@ -177,7 +177,7 @@ export const GlobalStyle = createGlobalStyle`
 
   .border-wrapper-alt2 {
     background: ${(props) => props.theme.colors.container.primary.background};
-    box-shadow: 0 5px 15px 2.5px ${(props) => props.theme.colors.shadow.primary};
+    box-shadow: 0 1px 2px 0.5px ${(props) => props.theme.colors.shadow.primary};
     border: 1px solid ${(props) => props.theme.colors.border.alt4};
     border-radius: ${STYLING.dimensions.radius.primary};
   }

diff --git a/src/components/atoms/FormField/styles.ts b/src/components/atoms/FormField/styles.ts
@@ -61,9 +61,11 @@ export const Input = styled.input<{
 		outline: 0;
 		border: 1px solid
 			${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
-		box-shadow: 0 0 2.5px
+		outline: 0.5px solid
+			${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
+		box-shadow: 0 0 0.5px
 			${(props) => (props.invalid ? props.theme.colors.form.invalid.shadow : props.theme.colors.form.valid.shadow)};
-		transition: box-shadow, border 225ms ease-in-out;
+		transition: box-shadow, border, outline 225ms ease-in-out;
 	}
 	&:disabled {
 		background: ${(props) => props.theme.colors.form.disabled.background};

diff --git a/src/components/atoms/TextArea/styles.ts b/src/components/atoms/TextArea/styles.ts
@@ -39,7 +39,11 @@ export const TextArea = styled.textarea<{
 		outline: 0;
 		border: 1px solid
 			${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
-		transition: box-shadow, border 225ms ease-in-out;
+		outline: 0.5px solid
+			${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
+		box-shadow: 0 0 0.5px
+			${(props) => (props.invalid ? props.theme.colors.form.invalid.shadow : props.theme.colors.form.valid.shadow)};
+		transition: box-shadow, border, outline 225ms ease-in-out;
 	}
 	&:disabled {
 		background: ${(props) => props.theme.colors.form.disabled.background};

diff --git a/src/components/organisms/AssetsTable/styles.ts b/src/components/organisms/AssetsTable/styles.ts
@@ -68,7 +68,7 @@ export const EmptyContainer = styled.div`
 	justify-content: center;
 	gap: 25px;
 	padding: 30px 20px;
-	margin: 40px 0 20px 0;
+	margin: 41.5px 0 20px 0;
 	p {
 		color: ${(props) => props.theme.colors.font.primary};
 		font-weight: ${(props) => props.theme.typography.weight.bold};

diff --git a/src/components/organisms/CollectionsTable/styles.ts b/src/components/organisms/CollectionsTable/styles.ts
@@ -156,7 +156,7 @@ export const EmptyContainer = styled.div`
 	justify-content: center;
 	gap: 25px;
 	padding: 30px 20px;
-	margin: 40px 0 20px 0;
+	margin: 41.5px 0 20px 0;
 	p {
 		color: ${(props) => props.theme.colors.font.primary};
 		font-weight: ${(props) => props.theme.typography.weight.bold};

diff --git a/src/helpers/config.ts b/src/helpers/config.ts
@@ -346,11 +346,13 @@ export const MAX_THUMBNAIL_IMAGE_SIZE = 100000;
 export const RENDERERS = {
 	'3d': {
 		label: '3D',
+		description: '3D models (.glb)',
 		domain: 'view_3d-pst',
 		contentType: CONTENT_TYPES.model,
 	},
 	audio: {
 		label: 'Audio',
+		description: 'Audio files (.mp4)',
 		domain: 'audio-renderer',
 		contentType: CONTENT_TYPES.audio,
 	},

diff --git a/src/helpers/language.ts b/src/helpers/language.ts
@@ -205,6 +205,7 @@ export const language = {
 		profileUpdatedInfo: `Your profile has been updated.`,
 		readDocs: `Read docs`,
 		recipient: `Recipient`,
+		remove: `Remove`,
 		removeAvatar: `Remove avatar`,
 		removeBanner: `Remove banner`,
 		removeFile: `Remove file`,

diff --git a/src/helpers/themes.ts b/src/helpers/themes.ts
@@ -26,7 +26,7 @@ export const lightTheme = {
 	semiTransparent2: 'rgba(0, 0, 0, 0.45)',
 	semiTransparent3: 'rgba(0, 0, 0, 0.65)',
 	semiTransparent4: '#AEAEAE45',
-	semiTransparent5: 'rgba(0, 0, 0, 0.15)',
+	semiTransparent5: 'rgba(215, 215, 215, 0.5)',
 	scheme: 'light',
 	light1: '#FFFFFF',
 	dark1: '#151515',
@@ -184,8 +184,8 @@ export const theme = (currentTheme: any): DefaultTheme => ({
 				shadow: currentTheme.negative2,
 			},
 			valid: {
-				outline: currentTheme.neutralA4,
-				shadow: currentTheme.neutral3,
+				outline: currentTheme.primary1,
+				shadow: currentTheme.primary2,
 			},
 			disabled: {
 				background: currentTheme.neutral2,

diff --git a/src/views/Upload/UploadBanner/UploadBanner.tsx b/src/views/Upload/UploadBanner/UploadBanner.tsx
@@ -31,7 +31,7 @@ export default function UploadBanner() {
 		}
 	}, [activeBannerIndex, banners]);
 
-	const handleThumbnailClick = (index: number) => {
+	const handleBannerClick = (index: number) => {
 		setActiveBannerIndex(index);
 	};
 
@@ -43,9 +43,9 @@ export default function UploadBanner() {
 
 				reader.onload = (event: ProgressEvent<FileReader>) => {
 					if (event.target?.result) {
-						const updatedThumbnails = [...banners, event.target.result];
-						setBanners(updatedThumbnails);
-						setActiveBannerIndex(updatedThumbnails.length - 1);
+						const updatedBanners = [...banners, event.target.result];
+						setBanners(updatedBanners);
+						setActiveBannerIndex(updatedBanners.length - 1);
 					}
 				};
 
@@ -54,6 +54,12 @@ export default function UploadBanner() {
 		}
 	}
 
+	const handleRemoveBanner = (index: number) => {
+		const updatedBanners = banners.filter((_, i) => i !== index);
+		setBanners(updatedBanners);
+		setActiveBannerIndex(updatedBanners.length - 1);
+	};
+
 	return (
 		<>
 			<S.Wrapper>
@@ -79,10 +85,21 @@ export default function UploadBanner() {
 									<S.TWrapper
 										key={index}
 										active={index === activeBannerIndex}
-										onClick={() => handleThumbnailClick(index)}
+										onClick={(e: any) => {
+											e.stopPropagation();
+											handleBannerClick(index);
+										}}
 										disabled={uploadReducer.uploadActive}
 									>
 										<img src={banner} />
+										<S.TAction>
+											<IconButton
+												type={'primary'}
+												src={ASSETS.close}
+												handlePress={() => handleRemoveBanner(index)}
+												dimensions={{ wrapper: 21.5, icon: 8.5 }}
+											/>
+										</S.TAction>
 									</S.TWrapper>
 								);
 							})}

diff --git a/src/views/Upload/UploadBanner/styles.ts b/src/views/Upload/UploadBanner/styles.ts
@@ -18,7 +18,7 @@ export const Header = styled.div`
 	}
 	p {
 		color: ${(props) => props.theme.colors.font.primary};
-		font-size: ${(props) => props.theme.typography.size.base};
+		font-size: ${(props) => props.theme.typography.size.small};
 		font-weight: ${(props) => props.theme.typography.weight.bold};
 		margin: 0 5px 5px 0;
 	}
@@ -30,7 +30,7 @@ export const Header = styled.div`
 		max-width: 600px;
 	}
 	button {
-		margin 0 0 6.5px 0;
+		margin: 0 0 6.5px 0;
 	}
 `;
 
@@ -96,6 +96,24 @@ export const Select = styled.button`
 	}
 `;
 
+export const TAction = styled.div`
+	position: absolute;
+	top: 7.5px;
+	right: 7.5px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	display: none;
+
+	button {
+		background: ${(props) => props.theme.colors.container.primary.background};
+		border: 1px solid ${(props) => props.theme.colors.border.primary};
+		svg {
+			margin: 0px 0px 2.15px 0;
+		}
+	}
+`;
+
 export const TWrapper = styled.button<{ active: boolean }>`
 	height: 150px;
 	width: 100%;
@@ -104,6 +122,7 @@ export const TWrapper = styled.button<{ active: boolean }>`
 	outline: 2.25px solid ${(props) => (props.active ? props.theme.colors.border.alt1 : 'transparent')};
 	border: 2.25px solid transparent;
 	opacity: ${(props) => (props.active ? '1' : '0.5')};
+	position: relative;
 	img {
 		height: 100%;
 		width: 100%;
@@ -113,6 +132,9 @@ export const TWrapper = styled.button<{ active: boolean }>`
 	}
 	&:hover {
 		opacity: 0.85;
+		${TAction} {
+			display: block;
+		}
 	}
 	&:disabled {
 		opacity: 0.5;