Cart shows items in it; disables buttons if item in basket

- Rough cart icon in navbar
- Shows items in cart
- Styled dependent on existence
- Add to cart buttons disabled if resource in cart, on resource list
  page and detail page
- Throws 404 error if trying add item to cart which has no price -
  eventually all items will have a price

2 files changed, 42 insertions, 0 deletions

diff --git a/alphabetlearning/static/css/custom.css b/alphabetlearning/static/css/custom.css
index 42833bd..802b9b5 100644
--- a/alphabetlearning/static/css/custom.css
+++ b/alphabetlearning/static/css/custom.css
@@ -2312,6 +2312,24 @@ progress {
   color: red;
 }
 
+.gray-icon svg path {
+  fill: #808080; /* Adjust this hex value to any desired shade of gray */
+}
+
+.empty-basket-button {
+  background-color: lightgray;
+  border: none;
+  padding: 8px;
+  display: flex;
+}
+
+.full-basket-button {
+  background-color: lightgreen;
+  border: none;
+  padding: 8px;
+  display: flex;
+}
+
 .alert {
   --bs-alert-bg: transparent;
   --bs-alert-padding-x: 1rem;
diff --git a/alphabetlearning/static/scss/custom.scss b/alphabetlearning/static/scss/custom.scss
index b65db4c..789e00d 100644
--- a/alphabetlearning/static/scss/custom.scss
+++ b/alphabetlearning/static/scss/custom.scss
@@ -93,6 +93,30 @@ $ml-font-label-weight: 500;
 .asteriskField {
   color: red;
 }
+
+// for the SVG icons
+.gray-icon {
+    svg {
+        path {
+            fill: #808080; /* Adjust this hex value to any desired shade of gray */
+        }
+    }
+}
+
+.empty-basket-button {
+  background-color: lightgray;
+  border: none;
+  padding: 8px;
+  display: flex;
+}
+
+.full-basket-button {
+  background-color: lightgreen;
+  border: none;
+  padding: 8px;
+  display: flex;
+}
+
 // 6. Add additional Bootstrap components as needed
 @import "alert";
 @import "card";