diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index 7415934..bf1f7e5 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.firebase/hosting.YnVpbGQ.cache @@ -1,38 +1,44 @@ -404.html,1625735851483,daa499dd96d8229e73235345702ba32f0793f0c8e5c0d30e40e37a5872be57aa -asset-manifest.json,1625735154584,e7e65bbe4f970baed02984ef8f12ddcc534e18b09b7f0c1f548febd46cece5bf -index.html,1625735154584,b57eb7feb4a8e548e38687d80d2301857752c08538ace3925a740803feaf2e60 -favicon.ico,499162500000,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9 -manifest.json,1625735109662,cf5d3eccd4041bfc0b29e302068b05621d330b7ca972b4255415098312d1a8db -robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49 -logo192.png,499162500000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b -static/js/2.f2c49f19.chunk.js.LICENSE.txt,1625735154584,344f60d92805a3f6078799efe3001c0746af425c166ecf1779b9a58f0ef566af -static/css/main.c2331756.chunk.css,1625735154582,416e7c45fcb21ea2b434d1a102bb66089f91f088f8d7869c2bdd7ede2c92d266 -logo512.png,499162500000,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331 -static/js/3.cb57794e.chunk.js,1625735154584,60de2dd7f15199fe2965e522e52d03e10bb5b50442ecbd5383cf163b56169d41 -static/css/main.c2331756.chunk.css.map,1625735154584,5a70a5fd98b73bcd7499c2a1c6bb7204a31a95002b9f74b53c893ab06c113f9d -static/js/3.cb57794e.chunk.js.map,1625735154584,ac8e3493f1d85733cb7c4a0a06252a60309d0110c1836d71a0b2b095c4d26d9c -static/js/main.91ccfac1.chunk.js,1625735154583,eb3e06874b71fff865234ab59a4b130fac43830a0dffcf912d38d4923f49a2a2 -static/js/runtime-main.453708b4.js,1625735154583,5ffb3477eee5df188ee85b1115a6dfbe96c74b15304886457e0b5dc2dff127f3 -static/js/runtime-main.453708b4.js.map,1625735154584,2dd6c3cc8b31001fecef5790c3bf5d4ba67920959507a28c71309bab7ff5de10 -static/media/activity.3733339a.svg,1625735154580,7f509f05b0d77c25d3f07db4f6166db16b031e5caa5c69959a97ba151fb4998c -static/media/anamnesis.a641b7e6.svg,1625735154578,2f49a8859f005fc1bde28592099cf18bfc409762709ccdd2de5f89989eed9f72 -static/media/book-sharp.11c8fa82.svg,1625735154583,9972070f05e15fa2db5c640f4267ccf06500112fecd7cf9ea82440a54164075e -static/media/bookmark.a2da2096.svg,1625735154580,9b406705f5d944e658cbf998053672cbd348fb46d9433a326fc5d8fc14e89b16 -static/media/bookshelf.483b2aa4.svg,1625735154580,c280aae70c53ae70c8e36578038a328ac7a030ba9931fb42ea201b3e046fb562 -static/media/bx-brain.0318e2d4.svg,1625735154581,6ad7f9222269641c5c7d0c273dd726d73cd575bc671a89773e3d4a7e25cf2a77 -static/media/bx-calendar.1108d675.svg,1625735154580,f288c3ed3312a50d1fdb163ba8b78140e191b06d81bac9853947a97602f4508e -static/media/bx-search-alt.6aee4585.svg,1625735154580,603550581c70a06e5664ac553d0fc219aafe14e5c94033f29adb736d66b72379 -static/media/check-circle.c1e8fd45.svg,1625735154580,c730ae96b836b753d2f86436bf6ecd699a7f5def0509a1bb9ad3a3ef90ef2c3a -static/media/circled.bac31e63.svg,1625735154580,721d1d9a1b5b04c473deb6a5224198ca8c43e3e59c68dc535b7f1018055ab0aa -static/media/expand.4a4b1ee4.svg,1625735154580,cf40afa575712fa86ae9ebbef98aa8d4b57c97a5b3783aa0169d7e660c5c9c17 -static/media/home.bb84a97d.svg,1625735154582,6d3e94ae19e370469517160dc45cb896635c1892d5961469ab6e5eccc7e457a7 -static/media/more-vertical.c6e3fe1e.svg,1625735154583,792da2f0838baeb52067592370b92f656e6578916c8919e3a686c44f14a9333c -static/media/intern-badge.c818f4cb.svg,1625735154581,8f049889351e35ec360d7cd418d02b5b578287bf6e5527d49f034d66265e72aa -static/media/plus.8ac59b29.svg,1625735154580,fa6f72790a676cd5239c144de64ef763ff4176d73886884d9969941030771eec -static/media/readme.81bb4934.svg,1625735154580,87e0a90f1a972cb3b6bf3f84db0c81fb17555e943b3f1fe96092136b17b93f55 -static/media/stats-chart.c0cc3ef1.svg,1625735154583,ccf5b788671a0a2d19f35844d0ec30dd88224cfd3651da90e79a1fabe1d80e1c -static/media/time.c96f97a2.svg,1625735154580,5a37df247e69bc2d4f8a0ed1b8efd9551fbd639d1aed6e85582da6bfff6182a8 -static/media/user-speaker.6817a677.svg,1625735154581,24f8ba4e218fd372cd42531bd46bfbbc03a9ba0ef83efd902e65bb886fb84da5 -static/js/main.91ccfac1.chunk.js.map,1625735154584,a26fcaf41f0e9c8d2623a52a78986d832c7c33e5f224b1f152ae59527f6587fe -static/js/2.f2c49f19.chunk.js,1625735154583,691d04a0c237f14bc70ed22eada4e3dde4e753dd7bf302f8a2b31372792112b5 -static/js/2.f2c49f19.chunk.js.map,1625735154584,50c9075e5ed85bd9588c7d48c503d6a614f43980e99e2bde9973a82e7d5d6724 +asset-manifest.json,1626794365226,d91f9903ae14aed6ff22f5f45cf15914ccfc6700fc6d7f6427e0426589240ec3 +index.html,1626794365225,637dea62635534da4191a634336345f56e23f0bf42344e76fd046d4deb55e937 +favicon.ico,1626794341324,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955 +manifest.json,1626794341329,9ba0b8957fc9cd6f287f006dff4f3afc528f312295571d004abc874a7b304b10 +logo512.png,1626794341327,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e +static/js/2.fe96eeec.chunk.js.LICENSE.txt,1626794365227,bfbf3a4b9e414262e302b9c850733cb7cfafa9577cb62b814d04300a511215fc +logo192.png,1626794341326,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293 +static/css/main.88a7e5b6.chunk.css,1626794365222,2001d3d6dcac1a6a1f98d4beaa90a6cf321a188f2867beacdd3cfe5ea249944e +static/js/3.2a971649.chunk.js,1626794365228,5c08d3850f7916057981ca88b25fe6ad2271828427a7315c6e36a12b448d099f +static/js/3.2a971649.chunk.js.map,1626794365228,079a86bc9477b0a1c6b808d7e77accaeada46621c8bea0d6e4ae5b5be56b6e16 +robots.txt,1626794341331,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2 +static/js/runtime-main.88e70a30.js,1626794365224,cca7cf118b3460737b0c8fab0945e4b48b9b3bf6993e2e1e307b123205aefc5b +static/media/activity.3733339a.svg,1626794365218,67be60524bdd174949075ac2c73519261ed65998a49439f0e8ff5a631b68c746 +static/js/runtime-main.88e70a30.js.map,1626794365228,15ede7cf463dbc025e43cf76df6ae98b4bcff6b00e2853344b049c0187942f9d +static/media/anamnesis.a641b7e6.svg,1626794365218,24435e79f9fd57f71276508858befb2a77719f416fe7213068aad53b8953cce8 +static/media/book-sharp.11c8fa82.svg,1626794365222,f67644a183683a63f2d9976e890eb1fb2ad2e97ebb18eb10050342d28b92ed5b +static/media/bookmark.a2da2096.svg,1626794365220,29c13e1546597c703791f2a447fe18535963823f3f902ffedb8724434511b2c8 +static/media/bookshelf.483b2aa4.svg,1626794365220,e6545866615c0e1a6f850509153b365072f05c3179c4d4fb3ecb21c7b82ac96f +static/media/bx-brain.0318e2d4.svg,1626794365218,89cd203c6b55ea3b65034f05e266dc30b14e727bbd11de1c75a9f08af6f64e36 +static/media/bx-search-alt.6aee4585.svg,1626794365218,651936941fee86d3b721a577909bf90d4e08d9e62c8a95174488babde81d8971 +static/js/main.16376668.chunk.js,1626794365222,859883682aec19415ea1ceb139edf9fcf0da840d5943cdfa71b49c4e85249f3f +static/media/bx-calendar.1108d675.svg,1626794365219,7c453239d1488a29754ccad27304519a30d992e0b0239e912fcea73d21bbb497 +static/media/check-circle.c1e8fd45.svg,1626794365218,ff073d43826664345aca33e591a3914931c2deec9a207e1f36ac6405c2c830e7 +static/media/check.b354552a.svg,1626794365222,c5d25c512d5e7d9df6398de36eeafe5fc2ebb55b4160881f088a0608226d6db1 +static/media/circled.bac31e63.svg,1626794365218,862ea839b0e6250d6d4d5876eb1338e61f0c3456346a489b164e336ce6eb826b +static/media/chevron-left.680dffe8.svg,1626794365223,746c1361579c3a2086dbcee59f06438a2d6bb54d5b973103f217c743cec47eb5 +static/media/close.d4e228d9.svg,1626794365222,8bb89d130acaee639c2bf274160929e1353a5ff18eca4e271b30a50431408ca9 +static/media/expand.4a4b1ee4.svg,1626794365218,84e811af4e150e4dc440824c18ab5e0e53d7a4ea1bf3166143287595bde0af49 +static/media/home.bb84a97d.svg,1626794365222,081a43fb3ad132a1295a75b2123a79b0261a9ba6978a175eaa81035f56fda0d7 +static/media/more-vertical.c6e3fe1e.svg,1626794365225,5425d3d4391f054c3ce2aae41fa66956d79ffc70b0bcdad3f64483f5bb1d7587 +static/media/plus-circle.a1ca80d1.svg,1626794365222,f1c9f52a1d21edf65463d233394155d447f0e592cd8da55879439c1cd038147c +static/media/plus.8ac59b29.svg,1626794365218,86dc717c45016a3e4f2521fbac049a77771852ed4b36741a3814bd0549a0ee36 +static/media/readme.81bb4934.svg,1626794365218,0c3a0b717b9e0b427f07c777ca51bab67bc81a6ac5efedbd97fa1fb2c564f33c +static/media/stats-chart.c0cc3ef1.svg,1626794365222,cdfef79d4b11681a86e7bcc785782b9001ae79f8e42f10640ca92e62e99c6996 +static/media/speaker.6971d2a3.svg,1626794365222,58d679636ee09fdd1c6d41fd213288500b8c4ffcfe8104eb278f0e207b064113 +static/media/time.c96f97a2.svg,1626794365218,11c478f1864cdc4126943a74ab8560ebe3f20b179ee854e9b5b9a80c33148e16 +static/media/tab.c01b43e6.svg,1626794365218,82584e243b002fac4cc97868a2f30c520148eb4718e0d5c85c0c717e604fd56f +static/media/timer.b4355910.svg,1626794365223,c7495c3ea38b4d7e5ff08cbb7417528752e6e34e3dd1c6e1e5599ecd491b90c2 +static/media/intern-badge.c818f4cb.svg,1626794365222,b431e30ab91858642d2d78053114dd85b8cd51ee5f57d26545fd4c89f4e699ff +static/media/user-speaker.6817a677.svg,1626794365219,5c658319026bfd2bfbfc017ef5a0bb80a3436f5473ca7d30a4277e51f07f6692 +static/css/main.88a7e5b6.chunk.css.map,1626794365227,5b89966c7cfb2897b2d645c5fcccd61450af717275c73fe931c4002e7a145d50 +static/js/main.16376668.chunk.js.map,1626794365227,2de54fcfb82378e27c2a564dc422db6c004250b2a8eb27d52199b72065a74fcd +static/js/2.fe96eeec.chunk.js,1626794365225,be18b55b6e9e86ef2c8f558880eb4af549ef58785c262008bec36a294dcc51a1 +static/js/2.fe96eeec.chunk.js.map,1626794365229,9ca7b6a3bc5a4b5d18b07c25797b00afb15e14d38930980de0f4b067e4ecdb60 diff --git a/package-lock.json b/package-lock.json index 9a1ca51..575f70b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3754,6 +3754,15 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "optional": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -6687,6 +6696,12 @@ } } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "filesize": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz", @@ -6700,6 +6715,11 @@ "to-regex-range": "^5.0.1" } }, + "filter-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz", + "integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs=" + }, "finalhandler": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", @@ -10949,6 +10969,22 @@ "prepend-http": "^1.0.0", "query-string": "^4.1.0", "sort-keys": "^1.0.0" + }, + "dependencies": { + "query-string": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz", + "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=", + "requires": { + "object-assign": "^4.1.0", + "strict-uri-encode": "^1.0.0" + } + }, + "strict-uri-encode": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", + "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=" + } } }, "npm-run-path": { @@ -12753,12 +12789,14 @@ "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==" }, "query-string": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz", - "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=", + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz", + "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==", "requires": { - "object-assign": "^4.1.0", - "strict-uri-encode": "^1.0.0" + "decode-uri-component": "^0.2.0", + "filter-obj": "^1.1.0", + "split-on-first": "^1.0.0", + "strict-uri-encode": "^2.0.0" } }, "querystring": { @@ -14683,6 +14721,11 @@ } } }, + "split-on-first": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz", + "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==" + }, "split-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", @@ -14813,9 +14856,9 @@ "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==" }, "strict-uri-encode": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", - "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", + "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=" }, "string-length": { "version": "4.0.2", @@ -15967,6 +16010,7 @@ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } }, @@ -16545,6 +16589,7 @@ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } }, diff --git a/package.json b/package.json index adae68d..2f29711 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@types/react": "^17.0.13", "@types/react-dom": "^17.0.8", "node-sass": "^6.0.1", + "query-string": "^7.0.1", "react": "^17.0.2", "react-circular-progressbar": "^2.0.4", "react-dom": "^17.0.2", diff --git a/src/App.tsx b/src/App.tsx index 37a6bee..9a294a9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,6 +5,7 @@ import { Tabs } from "./components/tabs/Tabs"; import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom"; import { AddWord } from "./components/add-word/AddWord"; import { AddShelf } from "./components/add-shelf/AddShelf"; +import { CategoryDetails } from "./components/category-details/CategoryDetails"; function App() { return ( @@ -14,6 +15,7 @@ function App() { + diff --git a/src/assets/icons/more-alt.svg b/src/assets/icons/more-alt.svg index 78a3f71..84e3104 100644 --- a/src/assets/icons/more-alt.svg +++ b/src/assets/icons/more-alt.svg @@ -1,7 +1,7 @@ - - - + + + diff --git a/src/components/add-shelf/AddShelf.module.scss b/src/components/add-shelf/AddShelf.module.scss index 9fd5128..2aeac7a 100644 --- a/src/components/add-shelf/AddShelf.module.scss +++ b/src/components/add-shelf/AddShelf.module.scss @@ -1,24 +1,3 @@ -.createShelfModal { - background-color: var(--creamy-white); - z-index: 2; - width: 100vw; - height: 100vh; - overflow: auto; - opacity: 0; - position: relative; - animation: fadeIn 0.3s forwards; - - @keyframes fadeIn { - 0% { - opacity: 0; - transform: translateY(10vh); - } 100% { - opacity: 1; - transform: translateY(0vh); - } - } -} - .modalHeader { background-color: var(--orange); display: flex; @@ -170,19 +149,19 @@ } } - &:nth-child(1) .icon { + &:nth-child(5n - 4) .icon { background-color: var(--orange); } - &:nth-child(2) .icon { + &:nth-child(5n - 3) .icon { background-color: var(--blue); } - &:nth-child(3) .icon { + &:nth-child(5n - 2) .icon { background-color: var(--red); } - &:nth-child(4) .icon { + &:nth-child(5n - 1) .icon { background-color: var(--teal); } } diff --git a/src/components/add-shelf/AddShelf.tsx b/src/components/add-shelf/AddShelf.tsx index 5765b07..65b0c62 100644 --- a/src/components/add-shelf/AddShelf.tsx +++ b/src/components/add-shelf/AddShelf.tsx @@ -16,7 +16,7 @@ export const AddShelf: React.FC = () => { viewPermission: 'PRIVATE' }); - return
+ return

Create New Shelf

diff --git a/src/components/add-word/AddWord.module.scss b/src/components/add-word/AddWord.module.scss index edc23bf..bedfb99 100644 --- a/src/components/add-word/AddWord.module.scss +++ b/src/components/add-word/AddWord.module.scss @@ -1,24 +1,3 @@ -.modalPage { - background-color: var(--creamy-white); - z-index: 2; - width: 100vw; - height: 100vh; - overflow: auto; - opacity: 0; - position: relative; - animation: fadeIn 0.3s forwards; - - @keyframes fadeIn { - 0% { - opacity: 0; - transform: translateY(10vh); - } 100% { - opacity: 1; - transform: translateY(0vh); - } - } -} - .navHeader { background-color: transparent; text-align: center; @@ -254,17 +233,21 @@ align-items: center; margin: 0 0 2rem; - &:nth-child(3n) .icon { + &:nth-child(5n - 4) .icon { background-color: var(--red); } - &:nth-child(3n - 1) .icon { + &:nth-child(5n - 3) .icon { background-color: var(--orange); } - &:nth-child(3n - 2) .icon { + &:nth-child(5n - 2) .icon { background-color: var(--blue); } + + &:nth-child(5n - 1) .icon { + background-color: var(--teal); + } } .icon { diff --git a/src/components/add-word/AddWord.tsx b/src/components/add-word/AddWord.tsx index b594452..45b0d86 100644 --- a/src/components/add-word/AddWord.tsx +++ b/src/components/add-word/AddWord.tsx @@ -26,7 +26,7 @@ export const AddWord: React.FC = () => { } } - return
+ return
-
+
    -
  • -
    - -
    -
    - - 5 Shelves -
    -
    • -
  • -
    - -
    -
    - - 3 Shelves -
    -
    • -
  • -
    - -
    -
    - - 5 Shelves -
    -
    • -
  • -
    - -
    -
    - - 2 Shelves -
    -
    • + { userProfileData.categories.map((category, index) => { + return
  • +
    + { category.icon } +
    + + + { category.shelves.length } Shelves + +
    • + })}
diff --git a/src/components/categories/details/CategoryDetails.module.scss b/src/components/categories/details/CategoryDetails.module.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/categories/details/CategoryDetails.tsx b/src/components/categories/details/CategoryDetails.tsx deleted file mode 100644 index 38fd44b..0000000 --- a/src/components/categories/details/CategoryDetails.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react"; -import styles from './CategoryDetails.module.scss'; - -export const CategoryDetails: React.FC = () => { - return
- -
-} \ No newline at end of file diff --git a/src/components/category-details/CategoryDetails.module.scss b/src/components/category-details/CategoryDetails.module.scss new file mode 100644 index 0000000..2f5a6bb --- /dev/null +++ b/src/components/category-details/CategoryDetails.module.scss @@ -0,0 +1,231 @@ +.navHeader { + background-color: transparent; + text-align: center; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1.5rem; + + button { + width: 4rem; + text-align: center; + background-color: transparent; + border: 0; + display: flex; + align-items: center; + justify-content: flex-start; + + svg { + width: 1rem; + color: var(--black); + } + } + + h5 { + font-size: 1.5rem; + } + + figure { + display: block; + + img { + display: block; + width: 4rem; + height: 4rem; + border-radius: 50%; + border: 1px solid var(--creamy-white); + } + } +} + + +.Shelf { + padding: 0 2rem; + + ul { + list-style: none; + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 2rem; + } + + [class*="CircularProgressbar"] { + width: 100%; + height: 100%; + } + + .progress { + position: relative; + width: 7rem; + height: 7rem; + + .text { + position: absolute; + left: 0; + top: 0; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + text-align: center; + font-size: 1.4rem; + color: white; + font-weight: 600; + } + } + + li { + border-radius: 3rem; + padding: 1.5rem; + + &:nth-child(5n - 4) { + background-color: var(--orange); + } + + &:nth-child(5n - 3) { + background-color: var(--blue); + } + + &:nth-child(5n - 2) { + background-color: var(--red); + } + + &:nth-child(5n - 1) { + background-color: var(--teal); + } + } + + h5 { + font-size: 1.2rem; + color: white; + font-weight: 600; + margin-top: 1rem; + } + + p { + font-size: 1.1rem; + color: white; + + &:last-child { + margin-top: 1rem; + } + } +} + +.tabHeading { + background-color: transparent; + position: relative; + padding: 3rem 2.5rem 8rem 4rem; + display: flex; + align-items: flex-start; + + &::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: var(--teal); + border-top-left-radius: 3rem; + border-top-right-radius: 3rem; + } + + &>* { + position: relative; + } + + h4 { + color: white; + font-size: 2.2rem; + font-weight: 600; + } + + p { + color: white; + font-size: 1.4rem; + } + + .icon { + width: 6rem; + height: 6rem; + background-color: var(--orange); + border-radius: 1rem; + display: flex; + align-items: center; + justify-content: center; + margin-right: 1rem; + + svg { + width: 2.5rem; + height: 2.5rem; + fill: white; + } + } + + .moreButton { + margin-left: auto; + width: 2rem; + height: 5rem; + display: flex; + align-items: flex-start; + justify-content: center; + background-color: transparent; + border: none; + + svg { + fill: white; + width: 1.8rem; + height: 1.8rem; + } + } +} + +.searchHolder { + position: relative; + + &::before { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: var(--creamy-white); + border-top-left-radius: 3rem; + border-top-right-radius: 3rem; + } + + &>* { + position: relative; + } + + .searchBar { + background-color: white; + display: flex; + border-radius: 3rem; + height: 5rem; + width: calc(100% - 6rem); + margin: -2.5rem auto 0; + align-items: center; + justify-content: space-between; + box-shadow: 0px 5px 30px -20px var(--grey); + transform: translateY(-2.5rem); + + input { + height: 100%; + border: 0; + width: calc(100% - 5rem); + background-color: transparent; + padding-left: 2rem; + font-size: 1.4rem; + } + + svg { + width: 5rem; + fill: var(--red); + } + } +} \ No newline at end of file diff --git a/src/components/category-details/CategoryDetails.tsx b/src/components/category-details/CategoryDetails.tsx new file mode 100644 index 0000000..6c4fe53 --- /dev/null +++ b/src/components/category-details/CategoryDetails.tsx @@ -0,0 +1,77 @@ +import React from "react"; +import styles from './CategoryDetails.module.scss'; +import { useLocation } from 'react-router'; +import queryString from 'query-string'; +import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg'; +import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg'; +import { ReactComponent as MoreIcon } from '../../assets/icons/more-alt.svg'; + +import { userProfileData } from "../home/Home"; +import { CircularProgressbar } from "react-circular-progressbar"; + +export const CategoryDetails: React.FC = () => { + const location = useLocation(); + const category_id: any = queryString.parse(location.pathname)['/category-details/category_id']; + const shelfCount: number = userProfileData.categories[category_id].shelves.length; + + return
+
+ + +
Shelves
+ +
+ {/* eslint-disable-next-line */} + profile-image +
+
+ +
+
+ { userProfileData.categories[category_id].icon } +
+
+

{ userProfileData.categories[category_id].name }

+

{ shelfCount } { shelfCount > 1 ? 'Shelves' : 'Shelf' }

+
+ +
+ +
+
+ + +
+
+ +
+
    + { userProfileData.categories[Number(category_id)].shelves.map(shelf => { + return
  • +
    + 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0} strokeWidth={7} + styles={{ + path: { + stroke: 'white', + strokeLinecap: 'round', + }, + trail: { + stroke: 'rgba(255, 255, 255, 0.25)', + strokeLinecap: 'round', + }} + } /> + + { shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0 }% +
    +
    { shelf.name }
    +

    { shelf.words.length } words

    +
    • + }) } +
+
+
+} \ No newline at end of file diff --git a/src/components/home/Home.module.scss b/src/components/home/Home.module.scss index 3628364..4d87e0c 100644 --- a/src/components/home/Home.module.scss +++ b/src/components/home/Home.module.scss @@ -161,17 +161,21 @@ $block-padding: 0 2rem; align-items: center; margin: 2rem 0; - &:nth-child(1) .icon { + &:nth-child(5n - 4) .icon { background-color: var(--red); } - &:nth-child(2) .icon { + &:nth-child(5n - 3) .icon { background-color: var(--orange); } - &:nth-child(3) .icon { + &:nth-child(5n - 2) .icon { background-color: var(--blue); } + + &:nth-child(5n - 1) .icon { + background-color: var(--teal); + } } .icon { @@ -251,21 +255,21 @@ $block-padding: 0 2rem; border-radius: 3rem; padding: 1.5rem; - &:nth-child(1) { + &:nth-child(5n - 4) { background-color: var(--orange); } - &:nth-child(2) { + &:nth-child(5n - 3) { background-color: var(--blue); } - &:nth-child(3) { + &:nth-child(5n - 2) { background-color: var(--red); } - &:nth-child(4) { + &:nth-child(5n - 1) { background-color: var(--teal); - } + } } h5 { @@ -301,19 +305,19 @@ $block-padding: 0 2rem; align-items: center; margin: 2rem 0; - &:nth-child(1) .icon { + &:nth-child(5n - 4) .icon { background-color: var(--orange); } - &:nth-child(2) .icon { + &:nth-child(5n - 3) .icon { background-color: var(--blue); } - &:nth-child(3) .icon { + &:nth-child(5n - 2) .icon { background-color: var(--red); } - &:nth-child(4) .icon { + &:nth-child(5n - 1) .icon { background-color: var(--teal); } } diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index d830c02..899dff5 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import styles from './Home.module.scss'; import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg'; import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg'; @@ -198,15 +198,15 @@ export const Home: React.FC = () => {
    - { userProfileData.categories.map(category => { + { userProfileData.categories.map((category, index) => { return
  • { category.icon }
    -
    + { category.shelves.length } Shelves -
    +
    • })}
diff --git a/src/index.css b/src/index.css index c7c3303..95b291b 100644 --- a/src/index.css +++ b/src/index.css @@ -9,6 +9,10 @@ font-family: 'Poppins', sans-serif; } +h1, h2, h3, h4, h5, h6 { + font-weight: 600; +} + :root { --orange: #f1be83; --red: #d47077; @@ -31,4 +35,25 @@ overflow: auto; position: relative; padding-bottom: 100px; +} + +.modalPage { + background-color: var(--creamy-white); + z-index: 2; + width: 100vw; + height: 100vh; + overflow: auto; + opacity: 0; + position: relative; + animation: fadeUp 0.3s forwards; +} + +@keyframes fadeUp { + 0% { + opacity: 0; + transform: translateY(10vh); + } 100% { + opacity: 1; + transform: translateY(0vh); + } } \ No newline at end of file