category details

.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

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"
           }
         },

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",

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() {
                 <Route path="/add-word" component={AddWord} />
                 <Route path="/add-shelf" component={AddShelf} />
                 <Route path="/categories" component={Categories} />
+                <Route path="/category-details/" component={CategoryDetails} />
                 <Route path="/revise" component={Revise} />
                 <Redirect from="/" to="/home" />
             </Switch>

src/assets/icons/more-alt.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="4" height="16" viewBox="0 0 4 16">
   <g id="more-alt" transform="translate(19 -6) rotate(90)">
-    <path id="Path_13" data-name="Path 13" d="M10,17a2,2,0,1,1-2-2A2,2,0,0,1,10,17Z" transform="translate(0 0)" fill="#fff"/>
-    <path id="Path_14" data-name="Path 14" d="M19,17a2,2,0,1,1-2-2A2,2,0,0,1,19,17Z" transform="translate(-3 0)" fill="#fff"/>
-    <path id="Path_15" data-name="Path 15" d="M26,19a2,2,0,1,0-2-2A2,2,0,0,0,26,19Z" transform="translate(-6 0)" fill="#fff"/>
+    <path id="Path_13" data-name="Path 13" d="M10,17a2,2,0,1,1-2-2A2,2,0,0,1,10,17Z" transform="translate(0 0)"/>
+    <path id="Path_14" data-name="Path 14" d="M19,17a2,2,0,1,1-2-2A2,2,0,0,1,19,17Z" transform="translate(-3 0)"/>
+    <path id="Path_15" data-name="Path 15" d="M26,19a2,2,0,1,0-2-2A2,2,0,0,0,26,19Z" transform="translate(-6 0)"/>
   </g>
 </svg>

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);
         }
     }

src/components/add-shelf/AddShelf.tsx

@@ -16,7 +16,7 @@ export const AddShelf: React.FC = () => {
         viewPermission: 'PRIVATE'
     });
 
-    return <section className={styles.createShelfModal}>
+    return <section className="modalPage">
 
         <header className={styles.modalHeader}>
             <h4> Create New Shelf </h4>

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 {

src/components/add-word/AddWord.tsx

@@ -26,7 +26,7 @@ export const AddWord: React.FC = () => {
         }
     }
 
-    return <section className={styles.modalPage}>
+    return <section className="modalPage">
         <header className={styles.navHeader}>
             <button onClick={() => {
                 if (selectedWord) {

src/components/categories/Categories.module.scss

@@ -49,6 +49,7 @@
     h4 {
         color: white;
         font-size: 2.2rem;
+        font-weight: 600;
     }
 
     p {
@@ -116,7 +117,8 @@
     height: 5rem;
     color: var(--orange);
     cursor: pointer;
-    font-weight: 700;
+    font-weight: 600;
+    font-size: 1.3rem;
 
     svg {
         width: 2rem;

src/components/categories/Categories.tsx

@@ -4,10 +4,8 @@ import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
 import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg';
 
-import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg';
-import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-speaker.svg';
-import { ReactComponent as BookMarkIcon } from '../../assets/icons/bookmark.svg';
-import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg';
+import { userProfileData } from "../home/Home";
+import { NavLink } from "react-router-dom";
 
 export const Categories: React.FC = () => {
     return <section className="page">
@@ -37,44 +35,19 @@ export const Categories: React.FC = () => {
         </button>
 
 
-        <section className={styles.Grid}>            
+        <section className={styles.Grid}>
             <ul>
-                <li>
-                    <div className={styles.icon}>
-                        <TimeIcon />
-                    </div>
-                    <div className={styles.info}>
-                        <label> Vocabulary </label>
-                        <span> 5 Shelves </span>
-                    </div>
-                </li>
-                <li>
-                    <div className={styles.icon}>
-                        <BookMarkIcon />
-                    </div>
-                    <div className={styles.info}>
-                        <label> Books </label>
-                        <span> 3 Shelves </span>
-                    </div>                    
-                </li>
-                <li>
-                    <div className={styles.icon}>
-                        <PersonSpeakerIcon />
-                    </div>
-                    <div className={styles.info}>
-                        <label> IELTS </label>
-                        <span> 5 Shelves </span>
-                    </div>                    
-                </li>
-                <li>
-                    <div className={styles.icon}>
-                        <BrainIcon />
-                    </div>
-                    <div className={styles.info}>
-                        <label> GRE </label>
-                        <span> 2 Shelves </span>
-                    </div>                    
-                </li>
+                { userProfileData.categories.map((category, index) => {
+                    return <li key={category.name}>
+                        <div className={styles.icon}>
+                            { category.icon }
+                        </div>
+                        <NavLink to={'/category-details/category_id=' + index} className={styles.info}>
+                            <label> { category.name } </label>
+                            <span> { category.shelves.length } Shelves </span>
+                        </NavLink>
+                    </li>
+                })}                
             </ul>
         </section>
     </section>

src/components/categories/details/CategoryDetails.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-import styles from './CategoryDetails.module.scss';
-
-export const CategoryDetails: React.FC = () => {
-    return <section className="page">
-        
-    </section>
-}

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);
+        }
+    }
+}

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 <section className="modalPage">
+        <header className={styles.navHeader}>
+            <button onClick={() => window.history.back()}>
+                <ChevronLeft />
+            </button>
+            
+            <h5> Shelves </h5>
+
+            <figure>
+                {/* eslint-disable-next-line */}
+                <img src={ userProfileData.image } alt="profile-image" />
+            </figure>
+        </header>
+
+        <header className={styles.tabHeading}>
+            <div className={styles.icon}>
+                { userProfileData.categories[category_id].icon }
+            </div>
+            <div className={styles.headingDetails}>
+                <h4> { userProfileData.categories[category_id].name } </h4>
+                <p> { shelfCount } { shelfCount > 1 ? 'Shelves' : 'Shelf' }  </p>
+            </div>
+            <button className={styles.moreButton}>
+                <MoreIcon />
+            </button>
+        </header>
+        
+        <section className={styles.searchHolder}>
+            <div className={styles.searchBar}>
+                <input type="text" placeholder={'Search Shelves'} />
+                <SearchIcon />
+            </div>
+        </section>
+
+        <section className={styles.Shelf}>
+            <ul>
+                { userProfileData.categories[Number(category_id)].shelves.map(shelf => {
+                    return <li key={shelf.name}>
+                        <div className={styles.progress}>
+                            <CircularProgressbar value={shelf.words.length > 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',
+                                    }}
+                                } />
+                                
+                            <span className={styles.text}> { shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0 }% </span>
+                        </div>
+                        <h5> { shelf.name } </h5>
+                        <p> { shelf.words.length } words </p>
+                    </li>
+                }) }                
+            </ul>
+        </section>
+    </section>
+}

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);
         }
     }

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 = () => {
                 </button>
             </header>
             <ul>
-                { userProfileData.categories.map(category => {
+                { userProfileData.categories.map((category, index) => {
                     return <li key={category.name}>
                         <div className={styles.icon}>
                             { category.icon }
                         </div>
-                        <div className={styles.info}>
+                        <NavLink to={'/category-details/category_id=' + index} className={styles.info}>
                             <label> { category.name } </label>
                             <span> { category.shelves.length } Shelves </span>
-                        </div>
+                        </NavLink>
                     </li>
                 })}                
             </ul>

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);
+    }
 }