Skip to content

Feat - Consistent grey across the site #253

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

Merged
NiallJoeMaher merged 4 commits into from
Apr 19, 2023
Merged

Feat - Consistent grey across the site #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bafcc47
Update Tailwind config with new black
NiallJoeMaher Apr 19, 2023
0f98750
Update globals to use neutral gray
NiallJoeMaher Apr 19, 2023
7e17bf7
Remove slate, gray and smoke colors
NiallJoeMaher Apr 19, 2023
f6e136d
Remove quotes from blockquote
NiallJoeMaher Apr 19, 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
20 changes: 10 additions & 10 deletions components/ArticlePreview/ArticleLoading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
const ArticleLoading = () => (
<div className="border-white border-2 shadow p-4 w-full my-4 bg-smoke">
<div className="border-l-4 border-l-pink-600 shadow p-4 w-full my-4 bg-neutral-900">
<div className="animate-pulse">
<div className="flex space-x-4">
<div className="rounded-full bg-gray-800 h-10 w-10"></div>
<div className="rounded-full bg-neutral-800 h-10 w-10"></div>
<div className="flex-1 space-y-2 py-1">
<div className="grid grid-cols-8 gap-2">
<div className="h-2 bg-gray-800 rounded col-span-2"></div>
<div className="h-2 bg-neutral-800 rounded col-span-2"></div>
<div className="col-span-4" />
<div className="h-2 bg-gray-800 rounded col-span-3"></div>
<div className="h-2 bg-neutral-800 rounded col-span-3"></div>
</div>
</div>
</div>
<div className="grid gap-x-4 grid-cols-12 space-y-2 my-4">
<div className="h-5 col-span-8 bg-gray-800 rounded mb-4"></div>
<div className="h-2 col-span-12 bg-gray-800 rounded"></div>
<div className="h-2 col-span-6 bg-gray-800 rounded"></div>
<div className="h-2 col-span-6 bg-gray-800 rounded"></div>
<div className="h-2 col-span-12 bg-gray-800 rounded"></div>
<div className="h-5 col-span-8 bg-neutral-800 rounded mb-4"></div>
<div className="h-2 col-span-12 bg-neutral-800 rounded"></div>
<div className="h-2 col-span-6 bg-neutral-800 rounded"></div>
<div className="h-2 col-span-6 bg-neutral-800 rounded"></div>
<div className="h-2 col-span-12 bg-neutral-800 rounded"></div>
</div>
<div className="h-5 col-span-5 bg-gray-800 rounded mt-6 w-40"></div>
<div className="h-5 col-span-5 bg-neutral-800 rounded mt-6 w-40"></div>
</div>
</div>
);
Expand Down
16 changes: 8 additions & 8 deletions components/ArticlePreview/ArticlePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const ArticlePreview: NextPage<Props> = ({
};

return (
<article className="p-4 my-4 shadow-lg border-2 border-white bg-smoke">
<article className="border-l-4 border-l-pink-600 p-4 my-4 shadow-lg bg-neutral-900">
<div className="flex justify-between">
<div className="flex items-center mb-4">
<span className="sr-only">{name}</span>
Expand All @@ -84,12 +84,12 @@ const ArticlePreview: NextPage<Props> = ({
alt={`${name}'s avatar`}
/>
</Link>
<div className="flex text-xs text-gray-500 flex-col justify-center">
<p className="font-medium text-gray-500">
<div className="flex text-xs text-neutral-500 flex-col justify-center">
<p className="font-medium text-neutral-500">
Written by{" "}
<Link
href={`/${username}`}
className="text-gray-400 font-semibold"
className="text-neutral-400 font-semibold"
>
{name}
</Link>
Expand Down Expand Up @@ -129,7 +129,7 @@ const ArticlePreview: NextPage<Props> = ({
<div className="flex gap-x-2">
{showBookmark && (
<button
className="lg:mx-auto p-1 rounded-full hover:bg-slate-800"
className="lg:mx-auto p-1 rounded-full hover:bg-neutral-800"
onClick={() => {
if (bookmarked) return bookmarkPost(id, false);
bookmarkPost(id);
Expand All @@ -146,7 +146,7 @@ const ArticlePreview: NextPage<Props> = ({
{menuOptions && (
<Menu as="div" className="relative">
<div>
<Menu.Button className="p-1 rounded-full hover:bg-slate-800">
<Menu.Button className="p-1 rounded-full hover:bg-neutral-800">
<span className="sr-only">Open user menu</span>
<DotsHorizontalIcon className="w-6 h-6" />
</Menu.Button>
Expand All @@ -165,15 +165,15 @@ const ArticlePreview: NextPage<Props> = ({
<Menu.Item key={item.label}>
{"href" in item ? (
<Link
className="block px-4 py-2 text-gray-700 hover:bg-gray-200 rounded w-full text-left"
className="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 rounded w-full text-left"
key={item.label}
href={item.href}
>
{item.label}
</Link>
) : (
<button
className="block px-4 py-2 text-gray-700 hover:bg-gray-200 rounded w-full text-left"
className="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 rounded w-full text-left"
onClick={item.onClick}
>
{item.label}
Expand Down
8 changes: 4 additions & 4 deletions components/BioBar/BioBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,19 @@ const BioFooter = ({ author }: Props) => {

const { name, image, bio, username } = author;
return (
<div className="mx-auto pb-4 max-w-xl px-4 sm:px-0">
<div className="flex flex-col sm:flex-row md:mx-auto border-t-2 pt-6 border-gray-300 dark:border-gray-800">
<div className="mx-auto pb-4">
<div className="flex flex-col sm:flex-row md:mx-auto border-t-2 pt-6 border-neutral-300 dark:border-neutral-800">
<Link href={`/${username}`} className="shrink-0">
<img
className="mr-4 rounded-full object-cover bg-slate-700 h-20 w-20 sm:h-24 sm:w-24 sm:mb-0 mb-2"
className="mr-4 rounded-full object-cover bg-neutral-700 h-20 w-20 sm:h-24 sm:w-24 sm:mb-0 mb-2"
alt={`Avatar for ${name}`}
src={image}
/>
</Link>

<div className="flex flex-col justify-center">
{username && (
<h4 className="text-lg md:text-xl font-bold text-gray-200">
<h4 className="text-lg md:text-xl font-bold text-neutral-200">
Written by{" "}
<Link
className="underline font-bold text-white"
Expand Down
34 changes: 17 additions & 17 deletions components/Comments/CommentsArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,10 +207,10 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
{editCommentBoxId !== id ? (
<>
<div className="flex items-center mb-2 justify-between">
<div className="flex items-center space-x-2 text-sm text-slate-500">
<div className="flex items-center space-x-2 text-sm text-neutral-500">
<Link href={`/${username}`}>
<img
className="rounded-full object-cover bg-slate-700 h-8 w-8"
className="rounded-full object-cover bg-neutral-700 h-8 w-8"
alt={`Avatar for ${name}`}
src={image}
/>
Expand Down Expand Up @@ -244,7 +244,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
{isCurrentUser ? (
<Menu as="div" className="relative">
<div>
<Menu.Button className="p-1 rounded-full hover:bg-slate-800">
<Menu.Button className="p-1 rounded-full hover:bg-neutral-800 bg-neutral-900">
<span className="sr-only">Open user menu</span>
<DotsHorizontalIcon className="w-6 h-6" />
</Menu.Button>
Expand All @@ -262,7 +262,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
<>
<Menu.Item>
<button
className="block px-4 py-2 text-gray-700 hover:bg-gray-200 rounded w-full text-left text-sm"
className="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 rounded w-full text-left text-sm"
onClick={() => {
if (id !== editCommentBoxId) {
setValue("edit", body);
Expand All @@ -276,7 +276,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
</Menu.Item>
<Menu.Item>
<button
className="block px-4 py-2 text-gray-700 hover:bg-gray-200 rounded w-full text-left text-sm"
className="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 rounded w-full text-left text-sm"
onClick={() => {
deleteComment({ id });
}}
Expand All @@ -291,7 +291,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
) : null}
</div>

<div className="border-l-2 border-slate-700 ml-4 pl-2 -mt-2">
<div className="border-l-2 border-neutral-700 ml-4 pl-2 -mt-2">
<div className="prose prose-invert text-sm overflow-x-scroll">
{Markdoc.renderers.react(content, React, {
components: markdocComponents,
Expand All @@ -300,7 +300,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {

<div className="flex items-center mt-2 mb-4">
<button
className="p-1 mr-1 rounded-full hover:bg-slate-800"
className="p-1 mr-1 rounded-full hover:bg-neutral-800"
onClick={() => likeComment(id)}
>
<HeartIcon
Expand All @@ -314,7 +314,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
</span>
{depth < 6 && (
<button
className="border border-white px-2 py-1 text-xs rounded hover:bg-slate-800"
className="border border-white px-2 py-1 text-xs rounded hover:bg-neutral-800"
onClick={() => {
if (!session) return signIn();
if (showCommentBoxId !== id) {
Expand Down Expand Up @@ -391,14 +391,14 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
{loading && (
<div className="top-0 bottom-0 left-0 right-0 absolute">
<div className="flex justify-center items-center h-full">
<div className="border-4 border-slate-700 border-l-slate-500 animate-spin rounded-full h-8 w-8 opacity-100" />
<div className="border-4 border-neutral-700 border-l-neutral-500 animate-spin rounded-full h-8 w-8 opacity-100" />
</div>
</div>
)}
{session?.user?.image && (
<div className="flex items-center mb-2">
<img
className="mr-2 rounded-full object-cover bg-slate-700 h-8 w-8"
className="mr-2 rounded-full object-cover bg-neutral-700 h-8 w-8"
alt={`Avatar for ${session.user.name}`}
src={session.user.image}
/>
Expand Down Expand Up @@ -431,7 +431,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
<button
disabled={createCommentStatus === "loading"}
type="submit"
className=" text-gray-300 border-2 hover:text-white primary-button text-sm"
className=" text-neutral-300 border-2 hover:text-white primary-button text-sm"
>
{editMode ? "Update" : "Submit"}
</button>
Expand Down Expand Up @@ -463,25 +463,25 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
};

return (
<section className="w-full bg-smoke border sm:border-2 border-white z-10 relative">
<section className="w-full relative">
{!initiallyLoaded && (
<div className="top-0 bottom-0 left-0 right-0 absolute z-20">
<div className="flex justify-center items-center h-full">
<div className="border-4 border-slate-700 border-l-slate-500 animate-spin rounded-full h-8 w-8 opacity-100" />
<div className="border-4 border-neutral-700 border-l-neutral-500 animate-spin rounded-full h-8 w-8 opacity-100" />
<span className="sr-only">Loading</span>
</div>
</div>
)}
<h2 className="mx-2 sm:mx-4 mt-4 pb-2 text-xl border-b border-gray-800">
<h2 className="mt-4 pb-2 text-xl border-b border-neutral-800">
{initiallyLoaded
? `Discussion (${commentsResponse?.count || 0})`
: "Fetching comments"}
</h2>
<div className="mx-2 sm:mx-4 mt-4">
<div className="mt-4">
{session ? (
<CommentArea id={0} name="comment" />
) : (
<div className="mb-4 text-lg pb-4 border-b border-gray-800">
<div className="mb-4 text-lg pb-4 border-b border-neutral-800">
<p className="mb-2">Hey! 👋</p>
<p className="mb-2">Got something to say?</p>
<p>
Expand All @@ -497,7 +497,7 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
</div>
)}
</div>
<div className="mx-2 sm:mx-4 mb-8">{generateComments(comments)}</div>
<div className="mb-8">{generateComments(comments)}</div>
<Toaster
toastOptions={{
style: {
Expand Down
8 changes: 4 additions & 4 deletions components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,13 @@ const Footer = () => {
href={item.href}
target="_blank"
rel="noopener noreferrer"
className="text-base text-gray-500 hover:text-gray-400"
className="text-base text-neutral-500 hover:text-neutral-400"
>
{item.name}
</a>
) : (
<Link
className="text-base text-gray-500 hover:text-gray-400"
className="text-base text-neutral-500 hover:text-neutral-400"
href={item.href}
>
{item.name}
Expand All @@ -78,14 +78,14 @@ const Footer = () => {
href={item.href}
target="_blank"
rel="noopener noreferrer"
className="text-gray-500 hover:text-gray-400"
className="text-neutral-500 hover:text-neutral-400"
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
<p className="mt-8 text-center text-base text-gray-500">
<p className="mt-8 text-center text-base text-neutral-500">
&copy; {Temporal.Now.plainDateISO().year} Codú Software Solutions,
Ltd.
</p>
Expand Down
2 changes: 1 addition & 1 deletion components/Modal/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function Modal({ open, onClose, children }: Props) {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-800 bg-opacity-75 transition-opacity" />
<div className="fixed inset-0 bg-neutral-800 bg-opacity-75 transition-opacity" />
</Transition.Child>

<div className="fixed z-10 inset-0 overflow-y-auto">
Expand Down
Loading