Merge pull request #65 from permaweb/bazar-studio

Change docs from Helix to Bazar Studio

README.md

@@ -1,8 +1,8 @@
-#### Helix
+#### Bazar Studio (FKA Helix)
 
-Helix is an atomic asset uploader for the permaweb. Atomic assets uploaded through Helix can be traded on the [Universal Content Marketplace (UCM)](https://github.com/permaweb/ao-ucm) protocol and have real-world rights enforced by the [Universal Data License (UDL)](https://udlicense.arweave.net/).
+Bazar Studio is an atomic asset uploader for the permaweb. Atomic assets uploaded through Bazar Studio can be traded on the [Universal Content Marketplace (UCM)](https://github.com/permaweb/ao-ucm) protocol and have real-world rights enforced by the [Universal Data License (UDL)](https://udlicense.arweave.net/).
 
-<a href="https://helix.arweave.net">https://helix.arweave.net</a>
+<a href="https://studio_bazar.arweave.net/">https://studio_bazar.arweave.net/</a>
 
 ###### Requirements
 
@@ -15,5 +15,24 @@ npm install
 ```
 
 ```
-npm start
+npm run
+
+  start:development
+    NODE_ENV=development webpack serve --port 3001
+  start:staging
+    NODE_ENV=staging webpack serve --port 3001
+  format
+    eslint --fix . && npx prettier --write .
+  test:verbose
+    npm test -- --verbose
+  test:coverage
+    CI=true npm test -- --env=jsdom --coverage
+  build:staging
+    NODE_ENV=staging webpack
+  build:production
+    NODE_ENV=production webpack
+  deploy:main
+    npm run build:production && permaweb-deploy --ant-process VTY3FfVNgfjsAUY0JiOCSxlm5gpQ8t7dHjY8QKEO-YY
+  deploy:staging
+    npm run build:staging && permaweb-deploy --ant-process VTY3FfVNgfjsAUY0JiOCSxlm5gpQ8t7dHjY8QKEO-YY --undername staging
 ```

package.json

@@ -6,15 +6,15 @@
 	"author": "",
 	"license": "ISC",
 	"scripts": {
-		"start:development": "NODE_ENV=development webpack serve --port 3001",
-		"start:staging": "NODE_ENV=staging webpack serve --port 3001",
+		"start:development": "NODE_ENV=development webpack serve --port 4000",
+		"start:staging": "NODE_ENV=staging webpack serve --port 4000",
 		"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=staging webpack",
 		"build:production": "NODE_ENV=production webpack",
-		"deploy:main": "npm run build:production && permaweb-deploy --ant-process VTY3FfVNgfjsAUY0JiOCSxlm5gpQ8t7dHjY8QKEO-YY",
+		"deploy:main": "npm run build:production && permaweb-deploy --ant-process zaUCX1hkMgshabvP0IJigY8AZ59aytGkUimXWu87eik --undername studio",
 		"deploy:staging": "npm run build:staging && permaweb-deploy --ant-process VTY3FfVNgfjsAUY0JiOCSxlm5gpQ8t7dHjY8QKEO-YY --undername staging",
 		"prepare": "husky install"
 	},

public/index.html

@@ -5,20 +5,21 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="description" content="Upload digital content as atomic assets to Arweave’s permaweb with Helix." />
 		<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
-		<link rel="canonical" href="https://helix.arweave.net/" />
+		<link rel="canonical" href="https://studio_bazar.arweave.net/" />
 		<link rel="icon" href="favicon.svg" />
 		<link rel="manifest" href="manifest.json" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
-			href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800&display=swap"
+			href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap"
 			rel="stylesheet"
 		/>
+		<link href="https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap" rel="stylesheet" />
 		<link
-			href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
+			href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..900&display=swap"
 			rel="stylesheet"
 		/>
-		<title>Helix</title>
+		<title>Bazar Studio</title>
 	</head>
 
 	<body>

public/manifest.json

@@ -1,6 +1,6 @@
 {
-	"short_name": "Helix",
-	"name": "Helix",
+	"short_name": "Bazar Studio",
+	"name": "Bazar Studio",
 	"icons": [
 		{
 			"src": "favicon.svg",

src/app/styles.ts

@@ -249,9 +249,9 @@ export const View = styled.div`
 	position: absolute;
 	top: ${STYLING.dimensions.nav.headerHeight};
 	left: calc(${STYLING.dimensions.nav.panelWidthClosed} + 10px);
-	padding: 25px 10px 25px 25px;
+	padding: 30px 30px 25px 35px;
 	overflow-y: scroll;
-	border: 1px solid ${(props) => props.theme.colors.border.primary};
+	border: 1px solid ${(props) => props.theme.colors.border.alt4};
 	background: ${(props) => props.theme.colors.view.background};
 	border-radius: ${STYLING.dimensions.radius.primary};
 	animation: ${open} ${fadeIn1};

src/components/atoms/Button/styles.ts

@@ -10,9 +10,11 @@ function getHeight(height: number | undefined) {
 	}
 }
 
-function getWidth(_noMinWidth: boolean | undefined, _width: number | undefined, fullWidth: boolean | undefined) {
+function getWidth(_noMinWidth: boolean | undefined, width: number | undefined, fullWidth: boolean | undefined) {
 	if (fullWidth) {
 		return `100%`;
+	} else if (width) {
+		return `${width}px`;
 	} else return 'fit-content';
 }
 
@@ -64,22 +66,22 @@ export const Primary = styled.button<{
 		background: ${(props) => props.theme.colors.button.primary.active.background};
 		border: 1px solid ${(props) => props.theme.colors.button.primary.active.border};
 		span {
-			color: ${(props) => props.theme.colors.font.light1} !important;
+			color: ${(props) => props.theme.colors.button.primary.active.color} !important;
 		}
 		svg {
-			fill: ${(props) => props.theme.colors.font.light1} !important;
-			color: ${(props) => props.theme.colors.font.light1} !important;
+			color: ${(props) => props.theme.colors.button.primary.active.color} !important;
+			fill: ${(props) => props.theme.colors.button.primary.active.color} !important;
 		}
 	}
 	&:focus {
 		background: ${(props) => props.theme.colors.button.primary.active.background};
 		border: 1px solid ${(props) => props.theme.colors.button.primary.active.border};
 		span {
-			color: ${(props) => props.theme.colors.font.light1} !important;
+			color: ${(props) => props.theme.colors.button.primary.active.color} !important;
 		}
 		svg {
-			fill: ${(props) => props.theme.colors.font.light1} !important;
-			color: ${(props) => props.theme.colors.font.light1} !important;
+			color: ${(props) => props.theme.colors.button.primary.active.color} !important;
+			fill: ${(props) => props.theme.colors.button.primary.active.color} !important;
 		}
 	}
 	&:disabled {
@@ -89,8 +91,8 @@ export const Primary = styled.button<{
 			color: ${(props) => props.theme.colors.button.primary.disabled.color} !important;
 		}
 		svg {
-			fill: ${(props) => props.theme.colors.button.primary.disabled.color} !important;
 			color: ${(props) => props.theme.colors.button.primary.disabled.color} !important;
+			fill: ${(props) => props.theme.colors.button.primary.disabled.color} !important;
 		}
 	}
 
@@ -101,7 +103,9 @@ export const Primary = styled.button<{
 		font-size: ${(props) => props.theme.typography.size.xSmall} !important;
 		font-weight: ${(props) => props.theme.typography.weight.bold} !important;
 		color: ${(props) =>
-			props.active ? props.theme.colors.font.light1 : props.theme.colors.button.primary.color} !important;
+			props.active
+				? props.theme.colors.button.primary.active.color
+				: props.theme.colors.button.primary.color} !important;
 	}
 `;
 
@@ -115,13 +119,13 @@ export const IconPrimary = styled.div<{
 		width: 15px;
 		padding: 1.5px 0 0 0;
 		margin: ${(props) => (props.leftAlign ? '0 7.5px 0 0' : '0 0 0 7.5px')};
-		fill: ${(props) =>
+		color: ${(props) =>
 			props.disabled
 				? props.theme.colors.button.primary.disabled.color
 				: props.active
 				? props.theme.colors.button.primary.active.color
 				: props.theme.colors.button.primary.color};
-		color: ${(props) =>
+		fill: ${(props) =>
 			props.disabled
 				? props.theme.colors.button.primary.disabled.color
 				: props.active
@@ -135,44 +139,72 @@ export const Alt1 = styled(Primary)`
 		props.active ? props.theme.colors.button.alt1.active.background : props.theme.colors.button.alt1.background};
 	border: 1px solid
 		${(props) => (props.active ? props.theme.colors.button.alt1.active.border : props.theme.colors.button.alt1.border)};
