Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: design qa feedback #1033

Merged
merged 14 commits into from
Oct 10, 2024
Merged

fix: design qa feedback #1033

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a10a2ca
fix: design qa feedback
RobChangCA Oct 9, 2024
33d594c
fix: spacing in tos
RobChangCA Oct 9, 2024
79b0da1
fix: line up top nav
RobChangCA Oct 9, 2024
8fefd48
fix: reduce distance in TOS, pink link
RobChangCA Oct 9, 2024
a4b9d4f
fix: support link spacing
RobChangCA Oct 9, 2024
1cef8b2
fix: topbar changes
RobChangCA Oct 9, 2024
b3f1cea
fix: update focus radius
RobChangCA Oct 9, 2024
8f5fba2
feat: avatar ring
RobChangCA Oct 9, 2024
b630e9e
fix: bg color in darkmode
RobChangCA Oct 9, 2024
8b3394a
Merge branch 'main' into rob/qa
RobChangCA Oct 10, 2024
b94a10e
fix: remove bg gradient on mobile
RobChangCA Oct 10, 2024
cfc506f
Merge branch 'main' into rob/qa
RobChangCA Oct 10, 2024
edfffd1
fix: copy change
RobChangCA Oct 10, 2024
2ec5a15
Merge branch 'main' into rob/qa
RobChangCA Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion account-kit/react/src/components/auth/card/footer/email-not-reveived.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const EmailNotReceivedDisclaimer = ({
}, [emailResent]);

