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

Jump to bottom

Chore/remove styles from globals.css #1172

Closed
wants to merge 5 commits into from
Closed

Chore/remove styles from globals.css #1172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
64d3e7c
remove .input-base class
John-Paul-Larkin Oct 24, 2024
c10b323
revove custom styles/colors for footer icons
John-Paul-Larkin Oct 24, 2024
faf56c7
comment out unused classes
John-Paul-Larkin Oct 24, 2024
a29c6e4
add focusable HOC
John-Paul-Larkin Oct 24, 2024
8e76cce
apply focusable HOC
John-Paul-Larkin Oct 24, 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 app/(editor)/create/[[...paramsArr]]/_client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -557,7 +557,7 @@ const Create = ({ session }: { session: Session | null }) => {
type="button"
className="relative flex w-full focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 active:hover:bg-neutral-50 disabled:opacity-50"
>
<div className="input-base flex max-w-full flex-1 overflow-hidden border text-left">
<div className="block w-full max-w-full flex-1 overflow-hidden border px-2 py-2 text-left text-black shadow-sm ring-offset-1 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-neutral-300 disabled:opacity-50 dark:border-white dark:bg-black dark:text-white sm:text-sm">
{PREVIEW_URL}
</div>
<div className="absolute bottom-0 right-0 top-0 w-[120px] border border-neutral-300 bg-white px-4 py-2 font-medium text-neutral-600 shadow-sm">
Expand Down
23 changes: 13 additions & 10 deletions app/(editor)/create/[[...paramsArr]]/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { Fragment } from "react";
import { type Session } from "next-auth";
import Logo from "@/icons/logo.svg";
import { type PostStatus, status } from "@/utils/post";
import Focusable from "@/components/Focusable/Focusable";

type EditorNavProps = {
session: Session | null;
Expand Down Expand Up @@ -83,16 +84,18 @@ const EditorNav = ({

{session && (
<>
<Link
href="/notifications"
className="focus-style relative rounded-full p-1 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
>
<span className="sr-only">View notifications</span>
{hasNotifications && (
<div className="absolute right-0 top-0 h-2 w-2 rounded-full bg-pink-500" />
)}
<BellIcon className="h-5 w-5" aria-hidden="true" />
</Link>
<Focusable>
<Link
href="/notifications"
className="relative rounded-full p-1 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-white"
>
<span className="sr-only">View notifications</span>
{hasNotifications && (
<div className="absolute right-0 top-0 h-2 w-2 rounded-full bg-pink-500" />
)}
<BellIcon className="h-5 w-5" aria-hidden="true" />
</Link>
</Focusable>
<Menu as="div" className="relative ml-3">
<div>
<Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2">
Expand Down
44 changes: 23 additions & 21 deletions components/ArticleMenu/ArticleMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import copy from "copy-to-clipboard";
import { type Session } from "next-auth";
import { signIn } from "next-auth/react";
import { ReportModal } from "../ReportModal/ReportModal";
import Focusable from "../Focusable/Focusable";

interface CopyToClipboardOption {
label: string;
Expand Down Expand Up @@ -148,27 +149,28 @@ const ArticleMenu = ({
</button>
<span>{data?.likes || 0}</span>
</div>

<button
className="focus-style-rounded rounded-full p-1 hover:bg-neutral-300 dark:hover:bg-neutral-800 lg:mx-auto"
aria-label="bookmark-trigger"
onClick={() => {
if (!session) {
signIn();
}
if (data?.currentUserBookmarked)
return bookmarkPost(postId, false);
bookmarkPost(postId);
}}
>
<BookmarkIcon
className={`w-6 h-6${
data?.currentUserBookmarked
? "fill-blue-400"
: "fill-neutral-400 dark:fill-neutral-600"
}`}
/>
</button>
<Focusable rounded={true}>
<button
className="rounded-full p-1 hover:bg-neutral-300 dark:hover:bg-neutral-800 lg:mx-auto"
aria-label="bookmark-trigger"
onClick={() => {
if (!session) {
signIn();
}
if (data?.currentUserBookmarked)
return bookmarkPost(postId, false);
bookmarkPost(postId);
}}
>
<BookmarkIcon
className={`w-6 h-6${
data?.currentUserBookmarked
? "fill-blue-400"
: "fill-neutral-400 dark:fill-neutral-600"
}`}
/>
</button>
</Focusable>

<Popover className="relative ml-4">
<PopoverButton
Expand Down
47 changes: 25 additions & 22 deletions components/ArticlePreview/ArticlePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
import { api } from "@/server/trpc/react";
import { signIn, useSession } from "next-auth/react";
import { toast } from "sonner";
import Focusable from "../Focusable/Focusable";

type ButtonOptions = {
label: string;
Expand Down Expand Up @@ -165,29 +166,31 @@ const ArticlePreview: NextPage<Props> = ({
</Link>
<div className="flex gap-x-2">
{showBookmark && (
<button
className="focus-style-rounded rounded-full p-2 hover:bg-neutral-300 dark:hover:bg-neutral-800 lg:mx-auto"
onClick={() => {
if (!session) {
return signIn();
<Focusable rounded={true}>
<button
className="rounded-full p-2 hover:bg-neutral-300 dark:hover:bg-neutral-800 lg:mx-auto"
onClick={() => {
if (!session) {
return signIn();
}
if (bookmarked) {
return bookmarkPost(id, false);
}
bookmarkPost(id);
}}
aria-label={
bookmarked ? "Remove bookmark" : "Bookmark this post"
}
if (bookmarked) {
return bookmarkPost(id, false);
}
bookmarkPost(id);
}}
aria-label={
bookmarked ? "Remove bookmark" : "Bookmark this post"
}
>
<BookmarkIcon
className={`w-6 h-6${
bookmarked
? "fill-blue-400"
: "fill-neutral-400 dark:fill-neutral-600"
}`}
/>
</button>
>
<BookmarkIcon
className={`w-6 h-6${
bookmarked
? "fill-blue-400"
: "fill-neutral-400 dark:fill-neutral-600"
}`}
/>
</button>
</Focusable>
)}
{menuOptions && (
<Menu as="div" className="relative">
Expand Down
15 changes: 15 additions & 0 deletions components/Focusable/Focusable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React, { cloneElement, ReactElement } from "react";

interface FocusableProps {
children: ReactElement;
rounded?: boolean;
}

const Focusable: React.FC<FocusableProps> = ({ children, rounded = false }) => {
return cloneElement(children, {
className: `${children.props.className}
${rounded ? "rounded-full" : "rounded-md"} focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600`,
});
};
Comment on lines +8 to +13
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Add prop type safety and improve className handling

The current implementation has several potential issues:

  1. No type checking for existing className prop
  2. No handling for undefined className
  3. Direct prop modification could lead to collisions

Consider this safer implementation:

 const Focusable: React.FC<FocusableProps> = ({ children, rounded = false }) => {
+  const existingClassName = children.props.className || '';
+  const focusClasses = `${rounded ? "rounded-full" : "rounded-md"} focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800`;
+
   return cloneElement(children, {
-    className: `${children.props.className} 
-  ${rounded ? "rounded-full" : "rounded-md"} focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600`,
+    className: `${existingClassName} ${focusClasses}`.trim(),
   });
 };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const Focusable: React.FC<FocusableProps> = ({ children, rounded = false }) => {
return cloneElement(children, {
className: `${children.props.className}
${rounded ? "rounded-full" : "rounded-md"} focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600`,
});
};
const Focusable: React.FC<FocusableProps> = ({ children, rounded = false }) => {
const existingClassName = children.props.className || '';
const focusClasses = `${rounded ? "rounded-full" : "rounded-md"} focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-800`;
return cloneElement(children, {
className: `${existingClassName} ${focusClasses}`.trim(),
});
};


export default Focusable;
61 changes: 36 additions & 25 deletions components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,32 @@ import {
twitterUrl,
youtubeUrl,
} from "../../config/site_settings";
import Focusable from "../Focusable/Focusable";

const navigation = {
main: footerNav,
social: [
{
name: "Twitter",
customStyle: "hover:bg-twitter focus:bg-twitter",
href: twitterUrl,
icon: Twitter,
},
{
name: "GitHub",
customStyle: "hover:bg-github focus:bg-github",
href: githubUrl,
icon: Github,
},
{
name: "Discord",
customStyle: "hover:bg-discord focus:bg-discord",
href: discordInviteUrl,
icon: Discord,
},
{
name: "Youtube",
name: "YouTube",
customStyle: "hover:bg-youtube focus:bg-youtube",
href: youtubeUrl,
icon: Youtube,
},
Expand All @@ -51,37 +56,43 @@ const Footer = () => {
{navigation.main.map((item) => (
<div key={item.name} className="px-5 py-2">
{item.href.includes("http") ? (
<a
href={item.href}
target="_blank"
rel="noopener noreferrer"
className="focus-style p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
>
{item.name}
</a>
<Focusable>
<a
href={item.href}
target="_blank"
rel="noopener noreferrer"
className="p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
>
{item.name}
</a>
</Focusable>
) : (
<Link
className="focus-style p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
href={item.href}
>
{item.name}
</Link>
<Focusable>
<Link
className="p-1 text-base text-neutral-600 hover:text-neutral-500 dark:text-neutral-500 dark:hover:text-neutral-400"
href={item.href}
>
{item.name}
</Link>
</Focusable>
)}
</div>
))}
</nav>
<div className="mt-8 flex justify-center space-x-8">
{navigation.social.map((item) => (
<a
key={item.name}
href={item.href}
target="_blank"
rel="noopener noreferrer"
className={`focus-style rounded-md p-1 transition-all duration-300 hover:scale-105 hover:text-white hover:brightness-110 focus:scale-105 focus:text-white focus:brightness-110 ${item.name.toLowerCase()}`}
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
<Focusable>
<a
key={item.name}
href={item.href}
target="_blank"
rel="noopener noreferrer"
className={`rounded-md p-1 transition-all duration-300 hover:scale-105 hover:text-white hover:brightness-110 focus:scale-105 focus:text-white focus:brightness-110 ${item.customStyle.toLowerCase()}`}
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
</Focusable>
Comment on lines +84 to +95
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix missing key prop in social media links iteration.

The key prop should be moved to the outermost element in the iteration to help React efficiently update the DOM.

- <Focusable>
-   <a
-     key={item.name}
+ <Focusable key={item.name}>
+   <a
      href={item.href}
      target="_blank"
      rel="noopener noreferrer"
      className={`rounded-md p-1 transition-all duration-300 hover:scale-105 hover:text-white hover:brightness-110 focus:scale-105 focus:text-white focus:brightness-110 ${item.customStyle.toLowerCase()}`}
    >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Focusable>
<a
key={item.name}
href={item.href}
target="_blank"
rel="noopener noreferrer"
className={`rounded-md p-1 transition-all duration-300 hover:scale-105 hover:text-white hover:brightness-110 focus:scale-105 focus:text-white focus:brightness-110 ${item.customStyle.toLowerCase()}`}
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
</Focusable>
<Focusable key={item.name}>
<a
href={item.href}
target="_blank"
rel="noopener noreferrer"
className={`rounded-md p-1 transition-all duration-300 hover:scale-105 hover:text-white hover:brightness-110 focus:scale-105 focus:text-white focus:brightness-110 ${item.customStyle.toLowerCase()}`}
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
</Focusable>
🧰 Tools
🪛 Biome

[error] 84-84: Missing key property for this element in iterable.

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

(lint/correctness/useJsxKeyInIterable)

))}
</div>
<p className="mt-8 text-center text-xs text-neutral-600 dark:text-neutral-500">
Expand Down
57 changes: 32 additions & 25 deletions components/Nav/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import AnimatedHamburger from "./AnimatedHamburger";
import Logo from "@/icons/logo.svg";
import MobileNav from "./MobileNav";
import { MobileSearch, Search } from "@/components/ui/Search";
import Focusable from "../Focusable/Focusable";

type AlgoliaConfig = {
ALGOLIA_APP_ID: string;
Expand Down Expand Up @@ -83,7 +84,7 @@ const Nav = ({
href={item.href}
target="_blank"
rel="noopener noreferrer"
className="nav-button focus-style p-4"
className="nav-button p-4"
>
{item.name}
</a>
Expand Down Expand Up @@ -135,16 +136,18 @@ const Nav = ({

{session && (
<>
<Link
to="/notifications"
className="focus-style relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
>
<span className="sr-only">View notifications</span>
{hasNotifications && (
<div className="absolute right-2 top-2 h-2 w-2 animate-pulse rounded-full bg-pink-600" />
)}
<BellIcon className="h-6 w-6" aria-hidden="true" />
</Link>
<Focusable>
<Link
to="/notifications"
className="relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
>
<span className="sr-only">View notifications</span>
{hasNotifications && (
<div className="absolute right-2 top-2 h-2 w-2 animate-pulse rounded-full bg-pink-600" />
)}
<BellIcon className="h-6 w-6" aria-hidden="true" />
</Link>
</Focusable>
<Menu as="div" className="relative ml-4">
<div>
<MenuButton className="flex rounded-full bg-black text-sm ring-offset-2 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus:ring-offset-white">
Expand Down Expand Up @@ -204,22 +207,26 @@ const Nav = ({
<MobileSearch algoliaSearchConfig={algoliaSearchConfig} />
<ThemeToggle />
{session && (
<Link
to="/notifications"
className="focus-style relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
>
<span className="sr-only">View notifications</span>
{hasNotifications && (
<div className="absolute right-1 top-1 h-2 w-2 animate-pulse rounded-full bg-pink-500" />
)}
<BellIcon className="h-6 w-6" aria-hidden="true" />
</Link>
<Focusable>
<Link
to="/notifications"
className="relative flex-shrink-0 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-600 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-white"
>
<span className="sr-only">View notifications</span>
{hasNotifications && (
<div className="absolute right-1 top-1 h-2 w-2 animate-pulse rounded-full bg-pink-500" />
)}
<BellIcon className="h-6 w-6" aria-hidden="true" />
</Link>
</Focusable>
)}
{/* Mobile menu button */}
<DisclosureButton className="nav-button focus-style group">
<span className="sr-only">Open main menu</span>
<AnimatedHamburger open={open} />
</DisclosureButton>
<Focusable>
<DisclosureButton className="nav-button group">
<span className="sr-only">Open main menu</span>
<AnimatedHamburger open={open} />
</DisclosureButton>
</Focusable>
</div>
</div>
</div>
Expand Down
Loading
Loading