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: unify colors across the entire app #918

Merged
merged 3 commits into from
Oct 10, 2023
Merged

fix: unify colors across the entire app #918

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
102572a
fix: unify colors in entire app
grzegorzpokorski Oct 10, 2023
4388d10
Merge branch 'canary' into fix-unify-colors-on-entire-app
typeofweb Oct 10, 2023
2c2f338
Merge branch 'canary' into fix-unify-colors-on-entire-app
typeofweb Oct 10, 2023
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
4 changes: 2 additions & 2 deletions src/app/cart/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default async function Page() {
<ul role="list" className="divide-y divide-gray-200 border-b border-t border-gray-200">
{lines.map((item) => (
<li key={item.id} className="flex py-4">
<div className="flex-shrink-0 rounded-md border bg-slate-50">
<div className="flex-shrink-0 rounded-md border bg-gray-50">
{item.variant?.product?.thumbnail?.url && (
<Image
src={item.variant.product.thumbnail.url}
Expand Down Expand Up @@ -59,7 +59,7 @@ export default async function Page() {
</div>

<div className="mt-12">
<div className="rounded border bg-slate-50 px-4 py-2">
<div className="rounded border bg-gray-50 px-4 py-2">
<div className="flex items-center justify-between py-2">
<div>
<p className="font-semibold text-gray-900">Your Total</p>
Expand Down
2 changes: 1 addition & 1 deletion src/app/categories/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default async function Page({ params }: { params: { slug: string } }) {

return (
<div>
<div className="border-b bg-slate-100/50">
<div className="border-b bg-gray-100/50">
<div className="mx-auto max-w-7xl p-8">
<h1 className="text-xl font-semibold">{name}</h1>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/app/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export default function Error({ error, reset }: { error: Error; reset: () => voi
return (
<div className="bg-white">
<div className="mx-auto max-w-7xl px-6 py-12">
<h1 className="text-2xl font-bold leading-10 tracking-tight text-slate-800">Something went wrong</h1>
<p className="mt-6 max-w-2xl text-base leading-7 text-slate-600">
<h1 className="text-2xl font-bold leading-10 tracking-tight text-gray-800">Something went wrong</h1>
<p className="mt-6 max-w-2xl text-base leading-7 text-gray-600">
<code>{error.message}</code>
</p>
<button
Expand Down
2 changes: 1 addition & 1 deletion src/app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function LoginPage() {
<UserCard email={data.me.email} avatarURL={data.me.avatar?.url || ""} />
<button
onClick={() => signOut()}
className="rounded bg-slate-800 px-4 py-2 text-slate-200 hover:bg-slate-700"
className="rounded bg-gray-800 px-4 py-2 text-gray-200 hover:bg-gray-700"
type="button"
>
Log Out
Expand Down
4 changes: 2 additions & 2 deletions src/app/products/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export default async function Page(props: { params: { slug: string }; searchPara
)}
<div className="flex flex-col pt-6 sm:px-6 sm:pt-0">
<div>
<h1 className="mb-4 flex-auto text-3xl font-bold tracking-tight text-slate-900">
<h1 className="mb-4 flex-auto text-3xl font-bold tracking-tight text-gray-900">
{product?.name}
</h1>
<p className="mb-8 text-sm font-medium text-gray-900">
Expand All @@ -140,7 +140,7 @@ export default async function Page(props: { params: { slug: string }; searchPara
)}
<div className="mt-6 flex items-center">
<CheckIcon className="h-5 w-5 flex-shrink-0 text-blue-500" aria-hidden="true" />
<p className="ml-1 text-sm font-semibold text-slate-500">In stock</p>
<p className="ml-1 text-sm font-semibold text-gray-500">In stock</p>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/app/products/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default async function Page({ searchParams }: Props) {

return (
<div>
<div className="border-b bg-slate-100/50">
<div className="border-b bg-gray-100/50">
<div className="mx-auto max-w-7xl p-8">
<h1 className="text-xl font-semibold">All products</h1>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/checkout/components/AddressSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Skeleton } from "@/checkout/components";

export const AddressSkeleton = () => {
return (
<div className="mb-2 rounded border border-slate-200 px-6 pb-4 pt-6" data-testid="addressSkeleton">
<div className="mb-2 rounded border border-gray-200 px-6 pb-4 pt-6" data-testid="addressSkeleton">
<Skeleton className="w-1/3" />
<Skeleton className="w-2/3" />
<Skeleton className="w-1/2" />
Expand Down
4 changes: 2 additions & 2 deletions src/checkout/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ export const Button: FC<ButtonProps> = ({
const classes = clsx(
"inline-flex h-10 items-center justify-center whitespace-nowrap rounded border active:outline-none",
{
"bg-slate-400 hover:bg-slate-300 hover:border-slate-600 active:bg-slate-300 disabled:border-none disabled:bg-slate-200 aria-disabled:border-none aria-disabled:bg-slate-200":
"bg-gray-400 hover:bg-gray-300 hover:border-gray-600 active:bg-gray-300 disabled:border-none disabled:bg-gray-200 aria-disabled:border-none aria-disabled:bg-gray-200":
variant === "primary",
"border-slate-600 hover:border-slate-700 hover:bg-slate-300 active:bg-slate-300 disabled:border-slate-300 aria-disabled:border-slate-300 bg-transparent disabled:bg-transparent aria-disabled:bg-transparent":
"border-gray-600 hover:border-gray-700 hover:bg-gray-300 active:bg-gray-300 disabled:border-gray-300 aria-disabled:border-gray-300 bg-transparent disabled:bg-transparent aria-disabled:bg-transparent":
variant === "secondary",
"h-auto border-none bg-transparent p-0": variant === "tertiary",
},
Expand Down
2 changes: 1 addition & 1 deletion src/checkout/components/Divider/Divider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from "react";
import { type Classes } from "@/checkout/lib/globalTypes";

export const Divider: React.FC<Classes> = ({ className }) => {
const classes = clsx("border-slate-200 h-px w-full border-t", className);
const classes = clsx("border-gray-200 h-px w-full border-t", className);

return <div className={classes} />;
};
6 changes: 3 additions & 3 deletions src/checkout/components/SelectBox/SelectBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ export const SelectBox = <TFieldName extends string>({
return (
<label
className={clsx(
"relative mb-2 flex cursor-pointer flex-row items-center justify-start rounded border border-slate-400 px-3 py-2",
"hover:border hover:border-slate-500",
{ "border border-slate-500": selected, "pointer-events-none hover:border-slate-400": disabled },
"relative mb-2 flex cursor-pointer flex-row items-center justify-start rounded border border-gray-400 px-3 py-2",
"hover:border hover:border-gray-500",
{ "border border-gray-500": selected, "pointer-events-none hover:border-gray-400": disabled },
className,
)}
>
Expand Down
4 changes: 2 additions & 2 deletions src/checkout/components/TextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const TextInputComponent = <TName extends string>({
return (
<div>
<label className="block">
<span className="text-xs text-slate-700">
<span className="text-xs text-gray-700">
{label}
{required && "*"}
</span>
Expand All @@ -33,7 +33,7 @@ export const TextInputComponent = <TName extends string>({
{...field}
{...props}
className={clsx(
"mt-0.5 block w-full appearance-none rounded-md border-slate-300 shadow-sm transition-colors focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 active:border-indigo-200 active:outline-none",
"mt-0.5 block w-full appearance-none rounded-md border-gray-300 shadow-sm transition-colors focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 active:border-indigo-200 active:outline-none",
{ "border-red-300": error },
props.className,
)}
Expand Down
2 changes: 1 addition & 1 deletion src/checkout/sections/DeliveryMethods/DeliveryMethodsSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const DeliveryMethodsSkeleton = () => {
return (
<div className="py-6">
<Skeleton variant="title" className="w-1/3" />
<div className="rounded border border-slate-200 px-6 pb-4 pt-6">
<div className="rounded border border-gray-200 px-6 pb-4 pt-6">
<Skeleton className="w-2/3" />
<Skeleton className="w-1/3" />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/checkout/sections/PageHeader/LanguageSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const LanguageSelect = () => {
<select
value={locale}
onChange={(event) => handleLanguageChange(event.currentTarget.value as Locale)}
className="h-10 w-full cursor-pointer appearance-none rounded border border-slate-600 px-3 py-2 pr-12 text-base"
className="h-10 w-full cursor-pointer appearance-none rounded border border-gray-600 px-3 py-2 pr-12 text-base"
>
{locales.map((locale) => (
<option value={locale} key={locale}>
Expand Down
2 changes: 1 addition & 1 deletion src/checkout/sections/PaymentSection/PaymentSectionSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const PaymentSectionSkeleton: React.FC<PaymentSectionSkeletonProps> = ({}
return (
<div className="py-6">
<Skeleton variant="title" />
<div className="mt-4 flex flex-row items-center rounded border border-slate-200 px-6 pb-4 pt-6">
<div className="mt-4 flex flex-row items-center rounded border border-gray-200 px-6 pb-4 pt-6">
<Skeleton className="mr-4 w-1/5" />
<Skeleton className="mr-4 w-1/5" />
<Skeleton className="w-1/5" />
Expand Down
2 changes: 1 addition & 1 deletion src/checkout/views/EmptyCartPage/EmptyCartPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const EmptyCartPage = () => {

return (
<div className="flex w-full flex-row justify-center lg:mt-10">
<div className="flex flex-col justify-start rounded-lg border border-slate-400 py-6">
<div className="flex flex-col justify-start rounded-lg border border-gray-400 py-6">
<Title>{formatMessage(emptyCartMessages.emptyCart)}</Title>
<p>{formatMessage(emptyCartMessages.addToCardToContinue)}</p>
<Button
Expand Down
2 changes: 1 addition & 1 deletion src/checkout/views/OrderConfirmation/OrderConfirmationSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const OrderConfirmationSkeleton = () => {
<Skeleton className="w-2/3" />
</header>
<main className="mt-8 flex w-full flex-col overflow-hidden lg:flex-row lg:items-start">
<div className="w-1/2 rounded border border-slate-200 px-6 pb-4 pt-6">
<div className="w-1/2 rounded border border-gray-200 px-6 pb-4 pt-6">
<div className="mb-10">
<Skeleton variant="title" />
<Skeleton />
Expand Down
2 changes: 1 addition & 1 deletion src/ui/atoms/Loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export function Loader() {
<div role="status">
<svg
aria-hidden="true"
className="mr-2 inline h-12 w-12 animate-spin fill-slate-600 text-gray-200 dark:text-gray-600"
className="mr-2 inline h-12 w-12 animate-spin fill-gray-600 text-gray-200 dark:text-gray-600"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/ActiveLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function ActiveLink({
key={key}
href={href}
className={clsx(
isActive ? "border-slate-500" : "border-transparent",
isActive ? "border-gray-500" : "border-transparent",
"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700",
)}
>
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const footer = {
};
export function Footer() {
return (
<footer className="border-t border-slate-300 bg-slate-50">
<footer className="border-t border-gray-300 bg-gray-50">
<div className="mx-auto max-w-7xl px-4 lg:px-8">
<div className="grid grid-cols-3 gap-8 py-16">
<h2 className="sr-only">Quick links</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/LoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export function LoginForm() {
/>
</div>

<button className="rounded bg-slate-800 px-4 py-2 text-slate-200 hover:bg-slate-700" type="submit">
<button className="rounded bg-gray-800 px-4 py-2 text-gray-200 hover:bg-gray-700" type="submit">
Log In
</button>
</form>
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export async function Nav() {
const lines = checkout ? checkout.lines : [];

return (
<div className="sticky top-0 z-20 border-b bg-slate-100/75 backdrop-blur-md">
<div className="sticky top-0 z-20 border-b bg-gray-100/75 backdrop-blur-md">
<div className="mx-auto max-w-7xl px-2 lg:px-8">
<div className="flex h-16 justify-between gap-8">
<div className="flex overflow-x-auto whitespace-nowrap px-2 lg:px-0">
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export async function Pagination({
};
}) {
return (
<nav className="flex items-center justify-center gap-x-4 border-slate-200 px-4">
<nav className="flex items-center justify-center gap-x-4 border-gray-200 px-4">
<Link
href={pageInfo.hasNextPage ? `/products?cursor=${pageInfo.endCursor}` : "#"}
className={clsx("px-4 py-2 text-sm font-medium ", {
Expand Down
8 changes: 4 additions & 4 deletions src/ui/components/Topbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ export function Topbar() {
const { data } = useQuery<CurrentUserQuery>(gql(CurrentUserDocument.toString()));

return (
<div className="border-b border-slate-100 bg-slate-800">
<div className="border-b border-gray-100 bg-gray-800">
<div className="mx-auto flex h-10 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
<div></div>
<div className="flex items-center text-center text-sm font-medium text-slate-50 hover:text-slate-300">
<div className="flex items-center text-center text-sm font-medium text-gray-50 hover:text-gray-300">
<StarIcon className="mr-2 h-4 text-yellow-300" />
<Link href="https://github.com/saleor/storefront" target="_blank">
Star our Storefront Example on GitHub
Expand All @@ -22,11 +22,11 @@ export function Topbar() {

<div className="flex flex-1 items-center justify-end">
{data?.me ? (
<button onClick={() => signOut()} className="text-sm font-medium text-white hover:text-slate-300">
<button onClick={() => signOut()} className="text-sm font-medium text-white hover:text-gray-300">
Logout
</button>
) : (
<Link href="/login" className="text-sm font-medium text-white hover:text-slate-300">
<Link href="/login" className="text-sm font-medium text-white hover:text-gray-300">
Login
</Link>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/ui/components/UserCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ type UserCardProps = {
export const UserCard = (user: UserCardProps) => {
const { email, avatarURL } = user;
return (
<div className="rounded-xl bg-white p-4 dark:bg-slate-800 md:flex">
<div className="rounded-xl bg-white p-4 dark:bg-gray-800 md:flex">
<Image
className="h-24 w-24 rounded-full md:rounded-none "
src={avatarURL}
Expand Down