return (
<div className="flex flex-row gap-2 justify-center mb-3">
<div className="flex flex-row gap-2 justify-center mb-2">
<span className="text-fg-tertiary text-xs">
{ls.loadingEmail.emailNotReceived}
</span>
Expand Down
2 changes: 1 addition & 1 deletion account-kit/react/src/components/auth/card/footer/help-text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const HelpText = () => {
const { supportUrl } = useUiConfig();
if (!supportUrl) return null;
return (
<div className="flex flex-row gap-2 justify-center mb-3">
<div className="flex flex-row gap-1 justify-center mb-2">
<span className="text-fg-tertiary text-xs">
{ls.loadingPasskey.supportText}
</span>
Expand Down
2 changes: 1 addition & 1 deletion account-kit/react/src/components/auth/card/footer/registration-disclaimer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ls } from "../../../../strings.js";

export const RegistrationDisclaimer = () => (
<div className="flex flex-row gap-2 justify-center mb-3">
<div className="flex flex-row gap-1 justify-center mb-2">
<span className="text-fg-tertiary text-xs">{ls.login.tosPrefix}</span>
<a
className="text-btn-primary text-xs underline"
Expand Down
69 changes: 46 additions & 23 deletions examples/ui-demo/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { CodePreview } from "../components/preview/CodePreview";
import { CodePreviewSwitch } from "../components/shared/CodePreviewSwitch";
import { TopNav } from "../components/topnav/TopNav";
import { MintCard } from "@/components/shared/mint-card/MintCard";
import ExternalLink from "@/components/shared/ExternalLink";

const publicSans = Public_Sans({
subsets: ["latin"],
Expand Down Expand Up @@ -56,44 +57,66 @@ export default function Home() {
{/* Code toggle header */}
<div
className={cn(
`absolute h-[85px] w-full p-6 top-0 flex items-center left-0 border-b border-border z-10`,
` w-full p-6 top-0 left-0 border-b border-border z-10`,
!user && !showCode && "border-[transparent]",
!user || showCode ? "justify-end" : "justify-between",
showCode ? "sticky" : "absolute",
config.ui.theme === "dark"
? showCode
? "bg-white"
: "bg-[#4D4D4D]"
: "bg-white"
)}
>
{!showCode && user && <RenderUserConnectionAvatar />}
<div className="flex gap-2 items-center">
<div
className={cn(
"px-2 py-1 h-5 rounded text-xs font-semibold hidden lg:flex items-center justify-center ",
showCode
? "bg-[#F3F3FF] text-[#8B5CF6]"
: "bg-[#EFF4F9] text-[#374151]"
)}
>
Code preview
<div
className={cn(
"flex justify-between items-start",

!showCode && !user && "justify-end"
)}
>
{!showCode && user && <RenderUserConnectionAvatar />}
{showCode && (
<div className="font-semibold text-foreground text-xl">
Export configuration
</div>
)}
<div className="flex gap-2 items-center">
<div
className={cn(
"px-2 py-1 h-5 rounded text-xs font-semibold hidden lg:flex items-center justify-center ",
showCode
? "bg-[#F3F3FF] text-[#8B5CF6]"
: "bg-[#EFF4F9] text-[#374151]"
)}
>
Code preview
</div>
<CodePreviewSwitch
checked={showCode}
onCheckedChange={setShowCode}
/>
</div>
<CodePreviewSwitch
checked={showCode}
onCheckedChange={setShowCode}
/>
</div>
{showCode && (
<p className="text-sm text-[#475569] max-w-[85%]">
To get started, simply paste the below code into your
environment. You&apos;ll need to add your Alchemy API key and
Gas Policy ID.{" "}
<ExternalLink
href="#"
className="font-semibold text-blue-600"
>
Fully customize CSS here.
</ExternalLink>
</p>
)}
</div>

{/* Don't unmount when showing code preview so that the auth card retains its state */}
<AuthCardWrapper
className={cn(
showCode && "hidden",
"mt-0 xl:pt-0",
!user ? "md:pt-0" : "md:pt-[85px]"
)}
className={cn(showCode && "hidden", "mt-0 xl:pt-0")}
/>
{showCode && <CodePreview className="pt-[105px]" />}
{showCode && <CodePreview />}
</div>
</div>
<div className="flex flex-1 flex-col gap-6 sm:hidden">
Expand Down
2 changes: 1 addition & 1 deletion examples/ui-demo/src/components/configuration/Authentication.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const Authentication = ({ className }: { className?: string }) => {
<ExternalLinkIcon
height={16}
width={16}
className="text-fg-secondary"
className="text-[#475569]"
/>
</ExternalLink>
<Switch
Expand Down
2 changes: 1 addition & 1 deletion examples/ui-demo/src/components/configuration/ColorPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function ColorPicker({ theme }: { theme: "dark" | "light" }) {
<Popover>
<PopoverTrigger
className={cn(
"self-start border rounded-lg py-2 px-[10px] gap-2 flex items-center justify-between hover:opacity-80 w-28 h-10 border-gray-300"
"self-start border rounded-lg py-2 px-[10px] gap-2 flex items-center justify-between hover:opacity-80 w-28 h-10 border-gray-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
)}
>
<div
Expand Down
2 changes: 1 addition & 1 deletion examples/ui-demo/src/components/configuration/Styling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ function LearnMore() {
<div className="text-secondary">
Customize every pixel with{" "}
<ExternalLink
className="font-semibold text-blue-600"
className="font-semibold text-btn-primary"
href="https://github.com/alchemyplatform/aa-sdk/blob/v4.x.x/account-kit/react/src/tailwind/types.ts#L6"
>
CSS
Expand Down
2 changes: 1 addition & 1 deletion examples/ui-demo/src/components/configuration/components/CornerRadiusOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function CornerRadiusOptions() {
<div className="hidden md:flex self-stretch gap-3">
{RADIUS_OPTIONS.map((option) => (
<button
className={`h-9 flex items-center justify-center flex-1 basis-0 hover:opacity-80 border border-gray-300 ${
className={`h-9 flex items-center justify-center flex-1 basis-0 hover:opacity-80 border border-gray-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background ${
option.id === borderRadius
? "border-[#363FF9] border-[1.5px] bg-[#EFF4F9] font-semibold"
: ""
Expand Down
4 changes: 2 additions & 2 deletions examples/ui-demo/src/components/configuration/components/IllustrationStyleOptions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ export function IllustrationStyleOptions() {
className={cn(
"py-2 flex-1 basis-0 rounded-lg border border-gray-300",
"text-fg-accent-brand hover:opacity-80",
"flex items-center justify-center",
"flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
illustrationStyle === value
? "border-[#363FF9] border-[1.5px] bg-[#EFF4F9] font-semibold"
? "border-[1.5px] bg-[#EFF4F9] font-semibold"
: ""
)}
onClick={() => onChange(value)}
Expand Down
8 changes: 7 additions & 1 deletion examples/ui-demo/src/components/preview/AuthCardWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,13 @@ const RenderContent = () => {
if (!hasUser) {
return (
<div className="flex flex-col gap-2 w-[368px]">
<div className="modal bg-surface-default shadow-md overflow-hidden">
<div
className="radius bg-surface-default overflow-hidden"
style={{
boxShadow:
"0px 290px 81px 0px rgba(0, 0, 0, 0.00), 0px 186px 74px 0px rgba(0, 0, 0, 0.01), 0px 104px 63px 0px rgba(0, 0, 0, 0.05), 0px 46px 46px 0px rgba(0, 0, 0, 0.09), 0px 12px 26px 0px rgba(0, 0, 0, 0.10)",
}}
>
<AuthCard />
</div>
</div>
Expand Down
13 changes: 0 additions & 13 deletions examples/ui-demo/src/components/preview/CodePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,6 @@ export function CodePreview({ className }: { className?: string }) {
className
)}
>
<div className="flex flex-col gap-2">
<div className="font-semibold text-foreground text-xl">
Export configuration
</div>
<div className="text-sm text-gray-600">
To get started, simply paste the below code into your environment.
You&apos;ll need to add your Alchemy API key and Gas Policy ID too.
Log in to automatically inject the keys into the code below.{" "}
<ExternalLink href="#" className="text-blue-600 font-semibold">
Fully customize CSS here.
</ExternalLink>
</div>
</div>
<div className="flex flex-col">
<div className="mb-2 font-semibold text-secondary">Config</div>
<p className="mb-4 text-sm text-secondary-foreground">
Expand Down
2 changes: 1 addition & 1 deletion examples/ui-demo/src/components/preview/MobileSplashPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function MobileSplashPage() {
</a>
</div>
<div className="mt-6 flex justify-center">
<span className="text-sm text-center block">
<span className="text-sm text-center block ">
Visit desktop site to customize styles and auth methods
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion examples/ui-demo/src/components/shared/CodePreviewSwitch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const CodePreviewSwitch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-[28px] w-[50px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=unchecked]:bg-[#94A3B8]",
"peer inline-flex h-[28px] w-[50px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#020617] data-[state=unchecked]:bg-[#94A3B8]",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can we put these bg colors into the theme for the ui-demo somewhere? I ran into some inconsistencies with background colors on the toggles (eg. Email toggle vs Passkey On Signup toggle when passkeys are off)

There's also a thread about revisiting some of the bg colors of the toggles and that will make it easier to address them all

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are hardcoded because we don't want them to change when we alter the theme from light to dark

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we end up theming the sidebar we will refactor all the hardcoded values.

className
)}
{...props}
Expand Down
6 changes: 3 additions & 3 deletions examples/ui-demo/src/components/shared/mint-card/MintCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export const MintCard = () => {
<div className="sm:self-center">
<div className="flex items-center flex-col justify-center mb-12 xl:mb-0 xl:flex-row xl:justify-center xl:items-start bg-bg-surface-default radius-1 border-btn-secondary border md:mx-6 xl:mx-0 overflow-hidden xl:h-[532px]">
<RenderUserConnectionAvatar className="sm:hidden w-full p-6 mb-0 pb-6 relative after:absolute after:bottom-0 after:left-6 after:right-6 after:h-[1px] after:bg-border" />
<div className="hidden xl:block px-10 py-12 h-full w-[428px]">
<div className="hidden xl:block px-10 py-12 h-full">
<h1 className="text-3xl font-semibold leading-10 mb-8 text-fg-primary">
{!nftTransfered
? "One-click checkout"
Expand All @@ -123,15 +123,15 @@ export const MintCard = () => {
<ValueProps status={status} />
</div>
<div
className={`p-6 xl:px-10 xl:py-12 h-full bg-bg-surface-default xl:bg-bg-surface-inset md:min-w-96`}
className={`p-6 xl:px-10 xl:py-12 h-full bg-bg-surface-default xl:bg-bg-surface-inset`}
>
<NFT
nftTransfered={nftTransfered}
transactionUrl={transactionUrl}
status={status}
/>
<MintCardActionButtons
className="hidden xl:block"
className="hidden xl:block w-[208px] m-auto"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any reason for the w of this to be controlled by flex-1 and use padding / break points to control the spacing and layout?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

they want it to match the width of the mint image which isn't a direct sibling

nftTransfered={nftTransfered}
handleCollectNFT={handleCollectNFT}
disabled={isActionButtonsDisabled}
Expand Down
4 changes: 2 additions & 2 deletions examples/ui-demo/src/components/shared/mint-card/MintCardActionButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function MintCardActionButtons({
<div>
<a
href="https://dashboard.alchemy.com/"
className="btn btn-primary flex text-center mb-4 p-2 w-full md:w-52 m-auto"
className="btn btn-primary flex text-center mb-4 p-2 w-full m-auto"
target="_blank"
rel="noreferrer"
>
Expand All @@ -43,7 +43,7 @@ export function MintCardActionButtons({
>
View docs
</a>
<p className="text-sm text-fg-secondary text-center md:hidden">
<p className="text-sm text-fg-secondary text-center md:hidden">
Visit desktop site to customize styles and auth methods
</p>
</div>
Expand Down
5 changes: 3 additions & 2 deletions examples/ui-demo/src/components/shared/user-connection-avatar/UserConnectionAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,9 @@ const UserConnectionAvatar = ({
{showDeploymentStatus && (
<div
className={cn(
"bg-[#fff] p-[2px] rounded-full absolute bottom-[-4px] left-[23px]",
deploymentStatus && "p-[1px]"
"p-[2px] rounded-full absolute bottom-[-4px] left-[23px]",
deploymentStatus && "p-[1px]",
currentTheme === "dark" ? "bg-[#4D4D4D]" : "bg-[white]"
)}
>
<DeploymentStatusIndicator
Expand Down
2 changes: 1 addition & 1 deletion examples/ui-demo/src/components/topnav/TopNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { links } from "@/utils/links";
export function TopNav() {
return (
<div className="sticky left-0 top-0 right-0 flex justify-center py-5 bg-[rgba(255,255,255,0.5)] shadow-sm">
<div className="flex items-center justify-between h-full w-full max-w-[1440px] mx-4">
<div className="flex items-center justify-between h-full w-full max-w-[1440px] mx-6 md:mx-7 lg:mx-10">
<div className="flex justify-center items-center gap-2">
<Wordmark />
<div className="w-px h-5 bg-gray-500" />
Expand Down
Loading