fix conflicts with tailwindcss (#1388)

Dimitri POSTOLOV · web-flow · commit ed87c2bcfcb0 · 2023-04-03T18:16:59.000+03:00
diff --git a/src/Containers/Sections/BringYourOwnCode/index.tsx b/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 />
diff --git a/src/Containers/Sections/PowerFulTools/index.tsx b/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 />
diff --git a/src/Containers/Sections/PredictableResults/index.tsx b/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 />
diff --git a/src/Containers/Sections/SingleRequest/index.tsx b/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;
diff --git a/src/Containers/Sections/TypeSystem/index.tsx b/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 />
diff --git a/src/Containers/Sections/WhosUsing/index.tsx b/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
diff --git a/src/Containers/Sections/WithoutVersion/index.tsx b/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 />
diff --git a/src/assets/css/_css/graphql.less b/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%);
diff --git a/src/assets/css/_css/index.less b/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;
diff --git a/src/assets/css/_css/users.less b/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;
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
@@ -1,3 +1,3 @@
-@tailwind base;
+/*@tailwind base;*/
 @tailwind components;
 @tailwind utilities;
diff --git a/src/components/Footer/index.tsx b/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>
           .
diff --git a/src/pages/foundation/members.tsx b/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
diff --git a/src/pages/users.tsx b/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

Original file line number	Diff line number	Diff line change
`@@ -338,7 +338,7 @@ div.index {`
`338`	`338`	`min-height: 75vh;`
`339`	`339`	`@media screen and (max-width: 1019px) {`
`340`	`340`	`min-height: none;`
`341`		`- .prose {`
	`341`	`+ .prose2 {`
`342`	`342`	`text-align: center;`
`343`	`343`	`}`
`344`	`344`	`}`
`@@ -350,7 +350,7 @@ div.index {`
`350`	`350`	`justify-content: space-between;`
`351`	`351`	`}`
`352`	`352`
`353`		`- .prose {`
	`353`	`+ .prose2 {`
`354`	`354`	`max-width: 415px;`
`355`	`355`	`}`
`356`	`356`
`@@ -399,7 +399,7 @@ div.index {`
`399`	`399`	`justify-content: space-between;`
`400`	`400`	`}`
`401`	`401`
`402`		`- .prose {`
	`402`	`+ .prose2 {`
`403`	`403`	`max-width: 415px;`
`404`	`404`	`}`
`405`	`405`
`@@ -490,7 +490,7 @@ div.index {`
`490`	`490`	`justify-content: space-between;`
`491`	`491`	`}`
`492`	`492`
`493`		`- .prose {`
	`493`	`+ .prose2 {`
`494`	`494`	`max-width: 415px;`
`495`	`495`	`}`
`496`	`496`
`@@ -535,7 +535,7 @@ div.index {`
`535`	`535`	`font-family: Palatino, Georgia, serif;`
`536`	`536`	`}`
`537`	`537`
`538`		`- .prose {`
	`538`	`+ .prose2 {`
`539`	`539`	`display: flex;`
`540`	`540`	`flex-direction: column;`
`541`	`541`	`flex: 1;`
`@@ -574,7 +574,7 @@ div.index {`
`574`	`574`	`justify-content: space-between;`
`575`	`575`	`}`
`576`	`576`
`577`		`- .prose {`
	`577`	`+ .prose2 {`
`578`	`578`	`max-width: 415px;`
`579`	`579`	`}`
`580`	`580`
`@@ -741,7 +741,7 @@ div.index {`
`741`	`741`	`justify-content: space-between;`
`742`	`742`	`}`
`743`	`743`
`744`		`- .prose {`
	`744`	`+ .prose2 {`
`745`	`745`	`max-width: 415px;`
`746`	`746`	`}`
`747`	`747`
`@@ -807,7 +807,7 @@ div.index {`
`807`	`807`	`padding-bottom: 6em;`
`808`	`808`	`text-align: center;`
`809`	`809`
`810`		`- .prose {`
	`810`	`+ .prose2 {`
`811`	`811`	`max-width: 545px;`
`812`	`812`	`text-align: center;`
`813`	`813`	`margin: 0 auto;`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ section.whos-using-page, section.foundation-members-page {`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`section.whos-using-page {`
`36`		`- .prose {`
	`36`	`+ .prose2 {`
`37`	`37`	`max-width: 560px;`
`38`	`38`	`text-align: center;`
`39`	`39`	`margin: 0 auto;`