From bee5e3eb7bca6f3ddd4602853cd77fedbbd043a5 Mon Sep 17 00:00:00 2001 From: Asya Date: Tue, 1 Aug 2023 22:37:27 +0300 Subject: [PATCH] feat: rewrite css to tailwind features --- package-lock.json | 182 +++++++++++++++++- package.json | 7 +- public/index.html | 13 +- src/App.css | 66 ------- src/App.tsx | 6 +- src/assets/tableHeaders.tsx | 1 - src/components/CategoryItem/CategoryItem.tsx | 5 +- src/components/ModalForm/ModalForm.module.css | 23 --- src/components/ModalForm/ModalForm.tsx | 124 ++++++------ src/components/Navbar/NavBar.module.css | 7 - src/components/Navbar/Navbar.tsx | 46 ++--- src/components/NotleItem/NoteItem.module.css | 16 -- src/components/NotleItem/NoteItem.tsx | 28 +-- src/components/Table/Table.module.css | 14 -- src/components/Table/Table.tsx | 8 +- src/index.css | 25 +++ src/layout/Footer/Footer.tsx | 4 +- src/layout/Header/Header.module.css | 22 --- src/layout/Header/Header.tsx | 9 +- src/pages/ActivePage/ActivePage.tsx | 10 +- tailwind.config.js | 19 ++ 21 files changed, 356 insertions(+), 279 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/components/ModalForm/ModalForm.module.css delete mode 100644 src/components/Navbar/NavBar.module.css delete mode 100644 src/components/NotleItem/NoteItem.module.css delete mode 100644 src/components/Table/Table.module.css create mode 100644 src/index.css delete mode 100644 src/layout/Header/Header.module.css create mode 100644 tailwind.config.js diff --git a/package-lock.json b/package-lock.json index 0719776..8a3d04e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,14 +26,18 @@ "react-dom": "^18.2.0", "react-redux": "^8.1.1", "react-router-dom": "^6.14.2", - "react-scripts": "5.0.1", + "react-scripts": "^5.0.1", "typescript": "^4.9.5", "typescript-plugin-css-modules": "^5.0.1", "web-vitals": "^2.1.4", "yup": "^1.2.0" }, "devDependencies": { - "file-loader": "^6.2.0" + "autoprefixer": "^10.4.14", + "file-loader": "^6.2.0", + "gh-pages": "^5.0.0", + "postcss": "^8.4.27", + "tailwindcss": "^3.3.3" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -5060,6 +5064,15 @@ "node": ">=8" } }, + "node_modules/array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/array.prototype.flat": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz", @@ -7017,6 +7030,12 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.473.tgz", "integrity": "sha512-aVfC8+440vGfl06l8HKKn8/PD5jRfSnLkTTD65EFvU46igbpQRri1gxSzW9/+TeUlwYzrXk1sw867T96zlyECA==" }, + "node_modules/email-addresses": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz", + "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==", + "dev": true + }, "node_modules/emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", @@ -8177,6 +8196,32 @@ "node": ">=10" } }, + "node_modules/filename-reserved-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz", + "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/filenamify": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz", + "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==", + "dev": true, + "dependencies": { + "filename-reserved-regex": "^2.0.0", + "strip-outer": "^1.0.1", + "trim-repeated": "^1.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/filesize": { "version": "8.0.7", "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz", @@ -8664,6 +8709,94 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gh-pages": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-5.0.0.tgz", + "integrity": "sha512-Nqp1SjkPIB94Xw/3yYNTUL+G2dxlhjvv1zeN/4kMC1jfViTEqhtVz/Ba1zSXHuvXCN9ADNS1dN4r5/J/nZWEQQ==", + "dev": true, + "dependencies": { + "async": "^3.2.4", + "commander": "^2.18.0", + "email-addresses": "^5.0.0", + "filenamify": "^4.3.0", + "find-cache-dir": "^3.3.1", + "fs-extra": "^8.1.0", + "globby": "^6.1.0" + }, + "bin": { + "gh-pages": "bin/gh-pages.js", + "gh-pages-clean": "bin/gh-pages-clean.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/gh-pages/node_modules/array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==", + "dev": true, + "dependencies": { + "array-uniq": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/gh-pages/node_modules/commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, + "node_modules/gh-pages/node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/gh-pages/node_modules/globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==", + "dev": true, + "dependencies": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/gh-pages/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==", + "dev": true, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/gh-pages/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "dev": true, + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -13018,6 +13151,27 @@ "node": ">=0.10.0" } }, + "node_modules/pinkie": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", + "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pinkie-promise": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", + "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==", + "dev": true, + "dependencies": { + "pinkie": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/pirates": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", @@ -16113,6 +16267,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/style-loader": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz", @@ -16632,6 +16798,18 @@ "node": ">=8" } }, + "node_modules/trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", diff --git a/package.json b/package.json index cf95392..7235b3c 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "react-dom": "^18.2.0", "react-redux": "^8.1.1", "react-router-dom": "^6.14.2", - "react-scripts": "5.0.1", + "react-scripts": "^5.0.1", "typescript": "^4.9.5", "typescript-plugin-css-modules": "^5.0.1", "web-vitals": "^2.1.4", @@ -52,7 +52,10 @@ ] }, "devDependencies": { + "autoprefixer": "^10.4.14", "file-loader": "^6.2.0", - "gh-pages": "^5.0.0" + "gh-pages": "^5.0.0", + "postcss": "^8.4.27", + "tailwindcss": "^3.3.3" } } diff --git a/public/index.html b/public/index.html index 2114304..53e04e3 100644 --- a/public/index.html +++ b/public/index.html @@ -9,17 +9,24 @@ name="description" content="Web site created using create-react-app" /> - --> + + + + Your little notes - + -
+
diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 9a621a1..0000000 --- a/src/App.css +++ /dev/null @@ -1,66 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Courier+Prime&family=Poiret+One&display=swap"); - -* { - --primary: #bb4430; - --secondary: #7ebdc2; - --dark: #231f20; - box-sizing: border-box; - margin: 0; - padding: 0; -} - -a { - text-decoration: none; - color: azure; -} - -img { - max-width: 30px; -} - -.App { - display: grid; - grid-template-areas: - "header" - "main-content" - "footer"; -} - -.appContainer { - min-height: 80vh; - grid-area: main-content; - font-family: "Courier Prime", monospace; - margin: 10px 20px; -} - -.footer { - background-color: var(--dark); - color: azure; - grid-area: footer; - display: flex; - flex-direction: column; - align-items: center; - padding: 5px; - font-family: "Courier Prime", monospace; -} - -.fancyButton { - background-color: var(--primary) !important; - border: var(--primary) !important; -} - -.fancyButton:hover { - background-color: azure !important; - color: var(--primary); - outline: 1px solid var(--primary) !important; -} - -.mainTable { - margin-bottom: 15px; - display: flex; - flex-direction: column; -} - -.mainTable button { - align-self: flex-end; -} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 3ba05e1..83d01bd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; import { Outlet } from "react-router-dom"; -import "./App.css"; +import "./index.css"; import Header from "./layout/Header/Header"; import Footer from "./layout/Footer/Footer"; import Table from "./components/Table/Table"; @@ -11,9 +11,9 @@ import { categoriesHead } from "./assets/tableHeaders"; const App: FC = () => { return ( -
+
-
+
diff --git a/src/assets/tableHeaders.tsx b/src/assets/tableHeaders.tsx index 2a8f087..f4c49d0 100644 --- a/src/assets/tableHeaders.tsx +++ b/src/assets/tableHeaders.tsx @@ -1,6 +1,5 @@ import archiveIcon from "./img/icons/archiveIcon.svg"; import deleteIcon from "./img/icons/deleteIcon.svg"; -import '../App.css'; export const mainTableHead = [ "Name", diff --git a/src/components/CategoryItem/CategoryItem.tsx b/src/components/CategoryItem/CategoryItem.tsx index 1fb4209..a261bef 100644 --- a/src/components/CategoryItem/CategoryItem.tsx +++ b/src/components/CategoryItem/CategoryItem.tsx @@ -2,15 +2,14 @@ import React, { FC } from "react"; import { CategoryType } from "../../assets/categories"; import { useSelector } from "react-redux"; import { Note, getNotesList } from "../../redux/reducers/notesReducer"; -import styles from "../NotleItem/NoteItem.module.css"; const CategoryItem: FC = ({ icon, title, id }) => { const noteList = useSelector(getNotesList); return ( - - - - - + + = ({ headers, children }) => { return ( -
- {title} + + {title} {title} diff --git a/src/components/ModalForm/ModalForm.module.css b/src/components/ModalForm/ModalForm.module.css deleted file mode 100644 index 1df5d06..0000000 --- a/src/components/ModalForm/ModalForm.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.form { - display: flex; - flex-direction: column; - gap: 15px; -} - -.form textarea { - resize: none; -} - -.form input:focus, -.form select:focus, -.form textarea:focus { - box-shadow: none !important; -} - -.controlButtons { - align-self: flex-end; - display: flex; - gap: 30px; -} - - diff --git a/src/components/ModalForm/ModalForm.tsx b/src/components/ModalForm/ModalForm.tsx index 927b1f2..db53d10 100644 --- a/src/components/ModalForm/ModalForm.tsx +++ b/src/components/ModalForm/ModalForm.tsx @@ -1,13 +1,4 @@ import React, { FC } from "react"; -import styles from "./ModalForm.module.css"; -import { - Button, - FormControl, - FormGroup, - FormLabel, - FormSelect, - Modal, -} from "react-bootstrap"; import { Note, addNote, @@ -69,60 +60,69 @@ const ModalForm: FC = ({ }; return ( - - - {isCreate ? "Create" : "Edit"} Note - +
+
+

+ {isCreate ? "Create" : "Edit"} Note +

- - - {({ isValid, errors, touched }) => ( -
- - Note's name: - - - - Choose category: - - {categories.map((item, index) => ( - - ))} - - - - Content: - - -
- - -
-
- )} - - - +
+ + {({ isValid, errors, touched }) => ( +
+
+ + +
+
+ + + {categories.map((item, index) => ( + + ))} + +
+
+ + +
+
+ + +
+
+ )} + +
+
+
); }; diff --git a/src/components/Navbar/NavBar.module.css b/src/components/Navbar/NavBar.module.css deleted file mode 100644 index 2c48410..0000000 --- a/src/components/Navbar/NavBar.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.Link { - color: var(--secondary); -} - -.Link:hover { - color: var(--primary); -} diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index ecafedd..565f48a 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -1,33 +1,27 @@ import React, { FC } from "react"; -import styles from "./NavBar.module.css"; -import Nav from "react-bootstrap/Nav"; -import { Link, useLocation } from "react-router-dom"; +import { NavLink } from "react-router-dom"; const Navbar: FC = () => { - const location = useLocation(); + const linkClass = "p-3 rounded-lg border-t border-r border-l hover:text-primary"; return ( - + ); }; diff --git a/src/components/NotleItem/NoteItem.module.css b/src/components/NotleItem/NoteItem.module.css deleted file mode 100644 index cfeb3db..0000000 --- a/src/components/NotleItem/NoteItem.module.css +++ /dev/null @@ -1,16 +0,0 @@ -.nameItem img{ - margin: 5px 10px 5px 0; -} - -.cutEdges { - max-width: 200px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.buttonAction { - background-color: transparent; - outline: none; - border: none; -} \ No newline at end of file diff --git a/src/components/NotleItem/NoteItem.tsx b/src/components/NotleItem/NoteItem.tsx index c63d1e4..998641b 100644 --- a/src/components/NotleItem/NoteItem.tsx +++ b/src/components/NotleItem/NoteItem.tsx @@ -9,8 +9,6 @@ import archiveIcon from "../../assets/img/icons/archiveIcon.svg"; import deleteIcon from "../../assets/img/icons/deleteIcon.svg"; import editIcon from "../../assets/img/icons/editIcon.svg"; import unarchiveIcon from "../../assets/img/icons/unarchiveIcon.svg"; -import styles from "./NoteItem.module.css"; -import { Button } from "react-bootstrap"; import { useDispatch } from "react-redux"; import ModalForm from "../ModalForm/ModalForm"; @@ -38,24 +36,28 @@ const NoteItem: FC = ({ return (
- {noteCategory?.title} + + {noteCategory?.title} {name} {created} {noteCategory?.title}{content}{dates.join(", ")} - {content}{dates.join(", ")} + - + - + +
+
{headers.map((el, i) => ( - ))} {children} -
+ {el}
+ ); }; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..60ce5af --- /dev/null +++ b/src/index.css @@ -0,0 +1,25 @@ +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; + + +.cutEdges{ + @apply max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap +} + +.image { + @apply max-w-[30px] object-contain +} + +.item-photo { + @apply flex gap-5 items-center +} + +.form-group { + @apply flex flex-col gap-3 +} + +.input { + @apply border rounded-lg p-2 +} + diff --git a/src/layout/Footer/Footer.tsx b/src/layout/Footer/Footer.tsx index abc7402..e4a9bd8 100644 --- a/src/layout/Footer/Footer.tsx +++ b/src/layout/Footer/Footer.tsx @@ -2,11 +2,11 @@ import React, { FC } from "react"; const Footer: FC = () => { return ( -