update share ux

src/components/MainHeader.jsx

@@ -74,21 +74,25 @@ export function MainHeader(props) {
 						)}
 
 						<button
-							class="btn btn--dark hint--rounded hint--bottom-left"
+							class="btn btn--dark hint--bottom-left"
 							aria-label={i18n._(t`Share this creation publicly`)}
 							data-testid="newButton"
 							onClick={props.shareBtnHandler}
 						>
 							<svg
 								viewBox="0 0 24 24"
-								fill={props.currentItem.isPublic ? 'green' : 'currentColor'}
+								style={{
+									fill: props.currentItem.isPublic
+										? 'limegreen'
+										: 'currentColor'
+								}}
 								strokeWidth="2"
 								strokeLinecap="round"
 								strokeLinejoin="round"
 							>
 								<path d="M18 16.08C17.24 16.08 16.56 16.38 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12S8.96 11.53 8.91 11.3L15.96 7.19C16.5 7.69 17.21 8 18 8C19.66 8 21 6.66 21 5S19.66 2 18 2 15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.81C7.5 9.31 6.79 9 6 9C4.34 9 3 10.34 3 12S4.34 15 6 15C6.79 15 7.5 14.69 8.04 14.19L15.16 18.34C15.11 18.55 15.08 18.77 15.08 19C15.08 20.61 16.39 21.91 18 21.91S20.92 20.61 20.92 19C20.92 17.39 19.61 16.08 18 16.08M18 4C18.55 4 19 4.45 19 5S18.55 6 18 6 17 5.55 17 5 17.45 4 18 4M6 13C5.45 13 5 12.55 5 12S5.45 11 6 11 7 11.45 7 12 6.55 13 6 13M18 20C17.45 20 17 19.55 17 19S17.45 18 18 18 19 18.45 19 19 18.55 20 18 20Z" />
 							</svg>
-							<Trans>Share</Trans>
+							{props.currentItem.isPublic ? null : <Trans>Share</Trans>}
 						</button>
 
 						<button

src/components/Pro.jsx

@@ -14,7 +14,7 @@ const checkoutIds = {
 	annual: 'aae95d78-05c8-46f5-b11e-2d40ddd211d3',
 	generic: 'f8c64e50-7734-438b-a122-3510156f14ed'
 };
