From 1013103fcd2cabcdc3e45cd1d35154ac13bc2f75 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Sun, 13 Jan 2019 13:35:50 +0800
Subject: [PATCH 01/20] TEST

---
 src/app/footer/footer.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index e8d58f3..a828a1e 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -1,6 +1,6 @@
 <footer class="footer">
   <div class="d-sm-flex justify-content-center justify-content-sm-between">
-    <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2018 <a href="https://www.bootstrapdash.com/" target="_blank">Bootstrap Dash</a>. All rights reserved.</span>
+    <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2018. All rights reserved.</span>
     <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Hand-crafted & made with <i class="mdi mdi-heart text-danger"></i></span>
   </div>
 </footer>
\ No newline at end of file

From 1851fc150266ae115ce4d451014277b52bdd4796 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Sun, 13 Jan 2019 15:47:13 +0800
Subject: [PATCH 02/20] Made some changes on the template.

---
 package-lock.json                          | 243 ++++++++---
 src/app/dashboard/dashboard.component.html | 470 +++++++--------------
 src/app/navbar/navbar.component.html       |  24 --
 src/app/sidebar/sidebar.component.html     |  28 +-
 4 files changed, 347 insertions(+), 418 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 54357fe..09a95bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -994,9 +994,9 @@
       "optional": true
     },
     "array-flatten": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.1.tgz",
-      "integrity": "sha1-Qmu52oQJDBg42BLIFQryCoMx4pY=",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
     "array-slice": {
@@ -2123,9 +2123,9 @@
       }
     },
     "connect-history-api-fallback": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz",
-      "integrity": "sha1-sGhzk0vF40T+9hGhlqb6rgruAVo=",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
       "dev": true
     },
     "console-browserify": {
@@ -3076,12 +3076,12 @@
       "dev": true
     },
     "eventsource": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-0.1.6.tgz",
-      "integrity": "sha1-Cs7ehJ7X3RzMMsgRuxG5RNTykjI=",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.0.7.tgz",
+      "integrity": "sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==",
       "dev": true,
       "requires": {
-        "original": ">=0.0.5"
+        "original": "^1.0.0"
       }
     },
     "evp_bytestokey": {
@@ -3507,7 +3507,7 @@
     },
     "finalhandler": {
       "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
       "dev": true,
       "requires": {
@@ -4263,7 +4263,7 @@
     },
     "get-stream": {
       "version": "3.0.0",
-      "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
       "dev": true
     },
@@ -4392,9 +4392,9 @@
       "dev": true
     },
     "handle-thing": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
-      "integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
+      "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==",
       "dev": true
     },
     "handlebars": {
@@ -4718,9 +4718,9 @@
       }
     },
     "http-parser-js": {
-      "version": "0.4.13",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.13.tgz",
-      "integrity": "sha1-O9bW/ebjFyyTNMOzO2wZPYD+ETc=",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.0.tgz",
+      "integrity": "sha512-cZdEF7r4gfRIq7ezX9J0T+kQmJNOub71dWbgAXVHDct80TKP4MCETtZQ31xyv38UwgzkWPYF/Xc0ge55dW9Z9w==",
       "dev": true
     },
     "http-proxy": {
@@ -4736,7 +4736,7 @@
     },
     "http-proxy-middleware": {
       "version": "0.18.0",
-      "resolved": "http://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz",
       "integrity": "sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==",
       "dev": true,
       "requires": {
@@ -4878,9 +4878,9 @@
           }
         },
         "p-limit": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
-          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.1.0.tgz",
+          "integrity": "sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==",
           "dev": true,
           "requires": {
             "p-try": "^2.0.0"
@@ -6100,9 +6100,9 @@
       "dev": true
     },
     "map-age-cleaner": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz",
-      "integrity": "sha512-UN1dNocxQq44IhJyMI4TU8phc2m9BddacHRPRjKGLYaF0jqd3xLz0jS0skpAU9WgYyoR4gHtUpzytNBS385FWQ==",
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
+      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
       "dev": true,
       "requires": {
         "p-defer": "^1.0.0"
@@ -6967,7 +6967,7 @@
     },
     "p-is-promise": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
       "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
       "dev": true
     },
@@ -8555,19 +8555,28 @@
       }
     },
     "sockjs-client": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.1.5.tgz",
-      "integrity": "sha1-G7fA9yIsQPQq3xT0RCy9Eml3GoM=",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.3.0.tgz",
+      "integrity": "sha512-R9jxEzhnnrdxLCNln0xg5uGHqMnkhPSTzUZH2eXcR03S/On9Yvoq2wyUZILRUhZCNVu2PmwWVoyuiPz8th8zbg==",
       "dev": true,
       "requires": {
-        "debug": "^2.6.6",
-        "eventsource": "0.1.6",
-        "faye-websocket": "~0.11.0",
-        "inherits": "^2.0.1",
+        "debug": "^3.2.5",
+        "eventsource": "^1.0.7",
+        "faye-websocket": "~0.11.1",
+        "inherits": "^2.0.3",
         "json3": "^3.3.2",
-        "url-parse": "^1.1.8"
+        "url-parse": "^1.4.3"
       },
       "dependencies": {
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
         "faye-websocket": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz",
@@ -8576,6 +8585,12 @@
           "requires": {
             "websocket-driver": ">=0.5.1"
           }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "dev": true
         }
       }
     },
@@ -8682,32 +8697,75 @@
       "dev": true
     },
     "spdy": {
-      "version": "3.4.7",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-3.4.7.tgz",
-      "integrity": "sha1-Qv9B7OXMD5mjpsKKq7c/XDsDrLw=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.0.tgz",
+      "integrity": "sha512-ot0oEGT/PGUpzf/6uk4AWLqkq+irlqHXkrdbk51oWONh3bxQmBuljxPNl66zlRRcIJStWq0QkLUCPOPjgjvU0Q==",
       "dev": true,
       "requires": {
-        "debug": "^2.6.8",
-        "handle-thing": "^1.2.5",
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
         "http-deceiver": "^1.2.7",
-        "safe-buffer": "^5.0.1",
         "select-hose": "^2.0.0",
-        "spdy-transport": "^2.0.18"
+        "spdy-transport": "^3.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "dev": true
+        }
       }
     },
     "spdy-transport": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-2.1.0.tgz",
-      "integrity": "sha512-bpUeGpZcmZ692rrTiqf9/2EUakI6/kXX1Rpe0ib/DyOzbiexVfXkw6GnvI9hVGvIwVaUhkaBojjCZwLNRGQg1g==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
       "dev": true,
       "requires": {
-        "debug": "^2.6.8",
-        "detect-node": "^2.0.3",
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
         "hpack.js": "^2.1.6",
-        "obuf": "^1.1.1",
-        "readable-stream": "^2.2.9",
-        "safe-buffer": "^5.0.1",
-        "wbuf": "^1.7.2"
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz",
+          "integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
       }
     },
     "split-string": {
@@ -9029,9 +9087,9 @@
       }
     },
     "thunky": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.0.2.tgz",
-      "integrity": "sha1-qGLgGOP7HqLsP85dVWBc9X8kc3E=",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.0.3.tgz",
+      "integrity": "sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow==",
       "dev": true
     },
     "timers-browserify": {
@@ -9552,9 +9610,9 @@
       }
     },
     "url-parse": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.3.tgz",
-      "integrity": "sha512-rh+KuAW36YKo0vClhQzLLveoj8FwPJNu65xLb7Mrt+eZht0IPT0IXgSv8gcMegZ6NvjJUALf6Mf25POlMwD1Fw==",
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.4.tgz",
+      "integrity": "sha512-/92DTTorg4JjktLNLe6GPS2/RvAd/RGr6LuktmWSMLEOa6rjnlrFXNgSbSmkNvCoL2T028A0a1JaJLzRMlFoHg==",
       "dev": true,
       "requires": {
         "querystringify": "^2.0.0",
@@ -9762,9 +9820,9 @@
       }
     },
     "webpack-dev-server": {
-      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.1.9.tgz",
-      "integrity": "sha512-fqPkuNalLuc/hRC2QMkVYJkgNmRvxZQo7ykA2e1XRg/tMJm3qY7ZaD6d89/Fqjxtj9bOrn5wZzLD2n84lJdvWg==",
+      "version": "3.1.14",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.1.14.tgz",
+      "integrity": "sha512-mGXDgz5SlTxcF3hUpfC8hrQ11yhAttuUQWf1Wmb+6zo3x6rb7b9mIfuQvAPLdfDRCGRGvakBWHdHOa0I9p/EVQ==",
       "dev": true,
       "requires": {
         "ansi-html": "0.0.7",
@@ -9786,12 +9844,14 @@
         "portfinder": "^1.0.9",
         "schema-utils": "^1.0.0",
         "selfsigned": "^1.9.1",
+        "semver": "^5.6.0",
         "serve-index": "^1.7.2",
         "sockjs": "0.3.19",
-        "sockjs-client": "1.1.5",
-        "spdy": "^3.4.1",
+        "sockjs-client": "1.3.0",
+        "spdy": "^4.0.0",
         "strip-ansi": "^3.0.0",
         "supports-color": "^5.1.0",
+        "url": "^0.11.0",
         "webpack-dev-middleware": "3.4.0",
         "webpack-log": "^2.0.0",
         "yargs": "12.0.2"
@@ -9831,6 +9891,19 @@
             }
           }
         },
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        },
         "debug": {
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
@@ -9849,6 +9922,21 @@
             "xregexp": "4.0.0"
           }
         },
+        "execa": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
+          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
+          "dev": true,
+          "requires": {
+            "cross-spawn": "^6.0.0",
+            "get-stream": "^4.0.0",
+            "is-stream": "^1.1.0",
+            "npm-run-path": "^2.0.0",
+            "p-finally": "^1.0.0",
+            "signal-exit": "^3.0.0",
+            "strip-eof": "^1.0.0"
+          }
+        },
         "find-up": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -9858,6 +9946,15 @@
             "locate-path": "^3.0.0"
           }
         },
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "dev": true,
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
         "invert-kv": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
@@ -9896,20 +9993,20 @@
           "dev": true
         },
         "os-locale": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.0.1.tgz",
-          "integrity": "sha512-7g5e7dmXPtzcP4bgsZ8ixDVqA7oWYuEz4lOSujeWyliPai4gfVDiFIcwBg3aGCPnmSGfzOKTK3ccPn0CKv3DBw==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
+          "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
           "dev": true,
           "requires": {
-            "execa": "^0.10.0",
+            "execa": "^1.0.0",
             "lcid": "^2.0.0",
             "mem": "^4.0.0"
           }
         },
         "p-limit": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.0.0.tgz",
-          "integrity": "sha512-fl5s52lI5ahKCernzzIyAP0QAZbGIovtVHGwpcu1Jr/EpzLVDI2myISHwGqK7m8uQFugVWSrbxH7XnhGtvEc+A==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.1.0.tgz",
+          "integrity": "sha512-NhURkNcrVB+8hNfLuysU8enY5xn2KXphsHBaC2YmRNTZRc7RWusw6apSpdEj3jo4CMb6W9nrF6tTnsJsJeyu6g==",
           "dev": true,
           "requires": {
             "p-try": "^2.0.0"
@@ -9930,6 +10027,16 @@
           "integrity": "sha512-hMp0onDKIajHfIkdRk3P4CdCmErkYAxxDtP3Wx/4nZ3aGlau2VKh3mZpcuFkH27WQkL/3WBCPOktzA9ZOAnMQQ==",
           "dev": true
         },
+        "pump": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+          "dev": true,
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        },
         "schema-utils": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index e2305c7..9fae4df 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -14,7 +14,7 @@ <h3 class="font-weight-medium text-right mb-0">$65,650</h3>
           </div>
         </div>
         <p class="text-muted mt-3 mb-0">
-          <i class="mdi mdi-alert-octagon mr-1" aria-hidden="true"></i> 65% lower growth
+          <i class="mdi mdi-alert-octagon mr-1" aria-hidden="true"></i> Your overall revenue
         </p>
       </div>
     </div>
@@ -34,7 +34,7 @@ <h3 class="font-weight-medium text-right mb-0">3455</h3>
           </div>
         </div>
         <p class="text-muted mt-3 mb-0">
-          <i class="mdi mdi-bookmark-outline mr-1" aria-hidden="true"></i> Product-wise sales
+          <i class="mdi mdi-bookmark-outline mr-1" aria-hidden="true"></i> Your list of orders
         </p>
       </div>
     </div>
@@ -54,7 +54,7 @@ <h3 class="font-weight-medium text-right mb-0">5693</h3>
           </div>
         </div>
         <p class="text-muted mt-3 mb-0">
-          <i class="mdi mdi-calendar mr-1" aria-hidden="true"></i> Weekly Sales
+          <i class="mdi mdi-calendar mr-1" aria-hidden="true"></i> Your Weekly Sales
         </p>
       </div>
     </div>
@@ -64,335 +64,181 @@ <h3 class="font-weight-medium text-right mb-0">5693</h3>
       <div class="card-body">
         <div class="clearfix">
           <div class="float-left">
-            <i class="mdi mdi-account-location text-info icon-lg"></i>
+            <i class="mdi mdi-truck text-info icon-lg"></i>
           </div>
           <div class="float-right">
-            <p class="mb-0 text-right">Employees</p>
+            <p class="mb-0 text-right">Deliveries</p>
             <div class="fluid-container">
               <h3 class="font-weight-medium text-right mb-0">246</h3>
             </div>
           </div>
         </div>
         <p class="text-muted mt-3 mb-0">
-          <i class="mdi mdi-reload mr-1" aria-hidden="true"></i> Product-wise sales
+          <i class="mdi mdi-reload mr-1" aria-hidden="true"></i> No. of items delivered
         </p>
       </div>
     </div>
   </div>
 </div>
 <div class="row">
-  <div class="col-lg-7 grid-margin stretch-card">
+  <div class="col-lg-7 grid-margin stretch-card col-lg-12 ">
     <!--weather card-->
-    <div class="card card-weather">
-      <div class="card-body">
-        <div class="weather-date-location">
-          <h3>Monday</h3>
-          <p class="text-gray">
-            <span class="weather-date">25 October, 2016</span>
-            <span class="weather-location">London, UK</span>
-          </p>
-        </div>
-        <div class="weather-data d-flex">
-          <div class="mr-auto">
-            <h4 class="display-3">21
-              <span class="symbol">&deg;</span>C</h4>
-            <p>
-              Mostly Cloudy
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="card-body p-0">
-        <div class="d-flex weakly-weather">
-          <div class="weakly-weather-item">
-            <p class="mb-0">
-              Sun
-            </p>
-            <i class="mdi mdi-weather-cloudy"></i>
-            <p class="mb-0">
-              30°
-            </p>
-          </div>
-          <div class="weakly-weather-item">
-            <p class="mb-1">
-              Mon
-            </p>
-            <i class="mdi mdi-weather-hail"></i>
-            <p class="mb-0">
-              31°
-            </p>
-          </div>
-          <div class="weakly-weather-item">
-            <p class="mb-1">
-              Tue
-            </p>
-            <i class="mdi mdi-weather-partlycloudy"></i>
-            <p class="mb-0">
-              28°
-            </p>
-          </div>
-          <div class="weakly-weather-item">
-            <p class="mb-1">
-              Wed
-            </p>
-            <i class="mdi mdi-weather-pouring"></i>
-            <p class="mb-0">
-              30°
-            </p>
-          </div>
-          <div class="weakly-weather-item">
-            <p class="mb-1">
-              Thu
-            </p>
-            <i class="mdi mdi-weather-pouring"></i>
-            <p class="mb-0">
-              29°
-            </p>
-          </div>
-          <div class="weakly-weather-item">
-            <p class="mb-1">
-              Fri
-            </p>
-            <i class="mdi mdi-weather-snowy-rainy"></i>
-            <p class="mb-0">
-              31°
-            </p>
-          </div>
-          <div class="weakly-weather-item">
-            <p class="mb-1">
-              Sat
-            </p>
-            <i class="mdi mdi-weather-snowy"></i>
-            <p class="mb-0">
-              32°
-            </p>
+    <div class="col-lg-12 grid-margin stretch-card ">
+        <div class="card">
+          <div class="card-body">
+            <h4 class="card-title">Track Your Customers Order Here</h4>
+            <div class="table-responsive">
+              <table class="table table-striped">
+                <thead>
+                  <tr>
+                    <th>
+                      Order No.
+                    </th>
+                    <th>
+                      Product Name
+                    </th>
+                    <th>
+                     Purchased On
+                    </th>
+                    <th>
+                      Shipping Status
+                    </th>
+                    <th>
+                      Payment Status
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="py-1">
+                      # 13429845
+                    </td>
+                    <td>
+                      BOOK 1 ITEM HERE
+                    </td>
+                    <td>
+                      JANUARY 2 2019
+                    </td>
+                    <td>
+                      DISPATCHED
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-success">PAID</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="py-1">
+                      # 13905438
+                    </td>
+                    <td>
+                      BOOK 2 HERE
+                    </td>
+                    <td>
+                      DECEMBER 24 2018
+                    </td>
+                    <td>
+                      CANCELLED
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-danger">Order Cancelled</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="py-1">
+                      # 13445632
+                    </td>
+                    <td>
+                      BOOK 3 ITEM HERE
+                    </td>
+                    <td>
+                      FEBRUARY 20 2019
+                    </td>
+                    <td>
+                      PROCESSING
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-warning">PROCESSING</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="py-1">
+                      # 13677200
+                    </td>
+                    <td>
+                      BOOK TITLE 4 HERE
+                    </td>
+                    <td>
+                      FEBRUARY 1 2019
+                    </td>
+                    <td>
+                      PAID
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-success">PAID</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="py-1">
+                      # 13228876
+                    </td>
+                    <td>
+                      BOOK 5 HERE
+                    </td>
+                    <td>
+                     JANUARY 20 2019
+                    </td>
+                    <td>
+                      PAID
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-success">PAID</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="py-1">
+                      # 13556765
+                    </td>
+                    <td>
+                      BOOK 6 TITLE HERE
+                    </td>
+                    <td>
+                     NOVEMBER 30 2018
+                    </td>
+                    <td>
+                      PAID
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-success">PAID</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td class="py-1">
+                      # 13367699
+                    </td>
+                    <td>
+                      BOOK 7 TITLE HERE
+                    </td>
+                    <td>
+                      DECEMBER 1 2018
+                    </td>
+                    <td>
+                      CANCELLED
+                    </td>
+                    <td>
+                      <button type="button" class="btn btn-danger">CANCELLED</button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+     
+
     <!--weather card ends-->
   </div>
-  <div class="col-lg-5 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h2 class="card-title text-primary mb-5">Performance History</h2>
-        <div class="wrapper d-flex justify-content-between">
-          <div class="side-left">
-            <p class="mb-2">The best performance</p>
-            <p class="display-3 mb-4 font-weight-light">+45.2%</p>
-          </div>
-          <div class="side-right">
-            <small class="text-muted">2017</small>
-          </div>
-        </div>
-        <div class="wrapper d-flex justify-content-between">
-          <div class="side-left">
-            <p class="mb-2">Worst performance</p>
-            <p class="display-3 mb-5 font-weight-light">-35.3%</p>
-          </div>
-          <div class="side-right">
-            <small class="text-muted">2015</small>
-          </div>
-        </div>
-        <div class="wrapper">
-          <div class="d-flex justify-content-between">
-            <p class="mb-2">Sales</p>
-            <p class="mb-2 text-primary">88%</p>
-          </div>
-          <div class="progress">
-            <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" role="progressbar" style="width: 88%" aria-valuenow="88"
-              aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </div>
-        <div class="wrapper mt-4">
-          <div class="d-flex justify-content-between">
-            <p class="mb-2">Visits</p>
-            <p class="mb-2 text-success">56%</p>
-          </div>
-          <div class="progress">
-            <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 56%" aria-valuenow="56"
-              aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row">
-  <div class="col-lg-12 grid-margin">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Orders</h4>
-        <div class="table-responsive">
-          <table class="table table-bordered">
-            <thead>
-              <tr>
-                <th>
-                  #
-                </th>
-                <th>
-                  First name
-                </th>
-                <th>
-                  Progress
-                </th>
-                <th>
-                  Amount
-                </th>
-                <th>
-                  Sales
-                </th>
-                <th>
-                  Deadline
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="font-weight-medium">
-                  1
-                </td>
-                <td>
-                  Herman Beck
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
-                      aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 77.99
-                </td>
-                <td class="text-danger"> 53.64%
-                  <i class="mdi mdi-arrow-down"></i>
-                </td>
-                <td>
-                  May 15, 2015
-                </td>
-              </tr>
-              <tr>
-                <td class="font-weight-medium">
-                  2
-                </td>
-                <td>
-                  Messsy Adam
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
-                      aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $245.30
-                </td>
-                <td class="text-success"> 24.56%
-                  <i class="mdi mdi-arrow-up"></i>
-                </td>
-                <td>
-                  July 1, 2015
-                </td>
-              </tr>
-              <tr>
-                <td class="font-weight-medium">
-                  3
-                </td>
-                <td>
-                  John Richards
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-warning progress-bar-striped" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0"
-                      aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $138.00
-                </td>
-                <td class="text-danger"> 28.76%
-                  <i class="mdi mdi-arrow-down"></i>
-                </td>
-                <td>
-                  Apr 12, 2015
-                </td>
-              </tr>
-              <tr>
-                <td class="font-weight-medium">
-                  4
-                </td>
-                <td>
-                  Peter Meggik
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
-                      aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 77.99
-                </td>
-                <td class="text-danger"> 53.45%
-                  <i class="mdi mdi-arrow-down"></i>
-                </td>
-                <td>
-                  May 15, 2015
-                </td>
-              </tr>
-              <tr>
-                <td class="font-weight-medium">
-                  5
-                </td>
-                <td>
-                  Edward
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0"
-                      aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 160.25
-                </td>
-                <td class="text-success"> 18.32%
-                  <i class="mdi mdi-arrow-up"></i>
-                </td>
-                <td>
-                  May 03, 2015
-                </td>
-              </tr>
-              <tr>
-                <td class="font-weight-medium">
-                  6
-                </td>
-                <td>
-                  Henry Tom
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-warning progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0"
-                      aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 150.00
-                </td>
-                <td class="text-danger"> 24.67%
-                  <i class="mdi mdi-arrow-down"></i>
-                </td>
-                <td>
-                  June 16, 2015
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+ 
 <div class="row">
   <div class="col-12 grid-margin">
     <div class="card">
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 1971362..2c6f19a 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -9,19 +9,6 @@
   </div>
   <div class="navbar-menu-wrapper d-flex align-items-center">
     <ul class="navbar-nav navbar-nav-left header-links d-none d-md-flex">
-      <li class="nav-item">
-        <a href="#" class="nav-link">Schedule
-          <span class="badge badge-primary ml-1">New</span>
-        </a>
-      </li>
-      <li class="nav-item active">
-        <a href="#" class="nav-link">
-          <i class="mdi mdi-elevation-rise"></i>Reports</a>
-      </li>
-      <li class="nav-item">
-        <a href="#" class="nav-link">
-          <i class="mdi mdi-bookmark-plus-outline"></i>Score</a>
-      </li>
     </ul>
     <ul class="navbar-nav navbar-nav-right">
       <li class="nav-item dropdown" ngbDropdown>
@@ -141,17 +128,6 @@ <h6 class="preview-subject font-weight-medium">New user registration</h6>
         </a>
         <div class="dropdown-menu dropdown-menu-right navbar-dropdown" ngbDropdownMenu aria-labelledby="UserDropdown">
           <a class="dropdown-item p-0">
-            <div class="d-flex border-bottom">
-              <div class="py-3 px-4 d-flex align-items-center justify-content-center">
-                <i class="mdi mdi-bookmark-plus-outline mr-0 text-gray"></i>
-              </div>
-              <div class="py-3 px-4 d-flex align-items-center justify-content-center border-left border-right">
-                <i class="mdi mdi-account-outline mr-0 text-gray"></i>
-              </div>
-              <div class="py-3 px-4 d-flex align-items-center justify-content-center">
-                <i class="mdi mdi-alarm-check mr-0 text-gray"></i>
-              </div>
-            </div>
           </a>
           <a class="dropdown-item mt-2">
             Manage Accounts
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
index 4bc4725..b105910 100644
--- a/src/app/sidebar/sidebar.component.html
+++ b/src/app/sidebar/sidebar.component.html
@@ -9,12 +9,12 @@
           <div class="text-wrapper">
             <p class="profile-name">Richard V.Welsh</p>
             <div>
-              <small class="designation text-muted">Manager</small>
+              <small class="designation text-muted">Seller #123455</small>
               <span class="status-indicator online"></span>
             </div>
           </div>
         </div>
-        <button class="btn btn-success btn-block">New Project
+        <button class="btn btn-success btn-block">Upload Product
           <i class="mdi mdi-plus"></i>
         </button>
       </div>
@@ -28,43 +28,43 @@
     <li class="nav-item">
       <a class="nav-link" routerLink="/forms" routerLinkActive="active">
         <i class="menu-icon mdi mdi-notification-clear-all"></i>
-        <span class="menu-title">Form elements</span>
+        <span class="menu-title">Product Overview</span>
       </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" routerLink="/buttons" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-dna"></i>
-        <span class="menu-title">Buttons</span>
+        <i class="menu-icon mdi mdi-chart-bar"></i>
+        <span class="menu-title">Analytics</span>
       </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" routerLink="/progressbar" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-trackpad"></i>
-        <span class="menu-title">Progress bar</span>
+        <i class="menu-icon mdi mdi-truck"></i>
+        <span class="menu-title">Track Your Product</span>
       </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" routerLink="/carousel" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-texture"></i>
-        <span class="menu-title">Carousal</span>
+        <i class="menu-icon mdi mdi-email"></i>
+        <span class="menu-title">Email</span>
       </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" routerLink="/tooltips" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-content-copy"></i>
-        <span class="menu-title">Tooltip</span>
+        <i class="menu-icon mdi mdi-forum"></i>
+        <span class="menu-title">Chat</span>
       </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" routerLink="/tabs" routerLinkActive="active">
         <i class="menu-icon mdi mdi-lightbulb-outline"></i>
-        <span class="menu-title">Tabs</span>
+        <span class="menu-title">Contact Support</span>
       </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" routerLink="/dropdowns" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-backup-restore"></i>
-        <span class="menu-title">Dropdown</span>
+        <i class="menu-icon mdi mdi-settings"></i>
+        <span class="menu-title">Settings</span>
       </a>
     </li>
     <li class="nav-item">

From 365d2847e6e46b25c3453fd34e99f88f7a4e8c9a Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Sun, 13 Jan 2019 16:55:12 +0800
Subject: [PATCH 03/20] Updated dashboard,form, navbar and sidebar components.

