Upgrade to Tailwind 3

radar · Jan 3, 2022 · 5412f81 · 5412f81
1 parent d6a9c27
commit 5412f81
Show file tree

Hide file tree

Showing 20 changed files with 886 additions and 60,426 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -25,15 +25,12 @@
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "apollo-link-context": "^1.0.17",
-    "autoprefixer": "^9.7.4",
     "axios": "^0.21.1",
     "framer": "^1.2.2",
     "framer-motion": "^1.11.0",
     "graphql": "^15.4.0",
     "moment": "^2.24.0",
     "node-sass": "^4.11.0",
-    "postcss-cli": "^7.1.0",
-    "postcss-preset-env": "^6.7.0",
     "query-string": "^6.4.2",
     "react": "^16.13.1",
     "react-apollo": "^3.1.5",
@@ -42,7 +39,7 @@
     "react-markdown": "^4.0.6",
     "react-scripts": "4.0.1",
     "react-select": "^3.1.1",
-    "tailwindcss": "^1.2.0",
+    "tailwindcss": "^3.0.8",
     "typescript": "4.1.3"
   },
   "scripts": {
@@ -53,7 +50,7 @@
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 9009 -s public",
     "build-storybook": "build-storybook -s public",
-    "build:styles": "postcss src/tailwind.css -o src/styles.css",
+    "build:styles": "npx tailwindcss -i src/tailwind.css -o src/styles.css",
     "prebuild": "yarn build:styles",
     "prestart": "yarn build:styles",
     "gql:codegen": "graphql-codegen --config codegen.yml",
@@ -81,7 +78,9 @@
     "@storybook/addons": "^5.3.18",
     "@storybook/react": "^5.3.18",
     "@types/react-select": "^3.1.2",
+    "autoprefixer": "^10.4.1",
     "eslint-config-prettier": "^7.1.0",
+    "postcss": "^8.4.5",
     "prettier": "^2.2.1"
   }
 }
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -8,7 +8,7 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
-    <link href="https://fonts.googleapis.com/css?family=Fira+Mono|Roboto&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Nunito+Sans:400,700&display=swap" rel="stylesheet">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -27,7 +27,7 @@
       href="/pygments.css">
     <title>Twist</title>
   </head>