+
 	&:hover {
 		background: ${(props) => props.theme.colors.button.alt1.active.background};
 		border: 1px solid ${(props) => props.theme.colors.button.alt1.active.border};
 	}
+
 	&:focus {
 		background: ${(props) =>
 			props.active
 				? props.theme.colors.button.alt1.active.background
 				: props.theme.colors.button.alt1.active.background};
 		border: 1px solid ${(props) => props.theme.colors.button.alt1.active.border};
 	}
-	&:disabled {
-		background: ${(props) => props.theme.colors.button.alt1.disabled.background};
-		border: 1px solid ${(props) => props.theme.colors.button.alt1.disabled.border};
-		span {
-			color: ${(props) => props.theme.colors.button.alt1.disabled.color} !important;
-		}
-	}
 
 	span {
 		width: fit-content;
 		text-overflow: ellipsis;
 		overflow: hidden;
 		font-size: ${(props) => props.theme.typography.size.xSmall} !important;
 		font-weight: ${(props) => props.theme.typography.weight.bold} !important;
-		color: ${(props) => props.theme.colors.font.light1} !important;
+		color: ${(props) =>
+			props.active ? props.theme.colors.button.alt1.active.color : props.theme.colors.button.alt1.color} !important;
+	}
+
+	&:hover {
+		span {
+			color: ${(props) => props.theme.colors.button.alt1.active.color} !important;
+		}
+		svg {
+			color: ${(props) => props.theme.colors.button.alt1.active.color} !important;
+			fill: ${(props) => props.theme.colors.button.alt1.active.color} !important;
+		}
+	}
+
+	&:focus {
+		span {
+			color: ${(props) => props.theme.colors.button.alt1.active.color} !important;
+		}
+		svg {
+			color: ${(props) => props.theme.colors.button.alt1.active.color} !important;
+			fill: ${(props) => props.theme.colors.button.alt1.active.color} !important;
+		}
+	}
+
+	&:disabled {
+		background: ${(props) => props.theme.colors.button.alt1.disabled.background};
+		border: 1px solid ${(props) => props.theme.colors.button.alt1.disabled.border};
+		span {
+			color: ${(props) => props.theme.colors.button.alt1.disabled.color} !important;
+		}
+		svg {
+			color: ${(props) => props.theme.colors.button.alt1.disabled.color} !important;
+			fill: ${(props) => props.theme.colors.button.alt1.disabled.color} !important;
+		}
 	}
 `;
 
 export const IconAlt1 = styled(IconPrimary)`
 	svg {
-		fill: ${(props) =>
+		color: ${(props) =>
 			props.disabled
 				? props.theme.colors.button.alt1.disabled.color
 				: props.active
 				? props.theme.colors.button.alt1.active.color
 				: props.theme.colors.button.alt1.color};
-		color: ${(props) =>
+		fill: ${(props) =>
 			props.disabled
 				? props.theme.colors.button.alt1.disabled.color
 				: props.active
@@ -196,11 +228,13 @@ export const Alt2 = styled(Alt1)`
 			color: ${(props) => props.theme.colors.button.alt2.active.color} !important;
 		}
 	}
+
 	&:focus {
 		span {
 			color: ${(props) => props.theme.colors.button.alt2.active.color} !important;
 		}
 	}
+
 	&:disabled {
 		background: ${(props) => props.theme.colors.button.alt2.disabled.background};
 		border: 1px solid ${(props) => props.theme.colors.button.alt2.disabled.border};
@@ -222,13 +256,13 @@ export const Alt2 = styled(Alt1)`
 
 export const IconAlt2 = styled(IconAlt1)`
 	svg {
-		fill: ${(props) =>
+		color: ${(props) =>
 			props.disabled
 				? props.theme.colors.button.alt2.disabled.color
 				: props.active
 				? props.theme.colors.button.alt2.active.color
 				: props.theme.colors.button.alt2.color};
-		color: ${(props) =>
+		fill: ${(props) =>
 			props.disabled
 				? props.theme.colors.button.alt2.disabled.color
 				: props.active

src/helpers/config.ts

@@ -49,7 +49,7 @@ import x from 'assets/x.svg';
 import { UploadStepType, WalletEnum } from './types';
 
 export const APP = {
-	name: 'Helix',
+	name: 'Bazar Studio',
 };
 
 export const AO = {