---
 src/app/dashboard/dashboard.component.html |  18 +-
 src/app/forms/forms.component.html         | 512 ++-------------------
 src/app/navbar/navbar.component.html       |   7 +-
 src/app/sidebar/sidebar.component.html     |   4 +-
 4 files changed, 55 insertions(+), 486 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 9fae4df..575a41e 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -251,11 +251,11 @@ <h5 class="card-title mb-4">Manage Tickets</h5>
             </div>
             <div class="ticket-details col-md-9">
               <div class="d-flex">
-                <p class="text-dark font-weight-semibold mr-2 mb-0 no-wrap">James :</p>
+                <p class="text-dark font-weight-semibold mr-2 mb-0 no-wrap">James Cordon :</p>
                 <p class="text-primary mr-1 mb-0">[#23047]</p>
-                <p class="mb-0 ellipsis">Donec rutrum congue leo eget malesuada.</p>
+                <p class="mb-0 ellipsis">Request for instock Product</p>
               </div>
-              <p class="text-gray ellipsis mb-2">Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim vivamus.</p>
+              <p class="text-gray ellipsis mb-2">Hi there! I would like to request for more products like this..</p>
               <div class="row text-gray d-md-flex d-none">
                 <div class="col-4 d-flex">
                   <small class="mb-0 mr-2 text-muted text-muted">Last responded :</small>
@@ -292,15 +292,15 @@ <h5 class="card-title mb-4">Manage Tickets</h5>
             </div>
             <div class="ticket-details col-md-9">
               <div class="d-flex">
-                <p class="text-dark font-weight-semibold mr-2 mb-0 no-wrap">Stella :</p>
+                <p class="text-dark font-weight-semibold mr-2 mb-0 no-wrap">Stella McCarthy :</p>
                 <p class="text-primary mr-1 mb-0">[#23135]</p>
-                <p class="mb-0 ellipsis">Curabitur aliquet quam id dui posuere blandit.</p>
+                <p class="mb-0 ellipsis">Hello! Internet banking fail to make payment.</p>
               </div>
-              <p class="text-gray ellipsis mb-2">Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Curabitur non nulla sit amet nisl.</p>
+              <p class="text-gray ellipsis mb-2">Hi there! I have problems purchasing the product online. I need help on how to do it please. Thanks!</p>
               <div class="row text-gray d-md-flex d-none">
                 <div class="col-4 d-flex">
                   <small class="mb-0 mr-2 text-muted">Last responded :</small>
-                  <small class="Last-responded mr-2 mb-0 text-muted">3 hours ago</small>
+                  <small class="Last-responded mr-2 mb-0 text-muted">1 min ago</small>
                 </div>
                 <div class="col-4 d-flex">
                   <small class="mb-0 mr-2 text-muted">Due in :</small>
@@ -335,9 +335,9 @@ <h5 class="card-title mb-4">Manage Tickets</h5>
               <div class="d-flex">
                 <p class="text-dark font-weight-semibold mr-2 mb-0 no-wrap">John Doe :</p>
                 <p class="text-primary mr-1 mb-0">[#23246]</p>
-                <p class="mb-0 ellipsis">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar.</p>
+                <p class="mb-0 ellipsis">REQUEST: Need tracking ID number ASAP. </p>
               </div>
-              <p class="text-gray ellipsis mb-2">Nulla quis lorem ut libero malesuada feugiat. Proin eget tortor risus. Lorem ipsum dolor sit amet.</p>
+              <p class="text-gray ellipsis mb-2">Hi! I forgot my tracking ID number. Please send me a copy. Thanks!.</p>
               <div class="row text-gray d-md-flex d-none">
                 <div class="col-4 d-flex">
                   <small class="mb-0 mr-2 text-muted">Last responded :</small>
diff --git a/src/app/forms/forms.component.html b/src/app/forms/forms.component.html
index cb9e6ab..356606a 100644
--- a/src/app/forms/forms.component.html
+++ b/src/app/forms/forms.component.html
@@ -1,477 +1,49 @@
-<div class="row">
-  <div class="col-md-6 d-flex align-items-stretch grid-margin">
-    <div class="row flex-grow">
-      <div class="col-12 grid-margin">
-        <div class="card">
-          <div class="card-body">
-            <h4 class="card-title">Default form</h4>
-            <p class="card-description">
-              Basic form layout
-            </p>
-            <form class="forms-sample">
-              <div class="form-group">
-                <label for="exampleInputEmail1">Email address</label>
-                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
-              </div>
-              <div class="form-group">
-                <label for="exampleInputPassword1">Password</label>
-                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
-              </div>
-              <button type="submit" class="btn btn-success mr-2">Submit</button>
-              <button class="btn btn-light">Cancel</button>
-            </form>
-          </div>
-        </div>
-      </div>
-      <div class="col-12 stretch-card">
-        <div class="card">
-          <div class="card-body">
-            <h4 class="card-title">Horizontal Form</h4>
-            <p class="card-description">
-              Horizontal form layout
-            </p>
-            <form class="forms-sample">
-              <div class="form-group row">
-                <label for="exampleInputEmail2" class="col-sm-3 col-form-label">Email</label>
-                <div class="col-sm-9">
-                  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
-                </div>
-              </div>
-              <div class="form-group row">
-                <label for="exampleInputPassword2" class="col-sm-3 col-form-label">Password</label>
-                <div class="col-sm-9">
-                  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
-                </div>
-              </div>
-              <button type="submit" class="btn btn-success mr-2">Submit</button>
-              <button class="btn btn-light">Cancel</button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
+<div class="card-group">
+  <div class="card">
+    <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">Cras justo odio</li>
+          <li class="list-group-item">Dapibus ac facilisis in</li>
+        </ul>
+        <div class=card>
+        <div class="card-body">
+          <a href="#" class="btn btn-success">Edit Product </a> &nbsp;&nbsp;&nbsp;
+          <a href="#" class="btn btn-danger">Delete Product</a>
+        </div>
+        </div>
+      </div>
+      </div>
+
+  <div class="card">
+    <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">Cras justo odio</li>
+        <li class="list-group-item">Dapibus ac facilisis in</li>
+      </ul>
       <div class="card-body">
-        <h4 class="card-title">Basic form</h4>
-        <p class="card-description">
-          Basic form elements
-        </p>
-        <form class="forms-sample">
-          <div class="form-group">
-            <label for="exampleInputName1">Name</label>
-            <input type="text" class="form-control" id="exampleInputName1" placeholder="Name">
-          </div>
-          <div class="form-group">
-            <label for="exampleInputEmail3">Email address</label>
-            <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
-          </div>
-          <div class="form-group">
-            <label for="exampleInputPassword4">Password</label>
-            <input type="password" class="form-control" id="exampleInputPassword4" placeholder="Password">
-          </div>
-          <div class="form-group">
-            <label for="exampleInputCity1">City</label>
-            <input type="text" class="form-control" id="exampleInputCity1" placeholder="Location">
-          </div>
-          <div class="form-group">
-            <label for="exampleTextarea1">Textarea</label>
-            <textarea class="form-control" id="exampleTextarea1" rows="2"></textarea>
-          </div>
-          <button type="submit" class="btn btn-success mr-2">Submit</button>
-          <button class="btn btn-light">Cancel</button>
-        </form>
+        <a href="#" class="btn btn-success">Edit Product </a> &nbsp;&nbsp;&nbsp;
+        <a href="#" class="btn btn-danger">Delete Product</a>
       </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Coloured select box</h4>
-        <p class="card-description">
-          Basic bootstrap select in theme colors
-        </p>
-        <div class="form-group">
-          <label for="exampleSelectPrimary">Primary</label>
-          <select class="form-control border-primary" id="exampleSelectPrimary">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label for="exampleSelectInfo">Info</label>
-          <select class="form-control border-info" id="exampleSelectInfo">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label for="exampleSelectSuccess">Success</label>
-          <select class="form-control border-success" id="exampleSelectSuccess">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label for="exampleSelectDanger">Danger</label>
-          <select class="form-control border-danger" id="exampleSelectDanger">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label for="exampleSelectWarning">Warning</label>
-          <select class="form-control border-warning" id="exampleSelectWarning">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
-          </select>
-        </div>
       </div>
     </div>
-  </div>
-  <div class="col-md-6 d-flex align-items-stretch">
-    <div class="row flex-grow">
-      <div class="col-12 grid-margin">
-        <div class="card">
-          <div class="card-body">
-            <h4 class="card-title">Basic input groups</h4>
-            <p class="card-description">
-              Basic bootstrap input groups
-            </p>
-            <div class="form-group">
-              <div class="input-group">
-                <span class="input-group-addon" id="basic-addon1">@</span>
-                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
-              </div>
-            </div>
-            <div class="form-group">
-              <div class="input-group">
-                <span class="input-group-addon">$</span>
-                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
-                <span class="input-group-addon">.00</span>
-              </div>
-            </div>
-            <div class="form-group">
-              <div class="input-group">
-                <span class="input-group-addon">$</span>
-                <span class="input-group-addon">0.00</span>
-                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="col-12 grid-margin stretch-card">
-        <div class="card">
-          <div class="card-body">
-            <h4 class="card-title">Colored input groups</h4>
-            <p class="card-description">
-              Input groups with colors
-            </p>
-            <div class="form-group">
-              <div class="input-group">
-                <span class="input-group-addon bg-info bg-info" id="colored-addon1">
-                  <i class="mdi mdi-shield-outline text-white"></i>
-                </span>
-                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="colored-addon1">
-              </div>
-            </div>
-            <div class="form-group">
-              <div class="input-group">
-                <span class="input-group-addon bg-primary border-primary" id="colored-addon2">
-                  <i class="mdi mdi-menu text-white"></i>
-                </span>
-                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="colored-addon2">
-              </div>
-            </div>
-            <div class="form-group">
-              <div class="input-group">
-                <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="colored-addon3">
-                <span class="input-group-addon bg-primary border-primary" id="colored-addon3">
-                  <i class="mdi mdi-menu text-white"></i>
-                </span>
-              </div>
-            </div>
-            <div class="form-group">
-              <div class="input-group">
-                <span class="input-group-addon bg-primary">$</span>
-                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
-                <span class="input-group-addon bg-primary border-primary">.00</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-12 grid-margin stretch-card">
-    <div class="card">
-      <div class="row">
-        <div class="col-md-6">
-          <div class="card-body">
-            <h4 class="card-title">Input size</h4>
-            <p class="card-description">
-              This is the default bootstrap form layout
-            </p>
-            <div class="form-group">
-              <label>Large input</label>
-              <input type="text" class="form-control form-control-lg" placeholder="Username" aria-label="Username">
-            </div>
-            <div class="form-group">
-              <label>Default input</label>
-              <input type="text" class="form-control" placeholder="Username" aria-label="Username">
-            </div>
-            <div class="form-group">
-              <label>Small input</label>
-              <input type="text" class="form-control form-control-sm" placeholder="Username" aria-label="Username">
-            </div>
-          </div>
-        </div>
-        <div class="col-md-6">
-          <div class="card-body">
-            <h4 class="card-title">Selectize</h4>
-            <div class="form-group">
-              <label for="exampleFormControlSelect1">Large select</label>
-              <select class="form-control form-control-lg" id="exampleFormControlSelect1">
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
-              </select>
-            </div>
-            <div class="form-group">
-              <label for="exampleFormControlSelect2">Default select</label>
-              <select class="form-control" id="exampleFormControlSelect2">
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
-              </select>
-            </div>
-            <div class="form-group">
-              <label for="exampleFormControlSelect3">Small select</label>
-              <select class="form-control form-control-sm" id="exampleFormControlSelect3">
-                <option>1</option>
-                <option>2</option>
-                <option>3</option>
-                <option>4</option>
-                <option>5</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-12 grid-margin">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Horizontal Two column</h4>
-        <form class="form-sample">
-          <p class="card-description">
-            Personal info
-          </p>
-          <div class="row">
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">First Name</label>
-                <div class="col-sm-9">
-                  <input type="text" class="form-control" />
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">Last Name</label>
-                <div class="col-sm-9">
-                  <input type="text" class="form-control" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">Gender</label>
-                <div class="col-sm-9">
-                  <select class="form-control">
-                    <option>Male</option>
-                    <option>Female</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">Date of Birth</label>
-                <div class="col-sm-9">
-                  <input class="form-control" placeholder="dd/mm/yyyy"/>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">Category</label>
-                <div class="col-sm-9">
-                  <select class="form-control">
-                    <option>Category1</option>
-                    <option>Category2</option>
-                    <option>Category3</option>
-                    <option>Category4</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">Membership</label>
-                <div class="col-sm-4">
-                  <div class="form-radio">
-                    <label class="form-check-label">
-                      <input type="radio" class="form-check-input" name="membershipRadios" id="membershipRadios1" value="" checked>
-                      Free
-                    </label>
-                  </div>
-                </div>
-                <div class="col-sm-5">
-                  <div class="form-radio">
-                    <label class="form-check-label">
-                      <input type="radio" class="form-check-input" name="membershipRadios" id="membershipRadios2" value="option2">
-                      Professional
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <p class="card-description">
-            Address
-          </p>
-          <div class="row">
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">Address 1</label>
-                <div class="col-sm-9">
-                  <input type="text" class="form-control" />
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">State</label>
-                <div class="col-sm-9">
-                  <input type="text" class="form-control" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">Address 2</label>
-                <div class="col-sm-9">
-                  <input type="text" class="form-control" />
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">Postcode</label>
-                <div class="col-sm-9">
-                  <input type="text" class="form-control" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">City</label>
-                <div class="col-sm-9">
-                  <input type="text" class="form-control" />
-                </div>
-              </div>
-            </div>
-            <div class="col-md-6">
-              <div class="form-group row">
-                <label class="col-sm-3 col-form-label">Country</label>
-                <div class="col-sm-9">
-                  <select class="form-control">
-                    <option>America</option>
-                    <option>Italy</option>
-                    <option>Russia</option>
-                    <option>Britain</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin">
-    <div class="card">
+  <div class="card">
+    <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. </p>
+      <ul class="list-group list-group-flush">
+        <li class="list-group-item">Cras justo odio</li>
+        <li class="list-group-item">Dapibus ac facilisis in</li>
+      </ul>
       <div class="card-body">
-        <h4 class="card-title">Typeahead</h4>
-        <div class="row">
-          <div class="col-md-6">
-            <p class="card-description">
-              Simple typeahead
-            </p>
-            <input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="typeaheadBasicModel" [ngbTypeahead]="search"/>
-          </div>
-          <div class="col-md-6">
-            <p class="card-description">
-              Typeahead on focus
-            </p>
-            <input id="typeahead-focus" type="text" class="form-control" [(ngModel)]="typeaheadFocusModel"
-              [ngbTypeahead]="focusSearch" (focus)="focus$.next($event.target.value)"
-              (click)="click$.next($event.target.value)" #instance="ngbTypeahead"/>
-          </div>
-        </div>
+        <a href="#" class="btn btn-success">Edit Product </a> &nbsp;&nbsp;&nbsp;
+        <a href="#" class="btn btn-danger">Delete Product</a>
       </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Rating</h4>
-        <div class="row">
-          <div class="col-md-6">
-            <p class="card-description">
-              Basic rating
-            </p>
-            <ngb-rating [(rate)]="currentRate" class="rating"></ngb-rating>
-          </div>
-          <div class="col-md-6">
-            <p class="card-description">
-              Readonly rating
-            </p>
-            <ngb-rating [(rate)]="currentRate" [readonly]=true class="rating"></ngb-rating>
-          </div>
-        </div>
       </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
+    </div>
\ No newline at end of file
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 2c6f19a..c40a992 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -123,8 +123,8 @@ <h6 class="preview-subject font-weight-medium">New user registration</h6>
       </li>
       <li class="nav-item dropdown d-none d-xl-inline-block" ngbDropdown>
         <a class="nav-link dropdown-toggle" id="UserDropdown" ngbDropdownToggle>
-          <span class="profile-text">Hello, Richard V.Welsh !</span>
-          <img class="img-xs rounded-circle" src="assets/images/faces/face1.jpg" alt="Profile image">
+          <span class="profile-text">Welcome, Darth Vader !</span>
+          <img class="img-xs rounded-circle" src="http://i65.tinypic.com/x1c3zb.jpg" alt="Profile image">
         </a>
         <div class="dropdown-menu dropdown-menu-right navbar-dropdown" ngbDropdownMenu aria-labelledby="UserDropdown">
           <a class="dropdown-item p-0">
@@ -135,9 +135,6 @@ <h6 class="preview-subject font-weight-medium">New user registration</h6>
           <a class="dropdown-item">
             Change Password
           </a>
-          <a class="dropdown-item">
-            Check Inbox
-          </a>
           <a class="dropdown-item">
             Sign Out
           </a>
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
index b105910..14cf541 100644
--- a/src/app/sidebar/sidebar.component.html
+++ b/src/app/sidebar/sidebar.component.html
@@ -4,10 +4,10 @@
       <div class="nav-link">
         <div class="user-wrapper">
           <div class="profile-image">
-            <img src="assets/images/faces/face1.jpg" alt="profile image">
+            <img src="http://i65.tinypic.com/x1c3zb.jpgg" alt="profile image">
           </div>
           <div class="text-wrapper">
-            <p class="profile-name">Richard V.Welsh</p>
+            <p class="profile-name">Darth Vader</p>
             <div>
               <small class="designation text-muted">Seller #123455</small>
               <span class="status-indicator online"></span>

From 342508884f913c45a2eeafa0f6f4a4c273c9a659 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Mon, 14 Jan 2019 00:01:41 +0800
Subject: [PATCH 04/20] Updated the dashboard.

---
 src/app/dashboard/dashboard.component.html | 73 +++++++++++-----------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 575a41e..05504e7 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -268,24 +268,25 @@ <h5 class="card-title mb-4">Manage Tickets</h5>
               </div>
             </div>
             <div class="ticket-actions col-md-2">
-              <div class="btn-group dropdown">
-                <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <div ngbDropdown class="d-inline-block">
+                  <button class="btn btn-primary" type="button" id="dropdownMenuButton1" ngbDropdownToggle>
                   Manage
                 </button>
-                <div class="dropdown-menu">
+                <div ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
                   <a class="dropdown-item" href="#">
                     <i class="fa fa-reply fa-fw"></i>Quick reply</a>
                   <a class="dropdown-item" href="#">
-                    <i class="fa fa-history fa-fw"></i>Another action</a>
+                    <i class="fa fa-history fa-fw"></i>Delete Ticket</a>
                   <div class="dropdown-divider"></div>
                   <a class="dropdown-item" href="#">
-                    <i class="fa fa-check text-success fa-fw"></i>Resolve Issue</a>
+                    <i class="fa fa-check text-success fa-fw"></i>View User Profile</a>
                   <a class="dropdown-item" href="#">
-                    <i class="fa fa-times text-danger fa-fw"></i>Close Issue</a>
+                    <i class="fa fa-times text-danger fa-fw"></i>Close</a>
                 </div>
               </div>
             </div>
           </div>
+        </div>
           <div class="row ticket-card mt-3 pb-2 border-bottom pb-3 mb-3">
             <div class="col-md-1">
               <img class="img-sm rounded-circle mb-4 mb-md-0" src="assets/images/faces/face2.jpg" alt="profile image">
@@ -309,22 +310,22 @@ <h5 class="card-title mb-4">Manage Tickets</h5>
               </div>
             </div>
             <div class="ticket-actions col-md-2">
-              <div class="btn-group dropdown">
-                <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  Manage
-                </button>
-                <div class="dropdown-menu">
-                  <a class="dropdown-item" href="#">
-                    <i class="fa fa-reply fa-fw"></i>Quick reply</a>
-                  <a class="dropdown-item" href="#">
-                    <i class="fa fa-history fa-fw"></i>Another action</a>
-                  <div class="dropdown-divider"></div>
-                  <a class="dropdown-item" href="#">
-                    <i class="fa fa-check text-success fa-fw"></i>Resolve Issue</a>
-                  <a class="dropdown-item" href="#">
-                    <i class="fa fa-times text-danger fa-fw"></i>Close Issue</a>
+                <div ngbDropdown class="d-inline-block">
+                    <button class="btn btn-primary" type="button" id="dropdownMenuButton1" ngbDropdownToggle>
+                    Manage
+                  </button>
+                  <div ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
+                    <a class="dropdown-item" href="#">
+                      <i class="fa fa-reply fa-fw"></i>Quick reply</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="fa fa-history fa-fw"></i>Delete Ticket</a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">
+                      <i class="fa fa-check text-success fa-fw"></i>View User Profile</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="fa fa-times text-danger fa-fw"></i>Close</a>
+                  </div>
                 </div>
-              </div>
             </div>
           </div>
           <div class="row ticket-card mt-3">
@@ -351,20 +352,22 @@ <h5 class="card-title mb-4">Manage Tickets</h5>
             </div>
             <div class="ticket-actions col-md-2">
               <div class="btn-group dropdown">
-                <button type="button" class="btn btn-success dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  Manage
-                </button>
-                <div class="dropdown-menu">
-                  <a class="dropdown-item" href="#">
-                    <i class="fa fa-reply fa-fw"></i>Quick reply</a>
-                  <a class="dropdown-item" href="#">
-                    <i class="fa fa-history fa-fw"></i>Another action</a>
-                  <div class="dropdown-divider"></div>
-                  <a class="dropdown-item" href="#">
-                    <i class="fa fa-check text-success fa-fw"></i>Resolve Issue</a>
-                  <a class="dropdown-item" href="#">
-                    <i class="fa fa-times text-danger fa-fw"></i>Close Issue</a>
-                </div>
+                  <div ngbDropdown class="d-inline-block">
+                      <button class="btn btn-primary" type="button" id="dropdownMenuButton1" ngbDropdownToggle>
+                      Manage
+                    </button>
+                    <div ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
+                      <a class="dropdown-item" href="#">
+                        <i class="fa fa-reply fa-fw"></i>Quick reply</a>
+                      <a class="dropdown-item" href="#">
+                        <i class="fa fa-history fa-fw"></i>Delete Ticket</a>
+                      <div class="dropdown-divider"></div>
+                      <a class="dropdown-item" href="#">
+                        <i class="fa fa-check text-success fa-fw"></i>View User Profile</a>
+                      <a class="dropdown-item" href="#">
+                        <i class="fa fa-times text-danger fa-fw"></i>Close</a>
+                    </div>
+                  </div>
               </div>
             </div>
           </div>

From 1a996beab82120e3c28af9f7d495a975f923c903 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 00:34:28 +0800
Subject: [PATCH 05/20] Updated Dashboard

---
 src/app/dashboard/dashboard.component.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 05504e7..80d6eab 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -140,7 +140,7 @@ <h4 class="card-title">Track Your Customers Order Here</h4>
                       CANCELLED
                     </td>
                     <td>
-                      <button type="button" class="btn btn-danger">Order Cancelled</button>
+                      <button type="button" class="btn btn-danger">CANCELLED</button>
                     </td>
                   </tr>
                   <tr>
@@ -171,7 +171,7 @@ <h4 class="card-title">Track Your Customers Order Here</h4>
                       FEBRUARY 1 2019
                     </td>
                     <td>
-                      PAID
+                      SHIPPED
                     </td>
                     <td>
                       <button type="button" class="btn btn-success">PAID</button>
@@ -188,7 +188,7 @@ <h4 class="card-title">Track Your Customers Order Here</h4>
                      JANUARY 20 2019
                     </td>
                     <td>
-                      PAID
+                      SHIPPED
                     </td>
                     <td>
                       <button type="button" class="btn btn-success">PAID</button>
@@ -205,7 +205,7 @@ <h4 class="card-title">Track Your Customers Order Here</h4>
                      NOVEMBER 30 2018
                     </td>
                     <td>
-                      PAID
+                      SHIPPED
                     </td>
                     <td>
                       <button type="button" class="btn btn-success">PAID</button>

From 4ae36129a7f64ce3faa84b88476ee052b4159c93 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 00:45:29 +0800
Subject: [PATCH 06/20] Updated the Nav and sidebar and deleted some
 unnecessary features

---
 src/app/app-routing.module.ts          |  2 --
 src/app/app.module.ts                  |  2 --
 src/app/navbar/navbar.component.html   | 32 ++++++++------------------
 src/app/sidebar/sidebar.component.html |  6 -----
 4 files changed, 10 insertions(+), 32 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1f27bf5..8f2df5e 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,7 +3,6 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FormsComponent } from './forms/forms.component';
-import { ButtonsComponent } from './buttons/buttons.component';
 import { TablesComponent } from './tables/tables.component';
 import { IconsComponent } from './icons/icons.component';
 import { TypographyComponent } from './typography/typography.component';
@@ -22,7 +21,6 @@ const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   { path: 'dashboard', component: DashboardComponent },
   { path: 'forms', component: FormsComponent },
-  { path: 'buttons', component: ButtonsComponent },
   { path: 'tables', component: TablesComponent },
   { path: 'icons', component: IconsComponent },
   { path: 'typography', component: TypographyComponent },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3c76bfd..afb4e76 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,7 +12,6 @@ import { SidebarComponent } from './sidebar/sidebar.component';
 import { FooterComponent } from './footer/footer.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FormsComponent } from './forms/forms.component';
-import { ButtonsComponent } from './buttons/buttons.component';
 import { TablesComponent } from './tables/tables.component';
 import { TypographyComponent } from './typography/typography.component';
 import { IconsComponent } from './icons/icons.component';
@@ -35,7 +34,6 @@ import { TabsComponent } from './tabs/tabs.component';
     FooterComponent,
     DashboardComponent,
     FormsComponent,
-    ButtonsComponent,
     TablesComponent,
     TypographyComponent,
     IconsComponent,
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index c40a992..195b7ee 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -18,52 +18,40 @@
         </a>
         <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" ngbDropdownMenu aria-labelledby="messageDropdown">
           <div class="dropdown-item">
-            <p class="mb-0 font-weight-normal float-left">You have 7 unread mails
+            <p class="mb-0 font-weight-normal float-left">You have 2 unread mails
             </p>
             <span class="badge badge-info badge-pill float-right">View all</span>
           </div>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item preview-item">
             <div class="preview-thumbnail">
-              <img src="assets/images/faces/face4.jpg" alt="image" class="profile-pic">
+              <img src="http://i63.tinypic.com/2ryitxz.png" alt="image" class="profile-pic">
             </div>
             <div class="preview-item-content flex-grow">
-              <h6 class="preview-subject ellipsis font-weight-medium">David Grey
+              <h6 class="preview-subject ellipsis font-weight-medium">Shipping Status
                 <span class="float-right font-weight-light small-text">1 Minutes ago</span>
               </h6>
               <p class="font-weight-light small-text">
-                The meeting is cancelled
+                Order No. #34213489 has been dispatched.
               </p>
             </div>
           </a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item preview-item">
             <div class="preview-thumbnail">
-              <img src="assets/images/faces/face2.jpg" alt="image" class="profile-pic">
+              <img src="http://i63.tinypic.com/2ryitxz.png" alt="image" class="profile-pic">
             </div>
             <div class="preview-item-content flex-grow">
-              <h6 class="preview-subject ellipsis font-weight-medium">Tim Cook
+              <h6 class="preview-subject ellipsis font-weight-medium">Payment Status
                 <span class="float-right font-weight-light small-text">15 Minutes ago</span>
               </h6>
               <p class="font-weight-light small-text">
-                New product launch
+                Order No. #1212324 for Product Item No. 4 PAID
               </p>
             </div>
           </a>
           <div class="dropdown-divider"></div>
-          <a class="dropdown-item preview-item">
-            <div class="preview-thumbnail">
-              <img src="assets/images/faces/face3.jpg" alt="image" class="profile-pic">
-            </div>
-            <div class="preview-item-content flex-grow">
-              <h6 class="preview-subject ellipsis font-weight-medium"> Johnson
-                <span class="float-right font-weight-light small-text">18 Minutes ago</span>
-              </h6>
-              <p class="font-weight-light small-text">
-                Upcoming board meeting
-              </p>
-            </div>
-          </a>
+          
         </div>
       </li>
       <li class="nav-item dropdown" ngbDropdown>
@@ -73,7 +61,7 @@ <h6 class="preview-subject ellipsis font-weight-medium"> Johnson
         </a>
         <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" ngbDropdownMenu aria-labelledby="notificationDropdown">
           <a class="dropdown-item">
-            <p class="mb-0 font-weight-normal float-left">You have 4 new notifications
+            <p class="mb-0 font-weight-normal float-left">You have 3 new notifications
             </p>
             <span class="badge badge-pill badge-warning float-right">View all</span>
           </a>
@@ -130,7 +118,7 @@ <h6 class="preview-subject font-weight-medium">New user registration</h6>
           <a class="dropdown-item p-0">
           </a>
           <a class="dropdown-item mt-2">
-            Manage Accounts
+            Edit Profile
           </a>
           <a class="dropdown-item">
             Change Password
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
index 14cf541..a89615b 100644
--- a/src/app/sidebar/sidebar.component.html
+++ b/src/app/sidebar/sidebar.component.html
@@ -31,12 +31,6 @@
         <span class="menu-title">Product Overview</span>
       </a>
     </li>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/buttons" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-chart-bar"></i>
-        <span class="menu-title">Analytics</span>
-      </a>
-    </li>
     <li class="nav-item">
       <a class="nav-link" routerLink="/progressbar" routerLinkActive="active">
         <i class="menu-icon mdi mdi-truck"></i>

From ef316c06aa7121dd1c49e52f64ef32f85e3febe7 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 00:49:06 +0800
Subject: [PATCH 07/20] Updated nav and sidebar and deleted some unnecessary
 components.

---
 src/app/app-routing.module.ts               |  2 -
 src/app/app.module.ts                       |  2 -
 src/app/carousel/carousel.component.html    | 88 ---------------------
 src/app/carousel/carousel.component.scss    |  0
 src/app/carousel/carousel.component.spec.ts | 25 ------
 src/app/carousel/carousel.component.ts      | 15 ----
 src/app/navbar/navbar.component.html        |  2 +-
 src/app/sidebar/sidebar.component.html      |  7 +-
 8 files changed, 2 insertions(+), 139 deletions(-)
 delete mode 100644 src/app/carousel/carousel.component.html
 delete mode 100644 src/app/carousel/carousel.component.scss
 delete mode 100644 src/app/carousel/carousel.component.spec.ts
 delete mode 100644 src/app/carousel/carousel.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 8f2df5e..44d3a0c 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -14,7 +14,6 @@ import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
 import { PaginationComponent } from './pagination/pagination.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
 import { TooltipsComponent } from './tooltips/tooltips.component';
-import { CarouselComponent } from './carousel/carousel.component';
 import { TabsComponent } from './tabs/tabs.component';
 
 const routes: Routes = [
@@ -32,7 +31,6 @@ const routes: Routes = [
   { path: 'pagination', component: PaginationComponent },
   { path: 'dropdowns', component: DropdownComponent },
   { path: 'tooltips', component: TooltipsComponent },
-  { path: 'carousel', component: CarouselComponent },
   { path: 'tabs', component: TabsComponent }
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index afb4e76..1ae2f43 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -23,7 +23,6 @@ import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
 import { PaginationComponent } from './pagination/pagination.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
 import { TooltipsComponent } from './tooltips/tooltips.component';
-import { CarouselComponent } from './carousel/carousel.component';
 import { TabsComponent } from './tabs/tabs.component';
 
 @NgModule({
@@ -45,7 +44,6 @@ import { TabsComponent } from './tabs/tabs.component';
     PaginationComponent,
     DropdownComponent,
     TooltipsComponent,
-    CarouselComponent,
     TabsComponent
   ],
   imports: [
diff --git a/src/app/carousel/carousel.component.html b/src/app/carousel/carousel.component.html
deleted file mode 100644
index 46abbe9..0000000
--- a/src/app/carousel/carousel.component.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<div class="row">
-  <div class="col-lg-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Basic carousel</h4>
-        <ngb-carousel>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_12.jpg" alt="Random first slide">
-          </ng-template>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_2.jpg" alt="Random second slide">
-          </ng-template>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_1.jpg" alt="Random third slide">
-          </ng-template>
-        </ngb-carousel>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Carousel with captions</h4>
-        <ngb-carousel>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_3.jpg" alt="Random first slide">
-            <div class="carousel-caption">
-              <h3>First slide label</h3>
-              <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-            </div>
-          </ng-template>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_4.jpg" alt="Random second slide">
-            <div class="carousel-caption">
-              <h3>Second slide label</h3>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-            </div>
-          </ng-template>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_5.jpg" alt="Random third slide">
-            <div class="carousel-caption">
-              <h3>Third slide label</h3>
-              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
-            </div>
-          </ng-template>
-        </ngb-carousel>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row grid-margin">
-  <div class="col-lg-6">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Loop</h4>
-        <ngb-carousel>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_6.jpg" alt="Random first slide">
-          </ng-template>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_7.jpg" alt="Random second slide">
-          </ng-template>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_8.jpg" alt="Random third slide">
-          </ng-template>
-        </ngb-carousel>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-6">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">non-Loop</h4>
-        <ngb-carousel wrap>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_9.jpg" alt="Random first slide">
-          </ng-template>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_10.jpg" alt="Random second slide">
-          </ng-template>
-          <ng-template ngbSlide>
-            <img src="assets/images/carousel/banner_11.jpg" alt="Random third slide">
-          </ng-template>
-        </ngb-carousel>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/app/carousel/carousel.component.scss b/src/app/carousel/carousel.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/carousel/carousel.component.spec.ts b/src/app/carousel/carousel.component.spec.ts
deleted file mode 100644
index 4d935d7..0000000
--- a/src/app/carousel/carousel.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CarouselComponent } from './carousel.component';
-
-describe('CarouselComponent', () => {
-  let component: CarouselComponent;
-  let fixture: ComponentFixture<CarouselComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ CarouselComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CarouselComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/carousel/carousel.component.ts b/src/app/carousel/carousel.component.ts
deleted file mode 100644
index c05dba6..0000000
--- a/src/app/carousel/carousel.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-carousel',
-  templateUrl: './carousel.component.html',
-  styleUrls: ['./carousel.component.scss']
-})
-export class CarouselComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 195b7ee..f3b34fe 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -57,7 +57,7 @@ <h6 class="preview-subject ellipsis font-weight-medium">Payment Status
       <li class="nav-item dropdown" ngbDropdown>
         <a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" ngbDropdownToggle>
           <i class="mdi mdi mdi-bell"></i>
-          <span class="count">4</span>
+          <span class="count">3</span>
         </a>
         <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" ngbDropdownMenu aria-labelledby="notificationDropdown">
           <a class="dropdown-item">
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
index a89615b..2bd182e 100644
--- a/src/app/sidebar/sidebar.component.html
+++ b/src/app/sidebar/sidebar.component.html
@@ -37,12 +37,7 @@
         <span class="menu-title">Track Your Product</span>
       </a>
     </li>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/carousel" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-email"></i>
-        <span class="menu-title">Email</span>
-      </a>
-    </li>
+
     <li class="nav-item">
       <a class="nav-link" routerLink="/tooltips" routerLinkActive="active">
         <i class="menu-icon mdi mdi-forum"></i>

From 5a6b0f47eaad7b89d2ad026724a1d29bde5f275d Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 01:14:57 +0800
Subject: [PATCH 08/20] Updated the Product Overview(in the sidebar)

---
 src/app/forms/forms.component.html | 147 ++++++++++++++++++++++++-----
 1 file changed, 122 insertions(+), 25 deletions(-)

diff --git a/src/app/forms/forms.component.html b/src/app/forms/forms.component.html
index 356606a..46790a4 100644
--- a/src/app/forms/forms.component.html
+++ b/src/app/forms/forms.component.html
@@ -1,6 +1,34 @@
-<div class="card-group">
-  <div class="card">
-    <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+<div class="row">
+  <div class="col-md-4 grid-margin stretch-card">
+    <div class="card">
+      <div class="card-body">
+        <h2 class="card-title">Your Product Title Here</h2>
+        <div class="template-demo">
+          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">Cras justo odio</li>
+          <li class="list-group-item">Dapibus ac facilisis in</li>
+        </ul>
+        <div class=card>
+        <div class="card-body">
+          <a href="#" class="btn btn-success">Edit</a> &nbsp;&nbsp;&nbsp;
+          <a href="#" class="btn btn-danger">Delete</a>
+        </div>
+        </div>
+      </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-4 grid-margin stretch-card">
+    <div class="card">
+      <div class="card-body">
+        <h2 class="card-title">Your Product Title Here</h2>
+        <div class="template-demo">
+          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
@@ -10,40 +38,109 @@ <h5 class="card-title">Card title</h5>
         </ul>
         <div class=card>
         <div class="card-body">
-          <a href="#" class="btn btn-success">Edit Product </a> &nbsp;&nbsp;&nbsp;
-          <a href="#" class="btn btn-danger">Delete Product</a>
+          <a href="#" class="btn btn-success">Edit</a> &nbsp;&nbsp;&nbsp;
+          <a href="#" class="btn btn-danger">Delete</a>
         </div>
         </div>
       </div>
+        </div>
       </div>
-
-  <div class="card">
-    <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+    </div>
+  </div>
+  <div class="col-md-4 grid-margin stretch-card">
+    <div class="card">
+      <div class="card-body">
+        <h2 class="card-title">Your Product Title Here</h2>
+        <div class="template-demo">
+          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
-      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-      <ul class="list-group list-group-flush">
-        <li class="list-group-item">Cras justo odio</li>
-        <li class="list-group-item">Dapibus ac facilisis in</li>
-      </ul>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">Cras justo odio</li>
+          <li class="list-group-item">Dapibus ac facilisis in</li>
+        </ul>
+        <div class=card>
+        <div class="card-body">
+          <a href="#" class="btn btn-success">Edit</a> &nbsp;&nbsp;&nbsp;
+          <a href="#" class="btn btn-danger">Delete</a>
+        </div>
+        </div>
+      </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-4 grid-margin stretch-card">
+    <div class="card">
       <div class="card-body">
-        <a href="#" class="btn btn-success">Edit Product </a> &nbsp;&nbsp;&nbsp;
-        <a href="#" class="btn btn-danger">Delete Product</a>
+        <h2 class="card-title">Your Product Title Here</h2>
+        <div class="template-demo">
+          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">Cras justo odio</li>
+          <li class="list-group-item">Dapibus ac facilisis in</li>
+        </ul>
+        <div class=card>
+        <div class="card-body">
+          <a href="#" class="btn btn-success">Edit</a> &nbsp;&nbsp;&nbsp;
+          <a href="#" class="btn btn-danger">Delete</a>
+        </div>
+        </div>
       </div>
+        </div>
       </div>
     </div>
-  <div class="card">
-    <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+  </div>
+  <div class="col-md-4 grid-margin stretch-card">
+    <div class="card">
+      <div class="card-body">
+        <h2 class="card-title">Your Product Title Here</h2>
+        <div class="template-demo">
+          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. </p>
-      <ul class="list-group list-group-flush">
-        <li class="list-group-item">Cras justo odio</li>
-        <li class="list-group-item">Dapibus ac facilisis in</li>
-      </ul>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">Cras justo odio</li>
+          <li class="list-group-item">Dapibus ac facilisis in</li>
+        </ul>
+        <div class=card>
+        <div class="card-body">
+          <a href="#" class="btn btn-success">Edit</a> &nbsp;&nbsp;&nbsp;
+          <a href="#" class="btn btn-danger">Delete</a>
+        </div>
+        </div>
+      </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-4 grid-margin stretch-card">
+    <div class="card">
       <div class="card-body">
-        <a href="#" class="btn btn-success">Edit Product </a> &nbsp;&nbsp;&nbsp;
-        <a href="#" class="btn btn-danger">Delete Product</a>
+        <h2 class="card-title">Your Product Title Here</h2>
+        <div class="template-demo">
+          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+    <div class="card-body">
+      <h5 class="card-title">Card title</h5>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">Cras justo odio</li>
+          <li class="list-group-item">Dapibus ac facilisis in</li>
+        </ul>
+        <div class=card>
+        <div class="card-body">
+          <a href="#" class="btn btn-success">Edit</a> &nbsp;&nbsp;&nbsp;
+          <a href="#" class="btn btn-danger">Delete</a>
+        </div>
+        </div>
       </div>
+        </div>
       </div>
-    </div>
\ No newline at end of file
+    </div>
+  </div>
+</div>
\ No newline at end of file

From 63eeb0bb4fe13b8b149210304aea3708b634eccc Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 02:04:21 +0800
Subject: [PATCH 09/20] Updated Navar Notification

---
 src/app/navbar/navbar.component.html   | 2 +-
 src/app/sidebar/sidebar.component.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index f3b34fe..0075c67 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -14,7 +14,7 @@
       <li class="nav-item dropdown" ngbDropdown>
         <a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" ngbDropdownToggle>
           <i class="mdi mdi-file-document-box"></i>
-          <span class="count">7</span>
+          <span class="count">2</span>
         </a>
         <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" ngbDropdownMenu aria-labelledby="messageDropdown">
           <div class="dropdown-item">
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
index 2bd182e..a83754c 100644
--- a/src/app/sidebar/sidebar.component.html
+++ b/src/app/sidebar/sidebar.component.html
@@ -26,7 +26,7 @@
       </a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" routerLink="/forms" routerLinkActive="active">
+      <a class="nav-link" routerLink="/ProductOverview" routerLinkActive="active">
         <i class="menu-icon mdi mdi-notification-clear-all"></i>
         <span class="menu-title">Product Overview</span>
       </a>

From 7e12fd8c227709c3155d5a1901f34ad5f953d5c7 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 02:15:57 +0800
Subject: [PATCH 10/20] Deleted unnecessary components. Update the sidebar.

---
 src/app/app-routing.module.ts                 |    7 -
 src/app/app.module.ts                         |    6 -
 src/app/badges/badges.component.html          |  239 ----
 src/app/badges/badges.component.scss          |    0
 src/app/badges/badges.component.spec.ts       |   25 -
 src/app/badges/badges.component.ts            |   15 -
 src/app/icons/icons.component.html            | 1012 -----------------
 src/app/icons/icons.component.scss            |    0
 src/app/icons/icons.component.spec.ts         |   25 -
 src/app/icons/icons.component.ts              |   17 -
 src/app/sidebar/sidebar.component.html        |   20 +-
 src/app/typography/typography.component.html  |  474 --------
 src/app/typography/typography.component.scss  |    0
 .../typography/typography.component.spec.ts   |   25 -
 src/app/typography/typography.component.ts    |   17 -
 15 files changed, 1 insertion(+), 1881 deletions(-)
 delete mode 100644 src/app/badges/badges.component.html
 delete mode 100644 src/app/badges/badges.component.scss
 delete mode 100644 src/app/badges/badges.component.spec.ts
 delete mode 100644 src/app/badges/badges.component.ts
 delete mode 100644 src/app/icons/icons.component.html
 delete mode 100644 src/app/icons/icons.component.scss
 delete mode 100644 src/app/icons/icons.component.spec.ts
 delete mode 100644 src/app/icons/icons.component.ts
 delete mode 100644 src/app/typography/typography.component.html
 delete mode 100644 src/app/typography/typography.component.scss
 delete mode 100644 src/app/typography/typography.component.spec.ts
 delete mode 100644 src/app/typography/typography.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 44d3a0c..de698ce 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,14 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FormsComponent } from './forms/forms.component';
 import { TablesComponent } from './tables/tables.component';
-import { IconsComponent } from './icons/icons.component';
-import { TypographyComponent } from './typography/typography.component';
 import { AlertsComponent } from './alerts/alerts.component';
 import { AccordionsComponent } from './accordions/accordions.component';
-import { BadgesComponent } from './badges/badges.component';
 import { ProgressbarComponent } from './progressbar/progressbar.component';
 import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
 import { PaginationComponent } from './pagination/pagination.component';
@@ -21,11 +17,8 @@ const routes: Routes = [
   { path: 'dashboard', component: DashboardComponent },
   { path: 'forms', component: FormsComponent },
   { path: 'tables', component: TablesComponent },
-  { path: 'icons', component: IconsComponent },
-  { path: 'typography', component: TypographyComponent },
   { path: 'alerts', component: AlertsComponent },
   { path: 'accordions', component: AccordionsComponent },
-  { path: 'badges', component: BadgesComponent },
   { path: 'progressbar', component: ProgressbarComponent },
   { path: 'breadcrumbs', component: BreadcrumbsComponent },
   { path: 'pagination', component: PaginationComponent },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1ae2f43..5f53f02 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -13,11 +13,8 @@ import { FooterComponent } from './footer/footer.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FormsComponent } from './forms/forms.component';
 import { TablesComponent } from './tables/tables.component';
-import { TypographyComponent } from './typography/typography.component';
-import { IconsComponent } from './icons/icons.component';
 import { AlertsComponent } from './alerts/alerts.component';
 import { AccordionsComponent } from './accordions/accordions.component';
-import { BadgesComponent } from './badges/badges.component';
 import { ProgressbarComponent } from './progressbar/progressbar.component';
 import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
 import { PaginationComponent } from './pagination/pagination.component';
@@ -34,11 +31,8 @@ import { TabsComponent } from './tabs/tabs.component';
     DashboardComponent,
     FormsComponent,
     TablesComponent,
-    TypographyComponent,
-    IconsComponent,
     AlertsComponent,
     AccordionsComponent,
-    BadgesComponent,
     ProgressbarComponent,
     BreadcrumbsComponent,
     PaginationComponent,
diff --git a/src/app/badges/badges.component.html b/src/app/badges/badges.component.html
deleted file mode 100644
index 572357e..0000000
--- a/src/app/badges/badges.component.html
+++ /dev/null
@@ -1,239 +0,0 @@
-<div class="row">
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Normal Badges</h4>
-        <p class="card-description">Add class <code>.badge-{{ '{' }}color{{ '}' }}</code> with <code>.badge</code></p>
-        <div class="template-demo">
-          <table class="table mb-0">
-            <thead>
-              <tr>
-                <th class="pl-0">Item</th>
-                <th class="text-right">Label</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="pl-0">Primary label</td>
-                <td class="pr-0 text-right"><div class="badge badge-primary">Primary</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Info label</td>
-                <td class="pr-0 text-right"><div class="badge badge-info">Info</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Danger label</td>
-                <td class="pr-0 text-right"><div class="badge badge-danger">Danger</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Success label</td>
-                <td class="pr-0 text-right"><div class="badge badge-success">Success</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Warning label</td>
-                <td class="pr-0 text-right"><div class="badge badge-warning">Warning</div></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Badge Pills</h4>
-        <p class="card-description">Add class <code>.badge-pill</code></p>
-        <div class="template-demo">
-          <table class="table mb-0">
-            <thead>
-              <tr>
-                <th class="pl-0">Item</th>
-                <th class="text-right">Label</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="pl-0">Primary label</td>
-                <td class="pr-0 text-right"><div class="badge badge-primary badge-pill">Primary</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Info label</td>
-                <td class="pr-0 text-right"><div class="badge badge-info badge-pill">Info</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Danger label</td>
-                <td class="pr-0 text-right"><div class="badge badge-danger badge-pill">Danger</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Success label</td>
-                <td class="pr-0 text-right"><div class="badge badge-success badge-pill">Success</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Warning label</td>
-                <td class="pr-0 text-right"><div class="badge badge-warning badge-pill">Warning</div></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Badge Outlined Variations</h4>
-        <p class="card-description">Add class <code>.badge-outline-*</code></p>
-        <div class="template-demo">
-          <table class="table mb-0">
-            <thead>
-              <tr>
-                <th class="pl-0">Normal</th>
-                <th class="text-right">Rounded</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="pl-0"><div class="badge badge-outline-primary badge-pill">Primary</div></td>
-                <td class="pr-0 text-right"><div class="badge badge-outline-primary">Primary</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0"><div class="badge badge-outline-info badge-pill">Info</div></td>
-                <td class="pr-0 text-right"><div class="badge badge-outline-info">Info</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0"><div class="badge badge-outline-danger badge-pill">Danger</div></td>
-                <td class="pr-0 text-right"><div class="badge badge-outline-danger">Danger</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0"><div class="badge badge-outline-success badge-pill">Success</div></td>
-                <td class="pr-0 text-right"><div class="badge badge-outline-success">Success</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0"><div class="badge badge-outline-warning badge-pill">Warning</div></td>
-                <td class="pr-0 text-right"><div class="badge badge-outline-warning">Warning</div></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Badge Outlined Variations</h4>
-        <div class="template-demo">
-          <table class="table mb-0">
-            <thead>
-              <tr>
-                <th class="pl-0">Item</th>
-                <th class="text-right">Label</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="pl-0">Rounded Primary</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-outline-primary">2</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Rounded Info</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-outline-info">5</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Rounded Danger</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-outline-danger">1</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Rounded Success</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-outline-success">9</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Rounded Warning</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-outline-warning">4</div></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Badge Variations</h4>
-        <div class="template-demo">
-          <table class="table mb-0">
-            <thead>
-              <tr>
-                <th class="pl-0">Item</th>
-                <th class="text-right">Label</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="pl-0">Rounded Primary</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-primary">2</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Rounded Info</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-info">5</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Rounded Danger</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-danger">1</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Rounded Success</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-success">9</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Rounded Warning</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-warning">4</div></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Badge With Icons</h4>
-        <div class="template-demo">
-          <table class="table mb-0">
-            <thead>
-              <tr>
-                <th class="pl-0">Item</th>
-                <th class="text-right">Label</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="pl-0">Icon Badge</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-primary"><i class="mdi mdi-account"></i></div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Outlined Icons</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-outline-info"><i class="mdi mdi-cloud-outline"></i></div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Icon With Text</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-danger"><i class="mdi mdi-email mr-2"></i>12</div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Icon With Text</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-success">12<i class="mdi mdi-email ml-2"></i></div></td>
-              </tr>
-              <tr>
-                <td class="pl-0">Icon Badge</td>
-                <td class="pr-0 text-right"><div class="badge badge-pill badge-warning"><i class="mdi mdi-comment"></i></div></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/app/badges/badges.component.scss b/src/app/badges/badges.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/badges/badges.component.spec.ts b/src/app/badges/badges.component.spec.ts
deleted file mode 100644
index afaa811..0000000
--- a/src/app/badges/badges.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BadgesComponent } from './badges.component';
-
-describe('BadgesComponent', () => {
-  let component: BadgesComponent;
-  let fixture: ComponentFixture<BadgesComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ BadgesComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(BadgesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/badges/badges.component.ts b/src/app/badges/badges.component.ts
deleted file mode 100644
index 4980039..0000000
--- a/src/app/badges/badges.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-badges',
-  templateUrl: './badges.component.html',
-  styleUrls: ['./badges.component.scss']
-})
-export class BadgesComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/icons/icons.component.html b/src/app/icons/icons.component.html
deleted file mode 100644
index f149d06..0000000
--- a/src/app/icons/icons.component.html
+++ /dev/null
@@ -1,1012 +0,0 @@
-<div class="row grid-margin">
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">41 New Icons in 4.7</h5>
-        <div class="icons-list row">
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-address-book"></i>fa fa-address-book </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-address-book-o"></i>fa fa-address-book-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-address-card"></i>fa fa-address-card </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-address-card-o"></i>fa fa-address-card-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-bandcamp"></i>fa fa-bandcamp </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-bath"></i>fa fa-bath </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-bathtub"></i>fa fa-bathtub </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-drivers-license"></i>fa fa-drivers-license </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-drivers-license-o"></i>fa fa-drivers-license-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-eercast"></i>fa fa-eercast </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-envelope-open"></i>fa fa-envelope-open </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-envelope-open-o"></i>fa fa-envelope-open-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-etsy"></i>fa fa-etsy </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-free-code-camp"></i>fa fa-free-code-camp </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-grav"></i>fa fa-grav </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-handshake-o"></i>fa fa-handshake-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-id-badge"></i>fa fa-id-badge </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-id-card"></i>fa fa-id-card </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-id-card-o"></i>fa fa-id-card-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-imdb"></i>fa fa-imdb </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-linode"></i> fa fa-linode </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-meetup"></i>fa fa-meetup </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-microchip"></i>fa fa-microchip </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-podcast"></i>fa fa-podcast </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-quora"></i>fa fa-quora </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-ravelry"></i>fa fa-ravelry </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-s15"></i>fa fa-s15 </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-shower"></i>fa fa-shower </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-snowflake-o"></i>fa fa-snowflake-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-superpowers"></i>fa fa-superpowers </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-telegram"></i>fa fa-telegram </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-thermometer"></i>fa fa-thermometer </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-thermometer-0"></i>fa fa-thermometer-0 </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-thermometer-1"></i>fa fa-thermometer-1 </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-thermometer-2"></i>fa fa-thermometer-2 </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-thermometer-3"></i>fa fa-thermometer-3 </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-thermometer-4"></i>fa fa-thermometer-4 </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-thermometer-empty"></i>fa fa-thermometer-empty </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-thermometer-full"></i>fa fa-thermometer-full </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-thermometer-half"></i>fa fa-thermometer-half </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-thermometer-quarter"></i>fa fa-thermometer-quarter </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-thermometer-three-quarters"></i>fa fa-thermometer-three-quarters
-          </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-times-rectangle"></i>fa fa-times-rectangle </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-times-rectangle-o"></i>fa fa-times-rectangle-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-user-circle"></i>fa fa-user-circle </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-user-circle-o"></i>fa fa-user-circle-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-user-o"></i>fa fa-user-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-vcard"></i>fa fa-vcard </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-vcard-o"></i>fa fa-vcard-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-window-close"></i>fa fa-window-close </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-window-close-o"></i>fa fa-window-close-o </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-window-maximize"></i>fa fa-window-maximize </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-window-minimize"></i>fa fa-window-minimize </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-window-restore"></i>fa fa-window-restore </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"> <i class="fa fa-wpexplorer"></i>fa fa-wpexplorer </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row grid-margin">
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">Web Application Icons</h5>
-        <div class="icons-list row">
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-adjust"></i> fa-adjust</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-anchor"></i> fa-anchor</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-archive"></i> fa-archive</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrows"></i> fa-arrows</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrows-h"></i> fa-arrows-h</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrows-v"></i> fa-arrows-v</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-asterisk"></i> fa-asterisk</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-automobile"></i> fa-automobile <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ban"></i> fa-ban</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bank"></i> fa-bank <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bar-chart-o"></i> fa-bar-chart-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-barcode"></i> fa-barcode</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bars"></i> fa-bars</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-beer"></i> fa-beer</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bell"></i> fa-bell</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bell-o"></i> fa-bell-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bolt"></i> fa-bolt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bomb"></i> fa-bomb</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-book"></i> fa-book</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bookmark"></i> fa-bookmark</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bookmark-o"></i> fa-bookmark-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-briefcase"></i> fa-briefcase</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bug"></i> fa-bug</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-building"></i> fa-building</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-building-o"></i> fa-building-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bullhorn"></i> fa-bullhorn</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bullseye"></i> fa-bullseye</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cab"></i> fa-cab <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-calendar"></i> fa-calendar</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-calendar-o"></i> fa-calendar-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-camera"></i> fa-camera</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-camera-retro"></i> fa-camera-retro</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-car"></i> fa-car</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-down"></i> fa-caret-square-o-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-right"></i> fa-caret-square-o-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-up"></i> fa-caret-square-o-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-certificate"></i> fa-certificate</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check"></i> fa-check</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check-circle"></i> fa-check-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check-circle-o"></i> fa-check-circle-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check-square"></i> fa-check-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check-square-o"></i> fa-check-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-child"></i> fa-child</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-circle"></i> fa-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-circle-o"></i> fa-circle-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-circle-o-notch"></i> fa-circle-o-notch</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-circle-thin"></i> fa-circle-thin</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-clock-o"></i> fa-clock-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cloud"></i> fa-cloud</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cloud-download"></i> fa-cloud-download</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cloud-upload"></i> fa-cloud-upload</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-code"></i> fa-code</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-code-fork"></i> fa-code-fork</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-coffee"></i> fa-coffee</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cog"></i> fa-cog</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cogs"></i> fa-cogs</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-comment"></i> fa-comment</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-comment-o"></i> fa-comment-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-comments"></i> fa-comments</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-comments-o"></i> fa-comments-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-compass"></i> fa-compass</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-credit-card"></i> fa-credit-card</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-crop"></i> fa-crop</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-crosshairs"></i> fa-crosshairs</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cube"></i> fa-cube</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cubes"></i> fa-cubes</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cutlery"></i> fa-cutlery</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-dashboard"></i> fa-dashboard <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-database"></i> fa-database</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-desktop"></i> fa-desktop</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-dot-circle-o"></i> fa-dot-circle-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-download"></i> fa-download</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-edit"></i> fa-edit <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ellipsis-h"></i> fa-ellipsis-h</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ellipsis-v"></i> fa-ellipsis-v</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-envelope"></i> fa-envelope</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-envelope-o"></i> fa-envelope-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-envelope-square"></i> fa-envelope-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-eraser"></i> fa-eraser</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-exchange"></i> fa-exchange</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-exclamation"></i> fa-exclamation</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-exclamation-circle"></i> fa-exclamation-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-exclamation-triangle"></i> fa-exclamation-triangle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-external-link"></i> fa-external-link</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-external-link-square"></i> fa-external-link-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-eye"></i> fa-eye</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-eye-slash"></i> fa-eye-slash</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-fax"></i> fa-fax</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-female"></i> fa-female</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-fighter-jet"></i> fa-fighter-jet</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-archive-o"></i> fa-file-archive-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-audio-o"></i> fa-file-audio-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-code-o"></i> fa-file-code-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-excel-o"></i> fa-file-excel-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-image-o"></i> fa-file-image-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-movie-o"></i> fa-file-movie-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-pdf-o"></i> fa-file-pdf-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-photo-o"></i> fa-file-photo-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-picture-o"></i> fa-file-picture-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-powerpoint-o"></i> fa-file-powerpoint-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-sound-o"></i> fa-file-sound-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-video-o"></i> fa-file-video-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-word-o"></i> fa-file-word-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-zip-o"></i> fa-file-zip-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-film"></i> fa-film</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-filter"></i> fa-filter</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-fire"></i> fa-fire</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-fire-extinguisher"></i> fa-fire-extinguisher</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-flag"></i> fa-flag</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-flag-checkered"></i> fa-flag-checkered</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-flag-o"></i> fa-flag-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-flash"></i> fa-flash <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-flask"></i> fa-flask</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-folder"></i> fa-folder</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-folder-o"></i> fa-folder-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-folder-open"></i> fa-folder-open</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-folder-open-o"></i> fa-folder-open-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-frown-o"></i> fa-frown-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gamepad"></i> fa-gamepad</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gavel"></i> fa-gavel</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gear"></i> fa-gear <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gears"></i> fa-gears <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gift"></i> fa-gift</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-glass"></i> fa-glass</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-globe"></i> fa-globe</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-graduation-cap"></i> fa-graduation-cap</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-group"></i> fa-group <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-hdd-o"></i> fa-hdd-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-headphones"></i> fa-headphones</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-heart"></i> fa-heart</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-heart-o"></i> fa-heart-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-history"></i> fa-history</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-home"></i> fa-home</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-image"></i> fa-image <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-inbox"></i> fa-inbox</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-info"></i> fa-info</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-info-circle"></i> fa-info-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-institution"></i> fa-institution <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-key"></i> fa-key</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-keyboard-o"></i> fa-keyboard-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-language"></i> fa-language</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-laptop"></i> fa-laptop</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-leaf"></i> fa-leaf</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-legal"></i> fa-legal <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-lemon-o"></i> fa-lemon-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-level-down"></i> fa-level-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-level-up"></i> fa-level-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-life-bouy"></i> fa-life-bouy <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-life-ring"></i> fa-life-ring</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-life-saver"></i> fa-life-saver <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-lightbulb-o"></i> fa-lightbulb-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-location-arrow"></i> fa-location-arrow</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-lock"></i> fa-lock</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-magic"></i> fa-magic</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-magnet"></i> fa-magnet</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mail-forward"></i> fa-mail-forward <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mail-reply"></i> fa-mail-reply <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mail-reply-all"></i> fa-mail-reply-all <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-male"></i> fa-male</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-map-marker"></i> fa-map-marker</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-meh-o"></i> fa-meh-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-microphone"></i> fa-microphone</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-microphone-slash"></i> fa-microphone-slash</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-minus"></i> fa-minus</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-minus-circle"></i> fa-minus-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-minus-square"></i> fa-minus-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-minus-square-o"></i> fa-minus-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mobile"></i> fa-mobile</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mobile-phone"></i> fa-mobile-phone <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-money"></i> fa-money</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-moon-o"></i> fa-moon-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mortar-board"></i> fa-mortar-board <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-music"></i> fa-music</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-navicon"></i> fa-navicon <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-paper-plane"></i> fa-paper-plane</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-paper-plane-o"></i> fa-paper-plane-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-paw"></i> fa-paw</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pencil"></i> fa-pencil</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pencil-square"></i> fa-pencil-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pencil-square-o"></i> fa-pencil-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-phone"></i> fa-phone</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-phone-square"></i> fa-phone-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-photo"></i> fa-photo <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-picture-o"></i> fa-picture-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plane"></i> fa-plane</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plus"></i> fa-plus</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plus-circle"></i> fa-plus-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plus-square"></i> fa-plus-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plus-square-o"></i> fa-plus-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-power-off"></i> fa-power-off</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-print"></i> fa-print</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-puzzle-piece"></i> fa-puzzle-piece</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-qrcode"></i> fa-qrcode</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-question"></i> fa-question</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-question-circle"></i> fa-question-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-quote-left"></i> fa-quote-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-quote-right"></i> fa-quote-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-random"></i> fa-random</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-recycle"></i> fa-recycle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-refresh"></i> fa-refresh</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-reorder"></i> fa-reorder <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-reply"></i> fa-reply</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-reply-all"></i> fa-reply-all</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-retweet"></i> fa-retweet</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-road"></i> fa-road</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rocket"></i> fa-rocket</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rss"></i> fa-rss</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rss-square"></i> fa-rss-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-search"></i> fa-search</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-search-minus"></i> fa-search-minus</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-search-plus"></i> fa-search-plus</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-send"></i> fa-send <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-send-o"></i> fa-send-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share"></i> fa-share</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share-alt"></i> fa-share-alt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share-alt-square"></i> fa-share-alt-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share-square"></i> fa-share-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share-square-o"></i> fa-share-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-shield"></i> fa-shield</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-shopping-cart"></i> fa-shopping-cart</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sign-in"></i> fa-sign-in</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sign-out"></i> fa-sign-out</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-signal"></i> fa-signal</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sitemap"></i> fa-sitemap</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sliders"></i> fa-sliders</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-smile-o"></i> fa-smile-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort"></i> fa-sort</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-alpha-asc"></i> fa-sort-alpha-asc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-alpha-desc"></i> fa-sort-alpha-desc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-amount-asc"></i> fa-sort-amount-asc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-amount-desc"></i> fa-sort-amount-desc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-asc"></i> fa-sort-asc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-desc"></i> fa-sort-desc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-down"></i> fa-sort-down <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-numeric-asc"></i> fa-sort-numeric-asc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-numeric-desc"></i> fa-sort-numeric-desc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-up"></i> fa-sort-up <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-space-shuttle"></i> fa-space-shuttle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-spinner"></i> fa-spinner</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-spoon"></i> fa-spoon</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-square"></i> fa-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-square-o"></i> fa-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star"></i> fa-star</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star-half"></i> fa-star-half</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star-half-empty"></i> fa-star-half-empty <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star-half-full"></i> fa-star-half-full <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star-half-o"></i> fa-star-half-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star-o"></i> fa-star-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-suitcase"></i> fa-suitcase</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sun-o"></i> fa-sun-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-support"></i> fa-support <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tablet"></i> fa-tablet</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tachometer"></i> fa-tachometer</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tag"></i> fa-tag</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tags"></i> fa-tags</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tasks"></i> fa-tasks</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-taxi"></i> fa-taxi</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-terminal"></i> fa-terminal</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-thumb-tack"></i> fa-thumb-tack</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-thumbs-down"></i> fa-thumbs-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-thumbs-o-down"></i> fa-thumbs-o-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-thumbs-o-up"></i> fa-thumbs-o-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-thumbs-up"></i> fa-thumbs-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ticket"></i> fa-ticket</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-times"></i> fa-times</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-times-circle"></i> fa-times-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-times-circle-o"></i> fa-times-circle-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tint"></i> fa-tint</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-down"></i> fa-toggle-down <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-left"></i> fa-toggle-left <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-right"></i> fa-toggle-right <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-up"></i> fa-toggle-up <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-trash-o"></i> fa-trash-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tree"></i> fa-tree</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-trophy"></i> fa-trophy</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-truck"></i> fa-truck</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-umbrella"></i> fa-umbrella</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-university"></i> fa-university</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-unlock"></i> fa-unlock</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-unlock-alt"></i> fa-unlock-alt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-unsorted"></i> fa-unsorted <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-upload"></i> fa-upload</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-user"></i> fa-user</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-users"></i> fa-users</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-video-camera"></i> fa-video-camera</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-volume-down"></i> fa-volume-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-volume-off"></i> fa-volume-off</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-volume-up"></i> fa-volume-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-warning"></i> fa-warning <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-wheelchair"></i> fa-wheelchair</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-wrench"></i> fa-wrench</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row grid-margin">
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">File Type Icons</h5>
-        <div class="icons-list row">
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-adjust"></i> fa-adjust</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-anchor"></i> fa-anchor</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-archive"></i> fa-archive</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrows"></i> fa-arrows</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrows-h"></i> fa-arrows-h</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrows-v"></i> fa-arrows-v</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-asterisk"></i> fa-asterisk</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-automobile"></i> fa-automobile <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ban"></i> fa-ban</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bank"></i> fa-bank <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bar-chart-o"></i> fa-bar-chart-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-barcode"></i> fa-barcode</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bars"></i> fa-bars</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-beer"></i> fa-beer</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bell"></i> fa-bell</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bell-o"></i> fa-bell-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bolt"></i> fa-bolt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bomb"></i> fa-bomb</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-book"></i> fa-book</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bookmark"></i> fa-bookmark</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bookmark-o"></i> fa-bookmark-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-briefcase"></i> fa-briefcase</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bug"></i> fa-bug</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-building"></i> fa-building</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-building-o"></i> fa-building-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bullhorn"></i> fa-bullhorn</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bullseye"></i> fa-bullseye</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cab"></i> fa-cab <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-calendar"></i> fa-calendar</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-calendar-o"></i> fa-calendar-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-camera"></i> fa-camera</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-camera-retro"></i> fa-camera-retro</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-car"></i> fa-car</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-down"></i> fa-caret-square-o-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-right"></i> fa-caret-square-o-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-up"></i> fa-caret-square-o-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-certificate"></i> fa-certificate</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check"></i> fa-check</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check-circle"></i> fa-check-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check-circle-o"></i> fa-check-circle-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check-square"></i> fa-check-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check-square-o"></i> fa-check-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-child"></i> fa-child</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-circle"></i> fa-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-circle-o"></i> fa-circle-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-circle-o-notch"></i> fa-circle-o-notch</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-circle-thin"></i> fa-circle-thin</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-clock-o"></i> fa-clock-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cloud"></i> fa-cloud</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cloud-download"></i> fa-cloud-download</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cloud-upload"></i> fa-cloud-upload</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-code"></i> fa-code</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-code-fork"></i> fa-code-fork</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-coffee"></i> fa-coffee</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cog"></i> fa-cog</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cogs"></i> fa-cogs</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-comment"></i> fa-comment</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-comment-o"></i> fa-comment-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-comments"></i> fa-comments</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-comments-o"></i> fa-comments-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-compass"></i> fa-compass</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-credit-card"></i> fa-credit-card</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-crop"></i> fa-crop</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-crosshairs"></i> fa-crosshairs</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cube"></i> fa-cube</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cubes"></i> fa-cubes</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cutlery"></i> fa-cutlery</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-dashboard"></i> fa-dashboard <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-database"></i> fa-database</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-desktop"></i> fa-desktop</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-dot-circle-o"></i> fa-dot-circle-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-download"></i> fa-download</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-edit"></i> fa-edit <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ellipsis-h"></i> fa-ellipsis-h</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ellipsis-v"></i> fa-ellipsis-v</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-envelope"></i> fa-envelope</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-envelope-o"></i> fa-envelope-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-envelope-square"></i> fa-envelope-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-eraser"></i> fa-eraser</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-exchange"></i> fa-exchange</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-exclamation"></i> fa-exclamation</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-exclamation-circle"></i> fa-exclamation-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-exclamation-triangle"></i> fa-exclamation-triangle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-external-link"></i> fa-external-link</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-external-link-square"></i> fa-external-link-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-eye"></i> fa-eye</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-eye-slash"></i> fa-eye-slash</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-fax"></i> fa-fax</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-female"></i> fa-female</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-fighter-jet"></i> fa-fighter-jet</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-archive-o"></i> fa-file-archive-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-audio-o"></i> fa-file-audio-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-code-o"></i> fa-file-code-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-excel-o"></i> fa-file-excel-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-image-o"></i> fa-file-image-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-movie-o"></i> fa-file-movie-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-pdf-o"></i> fa-file-pdf-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-photo-o"></i> fa-file-photo-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-picture-o"></i> fa-file-picture-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-powerpoint-o"></i> fa-file-powerpoint-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-sound-o"></i> fa-file-sound-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-video-o"></i> fa-file-video-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-word-o"></i> fa-file-word-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-zip-o"></i> fa-file-zip-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-film"></i> fa-film</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-filter"></i> fa-filter</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-fire"></i> fa-fire</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-fire-extinguisher"></i> fa-fire-extinguisher</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-flag"></i> fa-flag</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-flag-checkered"></i> fa-flag-checkered</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-flag-o"></i> fa-flag-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-flash"></i> fa-flash <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-flask"></i> fa-flask</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-folder"></i> fa-folder</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-folder-o"></i> fa-folder-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-folder-open"></i> fa-folder-open</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-folder-open-o"></i> fa-folder-open-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-frown-o"></i> fa-frown-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gamepad"></i> fa-gamepad</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gavel"></i> fa-gavel</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gear"></i> fa-gear <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gears"></i> fa-gears <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gift"></i> fa-gift</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-glass"></i> fa-glass</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-globe"></i> fa-globe</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-graduation-cap"></i> fa-graduation-cap</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-group"></i> fa-group <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-hdd-o"></i> fa-hdd-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-headphones"></i> fa-headphones</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-heart"></i> fa-heart</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-heart-o"></i> fa-heart-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-history"></i> fa-history</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-home"></i> fa-home</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-image"></i> fa-image <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-inbox"></i> fa-inbox</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-info"></i> fa-info</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-info-circle"></i> fa-info-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-institution"></i> fa-institution <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-key"></i> fa-key</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-keyboard-o"></i> fa-keyboard-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-language"></i> fa-language</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-laptop"></i> fa-laptop</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-leaf"></i> fa-leaf</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-legal"></i> fa-legal <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-lemon-o"></i> fa-lemon-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-level-down"></i> fa-level-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-level-up"></i> fa-level-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-life-bouy"></i> fa-life-bouy <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-life-ring"></i> fa-life-ring</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-life-saver"></i> fa-life-saver <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-lightbulb-o"></i> fa-lightbulb-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-location-arrow"></i> fa-location-arrow</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-lock"></i> fa-lock</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-magic"></i> fa-magic</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-magnet"></i> fa-magnet</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mail-forward"></i> fa-mail-forward <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mail-reply"></i> fa-mail-reply <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mail-reply-all"></i> fa-mail-reply-all <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-male"></i> fa-male</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-map-marker"></i> fa-map-marker</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-meh-o"></i> fa-meh-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-microphone"></i> fa-microphone</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-microphone-slash"></i> fa-microphone-slash</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-minus"></i> fa-minus</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-minus-circle"></i> fa-minus-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-minus-square"></i> fa-minus-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-minus-square-o"></i> fa-minus-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mobile"></i> fa-mobile</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mobile-phone"></i> fa-mobile-phone <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-money"></i> fa-money</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-moon-o"></i> fa-moon-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-mortar-board"></i> fa-mortar-board <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-music"></i> fa-music</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-navicon"></i> fa-navicon <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-paper-plane"></i> fa-paper-plane</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-paper-plane-o"></i> fa-paper-plane-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-paw"></i> fa-paw</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pencil"></i> fa-pencil</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pencil-square"></i> fa-pencil-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pencil-square-o"></i> fa-pencil-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-phone"></i> fa-phone</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-phone-square"></i> fa-phone-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-photo"></i> fa-photo <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-picture-o"></i> fa-picture-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plane"></i> fa-plane</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plus"></i> fa-plus</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plus-circle"></i> fa-plus-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plus-square"></i> fa-plus-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plus-square-o"></i> fa-plus-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-power-off"></i> fa-power-off</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-print"></i> fa-print</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-puzzle-piece"></i> fa-puzzle-piece</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-qrcode"></i> fa-qrcode</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-question"></i> fa-question</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-question-circle"></i> fa-question-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-quote-left"></i> fa-quote-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-quote-right"></i> fa-quote-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-random"></i> fa-random</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-recycle"></i> fa-recycle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-refresh"></i> fa-refresh</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-reorder"></i> fa-reorder <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-reply"></i> fa-reply</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-reply-all"></i> fa-reply-all</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-retweet"></i> fa-retweet</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-road"></i> fa-road</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rocket"></i> fa-rocket</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rss"></i> fa-rss</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rss-square"></i> fa-rss-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-search"></i> fa-search</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-search-minus"></i> fa-search-minus</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-search-plus"></i> fa-search-plus</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-send"></i> fa-send <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-send-o"></i> fa-send-o <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share"></i> fa-share</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share-alt"></i> fa-share-alt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share-alt-square"></i> fa-share-alt-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share-square"></i> fa-share-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share-square-o"></i> fa-share-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-shield"></i> fa-shield</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-shopping-cart"></i> fa-shopping-cart</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sign-in"></i> fa-sign-in</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sign-out"></i> fa-sign-out</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-signal"></i> fa-signal</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sitemap"></i> fa-sitemap</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sliders"></i> fa-sliders</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-smile-o"></i> fa-smile-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort"></i> fa-sort</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-alpha-asc"></i> fa-sort-alpha-asc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-alpha-desc"></i> fa-sort-alpha-desc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-amount-asc"></i> fa-sort-amount-asc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-amount-desc"></i> fa-sort-amount-desc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-asc"></i> fa-sort-asc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-desc"></i> fa-sort-desc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-down"></i> fa-sort-down <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-numeric-asc"></i> fa-sort-numeric-asc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-numeric-desc"></i> fa-sort-numeric-desc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sort-up"></i> fa-sort-up <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-space-shuttle"></i> fa-space-shuttle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-spinner"></i> fa-spinner</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-spoon"></i> fa-spoon</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-square"></i> fa-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-square-o"></i> fa-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star"></i> fa-star</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star-half"></i> fa-star-half</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star-half-empty"></i> fa-star-half-empty <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star-half-full"></i> fa-star-half-full <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star-half-o"></i> fa-star-half-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-star-o"></i> fa-star-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-suitcase"></i> fa-suitcase</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-sun-o"></i> fa-sun-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-support"></i> fa-support <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tablet"></i> fa-tablet</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tachometer"></i> fa-tachometer</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tag"></i> fa-tag</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tags"></i> fa-tags</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tasks"></i> fa-tasks</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-taxi"></i> fa-taxi</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-terminal"></i> fa-terminal</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-thumb-tack"></i> fa-thumb-tack</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-thumbs-down"></i> fa-thumbs-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-thumbs-o-down"></i> fa-thumbs-o-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-thumbs-o-up"></i> fa-thumbs-o-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-thumbs-up"></i> fa-thumbs-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ticket"></i> fa-ticket</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-times"></i> fa-times</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-times-circle"></i> fa-times-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-times-circle-o"></i> fa-times-circle-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tint"></i> fa-tint</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-down"></i> fa-toggle-down <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-left"></i> fa-toggle-left <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-right"></i> fa-toggle-right <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-up"></i> fa-toggle-up <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-trash-o"></i> fa-trash-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tree"></i> fa-tree</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-trophy"></i> fa-trophy</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-truck"></i> fa-truck</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-umbrella"></i> fa-umbrella</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-university"></i> fa-university</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-unlock"></i> fa-unlock</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-unlock-alt"></i> fa-unlock-alt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-unsorted"></i> fa-unsorted <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-upload"></i> fa-upload</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-user"></i> fa-user</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-users"></i> fa-users</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-video-camera"></i> fa-video-camera</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-volume-down"></i> fa-volume-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-volume-off"></i> fa-volume-off</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-volume-up"></i> fa-volume-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-warning"></i> fa-warning <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-wheelchair"></i> fa-wheelchair</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-wrench"></i> fa-wrench</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row grid-margin">
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">Spinner icons</h5>
-        <div class="alert alert-success">
-          These icons work great with the <code>fa-spin</code> class. Check out the <a href="http://fontawesome.io/examples/#animated"
-            class="alert-link">spinning icons example</a>.
-        </div>
-        <div class="row icons-list">
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-spin fa-circle-o-notch"></i> fa-circle-o-notch</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-spin fa-cog"></i> fa-cog</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-spin fa-gear"></i> fa-gear <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-spin fa-refresh"></i> fa-refresh</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-spin fa-spinner"></i> fa-spinner</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row grid-margin">
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">Form Control Icons</h5>
-        <div class="row icons-list">
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check-square"></i> fa-check-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-check-square-o"></i> fa-check-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-circle"></i> fa-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-circle-o"></i> fa-circle-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-dot-circle-o"></i> fa-dot-circle-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-minus-square"></i> fa-minus-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-minus-square-o"></i> fa-minus-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plus-square"></i> fa-plus-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plus-square-o"></i> fa-plus-square-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-square"></i> fa-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-square-o"></i> fa-square-o</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row grid-margin">
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">Currency Icons</h5>
-        <div class="row icons-list">
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bitcoin"></i> fa-bitcoin <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-btc"></i> fa-btc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cny"></i> fa-cny <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-dollar"></i> fa-dollar <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-eur"></i> fa-eur</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-euro"></i> fa-euro <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gbp"></i> fa-gbp</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-inr"></i> fa-inr</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-jpy"></i> fa-jpy</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-krw"></i> fa-krw</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-money"></i> fa-money</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rmb"></i> fa-rmb <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rouble"></i> fa-rouble <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rub"></i> fa-rub</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ruble"></i> fa-ruble <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rupee"></i> fa-rupee <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-try"></i> fa-try</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-turkish-lira"></i> fa-turkish-lira <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-usd"></i> fa-usd</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-won"></i> fa-won <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-yen"></i> fa-yen <span class="text-muted">(alias)</span> </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row grid-margin">
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">Text Editor Icons</h5>
-        <div class="row icons-list">
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-align-center"></i> fa-align-center</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-align-justify"></i> fa-align-justify</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-align-left"></i> fa-align-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-align-right"></i> fa-align-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bold"></i> fa-bold</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-chain"></i> fa-chain <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-chain-broken"></i> fa-chain-broken</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-clipboard"></i> fa-clipboard</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-columns"></i> fa-columns</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-copy"></i> fa-copy <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-cut"></i> fa-cut <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-dedent"></i> fa-dedent <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-eraser"></i> fa-eraser</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file"></i> fa-file</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-o"></i> fa-file-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-text"></i> fa-file-text</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-file-text-o"></i> fa-file-text-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-files-o"></i> fa-files-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-floppy-o"></i> fa-floppy-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-font"></i> fa-font</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-header"></i> fa-header</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-indent"></i> fa-indent</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-italic"></i> fa-italic</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-link"></i> fa-link</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-list"></i> fa-list</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-list-alt"></i> fa-list-alt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-list-ol"></i> fa-list-ol</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-list-ul"></i> fa-list-ul</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-outdent"></i> fa-outdent</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-paperclip"></i> fa-paperclip</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-paragraph"></i> fa-paragraph</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-paste"></i> fa-paste <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-repeat"></i> fa-repeat</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rotate-left"></i> fa-rotate-left <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rotate-right"></i> fa-rotate-right <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-save"></i> fa-save <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-scissors"></i> fa-scissors</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-strikethrough"></i> fa-strikethrough</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-subscript"></i> fa-subscript</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-superscript"></i> fa-superscript</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-table"></i> fa-table</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-text-height"></i> fa-text-height</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-text-width"></i> fa-text-width</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-th"></i> fa-th</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-th-large"></i> fa-th-large</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-th-list"></i> fa-th-list</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-underline"></i> fa-underline</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-undo"></i> fa-undo</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-unlink"></i> fa-unlink <span class="text-muted">(alias)</span> </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row grid-margin">
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">Directional Icons</h5>
-        <div class="row icons-list">
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-angle-double-down"></i> fa-angle-double-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-angle-double-left"></i> fa-angle-double-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-angle-double-right"></i> fa-angle-double-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-angle-double-up"></i> fa-angle-double-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-angle-down"></i> fa-angle-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-angle-left"></i> fa-angle-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-angle-right"></i> fa-angle-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-angle-up"></i> fa-angle-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-circle-down"></i> fa-arrow-circle-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-circle-left"></i> fa-arrow-circle-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-circle-o-down"></i> fa-arrow-circle-o-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-circle-o-left"></i> fa-arrow-circle-o-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-circle-o-right"></i> fa-arrow-circle-o-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-circle-o-up"></i> fa-arrow-circle-o-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-circle-right"></i> fa-arrow-circle-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-circle-up"></i> fa-arrow-circle-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-down"></i> fa-arrow-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-left"></i> fa-arrow-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-right"></i> fa-arrow-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrow-up"></i> fa-arrow-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrows"></i> fa-arrows</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrows-alt"></i> fa-arrows-alt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrows-h"></i> fa-arrows-h</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrows-v"></i> fa-arrows-v</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-down"></i> fa-caret-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-left"></i> fa-caret-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-right"></i> fa-caret-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-up"></i> fa-caret-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-left"></i> fa-caret-square-o-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-right"></i> fa-caret-square-o-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-up"></i> fa-caret-square-o-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-caret-square-o-down"></i> fa-caret-square-o-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-chevron-circle-down"></i> fa-chevron-circle-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-chevron-circle-left"></i> fa-chevron-circle-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-chevron-circle-right"></i> fa-chevron-circle-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-chevron-circle-up"></i> fa-chevron-circle-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-chevron-down"></i> fa-chevron-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-chevron-left"></i> fa-chevron-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-chevron-right"></i> fa-chevron-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-chevron-up"></i> fa-chevron-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-hand-o-down"></i> fa-hand-o-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-hand-o-left"></i> fa-hand-o-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-hand-o-right"></i> fa-hand-o-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-hand-o-up"></i> fa-hand-o-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-long-arrow-down"></i> fa-long-arrow-down</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-long-arrow-left"></i> fa-long-arrow-left</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-long-arrow-right"></i> fa-long-arrow-right</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-long-arrow-up"></i> fa-long-arrow-up</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-down"></i> fa-toggle-down <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-left"></i> fa-toggle-left <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-right"></i> fa-toggle-right <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-toggle-up"></i> fa-toggle-up <span class="text-muted">(alias)</span> </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row grid-margin">
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">Video Player Icons</h5>
-        <div class="row icons-list">
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-arrows-alt"></i> fa-arrows-alt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-backward"></i> fa-backward</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-compress"></i> fa-compress</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-eject"></i> fa-eject</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-expand"></i> fa-expand</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-fast-backward"></i> fa-fast-backward</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-fast-forward"></i> fa-fast-forward</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-forward"></i> fa-forward</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pause"></i> fa-pause</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-play"></i> fa-play</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-play-circle"></i> fa-play-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-play-circle-o"></i> fa-play-circle-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-step-backward"></i> fa-step-backward</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-step-forward"></i> fa-step-forward</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-stop"></i> fa-stop</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-youtube-play"></i> fa-youtube-play</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row grid-margin">
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">Brand Icons</h5>
-        <div class="row icons-list">
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-adn"></i> fa-adn</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-android"></i> fa-android</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-apple"></i> fa-apple</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-behance"></i> fa-behance</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-behance-square"></i> fa-behance-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bitbucket"></i> fa-bitbucket</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bitbucket-square"></i> fa-bitbucket-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-bitcoin"></i> fa-bitcoin <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-btc"></i> fa-btc</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-codepen"></i> fa-codepen</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-css3"></i> fa-css3</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-delicious"></i> fa-delicious</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-deviantart"></i> fa-deviantart</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-digg"></i> fa-digg</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-dribbble"></i> fa-dribbble</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-dropbox"></i> fa-dropbox</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-drupal"></i> fa-drupal</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-empire"></i> fa-empire</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-facebook"></i> fa-facebook</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-facebook-square"></i> fa-facebook-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-flickr"></i> fa-flickr</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-foursquare"></i> fa-foursquare</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ge"></i> fa-ge <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-git"></i> fa-git</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-git-square"></i> fa-git-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-github"></i> fa-github</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-github-alt"></i> fa-github-alt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-github-square"></i> fa-github-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-gittip"></i> fa-gittip</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-google"></i> fa-google</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-google-plus"></i> fa-google-plus</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-google-plus-square"></i> fa-google-plus-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-hacker-news"></i> fa-hacker-news</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-html5"></i> fa-html5</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-instagram"></i> fa-instagram</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-joomla"></i> fa-joomla</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-jsfiddle"></i> fa-jsfiddle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-linkedin"></i> fa-linkedin</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-linkedin-square"></i> fa-linkedin-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-linux"></i> fa-linux</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-maxcdn"></i> fa-maxcdn</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-openid"></i> fa-openid</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pagelines"></i> fa-pagelines</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pied-piper"></i> fa-pied-piper</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pied-piper-alt"></i> fa-pied-piper-alt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pinterest"></i> fa-pinterest</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-pinterest-square"></i> fa-pinterest-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-qq"></i> fa-qq</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ra"></i> fa-ra <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-rebel"></i> fa-rebel</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-reddit"></i> fa-reddit</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-reddit-square"></i> fa-reddit-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-renren"></i> fa-renren</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share-alt"></i> fa-share-alt</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-share-alt-square"></i> fa-share-alt-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-skype"></i> fa-skype</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-slack"></i> fa-slack</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-soundcloud"></i> fa-soundcloud</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-spotify"></i> fa-spotify</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-stack-exchange"></i> fa-stack-exchange</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-stack-overflow"></i> fa-stack-overflow</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-steam"></i> fa-steam</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-steam-square"></i> fa-steam-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-stumbleupon"></i> fa-stumbleupon</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-stumbleupon-circle"></i> fa-stumbleupon-circle</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tencent-weibo"></i> fa-tencent-weibo</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-trello"></i> fa-trello</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tumblr"></i> fa-tumblr</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-tumblr-square"></i> fa-tumblr-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-twitter"></i> fa-twitter</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-twitter-square"></i> fa-twitter-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-vimeo-square"></i> fa-vimeo-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-vine"></i> fa-vine</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-vk"></i> fa-vk</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-wechat"></i> fa-wechat <span class="text-muted">(alias)</span> </div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-weibo"></i> fa-weibo</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-weixin"></i> fa-weixin</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-windows"></i> fa-windows</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-wordpress"></i> fa-wordpress</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-xing"></i> fa-xing</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-xing-square"></i> fa-xing-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-yahoo"></i> fa-yahoo</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-youtube"></i> fa-youtube</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-youtube-play"></i> fa-youtube-play</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-youtube-square"></i> fa-youtube-square</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="row">
-  <div class="col-lg-12">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">Medical Icons</h5>
-        <div class="row icons-list">
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-ambulance"></i> fa-ambulance</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-h-square"></i> fa-h-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-hospital-o"></i> fa-hospital-o</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-medkit"></i> fa-medkit</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-plus-square"></i> fa-plus-square</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-stethoscope"></i> fa-stethoscope</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-user-md"></i> fa-user-md</div>
-          <div class="col-sm-6 col-md-4 col-lg-3"><i class="fa fa-wheelchair"></i> fa-wheelchair</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/app/icons/icons.component.scss b/src/app/icons/icons.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/icons/icons.component.spec.ts b/src/app/icons/icons.component.spec.ts
deleted file mode 100644
index 5e33a19..0000000
--- a/src/app/icons/icons.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { IconsComponent } from './icons.component';
-
-describe('IconsComponent', () => {
-  let component: IconsComponent;
-  let fixture: ComponentFixture<IconsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ IconsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(IconsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/icons/icons.component.ts b/src/app/icons/icons.component.ts
deleted file mode 100644
index 89433d2..0000000
--- a/src/app/icons/icons.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'app-icons',
-  templateUrl: './icons.component.html',
-  styleUrls: ['./icons.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class IconsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
index a83754c..8b70080 100644
--- a/src/app/sidebar/sidebar.component.html
+++ b/src/app/sidebar/sidebar.component.html
@@ -26,7 +26,7 @@
       </a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" routerLink="/ProductOverview" routerLinkActive="active">
+      <a class="nav-link" routerLink="/forms" routerLinkActive="active">
         <i class="menu-icon mdi mdi-notification-clear-all"></i>
         <span class="menu-title">Product Overview</span>
       </a>
@@ -86,23 +86,5 @@
         <span class="menu-title">Accordion</span>
       </a>
     </li>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/badges" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-checkbox-multiple-blank-circle-outline"></i>
-        <span class="menu-title">Badges</span>
-      </a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/icons" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-chart-bubble"></i>
-        <span class="menu-title">Icons</span>
-      </a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/typography" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-format-italic"></i>
-        <span class="menu-title">Typography</span>
-      </a>
-    </li>
   </ul>
 </nav>
diff --git a/src/app/typography/typography.component.html b/src/app/typography/typography.component.html
deleted file mode 100644
index ebdffe1..0000000
--- a/src/app/typography/typography.component.html
+++ /dev/null
@@ -1,474 +0,0 @@
-<div class="row">
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Headings</h4>
-        <p class="card-description">
-          Add tags
-          <code>&lt;h1&gt;</code> to
-          <code>&lt;h6&gt;</code> or class
-          <code>.h1</code> to
-          <code>.h6</code>
-        </p>
-        <div class="template-demo">
-          <h1>h1. Heading</h1>
-          <h2>h2. Heading</h2>
-          <h3>h3. Heading</h3>
-          <h4>h4. Heading</h4>
-          <h5>h5. Heading</h5>
-          <h6>h6. Heading</h6>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Headings with secondary text</h4>
-        <p class="card-description">
-          Add faded secondary text to headings
-        </p>
-        <div class="template-demo">
-          <h1>
-            h1. Heading
-            <small class="text-muted">
-              Secondary text
-            </small>
-          </h1>
-          <h2>
-            h2. Heading
-            <small class="text-muted">
-              Secondary text
-            </small>
-          </h2>
-          <h3>
-            h3. Heading
-            <small class="text-muted">
-              Secondary text
-            </small>
-          </h3>
-          <h4>
-            h4. Heading
-            <small class="text-muted">
-              Secondary text
-            </small>
-          </h4>
-          <h5>
-            h5. Heading
-            <small class="text-muted">
-              Secondary text
-            </small>
-          </h5>
-          <h6>
-            h6. Heading
-            <small class="text-muted">
-              Secondary text
-            </small>
-          </h6>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Display headings</h4>
-        <p class="card-description">
-          Add class
-          <code>.display1</code> to
-          <code>.display-4</code>
-        </p>
-        <div class="template-demo">
-          <h1 class="display-1">Display 1</h1>
-          <h1 class="display-2">Display 2</h1>
-          <h1 class="display-3">Display 3</h1>
-          <h1 class="display-4">Display 4</h1>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 d-flex align-items-stretch">
-    <div class="row">
-      <div class="col-md-12 grid-margin stretch-card">
-        <div class="card">
-          <div class="card-body">
-            <h4 class="card-title">Paragraph</h4>
-            <p class="card-description">
-              Write text in
-              <code>&lt;p&gt;</code> tag
-            </p>
-            <p>
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
-              text ever since the 1500s, when an unknown printer took a galley not only five centuries,
-            </p>
-          </div>
-        </div>
-      </div>
-      <div class="col-md-12 grid-margin stretch-card">
-        <div class="card">
-          <div class="card-body">
-            <h4 class="card-title">Icon size</h4>
-            <p class="card-description">
-              Add class
-              <code>.icon-lg</code>,
-              <code>.icon-md</code>,
-              <code>.icon-sm</code>
-            </p>
-            <div class="row">
-              <div class="col-md-4 d-flex align-items-center">
-                <div class="d-flex flex-row align-items-center">
-                  <i class="mdi mdi-compass icon-lg text-warning"></i>
-                  <p class="mb-0 ml-1">
-                    Icon-lg
-                  </p>
-                </div>
-              </div>
-              <div class="col-md-4 d-flex align-items-center">
-                <div class="d-flex flex-row align-items-center">
-                  <i class="mdi mdi-compass icon-md text-success"></i>
-                  <p class="mb-0 ml-1">
-                    Icon-md
-                  </p>
-                </div>
-              </div>
-              <div class="col-md-4 d-flex align-items-center">
-                <div class="d-flex flex-row align-items-center">
-                  <i class="mdi mdi-compass icon-sm text-danger"></i>
-                  <p class="mb-0 ml-1">
-                    Icon-sm
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Blockquotes</h4>
-        <p class="card-description">
-          Wrap content inside
-          <code>&lt;blockquote class="blockquote"&gt;</code>
-        </p>
-        <blockquote class="blockquote">
-          <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-        </blockquote>
-      </div>
-      <div class="card-body">
-        <blockquote class="blockquote blockquote-primary">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-          <footer class="blockquote-footer">Someone famous in
-            <cite title="Source Title">Source Title</cite>
-          </footer>
-        </blockquote>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Address</h4>
-        <p class="card-description">
-          Use
-          <code>&lt;address&gt;</code> tag
-        </p>
-        <div class="row">
-          <div class="col-md-6">
-            <address>
-              <p class="font-weight-bold">Star Admin Inc</p>
-              <p>
-                695 lsom Ave,
-              </p>
-              <p>
-                Suite 00
-              </p>
-              <p>
-                San Francisco, CA 94107
-              </p>
-            </address>
-          </div>
-          <div class="col-md-6">
-            <address class="text-primary">
-              <p class="font-weight-bold">
-                E-mail
-              </p>
-              <p class="mb-2">
-                johndoe@examplemeail.com
-              </p>
-              <p class="font-weight-bold">
-                Web Address
-              </p>
-              <p>
-                www.staradmin.com
-              </p>
-            </address>
-          </div>
-        </div>
-      </div>
-      <div class="card-body">
-        <h4 class="card-title">Lead</h4>
-        <p class="card-description">
-          Use class
-          <code>.lead</code>
-        </p>
-        <p class="lead">
-          Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
-        </p>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-12 grid-margin">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Text colors</h4>
-        <p class="card-description">
-          Use class
-          <code>.text-primary</code>,
-          <code>.text-secondary</code> etc. for text in theme colors
-        </p>
-        <div class="row">
-          <div class="col-md-6">
-            <p class="text-primary">.text-primary</p>
-            <p class="text-success">.text-success</p>
-            <p class="text-danger">.text-danger</p>
-            <p class="text-warning">.text-warning</p>
-            <p class="text-info">.text-info</p>
-          </div>
-          <div class="col-md-6">
-            <p class="text-light bg-dark pl-1">.text-light</p>
-            <p class="text-secondary">.text-secondary</p>
-            <p class="text-dark">.text-dark</p>
-            <p class="text-muted">.text-muted</p>
-            <p class="text-white bg-dark pl-1">.text-white</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Top aligned media</h4>
-        <div class="media">
-          <i class="mdi mdi-earth icon-md text-info d-flex align-self-start mr-3"></i>
-          <div class="media-body">
-            <p class="card-text">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Center aligned media</h4>
-        <div class="media">
-          <i class="mdi mdi-earth icon-md text-info d-flex align-self-center mr-3"></i>
-          <div class="media-body">
-            <p class="card-text">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Bottom aligned media</h4>
-        <div class="media">
-          <i class="mdi mdi-earth icon-md text-info d-flex align-self-end mr-3"></i>
-          <div class="media-body">
-            <p class="card-text">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Highlighted Text</h4>
-        <p class="card-description">
-          Wrap the text in
-          <code>&lt;mark&gt;</code> to highlight text
-        </p>
-        <p>
-          It is a long
-          <mark class="bg-warning text-white">established</mark> fact that a reader will be distracted by the readable content of a page when looking at its
-          layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
-        </p>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">List Unordered</h4>
-        <ul>
-          <li>Lorem ipsum dolor sit amet</li>
-          <li>Consectetur adipiscing elit</li>
-          <li>Integer molestie lorem at massa</li>
-          <li>Facilisis in pretium nisl aliquet</li>
-          <li>Nulla volutpat aliquam velit</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Bold text</h4>
-        <p class="card-description">
-          Use class
-          <code>.font-weight-bold</code>
-        </p>
-        <p>
-          It is a long
-          <span class="font-weight-bold">established fact</span> that a reader will be distracted by the readable content of a page when looking at its
-          layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
-        </p>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">List Ordered</h4>
-        <ol>
-          <li>Lorem ipsum dolor sit amet</li>
-          <li>Consectetur adipiscing elit</li>
-          <li>Integer molestie lorem at massa</li>
-          <li>Facilisis in pretium nisl aliquet</li>
-          <li>Nulla volutpat aliquam velit></li>
-        </ol>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title text-primary">Underline</h4>
-        <p class="card-description">
-          Wrap in
-          <code>&lt;u&gt;</code> tag for underline
-        </p>
-        <p>
-          <u>lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.</u>
-        </p>
-      </div>
-      <div class="card-body">
-        <h4 class="card-title text-danger">Lowercase</h4>
-        <p class="card-description">
-          Use class
-          <code>.text-lowercase</code>
-        </p>
-        <p class="text-lowercase">
-          lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-      <div class="card-body">
-        <h4 class="card-title text-warning">Uppercase</h4>
-        <p class="card-description">
-          Use class
-          <code>.text-uppercase</code>
-        </p>
-        <p class="text-uppercase">
-          lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Mute</h4>
-        <p class="card-description">
-          Use class
-          <code>.text-muted</code>
-        </p>
-        <p class="text-muted">
-          lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-      <div class="card-body">
-        <h4 class="card-title text-success">Strike</h4>
-        <p class="card-description">
-          Wrap content in
-          <code>&lt;del&gt;</code> tag
-        </p>
-        <p>
-          <del>
-            lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
-          </del>
-        </p>
-      </div>
-      <div class="card-body">
-        <h4 class="card-title text-info">Capitalized</h4>
-        <p class="card-description">
-          Use class
-          <code>.text-capitalize</code>
-        </p>
-        <p class="text-capitalize">
-          lorem ipsum dolor sit amet, consectetur mod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">List with icon</h4>
-        <p class="card-description">Add class
-          <code>.list-ticked</code> to
-          <code>&lt;ul&gt;</code>
-        </p>
-        <ul class="list-ticked">
-          <li>Lorem ipsum dolor sit amet</li>
-          <li>Consectetur adipiscing elit</li>
-          <li>Integer molestie lorem at massa</li>
-          <li>Facilisis in pretium nisl aliquet</li>
-          <li>Nulla volutpat aliquam velit></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">List with icon</h4>
-        <p class="card-description">Add class
-          <code>.list-arrow</code> to
-          <code>&lt;ul&gt;</code>
-        </p>
-        <ul class="list-arrow">
-          <li>Lorem ipsum dolor sit amet</li>
-          <li>Consectetur adipiscing elit</li>
-          <li>Integer molestie lorem at massa</li>
-          <li>Facilisis in pretium nisl aliquet</li>
-          <li>Nulla volutpat aliquam velit></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">List with icon</h4>
-        <p class="card-description">Add class
-          <code>.list-star</code> to
-          <code>&lt;ul&gt;</code>
-        </p>
-        <ul class="list-star">
-          <li>Lorem ipsum dolor sit amet</li>
-          <li>Consectetur adipiscing elit</li>
-          <li>Integer molestie lorem at massa</li>
-          <li>Facilisis in pretium nisl aliquet</li>
-          <li>Nulla volutpat aliquam velit></li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/app/typography/typography.component.scss b/src/app/typography/typography.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/typography/typography.component.spec.ts b/src/app/typography/typography.component.spec.ts
deleted file mode 100644
index 46c35f7..0000000
--- a/src/app/typography/typography.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TypographyComponent } from './typography.component';
-
-describe('TypographyComponent', () => {
-  let component: TypographyComponent;
-  let fixture: ComponentFixture<TypographyComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TypographyComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TypographyComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/typography/typography.component.ts b/src/app/typography/typography.component.ts
deleted file mode 100644
index 27b648e..0000000
--- a/src/app/typography/typography.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'app-typography',
-  templateUrl: './typography.component.html',
-  styleUrls: ['./typography.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class TypographyComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

From cec92ea3c2804023fdc4a7f67becd2218357bde2 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 02:30:43 +0800
Subject: [PATCH 11/20] Deleted some unnecessary components. Updated the
 sidebar component.

---
 src/app/alerts/alerts.component.html          |  86 -------
 src/app/alerts/alerts.component.scss          |   0
 src/app/alerts/alerts.component.spec.ts       |  25 --
 src/app/alerts/alerts.component.ts            |  15 --
 src/app/app-routing.module.ts                 |   6 -
 src/app/app.module.ts                         |   6 -
 .../breadcrumbs/breadcrumbs.component.html    | 213 ------------------
 .../breadcrumbs/breadcrumbs.component.scss    |   0
 .../breadcrumbs/breadcrumbs.component.spec.ts |  25 --
 src/app/breadcrumbs/breadcrumbs.component.ts  |  15 --
 src/app/pagination/pagination.component.html  |  83 -------
 src/app/pagination/pagination.component.scss  |   0
 .../pagination/pagination.component.spec.ts   |  25 --
 src/app/pagination/pagination.component.ts    |  15 --
 src/app/sidebar/sidebar.component.html        |  19 +-
 15 files changed, 1 insertion(+), 532 deletions(-)
 delete mode 100644 src/app/alerts/alerts.component.html
 delete mode 100644 src/app/alerts/alerts.component.scss
 delete mode 100644 src/app/alerts/alerts.component.spec.ts
 delete mode 100644 src/app/alerts/alerts.component.ts
 delete mode 100644 src/app/breadcrumbs/breadcrumbs.component.html
 delete mode 100644 src/app/breadcrumbs/breadcrumbs.component.scss
 delete mode 100644 src/app/breadcrumbs/breadcrumbs.component.spec.ts
 delete mode 100644 src/app/breadcrumbs/breadcrumbs.component.ts
 delete mode 100644 src/app/pagination/pagination.component.html
 delete mode 100644 src/app/pagination/pagination.component.scss
 delete mode 100644 src/app/pagination/pagination.component.spec.ts
 delete mode 100644 src/app/pagination/pagination.component.ts

diff --git a/src/app/alerts/alerts.component.html b/src/app/alerts/alerts.component.html
deleted file mode 100644
index 5092c09..0000000
--- a/src/app/alerts/alerts.component.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<div class="row">
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Bootstrap alert</h4>
-        <p class="car-description">Add class <code>.alert .alert-*</code></p>
-        <div class="alert alert-success" role="alert">
-          You successfully read this important alert message.
-        </div>
-        <div class="alert alert-info" role="alert">
-          This alert needs your attention, but it's not that important.
-        </div>
-        <div class="alert alert-warning" role="alert">
-          Better check yourself, you're not looking too good.
-        </div>
-        <div class="alert alert-danger" role="alert">
-          Change a few things up and try submitting again.
-        </div>
-        <div class="alert alert-primary" role="alert">
-            This is a primary alert
-        </div>
-        <div class="alert alert-secondary" role="alert">
-          This alert is not so important.
-          </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Custom alerts</h4>
-        <p class="card-description">
-          Custom HTML inside alert
-        </p>
-        <div class="card card-inverse-secondary mb-5">
-          <div class="card-body">
-            <p class="mb-4">
-              Well done! You successfully read this important alert message.
-            </p>
-            <button class="btn btn-secondary">Ok</button>
-            <button class="btn btn-light">Cancel</button>
-          </div>
-        </div>
-        <div class="card card-inverse-info">
-          <div class="card-body">
-            <p class="mb-4">
-              Heads up! This alert needs your attention, but it's not super important.
-            </p>
-            <button class="btn btn-info">Ok</button>
-            <button class="btn btn-light">Cancel</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-12 grid-margin">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Bootstrap alerts in fill colors</h4>
-        <p class="card-description">
-          Add class <code>.alert-fill-*</code> with <code>.alert</code>
-        </p>
-        <div class="alert alert-fill-primary" role="alert">
-          <i class="mdi mdi-alert-circle"></i>
-          There! This is a primary alert.
-        </div>
-        <div class="alert alert-fill-success" role="alert">
-          <i class="mdi mdi-alert-circle"></i>
-          Well done! You successfully read this important alert message.
-        </div>
-        <div class="alert alert-fill-info" role="alert">
-          <i class="mdi mdi-alert-circle"></i>
-          Heads up! This alert needs your attention, but it's not super important.
-        </div>
-        <div class="alert alert-fill-warning" role="alert">
-          <i class="mdi mdi-alert-circle"></i>
-          Warning! Better check yourself, you're not looking too good.
-        </div>
-        <div class="alert alert-fill-danger" role="alert">
-          <i class="mdi mdi-alert-circle"></i>
-          Oh snap! Change a few things up and try submitting again.
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/app/alerts/alerts.component.scss b/src/app/alerts/alerts.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/alerts/alerts.component.spec.ts b/src/app/alerts/alerts.component.spec.ts
deleted file mode 100644
index db644c6..0000000
--- a/src/app/alerts/alerts.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AlertsComponent } from './alerts.component';
-
-describe('AlertsComponent', () => {
-  let component: AlertsComponent;
-  let fixture: ComponentFixture<AlertsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ AlertsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AlertsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/alerts/alerts.component.ts b/src/app/alerts/alerts.component.ts
deleted file mode 100644
index ba056ad..0000000
--- a/src/app/alerts/alerts.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-alerts',
-  templateUrl: './alerts.component.html',
-  styleUrls: ['./alerts.component.scss']
-})
-export class AlertsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index de698ce..0184187 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,11 +3,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FormsComponent } from './forms/forms.component';
 import { TablesComponent } from './tables/tables.component';
-import { AlertsComponent } from './alerts/alerts.component';
 import { AccordionsComponent } from './accordions/accordions.component';
 import { ProgressbarComponent } from './progressbar/progressbar.component';
-import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
-import { PaginationComponent } from './pagination/pagination.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
 import { TooltipsComponent } from './tooltips/tooltips.component';
 import { TabsComponent } from './tabs/tabs.component';
@@ -17,11 +14,8 @@ const routes: Routes = [
   { path: 'dashboard', component: DashboardComponent },
   { path: 'forms', component: FormsComponent },
   { path: 'tables', component: TablesComponent },
-  { path: 'alerts', component: AlertsComponent },
   { path: 'accordions', component: AccordionsComponent },
   { path: 'progressbar', component: ProgressbarComponent },
-  { path: 'breadcrumbs', component: BreadcrumbsComponent },
-  { path: 'pagination', component: PaginationComponent },
   { path: 'dropdowns', component: DropdownComponent },
   { path: 'tooltips', component: TooltipsComponent },
   { path: 'tabs', component: TabsComponent }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5f53f02..5e4706b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -13,11 +13,8 @@ import { FooterComponent } from './footer/footer.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FormsComponent } from './forms/forms.component';
 import { TablesComponent } from './tables/tables.component';
-import { AlertsComponent } from './alerts/alerts.component';
 import { AccordionsComponent } from './accordions/accordions.component';
 import { ProgressbarComponent } from './progressbar/progressbar.component';
-import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
-import { PaginationComponent } from './pagination/pagination.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
 import { TooltipsComponent } from './tooltips/tooltips.component';
 import { TabsComponent } from './tabs/tabs.component';
@@ -31,11 +28,8 @@ import { TabsComponent } from './tabs/tabs.component';
     DashboardComponent,
     FormsComponent,
     TablesComponent,
-    AlertsComponent,
     AccordionsComponent,
     ProgressbarComponent,
-    BreadcrumbsComponent,
-    PaginationComponent,
     DropdownComponent,
     TooltipsComponent,
     TabsComponent
diff --git a/src/app/breadcrumbs/breadcrumbs.component.html b/src/app/breadcrumbs/breadcrumbs.component.html
deleted file mode 100644
index 6cebb46..0000000
--- a/src/app/breadcrumbs/breadcrumbs.component.html
+++ /dev/null
@@ -1,213 +0,0 @@
-<div class="row">
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Breadcrumbs</h4>
-        <p class="card-description">Add class <code>.breadcrumbs</code></p>
-        <div class="template-demo">
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Library</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item"><a href="#">Data</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Files</li>
-            </ol>
-          </nav>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Custom Breadcrumbs</h4>
-        <p class="card-description">Add class <code>.breadcrumb-custom</code> for custom styling</p>
-        <div class="template-demo">
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb breadcrumb-custom">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item active" aria-current="page"><span>Library</span></li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb breadcrumb-custom">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page"><span>Data</span></li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb breadcrumb-custom">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item"><a href="#">Data</a></li>
-              <li class="breadcrumb-item active" aria-current="page"><span>Files</span></li>
-            </ol>
-          </nav>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Inverse Breadcrumbs</h4>
-        <p class="card-description">Add class <code>.bg-inverse-*</code> for inverse skin</p>
-        <div class="template-demo">
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-inverse-primary">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-inverse-info">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-inverse-danger">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-inverse-success">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-inverse-warning">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Inverse Custom Breadcrumbs</h4>
-        <p class="card-description">Add class <code>.bg-inverse-*</code> for inverse skin</p>
-        <div class="template-demo">
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb breadcrumb-custom bg-inverse-primary">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page"><span>Data</span></li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb breadcrumb-custom bg-inverse-info">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page"><span>Data</span></li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb breadcrumb-custom bg-inverse-danger">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page"><span>Data</span></li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb breadcrumb-custom bg-inverse-success">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page"><span>Data</span></li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb breadcrumb-custom bg-inverse-warning">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page"><span>Data</span></li>
-            </ol>
-          </nav>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-12 grid-margin">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Colored Breadcrumb Variations</h4>
-        <p class="card-description">Add class <code>.bg-*</code> for solid colored breadcrumb</p>
-        <div class="template-demo">
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-primary">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-info">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-danger">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-success">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-warning">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-light">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-          <nav aria-label="breadcrumb" role="navigation">
-            <ol class="breadcrumb bg-dark">
-              <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item"><a href="#">Library</a></li>
-              <li class="breadcrumb-item active" aria-current="page">Data</li>
-            </ol>
-          </nav>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/breadcrumbs/breadcrumbs.component.spec.ts
deleted file mode 100644
index 175ef83..0000000
--- a/src/app/breadcrumbs/breadcrumbs.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BreadcrumbsComponent } from './breadcrumbs.component';
-
-describe('BreadcrumbsComponent', () => {
-  let component: BreadcrumbsComponent;
-  let fixture: ComponentFixture<BreadcrumbsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ BreadcrumbsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(BreadcrumbsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/breadcrumbs/breadcrumbs.component.ts b/src/app/breadcrumbs/breadcrumbs.component.ts
deleted file mode 100644
index a599a8f..0000000
--- a/src/app/breadcrumbs/breadcrumbs.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-breadcrumbs',
-  templateUrl: './breadcrumbs.component.html',
-  styleUrls: ['./breadcrumbs.component.scss']
-})
-export class BreadcrumbsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/pagination/pagination.component.html b/src/app/pagination/pagination.component.html
deleted file mode 100644
index 38b01d7..0000000
--- a/src/app/pagination/pagination.component.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<div class="row">
-  <div class="col-md-4 col-sm-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Basic Paginations</h4>
-        <p class="card-description">Default bordered pagination</p>
-        <ngb-pagination [collectionSize]="40" [pageSize]="10" [page]="1" aria-label="Default pagination"></ngb-pagination>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 col-sm-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Flat Pagination</h4>
-        <p class="card-description">Add class <code>.pagination-flat</code></p>
-        <ngb-pagination [collectionSize]="40" [pageSize]="10" [page]="1" aria-label="Default pagination" class="pagination-flat pagination-success"></ngb-pagination>        
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 col-sm-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Separated  Pagination</h4>
-        <p class="card-description">Add class <code>.pagination-separated</code></p>
-        <ngb-pagination [collectionSize]="40" [pageSize]="10" [page]="1" aria-label="Default pagination" class="pagination-separated pagination-danger"></ngb-pagination>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 col-sm-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Bordered Rounded</h4>
-        <p class="card-description">Add class <code>.pagination-rounded</code></p>
-        <ngb-pagination [collectionSize]="40" [pageSize]="10" [page]="1" aria-label="Default pagination" class="pagination-rounded"></ngb-pagination>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 col-sm-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Flat Rounded Pagination</h4>
-        <p class="card-description">Add class <code>.pagination-rounded-flat</code></p>
-        <ngb-pagination [collectionSize]="40" [pageSize]="10" [page]="1" aria-label="Default pagination" class="pagination-rounded-flat pagination-success"></ngb-pagination>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 col-sm-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Separated Rounded</h4>
-        <p class="card-description">Add class <code>.pagination-rounded-separated</code></p>
-        <ngb-pagination [collectionSize]="40" [pageSize]="10" [page]="1" aria-label="Default pagination" class="pagination-rounded-separated pagination-danger"></ngb-pagination>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 col-sm-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Left Position</h4>
-        <p class="card-description">Left Pagination</p>
-        <ngb-pagination [collectionSize]="40" [pageSize]="10" [page]="1" aria-label="Default pagination" class="d-flex justify-content-start"></ngb-pagination>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 col-sm-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Center Position</h4>
-        <p class="card-description">Centered Pagination</p>
-        <ngb-pagination [collectionSize]="40" [pageSize]="10" [page]="1" aria-label="Default pagination" class="d-flex justify-content-center pagination-success"></ngb-pagination>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-4 col-sm-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Right Position</h4>
-        <p class="card-description">Right Pagination</p>
-        <ngb-pagination [collectionSize]="40" [pageSize]="10" [page]="1" aria-label="Default pagination" class="d-flex justify-content-end pagination-danger"></ngb-pagination>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/app/pagination/pagination.component.scss b/src/app/pagination/pagination.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/pagination/pagination.component.spec.ts b/src/app/pagination/pagination.component.spec.ts
deleted file mode 100644
index 477bf5e..0000000
--- a/src/app/pagination/pagination.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PaginationComponent } from './pagination.component';
-
-describe('PaginationComponent', () => {
-  let component: PaginationComponent;
-  let fixture: ComponentFixture<PaginationComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PaginationComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PaginationComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/pagination/pagination.component.ts b/src/app/pagination/pagination.component.ts
deleted file mode 100644
index 6160162..0000000
--- a/src/app/pagination/pagination.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-pagination',
-  templateUrl: './pagination.component.html',
-  styleUrls: ['./pagination.component.scss']
-})
-export class PaginationComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
index 8b70080..4d12272 100644
--- a/src/app/sidebar/sidebar.component.html
+++ b/src/app/sidebar/sidebar.component.html
@@ -56,30 +56,13 @@
         <span class="menu-title">Settings</span>
       </a>
     </li>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/breadcrumbs" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-flag-outline"></i>
-        <span class="menu-title">Breadcrumb</span>
-      </a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/pagination" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-loupe"></i>
-        <span class="menu-title">Pagination</span>
-      </a>
-    </li>
+
     <li class="nav-item">
       <a class="nav-link" routerLink="/tables" routerLinkActive="active">
         <i class="menu-icon mdi mdi-table"></i>
         <span class="menu-title">Tables</span>
       </a>
     </li>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/alerts" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-shield-outline"></i>
-        <span class="menu-title">Alerts</span>
-      </a>
-    </li>
     <li class="nav-item">
       <a class="nav-link" routerLink="/accordions" routerLinkActive="active">
         <i class="menu-icon mdi mdi-altimeter"></i>

From 3a2d19f32cf3b23974c74b1c1e61edd0527630d7 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 02:53:46 +0800
Subject: [PATCH 12/20] Updated nav and sidebar. Deleted unecessary components.

---
 src/app/app-routing.module.ts           |   4 -
 src/app/app.module.ts                   |   4 -
 src/app/navbar/navbar.component.html    |   2 +-
 src/app/sidebar/sidebar.component.html  |  18 +-
 src/app/tables/tables.component.html    | 732 ------------------------
 src/app/tables/tables.component.scss    |   1 -
 src/app/tables/tables.component.spec.ts |  25 -
 src/app/tables/tables.component.ts      |  17 -
 src/app/tabs/tabs.component.html        | 305 ----------
 src/app/tabs/tabs.component.scss        |   0
 src/app/tabs/tabs.component.spec.ts     |  25 -
 src/app/tabs/tabs.component.ts          |  15 -
 12 files changed, 4 insertions(+), 1144 deletions(-)
 delete mode 100644 src/app/tables/tables.component.html
 delete mode 100644 src/app/tables/tables.component.scss
 delete mode 100644 src/app/tables/tables.component.spec.ts
 delete mode 100644 src/app/tables/tables.component.ts
 delete mode 100644 src/app/tabs/tabs.component.html
 delete mode 100644 src/app/tabs/tabs.component.scss
 delete mode 100644 src/app/tabs/tabs.component.spec.ts
 delete mode 100644 src/app/tabs/tabs.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0184187..9ff404e 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -2,23 +2,19 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FormsComponent } from './forms/forms.component';
-import { TablesComponent } from './tables/tables.component';
 import { AccordionsComponent } from './accordions/accordions.component';
 import { ProgressbarComponent } from './progressbar/progressbar.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
 import { TooltipsComponent } from './tooltips/tooltips.component';
-import { TabsComponent } from './tabs/tabs.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   { path: 'dashboard', component: DashboardComponent },
   { path: 'forms', component: FormsComponent },
-  { path: 'tables', component: TablesComponent },
   { path: 'accordions', component: AccordionsComponent },
   { path: 'progressbar', component: ProgressbarComponent },
   { path: 'dropdowns', component: DropdownComponent },
   { path: 'tooltips', component: TooltipsComponent },
-  { path: 'tabs', component: TabsComponent }
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5e4706b..29bcaf9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,12 +12,10 @@ import { SidebarComponent } from './sidebar/sidebar.component';
 import { FooterComponent } from './footer/footer.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FormsComponent } from './forms/forms.component';
-import { TablesComponent } from './tables/tables.component';
 import { AccordionsComponent } from './accordions/accordions.component';
 import { ProgressbarComponent } from './progressbar/progressbar.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
 import { TooltipsComponent } from './tooltips/tooltips.component';
-import { TabsComponent } from './tabs/tabs.component';
 
 @NgModule({
   declarations: [
@@ -27,12 +25,10 @@ import { TabsComponent } from './tabs/tabs.component';
     FooterComponent,
     DashboardComponent,
     FormsComponent,
-    TablesComponent,
     AccordionsComponent,
     ProgressbarComponent,
     DropdownComponent,
     TooltipsComponent,
-    TabsComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 0075c67..8b09934 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,7 +1,7 @@
 <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
   <div class="text-center navbar-brand-wrapper d-flex align-items-top justify-content-center">
     <a class="navbar-brand brand-logo" href="index.html">
-      <img src="assets/images/logo.svg" alt="logo" />
+        <img src="assets/images/logo.svg" alt="logo" />
     </a>
     <a class="navbar-brand brand-logo-mini" href="index.html">
       <img src="assets/images/logo-mini.svg" alt="logo" />
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
index 4d12272..de03fa1 100644
--- a/src/app/sidebar/sidebar.component.html
+++ b/src/app/sidebar/sidebar.component.html
@@ -44,29 +44,17 @@
         <span class="menu-title">Chat</span>
       </a>
     </li>
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/tabs" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-lightbulb-outline"></i>
-        <span class="menu-title">Contact Support</span>
-      </a>
-    </li>
+
     <li class="nav-item">
       <a class="nav-link" routerLink="/dropdowns" routerLinkActive="active">
         <i class="menu-icon mdi mdi-settings"></i>
         <span class="menu-title">Settings</span>
       </a>
     </li>
-
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/tables" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-table"></i>
-        <span class="menu-title">Tables</span>
-      </a>
-    </li>
     <li class="nav-item">
       <a class="nav-link" routerLink="/accordions" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-altimeter"></i>
-        <span class="menu-title">Accordion</span>
+        <i class="menu-icon mdi mdi-phone"></i>
+        <span class="menu-title">Contact Us</span>
       </a>
     </li>
   </ul>
diff --git a/src/app/tables/tables.component.html b/src/app/tables/tables.component.html
deleted file mode 100644
index 683ae88..0000000
--- a/src/app/tables/tables.component.html
+++ /dev/null
@@ -1,732 +0,0 @@
-<div class="row">
-  <div class="col-lg-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Basic Table</h4>
-        <p class="card-description">
-          Add class
-          <code>.table</code>
-        </p>
-        <div class="table-responsive">
-          <table class="table">
-            <thead>
-              <tr>
-                <th>Profile</th>
-                <th>VatNo.</th>
-                <th>Created</th>
-                <th>Status</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Jacob</td>
-                <td>53275531</td>
-                <td>12 May 2017</td>
-                <td>
-                  <label class="badge badge-danger">Pending</label>
-                </td>
-              </tr>
-              <tr>
-                <td>Messsy</td>
-                <td>53275532</td>
-                <td>15 May 2017</td>
-                <td>
-                  <label class="badge badge-warning">In progress</label>
-                </td>
-              </tr>
-              <tr>
-                <td>John</td>
-                <td>53275533</td>
-                <td>14 May 2017</td>
-                <td>
-                  <label class="badge badge-info">Fixed</label>
-                </td>
-              </tr>
-              <tr>
-                <td>Peter</td>
-                <td>53275534</td>
-                <td>16 May 2017</td>
-                <td>
-                  <label class="badge badge-success">Completed</label>
-                </td>
-              </tr>
-              <tr>
-                <td>Dave</td>
-                <td>53275535</td>
-                <td>20 May 2017</td>
-                <td>
-                  <label class="badge badge-warning">In progress</label>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Hoverable Table</h4>
-        <p class="card-description">
-          Add class
-          <code>.table-hover</code>
-        </p>
-        <div class="table-responsive">
-          <table class="table table-hover">
-            <thead>
-              <tr>
-                <th>User</th>
-                <th>Product</th>
-                <th>Sale</th>
-                <th>Status</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>Jacob</td>
-                <td>Photoshop</td>
-                <td class="text-danger"> 28.76%
-                  <i class="mdi mdi-arrow-down"></i>
-                </td>
-                <td>
-                  <label class="badge badge-danger">Pending</label>
-                </td>
-              </tr>
-              <tr>
-                <td>Messsy</td>
-                <td>Flash</td>
-                <td class="text-danger"> 21.06%
-                  <i class="mdi mdi-arrow-down"></i>
-                </td>
-                <td>
-                  <label class="badge badge-warning">In progress</label>
-                </td>
-              </tr>
-              <tr>
-                <td>John</td>
-                <td>Premier</td>
-                <td class="text-danger"> 35.00%
-                  <i class="mdi mdi-arrow-down"></i>
-                </td>
-                <td>
-                  <label class="badge badge-info">Fixed</label>
-                </td>
-              </tr>
-              <tr>
-                <td>Peter</td>
-                <td>After effects</td>
-                <td class="text-success"> 82.00%
-                  <i class="mdi mdi-arrow-up"></i>
-                </td>
-                <td>
-                  <label class="badge badge-success">Completed</label>
-                </td>
-              </tr>
-              <tr>
-                <td>Dave</td>
-                <td>53275535</td>
-                <td class="text-success"> 98.05%
-                  <i class="mdi mdi-arrow-up"></i>
-                </td>
-                <td>
-                  <label class="badge badge-warning">In progress</label>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-12 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Striped Table</h4>
-        <p class="card-description">
-          Add class
-          <code>.table-striped</code>
-        </p>
-        <div class="table-responsive">
-          <table class="table table-striped">
-            <thead>
-              <tr>
-                <th>
-                  User
-                </th>
-                <th>
-                  First name
-                </th>
-                <th>
-                  Progress
-                </th>
-                <th>
-                  Amount
-                </th>
-                <th>
-                  Deadline
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="py-1">
-                  <img src="assets/images/faces-clipart/pic-1.png" alt="image" />
-                </td>
-                <td>
-                  Herman Beck
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 77.99
-                </td>
-                <td>
-                  May 15, 2015
-                </td>
-              </tr>
-              <tr>
-                <td class="py-1">
-                  <img src="assets/images/faces-clipart/pic-2.png" alt="image" />
-                </td>
-                <td>
-                  Messsy Adam
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $245.30
-                </td>
-                <td>
-                  July 1, 2015
-                </td>
-              </tr>
-              <tr>
-                <td class="py-1">
-                  <img src="assets/images/faces-clipart/pic-3.png" alt="image" />
-                </td>
-                <td>
-                  John Richards
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $138.00
-                </td>
-                <td>
-                  Apr 12, 2015
-                </td>
-              </tr>
-              <tr>
-                <td class="py-1">
-                  <img src="assets/images/faces-clipart/pic-4.png" alt="image" />
-                </td>
-                <td>
-                  Peter Meggik
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 77.99
-                </td>
-                <td>
-                  May 15, 2015
-                </td>
-              </tr>
-              <tr>
-                <td class="py-1">
-                  <img src="assets/images/faces-clipart/pic-1.png" alt="image" />
-                </td>
-                <td>
-                  Edward
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 160.25
-                </td>
-                <td>
-                  May 03, 2015
-                </td>
-              </tr>
-              <tr>
-                <td class="py-1">
-                  <img src="assets/images/faces-clipart/pic-2.png" alt="image" />
-                </td>
-                <td>
-                  John Doe
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-info" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 123.21
-                </td>
-                <td>
-                  April 05, 2015
-                </td>
-              </tr>
-              <tr>
-                <td class="py-1">
-                  <img src="assets/images/faces-clipart/pic-3.png" alt="image" />
-                </td>
-                <td>
-                  Henry Tom
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 150.00
-                </td>
-                <td>
-                  June 16, 2015
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-12 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Bordered table</h4>
-        <p class="card-description">
-          Add class
-          <code>.table-bordered</code>
-        </p>
-        <div class="table-responsive">
-          <table class="table table-bordered">
-            <thead>
-              <tr>
-                <th>
-                  #
-                </th>
-                <th>
-                  First name
-                </th>
-                <th>
-                  Progress
-                </th>
-                <th>
-                  Amount
-                </th>
-                <th>
-                  Deadline
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  1
-                </td>
-                <td>
-                  Herman Beck
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 77.99
-                </td>
-                <td>
-                  May 15, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  2
-                </td>
-                <td>
-                  Messsy Adam
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $245.30
-                </td>
-                <td>
-                  July 1, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  3
-                </td>
-                <td>
-                  John Richards
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $138.00
-                </td>
-                <td>
-                  Apr 12, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  4
-                </td>
-                <td>
-                  Peter Meggik
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 77.99
-                </td>
-                <td>
-                  May 15, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  5
-                </td>
-                <td>
-                  Edward
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 160.25
-                </td>
-                <td>
-                  May 03, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  6
-                </td>
-                <td>
-                  John Doe
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-info" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 123.21
-                </td>
-                <td>
-                  April 05, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  7
-                </td>
-                <td>
-                  Henry Tom
-                </td>
-                <td>
-                  <div class="progress">
-                    <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
-                  </div>
-                </td>
-                <td>
-                  $ 150.00
-                </td>
-                <td>
-                  June 16, 2015
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-12 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Inverse table</h4>
-        <p class="card-description">
-          Add class
-          <code>.table-dark</code>
-        </p>
-        <div class="table-responsive">
-          <table class="table table-dark">
-            <thead>
-              <tr>
-                <th>
-                  #
-                </th>
-                <th>
-                  First name
-                </th>
-                <th>
-                  Amount
-                </th>
-                <th>
-                  Deadline
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  1
-                </td>
-                <td>
-                  Herman Beck
-                </td>
-                <td>
-                  $ 77.99
-                </td>
-                <td>
-                  May 15, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  2
-                </td>
-                <td>
-                  Messsy Adam
-                </td>
-                <td>
-                  $245.30
-                </td>
-                <td>
-                  July 1, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  3
-                </td>
-                <td>
-                  John Richards
-                </td>
-                <td>
-                  $138.00
-                </td>
-                <td>
-                  Apr 12, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  4
-                </td>
-                <td>
-                  Peter Meggik
-                </td>
-                <td>
-                  $ 77.99
-                </td>
-                <td>
-                  May 15, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  5
-                </td>
-                <td>
-                  Edward
-                </td>
-                <td>
-                  $ 160.25
-                </td>
-                <td>
-                  May 03, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  6
-                </td>
-                <td>
-                  John Doe
-                </td>
-                <td>
-                  $ 123.21
-                </td>
-                <td>
-                  April 05, 2015
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  7
-                </td>
-                <td>
-                  Henry Tom
-                </td>
-                <td>
-                  $ 150.00
-                </td>
-                <td>
-                  June 16, 2015
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-lg-12 stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Table with contextual classes</h4>
-        <p class="card-description">
-          Add class
-          <code>.table-{{ '{' }}color{{ '}' }}</code>
-        </p>
-        <div class="table-responsive">
-          <table class="table table-bordered">
-            <thead>
-              <tr>
-                <th>
-                  #
-                </th>
-                <th>
-                  First name
-                </th>
-                <th>
-                  Product
-                </th>
-                <th>
-                  Amount
-                </th>
-                <th>
-                  Deadline
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr class="table-info">
-                <td>
-                  1
-                </td>
-                <td>
-                  Herman Beck
-                </td>
-                <td>
-                  Photoshop
-                </td>
-                <td>
-                  $ 77.99
-                </td>
-                <td>
-                  May 15, 2015
-                </td>
-              </tr>
-              <tr class="table-warning">
-                <td>
-                  2
-                </td>
-                <td>
-                  Messsy Adam
-                </td>
-                <td>
-                  Flash
-                </td>
-                <td>
-                  $245.30
-                </td>
-                <td>
-                  July 1, 2015
-                </td>
-              </tr>
-              <tr class="table-danger">
-                <td>
-                  3
-                </td>
-                <td>
-                  John Richards
-                </td>
-                <td>
-                  Premeire
-                </td>
-                <td>
-                  $138.00
-                </td>
-                <td>
-                  Apr 12, 2015
-                </td>
-              </tr>
-              <tr class="table-success">
-                <td>
-                  4
-                </td>
-                <td>
-                  Peter Meggik
-                </td>
-                <td>
-                  After effects
-                </td>
-                <td>
-                  $ 77.99
-                </td>
-                <td>
-                  May 15, 2015
-                </td>
-              </tr>
-              <tr class="table-primary">
-                <td>
-                  5
-                </td>
-                <td>
-                  Edward
-                </td>
-                <td>
-                  Illustrator
-                </td>
-                <td>
-                  $ 160.25
-                </td>
-                <td>
-                  May 03, 2015
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/app/tables/tables.component.scss b/src/app/tables/tables.component.scss
deleted file mode 100644
index 8b13789..0000000
--- a/src/app/tables/tables.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/app/tables/tables.component.spec.ts b/src/app/tables/tables.component.spec.ts
deleted file mode 100644
index 58dd179..0000000
--- a/src/app/tables/tables.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TablesComponent } from './tables.component';
-
-describe('TablesComponent', () => {
-  let component: TablesComponent;
-  let fixture: ComponentFixture<TablesComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TablesComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TablesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/tables/tables.component.ts b/src/app/tables/tables.component.ts
deleted file mode 100644
index 39d0bb8..0000000
--- a/src/app/tables/tables.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'app-tables',
-  templateUrl: './tables.component.html',
-  styleUrls: ['./tables.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class TablesComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html
deleted file mode 100644
index a7a05e8..0000000
--- a/src/app/tabs/tabs.component.html
+++ /dev/null
@@ -1,305 +0,0 @@
-<div class="row">
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Basic Tab</h4>
-        <p class="card-description">Use class <code>.tab-basic</code> for basic styling</p>
-        <ngb-tabset class="tab-basic">
-          <ngb-tab title="Home">
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/4.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab title="Profile">
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/7.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab title="Contact">
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/2.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-        </ngb-tabset>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Tab With Icon</h4>
-        <p class="card-description">Use class <code>.tab-basic</code></p>
-        <ngb-tabset class="tab-basic">
-          <ngb-tab>
-            <ng-template ngbTabTitle>
-              <i class="mdi mdi-home-outline"></i>Home
-            </ng-template>
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/1.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab>
-            <ng-template ngbTabTitle>
-              <i class="mdi mdi-account-outline"></i>Profile
-            </ng-template>
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/6.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab>
-            <ng-template ngbTabTitle>
-              <i class="mdi mdi-message-text-outline"></i>Contact
-            </ng-template>
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/3.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-        </ngb-tabset>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Vertical Basic Tab</h4>
-        <p class="card-description">Use class <code>.vertical-tab</code> for vertical tab</p>
-        <ngb-tabset class="tab-basic vertical-tab">
-          <ngb-tab title="Home">
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/9.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab title="Profile">
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/10.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab title="Contact">
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/11.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-        </ngb-tabset>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Vertical Tab With Icon</h4>
-        <p class="card-description">Use class <code>.vertical-tab</code> for vertical tab</p>
-        <ngb-tabset class="tab-basic vertical-tab">
-          <ngb-tab>
-            <ng-template ngbTabTitle>
-              <i class="mdi mdi-home-outline"></i>Home
-            </ng-template>
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/14.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab>
-            <ng-template ngbTabTitle>
-              <i class="mdi mdi-account-outline"></i>Profile
-            </ng-template>
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/5.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab>
-            <ng-template ngbTabTitle>
-              <i class="mdi mdi-message-text-outline"></i>Contact
-            </ng-template>
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/2.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-        </ngb-tabset>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Colored Tab</h4>
-        <p class="card-description">Use class <code>.tab-solid</code> with <code>.tab-solid-*</code> for solid styled tab</p>
-        <ngb-tabset class="tab-solid tab-solid-danger">
-          <ngb-tab title="Home">
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/3.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab title="Profile">
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/8.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab title="Contact">
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/10.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-        </ngb-tabset>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Colored Tab With Icons</h4>
-        <p class="card-description">Use class <code>.tab-solid</code> with <code>.tab-solid-*</code> for solid styled tab</p>
-        <ngb-tabset class="tab-solid tab-solid-primary">
-          <ngb-tab>
-            <ng-template ngbTabTitle>
-              <i class="mdi mdi-home-outline"></i>Home
-            </ng-template>
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/13.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab>
-            <ng-template ngbTabTitle>
-              <i class="mdi mdi-account-outline"></i>Profile
-            </ng-template>
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/9.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-          <ngb-tab>
-            <ng-template ngbTabTitle>
-              <i class="mdi mdi-message-text-outline"></i>Contact
-            </ng-template>
-            <ng-template ngbTabContent>
-              <div class="row">
-                <div class="col-md-4"><img class="img-fluid w-100 rounded" src="assets/images/samples/300x300/8.jpg" alt=""></div>
-                <div class="col-md-8">
-                  <h5 class="mb-3">Heading</h5>
-                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi molestias iusto qui eos, vero provident ipsa neque! Molestiae, aperiam</p>
-                </div>
-              </div>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ipsa odio dolore perspiciatis laudantium repellat quae, facere, laboriosam omnis dolorem quaerat quis assumenda!</p>
-            </ng-template>
-          </ngb-tab>
-        </ngb-tabset>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/tabs/tabs.component.spec.ts b/src/app/tabs/tabs.component.spec.ts
deleted file mode 100644
index 96b5fd0..0000000
--- a/src/app/tabs/tabs.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TabsComponent } from './tabs.component';
-
-describe('TabsComponent', () => {
-  let component: TabsComponent;
-  let fixture: ComponentFixture<TabsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TabsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TabsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/tabs/tabs.component.ts b/src/app/tabs/tabs.component.ts
deleted file mode 100644
index 839e501..0000000
--- a/src/app/tabs/tabs.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-tabs',
-  templateUrl: './tabs.component.html',
-  styleUrls: ['./tabs.component.scss']
-})
-export class TabsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

From f8dcdbb4401608e2ffbd807bf9962ddd9c083986 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 03:06:58 +0800
Subject: [PATCH 13/20] Deleted unnecessary components

---
 src/app/app-routing.module.ts               |  2 -
 src/app/app.module.ts                       |  2 -
 src/app/sidebar/sidebar.component.html      |  9 +-
 src/app/tooltips/tooltips.component.html    | 92 ---------------------
 src/app/tooltips/tooltips.component.scss    |  0
 src/app/tooltips/tooltips.component.spec.ts | 25 ------
 src/app/tooltips/tooltips.component.ts      | 15 ----
 7 files changed, 1 insertion(+), 144 deletions(-)
 delete mode 100644 src/app/tooltips/tooltips.component.html
 delete mode 100644 src/app/tooltips/tooltips.component.scss
 delete mode 100644 src/app/tooltips/tooltips.component.spec.ts
 delete mode 100644 src/app/tooltips/tooltips.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 9ff404e..4b20b1b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -5,7 +5,6 @@ import { FormsComponent } from './forms/forms.component';
 import { AccordionsComponent } from './accordions/accordions.component';
 import { ProgressbarComponent } from './progressbar/progressbar.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
-import { TooltipsComponent } from './tooltips/tooltips.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
@@ -14,7 +13,6 @@ const routes: Routes = [
   { path: 'accordions', component: AccordionsComponent },
   { path: 'progressbar', component: ProgressbarComponent },
   { path: 'dropdowns', component: DropdownComponent },
-  { path: 'tooltips', component: TooltipsComponent },
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 29bcaf9..120eaf1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -15,7 +15,6 @@ import { FormsComponent } from './forms/forms.component';
 import { AccordionsComponent } from './accordions/accordions.component';
 import { ProgressbarComponent } from './progressbar/progressbar.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
-import { TooltipsComponent } from './tooltips/tooltips.component';
 
 @NgModule({
   declarations: [
@@ -28,7 +27,6 @@ import { TooltipsComponent } from './tooltips/tooltips.component';
     AccordionsComponent,
     ProgressbarComponent,
     DropdownComponent,
-    TooltipsComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
index de03fa1..b995fea 100644
--- a/src/app/sidebar/sidebar.component.html
+++ b/src/app/sidebar/sidebar.component.html
@@ -37,14 +37,7 @@
         <span class="menu-title">Track Your Product</span>
       </a>
     </li>
-
-    <li class="nav-item">
-      <a class="nav-link" routerLink="/tooltips" routerLinkActive="active">
-        <i class="menu-icon mdi mdi-forum"></i>
-        <span class="menu-title">Chat</span>
-      </a>
-    </li>
-
+    
     <li class="nav-item">
       <a class="nav-link" routerLink="/dropdowns" routerLinkActive="active">
         <i class="menu-icon mdi mdi-settings"></i>
diff --git a/src/app/tooltips/tooltips.component.html b/src/app/tooltips/tooltips.component.html
deleted file mode 100644
index 1ddc54e..0000000
--- a/src/app/tooltips/tooltips.component.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<div class="row">
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Basic tooltip</h4>
-        <p class="card-description">Basic tooltip demo that appears on hover</p>
-        <p>Hover the below button for interactive demo</p>
-        <button class="btn btn-warning" placement="bottom" ngbTooltip="Basic tooltip">Hover me</button>
-      </div>
-      <div class="card-body">
-        <h4 class="card-title">Tooltip positions</h4>
-        <p class="card-description">Add attribute <code>placement=position</code> to the element</p>
-        <div class="tooltip-static-demo">
-          <div class="tooltip bs-tooltip-top bs-tooltip-top-demo" role="tooltip">
-            <div class="arrow"></div>
-            <div class="tooltip-inner">
-              Top Tooltip
-            </div>
-          </div>
-          <div class="tooltip bs-tooltip-right bs-tooltip-right-demo" role="tooltip">
-            <div class="arrow"></div>
-            <div class="tooltip-inner">
-              Right Tooltip
-            </div>
-          </div>
-          <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-demo" role="tooltip">
-            <div class="arrow"></div>
-            <div class="tooltip-inner">
-              Bottom Tooltip
-            </div>
-          </div>
-          <div class="tooltip bs-tooltip-left bs-tooltip-left-demo" role="tooltip">
-            <div class="arrow"></div>
-            <div class="tooltip-inner">
-              Left Tooltip
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Basic popover</h4>
-        <p class="card-description">Basic popover demo that appears on click</p>
-        <p>Click the below button for interactive demo</p>
-        <button type="button" class="btn btn-success" placement="bottom" popoverTitle="Popover title" 
-        ngbPopover="Sed posuere consectetur est at lobortis. Aenean eu leo quam.">Click me</button>
-      </div>
-    </div>
-  </div>
-  <div class="col-12">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Popover positions</h4>
-        <p class="card-description">Add attribute <code>data-placement="{{'{'}}position{{'}'}}"</code> to the element</p>
-        <div class="popover-static-demo">
-          <div class="popover bs-popover-top bs-popover-top-demo">
-            <div class="arrow"></div>
-            <h3 class="popover-header">Popover top</h3>
-            <div class="popover-body">
-              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
-            </div>
-          </div>
-          <div class="popover bs-popover-right bs-popover-right-demo">
-            <div class="arrow"></div>
-            <h3 class="popover-header">Popover right</h3>
-            <div class="popover-body">
-              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
-            </div>
-          </div>
-          <div class="popover bs-popover-bottom bs-popover-bottom-demo">
-            <div class="arrow"></div>
-            <h3 class="popover-header">Popover bottom</h3>
-            <div class="popover-body">
-              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
-            </div>
-          </div>
-          <div class="popover bs-popover-left bs-popover-left-demo">
-            <div class="arrow"></div>
-            <h3 class="popover-header">Popover left</h3>
-            <div class="popover-body">
-              <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.</p>
-            </div>
-          </div>
-          <div class="clearfix"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/app/tooltips/tooltips.component.scss b/src/app/tooltips/tooltips.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/tooltips/tooltips.component.spec.ts b/src/app/tooltips/tooltips.component.spec.ts
deleted file mode 100644
index 121b5b7..0000000
--- a/src/app/tooltips/tooltips.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TooltipsComponent } from './tooltips.component';
-
-describe('TooltipsComponent', () => {
-  let component: TooltipsComponent;
-  let fixture: ComponentFixture<TooltipsComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TooltipsComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TooltipsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/tooltips/tooltips.component.ts b/src/app/tooltips/tooltips.component.ts
deleted file mode 100644
index c1ca1ee..0000000
--- a/src/app/tooltips/tooltips.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-tooltips',
-  templateUrl: './tooltips.component.html',
-  styleUrls: ['./tooltips.component.scss']
-})
-export class TooltipsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

From 3a927b47cd5816bbed901a0c92eedb4a13228b25 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 03:44:36 +0800
Subject: [PATCH 14/20] Updated the products

---
 src/app/forms/forms.component.html | 66 ++++++++++++++----------------
 1 file changed, 30 insertions(+), 36 deletions(-)

diff --git a/src/app/forms/forms.component.html b/src/app/forms/forms.component.html
index 46790a4..d232e6d 100644
--- a/src/app/forms/forms.component.html
+++ b/src/app/forms/forms.component.html
@@ -2,15 +2,14 @@
   <div class="col-md-4 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
-        <h2 class="card-title">Your Product Title Here</h2>
+        <h2 class="card-title">Vans Old Skool Sneakers</h2>
         <div class="template-demo">
-          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+          <img class="card-img-top" src="http://i64.tinypic.com/21mugib.jpg" alt="Card image cap">
     <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+      <p class="card-text">Selling this good pair of Vans sneakers! Purchase it now!</p>
         <ul class="list-group list-group-flush">
-          <li class="list-group-item">Cras justo odio</li>
-          <li class="list-group-item">Dapibus ac facilisis in</li>
+          <li class="list-group-item">Quantity: Limited Stock</li>
+          <li class="list-group-item">PRICE: 45 DKK</li>
         </ul>
         <div class=card>
         <div class="card-body">
@@ -26,15 +25,14 @@ <h5 class="card-title">Card title</h5>
   <div class="col-md-4 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
-        <h2 class="card-title">Your Product Title Here</h2>
+        <h2 class="card-title">Spiral Notebooks</h2>
         <div class="template-demo">
-          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+          <img class="card-img-top" src="http://i63.tinypic.com/28tb0cm.jpg" alt="Card image cap">
     <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+      <p class="card-text">Spiral Notebooks! All kinds of colors are available! </p>
         <ul class="list-group list-group-flush">
-          <li class="list-group-item">Cras justo odio</li>
-          <li class="list-group-item">Dapibus ac facilisis in</li>
+          <li class="list-group-item">Quantity: Limited Stock</li>
+          <li class="list-group-item">Price: 10 DKK</li>
         </ul>
         <div class=card>
         <div class="card-body">
@@ -50,15 +48,14 @@ <h5 class="card-title">Card title</h5>
   <div class="col-md-4 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
-        <h2 class="card-title">Your Product Title Here</h2>
+        <h2 class="card-title">Business Books for Sale!</h2>
         <div class="template-demo">
-          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+          <img class="card-img-top" src="http://i67.tinypic.com/2vmvjpk.jpg" alt="Card image cap">
     <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+      <p class="card-text">Selling different types of business books! Remember to purchase them now!/p>
         <ul class="list-group list-group-flush">
-          <li class="list-group-item">Cras justo odio</li>
-          <li class="list-group-item">Dapibus ac facilisis in</li>
+          <li class="list-group-item">Quantity: Limited Stock</li>
+          <li class="list-group-item">Price: 100 DKK</li>
         </ul>
         <div class=card>
         <div class="card-body">
@@ -74,15 +71,14 @@ <h5 class="card-title">Card title</h5>
   <div class="col-md-4 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
-        <h2 class="card-title">Your Product Title Here</h2>
+        <h2 class="card-title">Rains Backpack (Authentic)</h2>
         <div class="template-demo">
-          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+          <img class="card-img-top" src="http://i63.tinypic.com/308jqxs.jpg" alt="Card image cap">
     <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+      <p class="card-text">Selling a water and dust resistant backpack. Purchase now!</p>
         <ul class="list-group list-group-flush">
-          <li class="list-group-item">Cras justo odio</li>
-          <li class="list-group-item">Dapibus ac facilisis in</li>
+          <li class="list-group-item">Quantity: Limited Stock</li>
+          <li class="list-group-item">Price 400 DKK</li>
         </ul>
         <div class=card>
         <div class="card-body">
@@ -98,15 +94,14 @@ <h5 class="card-title">Card title</h5>
   <div class="col-md-4 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
-        <h2 class="card-title">Your Product Title Here</h2>
+        <h2 class="card-title">Blingy Watches</h2>
         <div class="template-demo">
-          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+          <img class="card-img-top" src="http://i66.tinypic.com/2cqmv48.jpg" alt="Card image cap">
     <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+      <p class="card-text">Selling blingy watches. Durable yet affordable!</p>
         <ul class="list-group list-group-flush">
-          <li class="list-group-item">Cras justo odio</li>
-          <li class="list-group-item">Dapibus ac facilisis in</li>
+          <li class="list-group-item">Quantity: Limited Stock</li>
+          <li class="list-group-item">Price 100 DKK</li>
         </ul>
         <div class=card>
         <div class="card-body">
@@ -122,15 +117,14 @@ <h5 class="card-title">Card title</h5>
   <div class="col-md-4 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
-        <h2 class="card-title">Your Product Title Here</h2>
+        <h2 class="card-title">Glitter Ballpens</h2>
         <div class="template-demo">
-          <img class="card-img-top" src="http://i67.tinypic.com/28ip7xc.jpg" alt="Card image cap">
+          <img class="card-img-top" src="http://i66.tinypic.com/2j1u8gg.jpg" alt="Card image cap">
     <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content</p>
+      <p class="card-text">Glitter ballpens with all sorts of colors! Purchase now!</p>
         <ul class="list-group list-group-flush">
-          <li class="list-group-item">Cras justo odio</li>
-          <li class="list-group-item">Dapibus ac facilisis in</li>
+          <li class="list-group-item">Quantity: Limited Stock</li>
+          <li class="list-group-item">Price 400 DKK</li>
         </ul>
         <div class=card>
         <div class="card-body">

From 30035f0ecffb1f36be5fc3a5a6f247cfce086f7c Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 09:17:06 +0800
Subject: [PATCH 15/20] Updated the contact us part

---
 src/app/accordions/accordions.component.html | 23 ++++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/app/accordions/accordions.component.html b/src/app/accordions/accordions.component.html
index b2fcdaf..19101f1 100644
--- a/src/app/accordions/accordions.component.html
+++ b/src/app/accordions/accordions.component.html
@@ -2,37 +2,36 @@
   <div class="col-lg-6 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
-        <h4 class="card-title">Basic accordions</h4>
-        <p class="card-description">Use class <code>.accordion</code> for Basic Accordion</p>
+        <h4 class="card-title">Need Help?</h4>
         <ngb-accordion [closeOthers]="true" activeIds="static-1" class="accordion">
           <ngb-panel id="static-1">
             <ng-template ngbPanelTitle>
               <h6 class="mb-0">
-                  How can I pay for an order I placed?
+                  How to deal safely online?
               </h6>
             </ng-template>
             <ng-template ngbPanelContent>
-                You can pay for the product you have purchased using credit cards, debit cards, 
-                or via online banking. We also provide cash-on-delivery services for most of our 
-                products. You can also use your account wallet for payment.
+                You can let your customers pay for the product you have purchased using credit cards, debit cards, 
+                or via online banking. Our mode of payment is secure with blockchain technology features 
+                that can verify your customers identity.
             </ng-template>
           </ngb-panel>
           <ngb-panel id="static-2">
             <ng-template ngbPanelTitle>
               <h6 class="mb-0">
-                  I can’t sign in to my account
+                  How do I contact the Support Team?
               </h6>
             </ng-template>
             <ng-template ngbPanelContent>
-              If while signing in to your account you see an error message, you can do the following
+              We are deeply committed to helping you. You can get in touch with us
               <ol class="pl-3 mt-4">
-                <li>Check your network connection and try again</li>
-                <li>Make sure your account credentials are correct while signing in</li>
-                <li>Check whether your account is accessible in your region</li>
+                <li>Email: sampleadmin@admin.com</li>
+                <li>Telephone No.: 2342-4554</li>
+                <li>Fax No. (+45) 737242</li>
               </ol>
               <br>
               <p class="text-success">
-                <i class="mdi mdi-alert-octagon mr-2"></i>If the problem persists, you can contact our support.
+                <i class="mdi mdi-alert-octagon mr-2"></i>Please call 8474-28283 for 24/7 customer support.
               </p>
             </ng-template>
           </ngb-panel>

From 592fe3aaffe6fde2c7f3e597c1baf1839b9f62ee Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 09:43:19 +0800
Subject: [PATCH 16/20] Updated Contact Us

---
 src/app/accordions/accordions.component.html | 74 ++++----------------
 1 file changed, 14 insertions(+), 60 deletions(-)

diff --git a/src/app/accordions/accordions.component.html b/src/app/accordions/accordions.component.html
index 19101f1..9e4a510 100644
--- a/src/app/accordions/accordions.component.html
+++ b/src/app/accordions/accordions.component.html
@@ -53,37 +53,31 @@ <h6 class="mb-0">
   <div class="col-lg-6 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
-        <h4 class="card-title">Basic accordions</h4>
-        <p class="card-description">Use class <code>.accordion-inverse-*</code> for inverse styling</p>
+        <h4 class="card-title">Customer Info</h4>
         <ngb-accordion [closeOthers]="true" activeIds="static-3" class="accordion accordion-inverse-primary">
           <ngb-panel id="static-4">
             <ng-template ngbPanelTitle>
               <h6 class="mb-0">
-                  How can I pay for an order I placed?
+                  How can my customer pay for an order in my products?
               </h6>
             </ng-template>
             <ng-template ngbPanelContent>
-                You can pay for the product you have purchased using credit cards, debit cards, 
-                or via online banking. We also provide cash-on-delivery services for most of our 
-                products. You can also use your account wallet for payment.
+                Your customers can pay for the product they have purchased using credit cards, debit cards, 
+                or via online banking. Alternatively, they can also use your account wallet for payment.
             </ng-template>
           </ngb-panel>
           <ngb-panel id="static-5">
             <ng-template ngbPanelTitle>
               <h6 class="mb-0">
-                  I can’t sign in to my account
+                  Order Package Delivery Paid But Not Shipped
               </h6>
             </ng-template>
             <ng-template ngbPanelContent>
-              If while signing in to your account you see an error message, you can do the following
-              <ol class="pl-3 mt-4">
-                <li>Check your network connection and try again</li>
-                <li>Make sure your account credentials are correct while signing in</li>
-                <li>Check whether your account is accessible in your region</li>
-              </ol>
+              For packages that are not sucessfully shipped, call 5663-3434 to resolve issue ASAP.
+              <br>
               <br>
               <p class="text-success">
-                <i class="mdi mdi-alert-octagon mr-2"></i>If the problem persists, you can contact our support.
+                <i class="mdi mdi-alert-octagon mr-2"></i>Please call 8474-28283 for 24/7 customer support.
               </p>
             </ng-template>
           </ngb-panel>
@@ -105,52 +99,12 @@ <h6 class="mb-0">
   <div class="col-12 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
-        <h4 class="card-title">Basic accordions</h4>
-        <p class="card-description">Use class <code>.bg-*</code> for <code>.card-header</code> element for filled header styling</p>
-        <ngb-accordion [closeOthers]="true" activeIds="static-7" class="accordion accordion-danger">
-          <ngb-panel id="static-7">
-            <ng-template ngbPanelTitle>
-              <h6 class="mb-0">
-                  How can I pay for an order I placed?
-              </h6>
-            </ng-template>
-            <ng-template ngbPanelContent>
-                You can pay for the product you have purchased using credit cards, debit cards, 
-                or via online banking. We also provide cash-on-delivery services for most of our 
-                products. You can also use your account wallet for payment.
-            </ng-template>
-          </ngb-panel>
-          <ngb-panel id="static-8">
-            <ng-template ngbPanelTitle>
-              <h6 class="mb-0">
-                  I can’t sign in to my account
-              </h6>
-            </ng-template>
-            <ng-template ngbPanelContent>
-              If while signing in to your account you see an error message, you can do the following
-              <ol class="pl-3 mt-4">
-                <li>Check your network connection and try again</li>
-                <li>Make sure your account credentials are correct while signing in</li>
-                <li>Check whether your account is accessible in your region</li>
-              </ol>
-              <br>
-              <p class="text-success">
-                <i class="mdi mdi-alert-octagon mr-2"></i>If the problem persists, you can contact our support.
-              </p>
-            </ng-template>
-          </ngb-panel>
-          <ngb-panel id="static-9">
-            <ng-template ngbPanelTitle>
-              <h6 class="mb-0">
-                  Can I add money to the wallet?
-              </h6>
-            </ng-template>
-            <ng-template ngbPanelContent>
-                You can add money to the wallet for any future transaction from your bank account using net-banking, or 
-                credit/debit card transaction. The money in the wallet can be used for an easier and faster transaction.                
-            </ng-template>
-          </ngb-panel>
-        </ngb-accordion>
+        <h4 class="card-title">Find Us</h4>
+        <div class="mapouter"><div class="gmap_canvas"><iframe width="820" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=Copenhagen%2C%20Denmark&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://www.pureblack.de">pureblack.de</a></div><style>.mapouter{text-align:right;height:500px;width:820px;}.gmap_canvas {overflow:hidden;background:none!important;height:500px;width:820px;}</style></div>
+
+
+
+        
       </div>
     </div>
   </div>

From 7fef38e2e185df8d2ee6b0e111a9f4fbec9ac0de Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 12:26:10 +0800
Subject: [PATCH 17/20] Updated Tracking and Contact Us page

---
 src/app/accordions/accordions.component.html  |   2 +-
 .../progressbar/progressbar.component.html    | 210 +++++++-----------
 2 files changed, 76 insertions(+), 136 deletions(-)

diff --git a/src/app/accordions/accordions.component.html b/src/app/accordions/accordions.component.html
index 9e4a510..a4d8c74 100644
--- a/src/app/accordions/accordions.component.html
+++ b/src/app/accordions/accordions.component.html
@@ -100,7 +100,7 @@ <h6 class="mb-0">
     <div class="card">
       <div class="card-body">
         <h4 class="card-title">Find Us</h4>
-        <div class="mapouter"><div class="gmap_canvas"><iframe width="820" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=Copenhagen%2C%20Denmark&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://www.pureblack.de">pureblack.de</a></div><style>.mapouter{text-align:right;height:500px;width:820px;}.gmap_canvas {overflow:hidden;background:none!important;height:500px;width:820px;}</style></div>
+        <div class="mapouter"><div class="gmap_canvas"><iframe width="900" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=Copenhagen%2C%20Denmark&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div><style>.mapouter{text-align:right;height:500px;width:820px;}.gmap_canvas {overflow:hidden;background:none!important;height:500px;width:1000px;}</style></div>
 
 
 
diff --git a/src/app/progressbar/progressbar.component.html b/src/app/progressbar/progressbar.component.html
index db2b060..8d17f99 100644
--- a/src/app/progressbar/progressbar.component.html
+++ b/src/app/progressbar/progressbar.component.html
@@ -2,149 +2,89 @@
   <div class="col-md-6 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
-        <h4 class="card-title">Normal Progressbar</h4>
-        <p class="page-description">Basic bootstrap progress bars</p>
+        <h2 class="card-title">Domestic Delivery Status</h2>
+        <p class="page-description">You can track delivery here</p>
         <div class="template-demo">
-          <div class="progress progress-md">
-            <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-primary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
+            <div class="d-flex justify-content-between mt-2">
+              <small> Order No. 31213255</small>  <small>60%</small>
+              </div>
+              <div class="d-flex justify-content-between mt-2">
+                  <small>Location: Fredriksberg, DK</small> 
+                  </div>
+              <div class="progress progress-lg mt-2">
+                  <div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">ON DELIVERY</div>
+              </div>
+              <br>
+                   <div class="d-flex justify-content-between mt-2">
+                  <small> Order No. 36894372</small>  <small>100%</small>
+                  </div>
+                  <div class="d-flex justify-content-between mt-2">
+                      <small>Location: Norrebro, DK </small>
+                      </div>
+                  <div class="progress progress-lg mt-2">
+                      <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">DELIVERED</div>
+                  </div>
+                  <br>
+                  <div class="d-flex justify-content-between mt-2">
+                      <small> Order No. 34420184</small>  <small>100%</small>
+                      </div>
+                      <div class="d-flex justify-content-between mt-2">
+                          <small>Location: Charlottenslund, DK </small>
+                          </div>
+                      <div class="progress progress-lg mt-2">
+                          <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">DELIVERED</div>
+                      </div>
+                      <br>
+                      <div class="card-body">
+                          <a href="#" class="btn btn-success">View Details</a> &nbsp;&nbsp;&nbsp;
+                          <a href="#" class="btn btn-danger">Clear Tracking History</a>
+                        </div>
         </div>
       </div>
     </div>
   </div>
   <div class="col-md-6 grid-margin stretch-card">
     <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Colored Progressbar</h4>
-        <p class="page-description">You can give bootstrap colors to progress bars</p>
-        <div class="template-demo">
-          <div class="progress progress-md">
-            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+        <div class="card-body">
+            <h2 class="card-title">International Delivery Status</h2>
+            <p class="page-description">You can track delivery here</p>
+            <div class="template-demo">
+                <div class="d-flex justify-content-between mt-2">
+                  <small> Order No. 31213255</small>  <small>100%</small>
+                  </div>
+                  <div class="d-flex justify-content-between mt-2">
+                      <small>Location: Lyon, FR</small> 
+                      </div>
+                  <div class="progress progress-lg mt-2">
+                      <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">DELIVERED</div>
+                  </div>
+                  <br>
+                       <div class="d-flex justify-content-between mt-2">
+                      <small> Order No. 36894372</small>  <small>100%</small>
+                      </div>
+                      <div class="d-flex justify-content-between mt-2">
+                          <small>Location: Norrebro, DK </small>
+                          </div>
+                      <div class="progress progress-lg mt-2">
+                          <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">DELIVERED</div>
+                      </div>
+                      <br>
+                      <div class="d-flex justify-content-between mt-2">
+                          <small> Order No. 34420184</small>  <small>100%</small>
+                          </div>
+                          <div class="d-flex justify-content-between mt-2">
+                              <small>Location: Charlottenslund, DK </small>
+                              </div>
+                          <div class="progress progress-lg mt-2">
+                              <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">DELIVERED</div>
+                          </div>
+                          <br>
+                          <div class="card-body">
+                              <a href="#" class="btn btn-success">View Details</a> &nbsp;&nbsp;&nbsp;
+                              <a href="#" class="btn btn-danger">Clear Tracking History</a>
+                            </div>
+            </div>
           </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Progressbar Striped</h4>
-        <p class="page-description">Using stipped-progress-bar class</p>
-        <div class="template-demo">
-          <div class="progress progress-md">
-            <div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-warning progress-bar-striped" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </div>
-      </div>
     </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Striped Animated</h4>
-        <p class="page-description">Using stipped-progress-bar class</p>
-        <div class="template-demo">
-          <div class="progress progress-md">
-            <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">With Label</h4>
-        <p class="page-description">Size  add class progress sm, md, lg</p>
-        <div class="template-demo">
-          <div class="d-flex justify-content-between">
-            <small>Filled percentage</small>
-            <small>60%</small>
-          </div>
-          <div class="progress progress-lg mt-2">
-            <div class="progress-bar bg-danger" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
-          </div>
-          <div class="d-flex justify-content-between mt-2">
-            <small>Photoshop</small>
-          </div>
-          <div class="progress progress-lg mt-2">
-            <div class="progress-bar bg-success" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-lg">
-            <div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60% completed</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Progressbar Sizes</h4>
-        <p class="page-description">Size add class progress sm, md, lg</p>
-        <div class="template-demo">
-          <div class="progress progress-sm">
-            <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-md">
-            <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-lg">
-            <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <div class="progress progress-xl">
-            <div class="progress-bar bg-primary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file

From cf9860a9167b65032dc95e85385d014ebea2b371 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 13:33:16 +0800
Subject: [PATCH 18/20] Updated components.

---
 src/app/dropdown/dropdown.component.html      | 177 +-----------------
 .../progressbar/progressbar.component.html    |   4 +-
 2 files changed, 3 insertions(+), 178 deletions(-)

diff --git a/src/app/dropdown/dropdown.component.html b/src/app/dropdown/dropdown.component.html
index 9a80409..8d86fff 100644
--- a/src/app/dropdown/dropdown.component.html
+++ b/src/app/dropdown/dropdown.component.html
@@ -1,180 +1,5 @@
 <div class="row">
-  <div class="col-lg-12 grid-margin">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Basic dropdown</h4>
-        <p class="card-description">
-          Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code>.dropdown</code>
-        </p>
-        <div class="template-demo">
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-primary" type="button" id="dropdownMenuButton1" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-secondary" type="button" id="dropdownMenuButton2" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton2">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-danger" type="button" id="dropdownMenuButton3" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton3">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-warning" type="button" id="dropdownMenuButton4" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton4">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-success" type="button" id="dropdownMenuButton5" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton5">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-info" type="button" id="dropdownMenuButton6" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton6">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="card-body">
-        <h4 class="card-title">Dropdown outline</h4>
-        <p class="card-description">
-          Add class <code>.btn-outline-{{'{'}}color{{'}'}}</code> to the button inside <code>.dropdown</code>
-        </p>
-        <div class="template-demo">
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-outline-primary" type="button" id="dropdownMenuOutlineButton1" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuOutlineButton1">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-outline-secondary" type="button" id="dropdownMenuOutlineButton2" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuOutlineButton2">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-outline-danger" type="button" id="dropdownMenuOutlineButton3" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuOutlineButton3">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-outline-warning" type="button" id="dropdownMenuOutlineButton4" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuOutlineButton4">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-outline-success" type="button" id="dropdownMenuOutlineButton5" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuOutlineButton5">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-outline-info" type="button" id="dropdownMenuOutlineButton6" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuOutlineButton6">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+ 
   <div class="col-md-6 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
diff --git a/src/app/progressbar/progressbar.component.html b/src/app/progressbar/progressbar.component.html
index 8d17f99..deec636 100644
--- a/src/app/progressbar/progressbar.component.html
+++ b/src/app/progressbar/progressbar.component.html
@@ -63,7 +63,7 @@ <h2 class="card-title">International Delivery Status</h2>
                       <small> Order No. 36894372</small>  <small>100%</small>
                       </div>
                       <div class="d-flex justify-content-between mt-2">
-                          <small>Location: Norrebro, DK </small>
+                          <small>Location: Berlin, Ge </small>
                           </div>
                       <div class="progress progress-lg mt-2">
                           <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">DELIVERED</div>
@@ -73,7 +73,7 @@ <h2 class="card-title">International Delivery Status</h2>
                           <small> Order No. 34420184</small>  <small>100%</small>
                           </div>
                           <div class="d-flex justify-content-between mt-2">
-                              <small>Location: Charlottenslund, DK </small>
+                              <small>Location: Perth, Au</small>
                               </div>
                           <div class="progress progress-lg mt-2">
                               <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">DELIVERED</div>

From d2d9c8db59f44ebf6dd14b34bef738659fc4fced Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 14:08:12 +0800
Subject: [PATCH 19/20] Updated the settings component.

---
 src/app/dropdown/dropdown.component.html | 484 ++++++-----------------
 1 file changed, 124 insertions(+), 360 deletions(-)

diff --git a/src/app/dropdown/dropdown.component.html b/src/app/dropdown/dropdown.component.html
index 8d86fff..1415be5 100644
--- a/src/app/dropdown/dropdown.component.html
+++ b/src/app/dropdown/dropdown.component.html
@@ -3,382 +3,146 @@
   <div class="col-md-6 grid-margin stretch-card">
     <div class="card">
       <div class="card-body">
-        <h4 class="card-title">Split button dropdowns</h4>
-        <p class="card-description">
-          Wrap two buttons in <code>.btn-group</code> and add <code>.dropdown-toggle-split</code> to the toggling button
-        </p>
-        <div class="template-demo">
-          <div class="btn-group">
-            <button type="button" class="btn btn-primary">Dropdown</button>
-            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-              <button type="button" class="btn btn-primary dropdown-toggle-split" id="dropdownMenuSplitButton1" ngbDropdownToggle>
-                <span class="sr-only">Toggle Dropdown</span>
-              </button>
-              <div ngbDropdownMenu aria-labelledby="dropdownMenuSplitButton1">
-                <h6 class="dropdown-header">Settings</h6>
-                <a class="dropdown-item" href="#">Action</a>
-                <a class="dropdown-item" href="#">Another action</a>
-                <a class="dropdown-item" href="#">Something else here</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">Separated link</a>
+          <h2 class="card-title">MODE OF PAYMENT</h2>
+          <p>Please select the mode of payment for your customer</p>
+          <div class="row">
+              <div class="col-md-6">
+                <address>
+                  <p class="font-weight-bold">Online Payment</p>
+                </address>
               </div>
-            </div>
-          </div>
-          <div class="btn-group">
-            <button type="button" class="btn btn-danger">Dropdown</button>
-            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-              <button type="button" class="btn btn-danger dropdown-toggle-split" id="dropdownMenuSplitButton2" ngbDropdownToggle>
-                <span class="sr-only">Toggle Dropdown</span>
-              </button>
-              <div ngbDropdownMenu aria-labelledby="dropdownMenuSplitButton2">
-                <h6 class="dropdown-header">Settings</h6>
-                <a class="dropdown-item" href="#">Action</a>
-                <a class="dropdown-item" href="#">Another action</a>
-                <a class="dropdown-item" href="#">Something else here</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">Separated link</a>
-              </div>
-            </div>
-          </div>
-          <div class="btn-group">
-            <button type="button" class="btn btn-success">Dropdown</button>
-            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-              <button type="button" class="btn btn-success dropdown-toggle-split" id="dropdownMenuSplitButton3" ngbDropdownToggle>
-                <span class="sr-only">Toggle Dropdown</span>
-              </button>
-              <div ngbDropdownMenu aria-labelledby="dropdownMenuSplitButton3">
-                <h6 class="dropdown-header">Settings</h6>
-                <a class="dropdown-item" href="#">Action</a>
-                <a class="dropdown-item" href="#">Another action</a>
-                <a class="dropdown-item" href="#">Something else here</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">Separated link</a>
-              </div>
-            </div>
-          </div>
-          <div class="btn-group">
-            <button type="button" class="btn btn-secondary">Dropdown</button>
-            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-              <button type="button" class="btn btn-secondary dropdown-toggle-split" id="dropdownMenuSplitButton4" ngbDropdownToggle>
-                <span class="sr-only">Toggle Dropdown</span>
-              </button>
-              <div ngbDropdownMenu aria-labelledby="dropdownMenuSplitButton4">
-                <h6 class="dropdown-header">Settings</h6>
-                <a class="dropdown-item" href="#">Action</a>
-                <a class="dropdown-item" href="#">Another action</a>
-                <a class="dropdown-item" href="#">Something else here</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">Separated link</a>
-              </div>
-            </div>
-          </div>
-          <div class="btn-group">
-            <button type="button" class="btn btn-info">Dropdown</button>
-            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-              <button type="button" class="btn btn-info dropdown-toggle-split" id="dropdownMenuSplitButton5" ngbDropdownToggle>
-                <span class="sr-only">Toggle Dropdown</span>
-              </button>
-              <div ngbDropdownMenu aria-labelledby="dropdownMenuSplitButton5">
-                <h6 class="dropdown-header">Settings</h6>
-                <a class="dropdown-item" href="#">Action</a>
-                <a class="dropdown-item" href="#">Another action</a>
-                <a class="dropdown-item" href="#">Something else here</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">Separated link</a>
-              </div>
-            </div>
-          </div>
-          <div class="btn-group">
-            <button type="button" class="btn btn-warning">Dropdown</button>
-            <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-              <button type="button" class="btn btn-warning dropdown-toggle-split" id="dropdownMenuSplitButton6" ngbDropdownToggle>
-                <span class="sr-only">Toggle Dropdown</span>
-              </button>
-              <div ngbDropdownMenu aria-labelledby="dropdownMenuSplitButton6">
-                <h6 class="dropdown-header">Settings</h6>
-                <a class="dropdown-item" href="#">Action</a>
-                <a class="dropdown-item" href="#">Another action</a>
-                <a class="dropdown-item" href="#">Something else here</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">Separated link</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Icon dropdowns</h4>
-        <p class="card-description">
-          Replace button with icon buttons
-        </p>
-        <div class="row">
-          <div class="col-12">
-            <div class="template-demo">
-              <div ngbDropdown class="d-inline-block">
-                <button class="btn btn-warning icon-btn" type="button" id="dropdownMenuIconButton1" ngbDropdownToggle>
-                  <i class="mdi mdi-earth"></i>
-                </button>
-                <div ngbDropdownMenu aria-labelledby="dropdownMenuIconButton1">
-                  <h6 class="dropdown-header">Settings</h6>
-                  <a class="dropdown-item" href="#">Action</a>
-                  <a class="dropdown-item" href="#">Another action</a>
-                  <a class="dropdown-item" href="#">Something else here</a>
-                  <div class="dropdown-divider"></div>
-                  <a class="dropdown-item" href="#">Separated link</a>
-                </div>
-              </div>
-              <div ngbDropdown class="d-inline-block">
-                <button class="btn btn-danger icon-btn" type="button" id="dropdownMenuIconButton2" ngbDropdownToggle>
-                  <i class="mdi mdi-trophy-outline"></i>
-                </button>
-                <div ngbDropdownMenu aria-labelledby="dropdownMenuIconButton2">
-                  <h6 class="dropdown-header">Settings</h6>
-                  <a class="dropdown-item" href="#">Action</a>
-                  <a class="dropdown-item" href="#">Another action</a>
-                  <a class="dropdown-item" href="#">Something else here</a>
-                  <div class="dropdown-divider"></div>
-                  <a class="dropdown-item" href="#">Separated link</a>
-                </div>
-              </div>
-              <div ngbDropdown class="d-inline-block">
-                <button type="button" class="btn btn-light  icon-btn-split" id="dropdownMenuIconButton3" ngbDropdownToggle>
-                  <i class="mdi mdi-email"></i>
-                </button>
-                <div ngbDropdownMenu aria-labelledby="dropdownMenuIconButton3">
-                  <h6 class="dropdown-header">Settings</h6>
-                  <a class="dropdown-item" href="#">Action</a>
-                  <a class="dropdown-item" href="#">Another action</a>
-                  <a class="dropdown-item" href="#">Something else here</a>
-                  <div class="dropdown-divider"></div>
-                  <a class="dropdown-item" href="#">Separated link</a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-12">
-            <div class="template-demo">
-              <div ngbDropdown class="d-inline-block">
-                <button type="button" class="btn btn-success icon-btn" id="dropdownMenuIconButton4" ngbDropdownToggle>
-                  <i class="mdi mdi-heart"></i>
-                </button>
-                <div ngbDropdownMenu aria-labelledby="dropdownMenuIconButton4">
-                  <h6 class="dropdown-header">Settings</h6>
-                  <a class="dropdown-item" href="#">Action</a>
-                  <a class="dropdown-item" href="#">Another action</a>
-                  <a class="dropdown-item" href="#">Something else here</a>
-                  <div class="dropdown-divider"></div>
-                  <a class="dropdown-item" href="#">Separated link</a>
-                </div>
-              </div>
-              <div ngbDropdown class="d-inline-block">
-                <button type="button" class="btn btn-secondary icon-btn" id="dropdownMenuIconButton5" ngbDropdownToggle>
-                  <i class="mdi mdi-logout"></i>
-                </button>
-                <div ngbDropdownMenu aria-labelledby="dropdownMenuIconButton5">
-                  <h6 class="dropdown-header">Settings</h6>
-                  <a class="dropdown-item" href="#">Action</a>
-                  <a class="dropdown-item" href="#">Another action</a>
-                  <a class="dropdown-item" href="#">Something else here</a>
-                  <div class="dropdown-divider"></div>
-                  <a class="dropdown-item" href="#">Separated link</a>
-                </div>
-              </div>
-              <div ngbDropdown class="d-inline-block">
-                <button class="btn btn-primary icon-btn" type="button" id="dropdownMenuIconButton6" ngbDropdownToggle>
-                  <i class="mdi mdi-security"></i>
-                </button>
-                <div ngbDropdownMenu aria-labelledby="dropdownMenuIconButton6">
-                  <h6 class="dropdown-header">Settings</h6>
-                  <a class="dropdown-item" href="#">Action</a>
-                  <a class="dropdown-item" href="#">Another action</a>
-                  <a class="dropdown-item" href="#">Something else here</a>
-                  <div class="dropdown-divider"></div>
-                  <a class="dropdown-item" href="#">Separated link</a>
-                </div>
+              <div class="col-md-6">
+                  <div class="btn-group">
+                      <button type="button" class="btn btn-primary">Select Option</button>
+                      <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+                        <button type="button" class="btn btn-primary dropdown-toggle-split" id="dropdownMenuSplitButton5" ngbDropdownToggle>
+                          <span class="sr-only">Toggle Dropdown</span>
+                        </button>
+                        <div ngbDropdownMenu aria-labelledby="dropdownMenuSplitButton5">
+                          <a class="dropdown-item" href="#">via Mobile</a>
+                          <a class="dropdown-item" href="#">via Debit/Credit Card</a>
+                          <a class="dropdown-item" href="#">Enable Both</a>
+                        </div>
+                      </div>
+                    </div>
               </div>
             </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-12">
-            <div class="template-demo">
-              <div ngbDropdown class="d-inline-block">
-                <button type="button" class="btn btn-dark icon-btn" id="dropdownMenuIconButton7" ngbDropdownToggle>
-                  <i class="mdi mdi-account"></i>
-                </button>
-                <div ngbDropdownMenu aria-labelledby="dropdownMenuIconButton7">
-                  <h6 class="dropdown-header">Settings</h6>
-                  <a class="dropdown-item" href="#">Action</a>
-                  <a class="dropdown-item" href="#">Another action</a>
-                  <a class="dropdown-item" href="#">Something else here</a>
-                  <div class="dropdown-divider"></div>
-                  <a class="dropdown-item" href="#">Separated link</a>
+            <br>
+            <div class="row">
+                <div class="col-md-6">
+                  <address>
+                    <p class="font-weight-bold">Money Transfer</p>
+                  </address>
                 </div>
-              </div>
-              <div ngbDropdown class="d-inline-block">
-                <button type="button" class="btn btn-info icon-btn" id="dropdownMenuIconButton8" ngbDropdownToggle>
-                  <i class="mdi mdi-bell"></i>
-                </button>
-                <div ngbDropdownMenu aria-labelledby="dropdownMenuIconButton8">
-                  <h6 class="dropdown-header">Settings</h6>
-                  <a class="dropdown-item" href="#">Action</a>
-                  <a class="dropdown-item" href="#">Another action</a>
-                  <a class="dropdown-item" href="#">Something else here</a>
-                  <div class="dropdown-divider"></div>
-                  <a class="dropdown-item" href="#">Separated link</a>
+                <div class="col-md-6">
+                    <div class="btn-group">
+                        <button type="button" class="btn btn-primary">Select Option</button>
+                        <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+                          <button type="button" class="btn btn-primary dropdown-toggle-split" id="dropdownMenuSplitButton5" ngbDropdownToggle>
+                            <span class="sr-only">Toggle Dropdown</span>
+                          </button>
+                          <div ngbDropdownMenu aria-labelledby="dropdownMenuSplitButton5">
+                            <a class="dropdown-item" href="#">Send Details</a>
+                          </div>
+                        </div>
+                      </div>
                 </div>
               </div>
-            </div>
-          </div>
         </div>
-      </div>
     </div>
   </div>
-  <div class="col-lg-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Dropup variation</h4>
-        <p class="card-description">
-          Add class <code>.dropup</code>
-        </p>
-        <div class="template-demo">
-          <div ngbDropdown placement="top-right" class="d-inline-block">
-            <button class="btn btn-primary" type="button" id="dropdownMenuButton1" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown placement="top-right" class="d-inline-block">
-            <button class="btn btn-secondary" type="button" id="dropdownMenuButton2" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton2">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown placement="top-right" class="d-inline-block">
-            <button class="btn btn-danger" type="button" id="dropdownMenuButton3" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton3">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown placement="top-right" class="d-inline-block">
-            <button class="btn btn-warning" type="button" id="dropdownMenuButton4" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton4">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown placement="top-right" class="d-inline-block">
-            <button class="btn btn-success" type="button" id="dropdownMenuButton5" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton5">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown placement="top-right" class="d-inline-block">
-            <button class="btn btn-info" type="button" id="dropdownMenuButton6" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuButton6">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
+  <!--Edit start Here-->
+  <div class="col-md-6 grid-margin stretch-card">
+      <div class="card">
+        <div class="card-body">
+          <h4 class="card-title">Address</h4>
+          <div class="row">
+            <div class="col-md-6">
+              <address>
+                <p class="font-weight-bold">Star Admin Inc</p>
+                <p>
+                  695 lsom Ave,
+                </p>
+                <p>
+                  Suite 00
+                </p>
+                <p>
+                  San Francisco, CA 94107
+                </p>
+              </address>
+            </div>
+            <div class="col-md-6">
+              <address class="text-primary">
+                <p class="font-weight-bold">
+                  E-mail
+                </p>
+                <p class="mb-2">
+                  johndoe@examplemeail.com
+                </p>
+                <p class="font-weight-bold">
+                  Web Address
+                </p>
+                <p>
+                  www.staradmin.com
+                </p>
+              </address>
             </div>
           </div>
         </div>
+        <div class="card-body">
+            <a href="#" class="btn btn-success">Edit Address</a> &nbsp;&nbsp;&nbsp;
+          </div>
       </div>
     </div>
-  </div>
-  <div class="col-lg-6 grid-margin stretch-card">
-    <div class="card">
-      <div class="card-body">
-        <h4 class="card-title">Dropdown sizes</h4>
-        <p class="card-description">
-          Add class <code>.btn-{{'{'}}size{{'}'}}</code> to dropdown buttons
-        </p>
-        <div class="template-demo mt-5">
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-danger btn-lg" type="button" id="dropdownMenuSizeButton1" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuSizeButton1">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-danger" type="button" id="dropdownMenuSizeButton2" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuSizeButton2">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
-            </div>
-          </div>
-          <div ngbDropdown class="d-inline-block">
-            <button class="btn btn-danger btn-sm" type="button" id="dropdownMenuSizeButton3" ngbDropdownToggle>
-              Dropdown
-            </button>
-            <div ngbDropdownMenu aria-labelledby="dropdownMenuSizeButton3">
-              <h6 class="dropdown-header">Settings</h6>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Separated link</a>
+  <!--Edit ends here-->
+  <div class="col-md-6 grid-margin stretch-card">
+      <div class="card">
+        <div class="card-body">
+          <h4 class="card-title">MANAGE TICKET AND NOTIFICATIONS</h4>
+          <div class="row">
+            <div class="col-md-6">
+              <address>
+                <p class="font-weight-bold">Customer Ticket</p>
+              </address>
+            </div>
+            <div class="col-md-6">
+                <div class="btn-group">
+                    <button type="button" class="btn btn-primary">Select Option</button>
+                    <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+                      <button type="button" class="btn btn-primary dropdown-toggle-split" id="dropdownMenuSplitButton5" ngbDropdownToggle>
+                        <span class="sr-only">Toggle Dropdown</span>
+                      </button>
+                      <div ngbDropdownMenu aria-labelledby="dropdownMenuSplitButton5">
+                        <a class="dropdown-item" href="#">Enable</a>
+                        <a class="dropdown-item" href="#">Disable</a>
+                      </div>
+                    </div>
+                  </div>
+            </div>
+          </div>
+          <br>
+          <div class="row">
+              <div class="col-md-6">
+                <address>
+                  <p class="font-weight-bold">Notification</p>
+                </address>
+              </div>
+              <div class="col-md-6">
+                  <div class="btn-group">
+                      <button type="button" class="btn btn-primary">Select Option</button>
+                      <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+                        <button type="button" class="btn btn-primary dropdown-toggle-split" id="dropdownMenuSplitButton5" ngbDropdownToggle>
+                          <span class="sr-only">Toggle Dropdown</span>
+                        </button>
+                        <div ngbDropdownMenu aria-labelledby="dropdownMenuSplitButton5">
+                          <a class="dropdown-item" href="#">Enable Notification</a>
+                          <a class="dropdown-item" href="#">Disable Notification</a>
+                        </div>
+                      </div>
+                    </div>
+              </div>
             </div>
-          </div>
         </div>
       </div>
     </div>
-  </div>
 </div>
\ No newline at end of file

From bf0f1435a9ac4a9dab6cadad29feaaca11ace1e5 Mon Sep 17 00:00:00 2001
From: CointreauFizz <celina.lumain@my.jcu.edu.au>
Date: Thu, 17 Jan 2019 14:45:05 +0800
Subject: [PATCH 20/20] refractored product component

---
 src/app/app-routing.module.ts                        |  4 ++--
 src/app/app.module.ts                                |  4 ++--
 .../product.component.html}                          |  0
 .../product.component.scss}                          |  0
 .../product.component.spec.ts}                       | 12 ++++++------
 .../product.component.ts}                            |  6 +++---
 6 files changed, 13 insertions(+), 13 deletions(-)
 rename src/app/{forms/forms.component.html => product/product.component.html} (100%)
 rename src/app/{forms/forms.component.scss => product/product.component.scss} (100%)
 rename src/app/{forms/forms.component.spec.ts => product/product.component.spec.ts} (56%)
 rename src/app/{forms/forms.component.ts => product/product.component.ts} (94%)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 4b20b1b..3c77988 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { FormsComponent } from './forms/forms.component';
+import { productComponent } from './product/product.component';
 import { AccordionsComponent } from './accordions/accordions.component';
 import { ProgressbarComponent } from './progressbar/progressbar.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
@@ -9,7 +9,7 @@ import { DropdownComponent } from './dropdown/dropdown.component';
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   { path: 'dashboard', component: DashboardComponent },
-  { path: 'forms', component: FormsComponent },
+  { path: 'forms', component: productComponent },
   { path: 'accordions', component: AccordionsComponent },
   { path: 'progressbar', component: ProgressbarComponent },
   { path: 'dropdowns', component: DropdownComponent },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 120eaf1..360d3b7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,7 +11,7 @@ import { NavbarComponent } from './navbar/navbar.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { FooterComponent } from './footer/footer.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { FormsComponent } from './forms/forms.component';
+import { productComponent } from './product/product.component';
 import { AccordionsComponent } from './accordions/accordions.component';
 import { ProgressbarComponent } from './progressbar/progressbar.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
@@ -23,7 +23,7 @@ import { DropdownComponent } from './dropdown/dropdown.component';
     SidebarComponent,
     FooterComponent,
     DashboardComponent,
-    FormsComponent,
+    productComponent,
     AccordionsComponent,
     ProgressbarComponent,
     DropdownComponent,
diff --git a/src/app/forms/forms.component.html b/src/app/product/product.component.html
similarity index 100%
rename from src/app/forms/forms.component.html
rename to src/app/product/product.component.html
diff --git a/src/app/forms/forms.component.scss b/src/app/product/product.component.scss
similarity index 100%
rename from src/app/forms/forms.component.scss
rename to src/app/product/product.component.scss
diff --git a/src/app/forms/forms.component.spec.ts b/src/app/product/product.component.spec.ts
similarity index 56%
rename from src/app/forms/forms.component.spec.ts
rename to src/app/product/product.component.spec.ts
index fe21b72..b8c979c 100644
--- a/src/app/forms/forms.component.spec.ts
+++ b/src/app/product/product.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { FormsComponent } from './forms.component';
+import { productComponent } from './product.component';
 
-describe('FormsComponent', () => {
-  let component: FormsComponent;
-  let fixture: ComponentFixture<FormsComponent>;
+describe('productComponent', () => {
+  let component: productComponent;
+  let fixture: ComponentFixture<productComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FormsComponent ]
+      declarations: [ productComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FormsComponent);
+    fixture = TestBed.createComponent(productComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/forms/forms.component.ts b/src/app/product/product.component.ts
similarity index 94%
rename from src/app/forms/forms.component.ts
rename to src/app/product/product.component.ts
index 51aa0aa..aa63435 100644
--- a/src/app/forms/forms.component.ts
+++ b/src/app/product/product.component.ts
@@ -19,10 +19,10 @@ const states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'C
 
 @Component({
   selector: 'app-forms',
-  templateUrl: './forms.component.html',
-  styleUrls: ['./forms.component.scss']
+  templateUrl: './product.component.html',
+  styleUrls: ['./product.component.scss']
 })
-export class FormsComponent implements OnInit {
+export class productComponent implements OnInit {
   currentRate: any;
   public typeaheadBasicModel: any;
   public typeaheadFocusModel: any;