fix conflicts with tailwindcss (#1388)

Author: Dimitri POSTOLOV

src/Containers/Sections/BringYourOwnCode/index.tsx

@@ -19,7 +19,7 @@ const Index = (): JSX.Element => {
 
   return (
     <section className="point6" id="bring-your-own-code">
-      <div className="prose">
+      <div className="prose2">
         <h2>
           Bring your own
           <br />

src/Containers/Sections/PowerFulTools/index.tsx

@@ -4,7 +4,7 @@ const PowerFulTools = () => {
   return (
     <div className="darkWash">
       <section className="point4" id="powerful-tools">
-        <div className="prose">
+        <div className="prose2">
           <h2>
             Move faster with
             <br />

src/Containers/Sections/PredictableResults/index.tsx

@@ -50,7 +50,7 @@ const PredictableResults = () => {
   }, [])
   return (
     <section className="point1" id="predictable-results">
-      <div className="prose">
+      <div className="prose2">
         <h2>
           Ask for what you need,
           <br />

src/Containers/Sections/SingleRequest/index.tsx

@@ -5,7 +5,7 @@ const SingleRequest = () => {
     return (
         <div className="grayWash">
         <section className="point2" id="single-request">
-          <div className="prose">
+          <div className="prose2">
             <h2>
               Get many resources
               <br />
@@ -64,4 +64,4 @@ const SingleRequest = () => {
     );
 };
 
-export default SingleRequest;
+export default SingleRequest;

src/Containers/Sections/TypeSystem/index.tsx

@@ -21,7 +21,7 @@ const TypeSysyem = () => {
   }, [])
   return (
     <section className="point3" id="type-system">
-      <div className="prose">
+      <div className="prose2">
         <h2>
           Describe what&rsquo;s possible
           <br />

src/Containers/Sections/WhosUsing/index.tsx

@@ -4,7 +4,7 @@ import { Link } from "gatsby"
 const WhosUsing = () => {
   return (
     <section className="powered-by" id="whos-using">
-      <div className="prose">
+      <div className="prose2">
         <h2>Who&rsquo;s using GraphQL?</h2>
         <p>
           Facebook's mobile apps have been powered by GraphQL since 2012. A

src/Containers/Sections/WithoutVersion/index.tsx

@@ -15,7 +15,7 @@ const WithoutVersion = () => {
   return (
     <div className="grayWash">
       <section className="point5" id="without-versions">
-        <div className="prose">
+        <div className="prose2">
           <h2>
             Evolve your API
             <br />

src/assets/css/_css/graphql.less

@@ -289,10 +289,11 @@ footer {
       padding: 3px 10px;
       position: relative;
 
-      img {
+      svg {
         opacity: 0.6;
         position: absolute;
         height: 0.85em;
+        width: 0.85em;
         right: ~"calc(100% - 4px)";
         top: 50%;
         transform: translateY(-50%);

src/assets/css/_css/index.less

@@ -338,7 +338,7 @@ div.index {
     min-height: 75vh;
     @media screen and (max-width: 1019px) {
       min-height: none;
-      .prose {
+      .prose2 {
         text-align: center;
       }
     }
@@ -350,7 +350,7 @@ div.index {
       justify-content: space-between;
     }
 
-    .prose {
+    .prose2 {
       max-width: 415px;
     }
 
@@ -399,7 +399,7 @@ div.index {
       justify-content: space-between;
     }
 
-    .prose {
+    .prose2 {
       max-width: 415px;
     }
 
@@ -490,7 +490,7 @@ div.index {
       justify-content: space-between;
     }
 
-    .prose {
+    .prose2 {
       max-width: 415px;
     }
 
@@ -535,7 +535,7 @@ div.index {
       font-family: Palatino, Georgia, serif;
     }
 
-    .prose {
+    .prose2 {
       display: flex;
       flex-direction: column;
       flex: 1;
@@ -574,7 +574,7 @@ div.index {
       justify-content: space-between;
     }
 
-    .prose {
+    .prose2 {
       max-width: 415px;
     }
 
@@ -741,7 +741,7 @@ div.index {
       justify-content: space-between;
     }
 
-    .prose {
+    .prose2 {
       max-width: 415px;
     }
 
@@ -807,7 +807,7 @@ div.index {
     padding-bottom: 6em;
     text-align: center;
 
-    .prose {
+    .prose2 {
       max-width: 545px;
       text-align: center;
       margin: 0 auto;

src/assets/css/_css/users.less

@@ -33,7 +33,7 @@ section.whos-using-page, section.foundation-members-page {
 }
 
 section.whos-using-page {
-  .prose {
+  .prose2 {
     max-width: 560px;
     text-align: center;
     margin: 0 auto;

src/assets/css/global.css

@@ -1,3 +1,3 @@
-@tailwind base;
+/*@tailwind base;*/
 @tailwind components;
 @tailwind utilities;

src/components/Footer/index.tsx

@@ -1,5 +1,10 @@
 import React from "react"
 import Link from "../Link"
+import { ReactComponent as GitHubIcon } from "../../../static/img/logos/github.svg"
+import { ReactComponent as TwitterIcon } from "../../../static/img/logos/twitter.svg"
+import { ReactComponent as DiscordIcon } from "../../../static/img/logos/discord.svg"
+import { ReactComponent as StackOverflowIcon } from "../../../static/img/logos/stackoverflow.svg"
+import { ReactComponent as EditIcon } from "../../../static/img/edit.svg"
 
 interface LinkItem {
   text: string
@@ -31,7 +36,7 @@ const getLinks = (sourcePath?: string): FooterLinks[] => [
       {
         text: "GitHub",
         href: "https://github.com/graphql",
-        icon: "/img/logos/github.svg",
+        icon: GitHubIcon,
       },
       { text: "GraphQL Specification", href: "https://spec.graphql.org" },
       { text: "Libraries & Tools", href: "/code/" },
@@ -45,17 +50,17 @@ const getLinks = (sourcePath?: string): FooterLinks[] => [
       {
         text: "@graphql",
         href: "https://twitter.com/graphql",
-        icon: "/img/logos/twitter.svg",
+        icon: TwitterIcon,
       },
       {
         text: "Discord",
         href: "https://discord.graphql.org/",
-        icon: "/img/logos/discord.svg",
+        icon: DiscordIcon,
       },
       {
         text: "Stack Overflow",
         href: "http://stackoverflow.com/questions/tagged/graphql",
-        icon: "/img/logos/stackoverflow.svg",
+        icon: StackOverflowIcon,
       },
       { text: "Resources", href: "/community/users/" },
       { text: "Events", href: "/community/upcoming-events/" },
@@ -76,7 +81,7 @@ const getLinks = (sourcePath?: string): FooterLinks[] => [
         href:
           "https://github.com/graphql/graphql.github.io/edit/source/" +
           sourcePath,
-        icon: "/img/edit.svg",
+        icon: EditIcon,
       },
     ].filter(Boolean) as LinkItem[],
   },
@@ -97,9 +102,9 @@ const Footer = ({ sourcePath }: { sourcePath?: string }) => {
                   <span>{section.text}</span>
                 )}
               </h5>
-              {section.subsections.map((subsection: any, i) => (
-                <Link key={i} href={subsection.href}>
-                  {subsection.icon && <img src={subsection.icon} />}
+              {section.subsections.map((subsection, i) => (
+                <Link key={i} href={subsection.href} className="!flex items-center gap-2">
+                  {subsection.icon && <subsection.icon />}
                   {subsection.text}
                 </Link>
               ))}
@@ -108,13 +113,11 @@ const Footer = ({ sourcePath }: { sourcePath?: string }) => {
         </section>
         <section className="copyright">
           Copyright © {`${new Date().getFullYear()}`} The GraphQL Foundation.
-          All rights reserved.<br />
+          All rights reserved.
+          <br />
           For web site terms of use, trademark policy and general project
           policies please see&nbsp;
-          <a
-            href="https://lfprojects.org"
-            target="_blank"
-          >
+          <a href="https://lfprojects.org" target="_blank">
             https://lfprojects.org
           </a>
           .

src/pages/foundation/members.tsx

@@ -9,7 +9,7 @@ export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => {
       pageContext={pageContext}
     >
       <section className="foundation-members-page">
-        <div className="prose">
+        <div className="prose2">
           <h1>GraphQL Foundation members</h1>
           <p>
             The <a href="/foundation/">GraphQL Foundation</a> is the primary way

src/pages/users.tsx

@@ -7,7 +7,7 @@ export default ({ pageContext }: PageProps<{}, { sourcePath: string }>) => {
   return (
     <Layout pageContext={pageContext}>
       <section className="whos-using-page">
-        <div className="prose">
+        <div className="prose2">
           <h1>Who&rsquo;s using GraphQL?</h1>
           <p>
             GraphQL is used by teams of all sizes in many different environments