-export function Pro({ user }) {
+export function Pro({ user, onLoginClick }) {
 	const hasCheckoutLoaded = useCheckout();
 	const [isAnnual, setIsAnnual] = useState(true);
 
@@ -64,13 +64,23 @@ export function Pro({ user }) {
 					price={'Starting $6/mo'}
 					name="Pro"
 					action={
-						<A
-							class="btn btn--pro lemonsqueezy-button d-f jc-c ai-c"
-							style="gap:0.2rem"
-							href={`https://web-maker.lemonsqueezy.com/checkout/buy/${checkoutIds.generic}?embed=1&checkout[custom][userId]=${user?.uid}`}
-						>
-							Go PRO
-						</A>
+						window.user ? (
+							<A
+								class="btn btn--pro lemonsqueezy-button d-f jc-c ai-c"
+								style="gap:0.2rem"
+								href={`https://web-maker.lemonsqueezy.com/checkout/buy/${checkoutIds.generic}?embed=1&checkout[custom][userId]=${user?.uid}`}
+							>
+								Go PRO
+							</A>
+						) : (
+							<button
+								type="button"
+								className="btn btn--pro jc-c"
+								onClick={onLoginClick}
+							>
+								Login & upgrade to PRO
+							</button>
+						)
 					}
 					features={[
 						'Unlimited private creations',
@@ -84,7 +94,7 @@ export function Pro({ user }) {
 			</Stack>
 			<Stack justify="center">
 				<Text tag="p" appearance="secondary">
-					Prices are excluding taxes. 30 days refund policy if not satisfied.
+					30 days refund policy if not satisfied.
 				</Text>
 			</Stack>
 		</VStack>

src/components/Share.jsx

@@ -10,11 +10,19 @@ import { Text } from './Text';
 
 const FREE_PUBLIC_ITEM_COUNT = 1;
 const BASE_URL = location.origin;
-const TOGGLE_VISIBILITY_API = !window.location.origin.includes('localhost')
+const TOGGLE_VISIBILITY_API =
+	/*!window.location.origin.includes('localhost')
 	? 'http://127.0.0.1:5001/web-maker-app/us-central1/toggleVisibility'
-	: 'https://togglevisibility-ajhkrtmkaq-uc.a.run.app';
-export function Share({ user, item, onVisibilityChange, onLoginBtnClick }) {
-	const [publicItemCount, setPublicItemCount] = useState(0);
+	: */ 'https://togglevisibility-ajhkrtmkaq-uc.a.run.app';
+
+export function Share({
+	user,
+	item,
+	onVisibilityChange,
+	onLoginBtnClick,
+	onProBtnClick
+}) {
+	const [publicItemCount, setPublicItemCount] = useState();
 	useEffect(() => {
 		if (!user) return;
 		window.db.getPublicItemCount(user.uid).then(c => {
@@ -35,10 +43,10 @@ export function Share({ user, item, onVisibilityChange, onLoginBtnClick }) {
 					`${TOGGLE_VISIBILITY_API}?token=${token}&itemId=${item.id}`
 				);
 			} catch (e) {
-				alertsService.add('Could not change visibility');
+				alertsService.add('Could not set visiblity to public');
 				setTimeout(() => {
 					setVal(!newVal);
-				}, 1000);
+				}, 400);
 				return;
 			}
 
@@ -48,6 +56,9 @@ export function Share({ user, item, onVisibilityChange, onLoginBtnClick }) {
 				alertsService.add('Visiblity set to public');
 			} else {
 				alertsService.add('Could not set visiblity to public');
+				setTimeout(() => {
+					setVal(!newVal);
+				}, 400);
 			}
 		} else {
 			itemService.setItem(item.id, { isPublic: false });
@@ -103,11 +114,17 @@ export function Share({ user, item, onVisibilityChange, onLoginBtnClick }) {
 			{!user?.isPro ? (
 				<VStack gap={1} align="stretch">
 					<p>
-						You have {Math.max(0, FREE_PUBLIC_ITEM_COUNT - publicItemCount)}/
-						{FREE_PUBLIC_ITEM_COUNT} public creations left.
+						Public creations available: {FREE_PUBLIC_ITEM_COUNT}. Used:{' '}
+						{publicItemCount === undefined ? '-' : publicItemCount}. Left:{' '}
+						{Math.max(0, FREE_PUBLIC_ITEM_COUNT - publicItemCount)}
 					</p>
 					<p>
-						For unlimited public creations, upgrade to <ProBadge />
+						<HStack gap={1}>
+							<span>For unlimited public creations, </span>
+							<button onClick={onProBtnClick} class="btn btn--pro btn--small">
+								Upgrade to Pro
+							</button>
+						</HStack>
 					</p>
 				</VStack>
 			) : null}

src/components/app.jsx

@@ -1088,6 +1088,7 @@ export default class App extends Component {
 		trackEvent('fn', 'loggedOut');
 		auth.logout();
 		this.setState({ isProfileModalOpen: false });
+		this.createNewItem();
 		alertsService.add('Log out successfull');
 	}
 
@@ -1859,6 +1860,10 @@ export default class App extends Component {
 								this.closeAllOverlays();
 								this.loginBtnClickHandler();
 							}}
+							onProBtnClick={() => {
+								this.closeAllOverlays();
+								this.proBtnClickHandler();
+							}}
 						/>
 					</Modal>
 					<Modal
@@ -1866,7 +1871,13 @@ export default class App extends Component {
 						closeHandler={() => this.setState({ isProModalOpen: false })}
 						extraClasses="pro-modal"
 					>
-						<Pro user={this.state.user} />
+						<Pro
+							user={this.state.user}
+							onLoginClick={() => {
+								this.closeAllOverlays();
+								this.loginBtnClickHandler();
+							}}
+						/>
 					</Modal>
 
 					{/* Login modal is intentionally kept here after assets & share modal because 

src/style.css

@@ -444,6 +444,13 @@ a > svg {
 	align-items: center;
 }
 
+.btn--small {
+	padding: 0.2rem 0.5rem;
+	text-transform: uppercase;
+	/* border-radius: 3px; */
+	font-size: 0.8rem;
+}
+
 .btn:hover {
 	--black-mix: 90%;
 	text-decoration: none;