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

Chore/cleanup global css styles #1191

Merged
merged 8 commits into from
Nov 4, 2024
Merged

Chore/cleanup global css styles #1191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d2da1d3
remove input-base class
John-Paul-Larkin Oct 29, 2024
56209c6
remove footer links custom styles from globals.css
John-Paul-Larkin Oct 29, 2024
5c540f4
remove focus-style-rounded class
John-Paul-Larkin Oct 29, 2024
b110e56
remove unused rehype-code-title class
John-Paul-Larkin Oct 29, 2024
eef0f41
Merge branch 'develop' into chore/cleanup-global-css-styles
NiallJoeMaher Oct 31, 2024
c0e6e52
pretty
John-Paul-Larkin Nov 4, 2024
8526308
Merge branch 'chore/cleanup-global-css-styles' of github.com:John-Pau…
John-Paul-Larkin Nov 4, 2024
621c290
Merge branch 'develop' into chore/cleanup-global-css-styles
NiallJoeMaher Nov 4, 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="flex 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
2 changes: 1 addition & 1 deletion components/ArticleMenu/ArticleMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ const ArticleMenu = ({
</div>

<button
className="focus-style-rounded rounded-full p-1 hover:bg-neutral-300 dark:hover:bg-neutral-800 lg:mx-auto"
className="rounded-full p-1 hover:bg-neutral-300 focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600 dark:hover:bg-neutral-800 lg:mx-auto"
aria-label="bookmark-trigger"
onClick={() => {
if (!session) {
Expand Down
2 changes: 1 addition & 1 deletion components/ArticlePreview/ArticlePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ const ArticlePreview: NextPage<Props> = ({
<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"
className="rounded-full p-2 hover:bg-neutral-300 focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600 dark:hover:bg-neutral-800 lg:mx-auto"
onClick={() => {
if (!session) {
return signIn();
Expand Down
6 changes: 5 additions & 1 deletion components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,25 @@ const navigation = {
social: [
{
name: "Twitter",
customStyle: "hover:bg-twitter focus:bg-twitter",
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Consider reducing style pattern duplication.

The hover/focus pattern is repeated across all social media objects. Consider extracting this to a utility function or constant.

+const createSocialStyle = (platform: string) =>
+  `hover:bg-${platform} focus:bg-${platform}`;

 const navigation = {
   social: [
     {
       name: "Twitter",
-      customStyle: "hover:bg-twitter focus:bg-twitter",
+      customStyle: createSocialStyle("twitter"),
       // ...
     },
     // Apply similar changes to other social objects
   ]
 };

Also applies to: 28-28, 34-34, 40-40

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",
customStyle: "hover:bg-youtube focus:bg-youtube",
href: youtubeUrl,
icon: Youtube,
},
Expand Down Expand Up @@ -77,7 +81,7 @@ const Footer = () => {
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()}`}
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.customStyle.toLowerCase()}`}
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
Expand Down
42 changes: 0 additions & 42 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
@tailwind base;

:root {
--discord-clr: linear-gradient(to bottom, #4b83fb, #734df8);
--youtube-clr: linear-gradient(to top, #6d0202 22%, #c90000 61%);
--github-clr: #f17f06;
--twitter-clr: #282828;
}

body {
@apply bg-neutral-100 text-neutral-900 dark:bg-black dark:text-white;
}
Expand Down Expand Up @@ -45,10 +38,6 @@ body {
}
}

.input-base {
@apply block w-full border px-2 py-2 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;
}

.nav-button {
@apply focus-style rounded-md px-2 py-2 text-neutral-900 hover:bg-neutral-200 hover:text-black focus:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-900 dark:hover:text-white dark:focus:text-white;
}
Expand All @@ -57,10 +46,6 @@ body {
@apply rounded-md focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600;
}

.focus-style-rounded {
@apply rounded-full focus:outline-none focus:ring-white focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-pink-600;
}

.primary-button {
@apply inline-flex justify-center rounded-md bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus-visible:ring-2 focus-visible:ring-pink-600 focus-visible:ring-offset-white disabled:border-neutral-300 disabled:from-neutral-500 disabled:to-neutral-700 disabled:text-neutral-300 disabled:hover:text-neutral-300;
}
Expand Down Expand Up @@ -253,18 +238,6 @@ pre {
scrollbar-width: none; /* Firefox */
}

.rehype-code-title {
@apply rounded-t-lg border border-b-0 border-neutral-200 bg-neutral-200 px-5 py-3 font-mono text-sm font-bold text-neutral-800 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200;
}

.rehype-code-title + pre {
@apply mt-0 rounded-t-none;
}

.highlight-line {
@apply -mx-4 block border-l-4 border-blue-500 bg-neutral-100 px-4 dark:bg-neutral-800;
}

/* Remove Safari input shadow on mobile */
input[type="text"],
input[type="email"] {
Expand Down Expand Up @@ -324,21 +297,6 @@ table div {
animation: loader-dots3 0.6s infinite;
}

/* Footer social hover effects */

.twitter {
@apply hover:bg-twitter focus:bg-twitter;
}
.github {
@apply hover:bg-github focus:bg-github;
}
.discord {
@apply hover:bg-discord focus:bg-discord;
}
.youtube {
@apply hover:bg-youtube focus:bg-youtube;
}

/* end of plate editor styles */

@keyframes loader-dots1 {
Expand Down
8 changes: 4 additions & 4 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ module.exports = {
extend: {
colors: {
black: "#040404",
twitter: "var(--twitter-clr)",
github: "var(--github-clr)",
twitter: "#282828",
github: "#f17f06",
},
backgroundImage: {
discord: "var(--discord-clr)",
youtube: "var(--youtube-clr)",
discord: "linear-gradient(to bottom, #4b83fb, #734df8)",
youtube: "linear-gradient(to top, #6d0202 22%, #c90000 61%)",
Comment on lines +15 to +16
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Consider extracting gradient values for better maintainability.

While moving away from CSS variables aligns with the PR objectives, hardcoding complex gradient values directly in the config file might make future updates challenging.

Consider creating a separate constants file for these values:

// constants/theme.js
export const gradients = {
  discord: "linear-gradient(to bottom, #4b83fb, #734df8)",
  youtube: "linear-gradient(to top, #6d0202 22%, #c90000 61%)"
};

Then import and use them in the config:

+const { gradients } = require('./constants/theme');
 module.exports = {
   // ...
   backgroundImage: {
-        discord: "linear-gradient(to bottom, #4b83fb, #734df8)",
-        youtube: "linear-gradient(to top, #6d0202 22%, #c90000 61%)",
+        discord: gradients.discord,
+        youtube: gradients.youtube,
   },

This approach would:

  • Maintain the goal of removing CSS variables
  • Keep gradient definitions centralized and reusable
  • Make future updates more manageable

},
},
},
Expand Down
Loading