Skip to content

Commit

Permalink
fix: unify colors across the entire app (#918)
Browse files Browse the repository at this point in the history 
Co-authored-by: Michał Miszczyszyn <michal@mmiszy.pl>
  • Loading branch information
@grzegorzpokorski @typeofweb
grzegorzpokorski and typeofweb authored Oct 10, 2023
1 parent c2cd13d commit da2b8bd
Show file tree
Hide file tree
Showing 24 changed files with 34 additions and 34 deletions.
4 changes: 2 additions & 2 deletions src/app/cart/page.tsx
View file
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

1 comment on commit da2b8bd

@vercel
Copy link

@vercel vercel bot commented on da2b8bd Oct 10, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

storefront – ./

storefront-saleorcommerce.vercel.app
storefront-saleor-example.vercel.app
storefront-git-canary-saleorcommerce.vercel.app

Please sign in to comment.