Integrate material tailwind library (#8)

packages/frontend/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-tailwind/react": "^2.1.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

packages/frontend/src/assets/projects.json

@@ -2,7 +2,7 @@
   {
     "id": 1,
     "icon": "^",
-    "title": "iglotools",
+    "title": "Iglotools",
     "domain": "iglotools.com",
     "createdAt": "2023-12-07T04:20:00",
     "createdBy": "Bob",

packages/frontend/src/index.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+
+import { ThemeProvider } from '@material-tailwind/react';
+
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
@@ -9,7 +12,9 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </React.StrictMode>,
 );
 

packages/frontend/src/pages/Projects.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import { Button } from '@material-tailwind/react';
+
 import SearchBar from '../components/SearchBar';
 import ProjectCard from '../components/ProjectCard';
 import HorizontalLine from '../components/HorizontalLine';
@@ -25,9 +27,9 @@ const Projects = () => {
         <div>
           {/* TODO: Create button component */}
           <Link to="/projects/create">
-            <button className="bg-sky-600 text-white text-sm px-4 py-2 border rounded-full">
+            <Button className="rounded-full" color="blue">
               Create project
-            </button>
+            </Button>
           </Link>
         </div>
       </div>

packages/frontend/src/pages/index.tsx

@@ -5,7 +5,7 @@ import Sidebar from '../components/Sidebar';
 
 const Home = () => {
   return (
-    <div className="grid grid-cols-5 h-screen bg-sky-100">
+    <div className="grid grid-cols-5 h-screen bg-light-blue-50">
       <div className="h-full">
         <Sidebar />
       </div>

packages/frontend/src/pages/projects/Project.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { Button } from '@material-tailwind/react';
+
 import HorizontalLine from '../../components/HorizontalLine';
 import projects from '../../assets/projects.json';
 import ProjectTabs from '../../components/Tab';
@@ -21,10 +23,20 @@ const Project = () => {
       {project ? (
         <>
           <div className="flex p-4 gap-4">
-            <button onClick={() => navigate(-1)}>{'<'}</button>
+            <Button
+              variant="outlined"
+              className="rounded-full"
+              onClick={() => navigate(-1)}
+            >
+              {'<'}
+            </Button>
             <h3 className="grow">{project?.title} </h3>
-            <button>Open Repo</button>
-            <button>Go to app</button>
+            <Button className="rounded-full" variant="outlined">
+              Open Repo
+            </Button>
+            <Button className="rounded-full" color="blue">
+              Go to app
+            </Button>
           </div>
           <HorizontalLine />
           <div className="p-4">

packages/frontend/tailwind.config.js

@@ -1,8 +1,14 @@
+import withMT from '@material-tailwind/react/utils/withMT';
+
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+export default withMT({
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    '../../node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}',
+    '../../node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     extend: {},
   },
   plugins: [],
-};
+});