feat: 337 migrating from bootstrap to tailwind (#344)

* feat:tailwind * feat:tailwind * feat: daisyui setup * feat: nav bar * feat: daisy card * feat: daisy ui pet card * fix: refresh button daisy * refactor: moving icons next to PetIcon * feat: convert Pets.tsx to daisyui and fix test * feat: petcard with daisy ui * fix: z index * feat: PetType pagination daisy ui * feat: Favorite button with daisy removed unnecessary files * feat: Petinfo daisy ui * feat: Petinfo daisy ui * fix: react hooks eslint * chore: update dependencies * test * refactor: pet error loading * Update PetType.tsx * feat: about and favorites daisyui * fix: favorites * feat: Organizations and Resources daisy ui * feat: Profile page daisy ui * feat: Register daisy ui * chore: remove bootstrap and bootswatch * chore: removing react router bootstrap * feat: Login Register Settings Not Found daisy ui
redxzeta · Aug 13, 2022 · 59d6b9b · 59d6b9b
1 parent 94eceff
commit 59d6b9b
Show file tree

Hide file tree

Showing 75 changed files with 1,738 additions and 2,660 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -15,6 +15,7 @@
   },
   "extends": [
     "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
     "plugin:react/recommended",
     "standard",
     "plugin:prettier/recommended",

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx lint-staged
+yarn lint-staged
diff --git a/README.md b/README.md
@@ -124,17 +124,6 @@ npm consists of three distinct components:
   The CLI runs from a terminal, and is how most developers interact with npm.
   The registry is a large public database of JavaScript software and the meta-information surrounding it.
 
-## Links to bootstrap 5 and react bootstrap, react router
-
-BootStrap 5:
-[running tests](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
-Source: getBootStrap.com
-
-Download the Latest Version: [running tests](https://getbootstrap.com/docs/5.1/getting-started/download/)
-
-React BootStrap: [running tests](https://react-bootstrap.github.io/)
-Components: [running tests](https://react-bootstrap.github.io/components/alerts)
-
 ## Setting up prettier in vscode and auto format on save
 
 Ways to Install Prettier as a VS Code Extension:

diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "node": ">=16.0.0"
   },
   "dependencies": {
+    "@heroicons/react": "^1.0.6",
     "@supabase/supabase-js": "^1.35.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
@@ -15,22 +16,20 @@
     "@types/node": "^17.0.31",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
-    "bootstrap": "^5.1.3",
-    "bootstrap-icons": "^1.8.1",
-    "bootswatch": "^5.1.3",
+    "daisyui": "^2.22.0",
     "jwt-decode": "^3.1.2",
     "postcode-validator": "^3.1.0",
-    "react": "^18.1.0",
-    "react-bootstrap": "^2.3.1",
+    "react": "^18.2.0",
     "react-country-region-selector": "^3.4.0",
-    "react-dom": "^18.1.0",
+    "react-daisyui": "^2.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.34.0",
     "react-icons": "^4.3.1",
-    "react-router-bootstrap": "^0.26.1",
     "react-router-dom": "^6.2.1",
     "react-scripts": "^5.0.1",
     "react-supabase": "^0.2.0",
     "swr": "^1.3.0",
-    "typescript": "^4.6.4",
+    "typescript": "^4.7.4",
     "validator": "^13.7.0"
   },
   "scripts": {
@@ -60,13 +59,14 @@
     ]
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.2",
     "@testing-library/react-hooks": "^8.0.0",
-    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
-    "@types/react-router-bootstrap": "^0.24.5",
+    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
     "@types/react-test-renderer": "^18.0.0",
     "@types/validator": "^13.7.2",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
+    "autoprefixer": "^10.4.7",
     "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.3",
@@ -76,14 +76,17 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^5.0.5",
-    "husky": "^8.0.0",
-    "lint-staged": "^13.0.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
     "msw": "^0.39.2",
-    "prettier": "^2.6.2",
-    "pretty-quick": "^3.1.0",
+    "postcss": "^8.4.14",
+    "prettier": "^2.7.1",
+    "pretty-quick": "^3.1.3",
     "react-test-renderer": "^18.1.0",
-    "standard": "^17.0.0"
+    "standard": "^17.0.0",
+    "tailwindcss": "^3.1.2"
   },
   "jest": {
     "collectCoverageFrom": [

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/App.css b/src/App.css
@@ -1,18 +1,3 @@
-html,
-body,
-#root {
-  height: 100%;
-}
-
-#root {
-  display: flex;
-  flex-direction: column;
-}
-
-.pawhub {
-  flex: 1;
-}
-
 .fadeInUp {
   -webkit-animation-name: fadeInUp;
   animation-name: fadeInUp;

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,7 @@
 import NotFound from "components/NotFound/NotFound";
-import Footer from "components/layout/Footer";
+import FooterMenu from "components/layout/Footer";
 import NavigationBar from "components/layout/NavigationBar";
 import PetInfo from "components/pets/PetInfo";
-// import Stories from "components/stories/Stories";
 import { Fragment } from "react";
 import { Route, Routes } from "react-router-dom";
 import { Provider } from "react-supabase";
@@ -40,7 +39,7 @@ export default function App() {
               <Route path="about" element={<About />} />
               <Route path="resources" element={<Resources />} />
               <Route path="tips" element={<Tips />} />
-              <Route path="organization" element={<Organizations />} />
+              <Route path="organizations" element={<Organizations />} />
               {/* <Route path="stories" element={<Stories />} /> */}
               <Route path="favorites" element={<Favorites />} />
               <Route path="register" element={<Register />} />
@@ -59,7 +58,7 @@ export default function App() {
               <Route path="/" element={<Home />} />
               <Route path="*" element={<NotFound />} />
             </Routes>
-            <Footer />
+            <FooterMenu />
           </AuthProvider>
         </Provider>
       </PetAuthProvider>

diff --git a/src/components/NotFound/NotFound.tsx b/src/components/NotFound/NotFound.tsx
@@ -1,15 +1,15 @@
-import { Container, Image } from "react-bootstrap";
+import { PawHubContainer } from "components/layout/Grid/PetCardFlex";
 import { Link } from "react-router-dom";
 
 import "./NotFound.css";
 import logo from "./NotFoundDog.svg";
 
 export default function NotFound() {
   return (
-    <Container className="pawhub py-2">
-      <div className="innerNotFound">
+    <PawHubContainer>
+      <div className="flex w-full justify-center items-center h-3/4">
         <div className="HoldAnimation">
-          <Image src={logo} alt="page not found"></Image>
+          <img src={logo} alt="page not found" />
         </div>
         <div className="HoldText">
           <div className="HeaderText">
@@ -43,6 +43,6 @@ export default function NotFound() {
           </ul>
         </div>
       </div>
-    </Container>
+    </PawHubContainer>
   );
 }
diff --git a/src/components/about/About.tsx b/src/components/about/About.tsx
@@ -1,19 +1,20 @@
-import { Container, Image, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { PawHubContainer } from "components/layout/Grid/PetCardFlex";
 
 import Contributors from "./Contributors";
 import GithubIcon from "./GitHub.png";
 import YoutubeLogo from "./Youtube2.png";
-import "./about.css";
 import DevPostLogo from "./devpost-modified.png";
 import Dog from "./dog.jpg";
 
 export default function About() {
   return (
-    <Container className="pawhub py-4">
+    <PawHubContainer>
       <div className="about__container">
         <section className="paragraph--section">
-          <Image src={Dog} alt="doggo" roundedCircle />
-          <h1>About PawternityHub</h1>
+          <img src={Dog} alt="doggo" />
+          <h1 className="font-amatic text-5xl font-bold ">
+            About PawternityHub
+          </h1>
           <p>
             It all started in a hackathon as my group brainstormed for ideas on
             what we can do to help the community. Due to covid19, the hackathon,
@@ -35,54 +36,49 @@ export default function About() {
           </p>
         </section>
         <h1>Links</h1>
-        <div className="social-links-container">
-          <OverlayTrigger
-            key="youtube-icon"
-            overlay={<Tooltip id="tooltip-disabled">Youtube</Tooltip>}
+        <div className="flex justify-center items-center">
+          <a
+            target="blank"
+            rel="noreferrer"
+            href="https://youtu.be/vxAqS-GLna8"
+            className="rounded"
           >
-            <a
-              target="blank"
-              rel="noreferrer"
-              href="https://youtu.be/vxAqS-GLna8"
-              className="social-links"
-            >
-              <Image className="contributor-avatar" src={YoutubeLogo} />
-            </a>
-          </OverlayTrigger>
-          <OverlayTrigger
-            key="DevPost-icon"
-            overlay={<Tooltip id="tooltip-disabled">DevPost</Tooltip>}
+            <img
+              className="w-12 mx-1 border-primary border-2 rounded-full"
+              src={YoutubeLogo}
+            />
+          </a>
+
+          <a
+            target="blank"
+            rel="noreferrer"
+            href="https://github.com/redxzeta/Awesome-Adoption"
+            className="rounded"
           >
-            <a
-              target="blank"
-              rel="noreferrer"
-              href="https://github.com/redxzeta/Awesome-Adoption"
-              className="social-links"
-            >
-              <Image className="contributor-avatar" src={DevPostLogo} />
-            </a>
-          </OverlayTrigger>
-          <OverlayTrigger
-            key="Github-icon"
-            overlay={<Tooltip id="tooltip-disabled">Github</Tooltip>}
+            <img
+              className="w-12 mx-1 border-primary border-2 rounded-full"
+              src={DevPostLogo}
+            />
+          </a>
+
+          <a
+            target="blank"
+            rel="noreferrer"
+            href="https://github.com/redxzeta/Awesome-Adoption"
+            className="rounded"
           >
-            <a
-              target="blank"
-              rel="noreferrer"
-              href="https://github.com/redxzeta/Awesome-Adoption"
-              className="social-links"
-            >
-              <Image className="contributor-avatar" src={GithubIcon} />
-            </a>
-          </OverlayTrigger>
-        </div>
-        <div className="contributors-section">
-          <h1>Contributors</h1>
-          <div className="contributors" id="contributors">
-            <Contributors />
-          </div>
+            <img
+              className="w-12 mx-1 border-primary border-2 rounded-full"
+              src={GithubIcon}
+            />
+          </a>
         </div>
+        <section className="contributors-section">
+          <h2 className="font-amatic text-5xl font-bold ">Contributors</h2>
+
+          <Contributors />
+        </section>
       </div>
-    </Container>
+    </PawHubContainer>
   );
 }
diff --git a/src/components/about/Contributors.tsx b/src/components/about/Contributors.tsx
@@ -1,4 +1,4 @@
-import { OverlayTrigger, Spinner, Tooltip } from "react-bootstrap";
+import Spinner from "components/shared/spinner/Spinner";
 import useSWR from "swr";
 
 import { githubURL } from "../../routes/API";
@@ -30,38 +30,32 @@ type ContributorsType = {
 const Contributors = () => {
   const { data, error } = useSWR(githubURL, fetcher);
   const isLoading = !error && !data;
-  if (isLoading)
-    return (
-      <Spinner animation="grow" variant="primary" role="status">
-        <span className="visually-hidden">Loading...</span>
-      </Spinner>
-    );
+  if (isLoading) return <Spinner />;
 
   if (error) {
     return <h1>Error Loading</h1>;
   }
 
   return (
-    <div className="contributors" id="contributors">
+    <div
+      className="flex flex-row justify-center items-center flex-wrap my-4 "
+      id="contributors"
+    >
       {data.map((a: ContributorsType) => (
-        <OverlayTrigger
-          key={a.id}
-          overlay={<Tooltip id="tooltip-disabled">{a.login}</Tooltip>}
+        <a
+          key={a.avatar_url}
+          className="rounded my-2"
+          href={a.html_url}
+          target="_blank"
+          rel="noreferrer"
+          data-testid="contributor-list"
         >
-          <a
-            className="contributor-link"
-            href={a.html_url}
-            target="_blank"
-            rel="noreferrer"
-            data-testid="contributor-list"
-          >
-            <img
-              className="contributor-avatar"
-              src={a.avatar_url}
-              alt={`${a.login} Contributor Avatar`}
-            />
-          </a>
-        </OverlayTrigger>
+          <img
+            className="w-12 mx-1 border-primary border-2 rounded-full"
+            src={a.avatar_url}
+            alt={`${a.login} Contributor Avatar`}
+          />
+        </a>
       ))}
     </div>
   );