-  <body class="bg-gray-200">
+  <body class="bg-gray-100">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/frontend/public/pygments.css b/frontend/public/pygments.css
@@ -40,7 +40,7 @@
  .highlight .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */
  .highlight .gt { color: #f8f8f2 } /* Generic.Traceback */
  .highlight .kc { color: #ff79c6 } /* Keyword.Constant */
- .highlight .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */
+ .highlight .kd { color: #8be9fd; } /* Keyword.Declaration */
  .highlight .kn { color: #ff79c6 } /* Keyword.Namespace */
  .highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */
  .highlight .kr { color: #ff79c6 } /* Keyword.Reserved */
@@ -49,19 +49,19 @@
  .highlight .m { color: #bd93f9 } /* Literal.Number */
  .highlight .s { color: #f1fa8c } /* Literal.String */
  .highlight .na { color: #50fa7b } /* Name.Attribute */
- .highlight .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */
+ .highlight .nb { color: #8be9fd; } /* Name.Builtin */
  .highlight .nc { color: #50fa7b } /* Name.Class */
  .highlight .no { color: #f8f8f2 } /* Name.Constant */
  .highlight .nd { color: #f8f8f2 } /* Name.Decorator */
  .highlight .ni { color: #f8f8f2 } /* Name.Entity */
  .highlight .ne { color: #f8f8f2 } /* Name.Exception */
  .highlight .nf { color: #50fa7b } /* Name.Function */
- .highlight .nl { color: #8be9fd; font-style: italic } /* Name.Label */
+ .highlight .nl { color: #8be9fd; } /* Name.Label */
  .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
  .highlight .nx { color: #f8f8f2 } /* Name.Other */
  .highlight .py { color: #f8f8f2 } /* Name.Property */
  .highlight .nt { color: #ff79c6 } /* Name.Tag */
- .highlight .nv { color: #8be9fd; font-style: italic } /* Name.Variable */
+ .highlight .nv { color: #8be9fd; } /* Name.Variable */
  .highlight .ow { color: #ff79c6 } /* Operator.Word */
  .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
  .highlight .mb { color: #bd93f9 } /* Literal.Number.Bin */
@@ -84,8 +84,8 @@
  .highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */
  .highlight .bp { color: #f8f8f2; font-style: italic } /* Name.Builtin.Pseudo */
  .highlight .fm { color: #50fa7b } /* Name.Function.Magic */
- .highlight .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */
- .highlight .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */
- .highlight .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */
- .highlight .vm { color: #8be9fd; font-style: italic } /* Name.Variable.Magic */
+ .highlight .vc { color: #8be9fd; } /* Name.Variable.Class */
+ .highlight .vg { color: #8be9fd; } /* Name.Variable.Global */
+ .highlight .vi { color: #8be9fd; } /* Name.Variable.Instance */
+ .highlight .vm { color: #8be9fd; } /* Name.Variable.Magic */
  .highlight .il { color: #bd93f9 } /* Literal.Number.Integer.Long */
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -76,14 +76,15 @@ const Root: React.FC = () => {
 
   return (
     <ApolloProvider client={ApolloClient}>
-      <div className="my-4 mx-auto px-4">
-        <menu>
+      <div className="w-full md:w-2/3 px-4 md:px-0 mx-auto">
+        <menu className="my-4">
           <Link to="/">
             <strong>Twist</strong>
           </Link>{" "}
           &nbsp; | &nbsp;
           <CurrentUser>{renderUserInfo()}</CurrentUser>
         </menu>
+
         <CurrentUser>
           <CurrentUserContext.Consumer>
             {(user) => {

diff --git a/frontend/src/Book/Branches/Branch.tsx b/frontend/src/Book/Branches/Branch.tsx
@@ -73,7 +73,7 @@ const Branch: FunctionComponent<BranchProps> = (props) => {
   };
 
   return (
-    <div className={`bg-white p-4 border-gray-400 border rounded md:w-1/2`}>
+    <div>
       <h1>
         <Link to={`/books/${bookPermalink}`}>{bookTitle}</Link> - {name} branch
       </h1>

diff --git a/frontend/src/Book/Branches/index.tsx b/frontend/src/Book/Branches/index.tsx
@@ -41,7 +41,7 @@ const Branches: FunctionComponent<BranchesProps> = (props) => {
   };
 
   return (
-    <div className={`bg-white p-4 border-gray-400 border rounded md:w-1/2`}>
+    <div>
       <h1>
         <Link to={`/books/${bookPermalink}`}>{bookTitle}</Link> - Branches
       </h1>

diff --git a/frontend/src/Book/Chapter/ChapterQuery.tsx b/frontend/src/Book/Chapter/ChapterQuery.tsx
@@ -30,12 +30,6 @@ export default gql`
             position
             permalink
             part
-            sections {
-              ...sectionFragment
-              subsections {
-                ...sectionFragment
-              }
-            }
             previousChapter {
               ...chapterFragment
             }

diff --git a/frontend/src/Book/Chapter/index.tsx b/frontend/src/Book/Chapter/index.tsx
@@ -5,12 +5,11 @@ import QueryWrapper from "../../QueryWrapper";
 import Element from "./Element";
 import Footnote from "./Footnote";
 import { PreviousChapterLink, NextChapterLink } from "./Link";
-import SectionList from "./SectionList";
 import bookLink from "../../Book/link";
 
 import PermissionDenied from "../../PermissionDenied";
 import Commit from "../Commit";
-import { ChapterQuery, Section, useChapterQuery } from "../../graphql/types";
+import { ChapterQuery, useChapterQuery } from "../../graphql/types";
 
 type ChapterQueryBook = Extract<ChapterQuery["book"], { __typename: "Book" }>;
 
@@ -79,9 +78,9 @@ const ChapterAtCommit: React.FC<ChapterAtCommitProps> = ({
   const renderChapterLinks = () => {
     return (
       <div>
-        <div className="grid grid-cols-2">
+        <div className="flex">
           <div>{renderPreviousChapterLink()}</div>
-          <div className="text-right">{renderNextChapterLink()}</div>
+          <div className="ml-auto">{renderNextChapterLink()}</div>
         </div>
       </div>
     );
@@ -93,7 +92,6 @@ const ChapterAtCommit: React.FC<ChapterAtCommitProps> = ({
     title: chapterTitle,
     elements,
     footnotes,
-    sections,
   } = chapter;
 
   const renderFootnotes = () => {
@@ -118,9 +116,9 @@ const ChapterAtCommit: React.FC<ChapterAtCommitProps> = ({
   const commit = { sha, createdAt, branch };
 
   return (
-    <div className="flex flex-wrap lg:flex-no-wrap">
+    <div className="flex flex-wrap lg:flex-no-wrap mx-16 md:mx-0">
       <div className="w-1/12"></div>
-      <div className="main w-full ml-8 lg:w-3/4 flex-grow mr-4 chapter">
+      <div className="w-full lg:w-3/4 flex-grow mr-4 chapter">
         <header className="mb-4">
           <h1>
             <Link id="top" to={bookPath}>
@@ -148,22 +146,6 @@ const ChapterAtCommit: React.FC<ChapterAtCommitProps> = ({
         {renderFootnotes()}
         {renderChapterLinks()}
       </div>
-
-      <div className="w-full lg:w-1/4">
-        <div id="sidebar">
-          {renderPreviousChapterLink()}
-          <hr className="my-2" />
-
-          <h4 className="text-xl font-bold">
-            <a href="#top">{positionAndTitle}</a>
-          </h4>
-
-          <SectionList sections={sections as Array<Section>} />
-
-          <hr className="my-2" />
-          {renderNextChapterLink()}
-        </div>
-      </div>
     </div>
   );
 };

diff --git a/frontend/src/Book/Note/Comments/CommentForm.tsx b/frontend/src/Book/Note/Comments/CommentForm.tsx
@@ -57,7 +57,7 @@ const CommentForm: FunctionComponent<CommentFormProps> = ({
           <div className="flex">
             <div className="w-34 p-4">
               <CurrentUserContext.Consumer>
-                {(user) => (user ? <Gravatar email={user.email} /> : null)}
+                {(user) => (user ? <Gravatar email={user.email} className="rounded-full" /> : null)}
               </CurrentUserContext.Consumer>
             </div>
             <textarea

diff --git a/frontend/src/Book/Note/index.tsx b/frontend/src/Book/Note/index.tsx
@@ -18,7 +18,7 @@ class Note extends React.Component<NoteProps> {
   render() {
     const { number, bookPermalink, element } = this.props;
     return (
-      <div className="main md:w-3/4">
+      <div className="md:w-3/4">
         <div>
           <Header permalink={bookPermalink} noteNumber={number} />
           <ElementWithInfo {...element} bookPermalink={bookPermalink} />
@@ -35,7 +35,7 @@ interface WrappedNoteMatchParams {
 }
 
 interface WrappedNoteProps
-  extends RouteComponentProps<WrappedNoteMatchParams> {}
+  extends RouteComponentProps<WrappedNoteMatchParams> { }
 
 const WrappedNote: React.FC<WrappedNoteProps> = ({ number, bookPermalink }) => {
   const { data, loading, error } = useNoteQuery({

diff --git a/frontend/src/Book/Notes/ElementWithNotes.tsx b/frontend/src/Book/Notes/ElementWithNotes.tsx
@@ -18,7 +18,7 @@ export default class ElementWithNotes extends React.Component<ElementWithNotesPr
 
   render() {
     return (
-      <div className="grid grid-cols-1 lg:grid-cols-2 border-2 mb-8">
+      <div className="grid grid-cols-1 lg:grid-cols-2 border-2 mb-8 bg-white">
         <div className="w-full bg-gray-100 border-r-2 border-gray-200">
           <ElementWithInfo className="element p-4" {...this.props} />
         </div>

diff --git a/frontend/src/Book/index.tsx b/frontend/src/Book/index.tsx
@@ -65,7 +65,7 @@ export const Book: React.FC<BookProps> = ({
   );
 
   return (
-    <div className={`bg-white p-4 border-gray-400 border rounded md:w-1/2`}>
+    <div>
       <h1>{title}</h1>
       <CommitInfo
         permalink={permalink}

diff --git a/frontend/src/Books/index.tsx b/frontend/src/Books/index.tsx
@@ -37,7 +37,7 @@ export class Books extends React.Component<BooksProps> {
   }
   render() {
     return (
-      <div className="main md:w-1/2" id="books">
+      <div id="books">
         <h1>Books</h1>
 
         {this.renderBooks()}

diff --git a/frontend/src/Login/index.tsx b/frontend/src/Login/index.tsx
@@ -1,11 +1,9 @@
 import * as React from "react";
 import API from "../api";
 
-import githubLogo from "./github.png";
-
 import { RouteComponentProps } from "@reach/router";
 
-interface LoginProps extends RouteComponentProps {}
+interface LoginProps extends RouteComponentProps { }
 
 type LoginState = {
   email: string;
@@ -39,18 +37,17 @@ class Login extends React.Component<LoginProps, LoginState> {
 
   render() {
     return (
-      <div className="main flex md:w-1/2">
+      <div className="flex">
         <div className="w-1/4 mr-10">
           <h1>Login</h1>
-          <div className={`w-56`}>
+          <div>
             <button
+              className="btn btn-blue"
               onClick={() => {
                 window.location.href = this.state.githubAuthorizeUrl;
               }}
             >
-              <img src={githubLogo} className="float-left" alt="GitHub" />
-
-              <div className="btn btn-blue">Sign in with GitHub</div>
+              Sign in with GitHub
             </button>
           </div>
         </div>

diff --git a/frontend/src/PermissionDenied.tsx b/frontend/src/PermissionDenied.tsx
@@ -3,7 +3,7 @@ import React from "react";
 const PermissionDenied: React.FC = ({ children }) => {
   return (
     <div
-      className={`bg-white p-4 border-gray-400 border rounded md:w-1/2 text-red-600`}
+      className={`text-red-600`}
     >
       {children || "You do not have permission to see that book."}
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -73,7 +73,7 @@ const Branch: FunctionComponent<BranchProps> = (props) => { @@
       };
       return (
-        <div className={`bg-white p-4 border-gray-400 border rounded md:w-1/2`}>
+        <div>
           <h1>
             <Link to={`/books/${bookPermalink}`}>{bookTitle}</Link> - {name} branch
           </h1>
@@ Expand Down @@