Chore/cleanup global css styles (#1191)

* remove input-base class

* remove footer links custom styles from globals.css

* remove focus-style-rounded class

* remove unused rehype-code-title class

Author: John-Paul-Larkin

app/(editor)/create/[[...paramsArr]]/_client.tsx

@@ -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">

components/ArticleMenu/ArticleMenu.tsx

@@ -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) {

components/ArticlePreview/ArticlePreview.tsx

@@ -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();

components/Footer/Footer.tsx

@@ -19,21 +19,25 @@ const navigation = {
   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",
+      customStyle: "hover:bg-youtube focus:bg-youtube",
       href: youtubeUrl,
       icon: Youtube,
     },
@@ -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" />

styles/globals.css

@@ -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;
 }
@@ -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;
 }
@@ -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;
 }
@@ -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"] {
@@ -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 {

tailwind.config.js

@@ -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%)",
       },
     },
   },