Add un/sub links to circles, fix button styles

assets/css/styles.css

@@ -8,11 +8,17 @@
 }
 
 @layer components {
+  .btn {
+    @apply px-4 py-2 border border-transparent text-center rounded-2xl text-base font-medium text-tslate focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-tyellow no-underline;
+  }
   .btn-primary {
-    @apply py-2 px-4 bg-tyellow text-tslate font-semibold rounded-2xl shadow-md hover:bg-yellow-300 focus:outline-none focus:ring-2 focus:ring-yellow-300 focus:ring-opacity-75 text-center no-underline;
+    @apply btn bg-tyellow border-tyellow text-tslate shadow-md hover:bg-yellow-500;
   }
   .btn-danger {
-    @apply btn-primary bg-tpink;
+    @apply btn bg-tpink hover:bg-tpinkTint;
+  }
+  .btn-outline {
+    @apply btn border-2 border-tyellow text-tslate hover:bg-tyellow;
   }
   .section {
     @apply md:py-10 mx-4;

totem/circles/templates/circles/detail.html

@@ -94,8 +94,34 @@ <h1 class="h1 pb-3 text-white">{{ object.title }}</h1>
                     </div>
                 {% endif %}
             </div>
+            {% if request.user.is_authenticated %}
+                <div class="bg-white p-5 rounded-2xl border w-80 md:mt-5 border-gray-200 max-md:w-full">
+                    {% if subscribed %}
+                        <div>
+                            <div>
+                                You are currently <strong>subscribed</strong> to this Circle. You'll get updates when new sessions are added.
+                            </div>
+                            <div>
+                                <form class="text-center"
+                                      action="{% url 'circles:subscribe' slug=object.slug %}"
+                                      method="post">
+                                    {% csrf_token %}
+                                    <input type="hidden" name="action" value="unsubscribe">
+                                    <button class="a text-gray-400 pt-2" type="submit" value="Submit">Unsubscribe</button>
+                                </form>
+                            </div>
+                        </div>
+                    {% else %}
+                        <div class="pb-2">Subscribe to this Circle to get updates when new sessions are added.</div>
+                        <form action="{% url 'circles:subscribe' slug=object.slug %}" method="post">
+                            {% csrf_token %}
+                            <button class="w-full btn-outline p-2 px-6" type="submit" value="Submit">Subscribe</button>
+                        </form>
+                    {% endif %}
+                </div>
+            {% endif %}
             {% if attending %}
-                <div class="bg-white p-5 mb-10 rounded-2xl border w-80 md:mt-5 border-gray-200 max-md:w-full">
+                <div class="bg-white p-5 mb-10 rounded-2xl border w-80 mt-5 border-gray-200 max-md:w-full">
                     <div class="pb-3">
                         <strong>Attending</strong>
                     </div>

totem/circles/views.py

@@ -1,19 +1,16 @@
 import datetime
 
 from django.contrib import messages
-from django.contrib.auth import get_user_model
 from django.contrib.auth.decorators import login_required
 from django.http import Http404, HttpRequest
 from django.shortcuts import redirect, render
 from django.utils import timezone
 
+from totem.users.models import User
 from totem.utils.hash import basic_hash
 
 from .models import Circle, CircleEvent, CircleEventException
 
-User = get_user_model()
-
-
 ICS_QUERY_PARAM = "key"
 
 
@@ -34,24 +31,26 @@ def _get_circle_event(slug: str) -> CircleEvent:
 def event_detail(request, event_slug):
     event = _get_circle_event(event_slug)
     circle = event.circle
-    return _detail(request, circle, event)
+    return _detail(request, request.user, circle, event)
 
 
 def detail(request, slug):
     circle = _get_circle(slug)
     event = circle.next_event()
-    return _detail(request, circle, event)
+    return _detail(request, request.user, circle, event)
 
 
-def _detail(request, circle: Circle, event):
-    if not circle.published and not request.user.is_staff:
+def _detail(request, user: User, circle: Circle, event):
+    if not circle.published and not user.is_staff:
         raise Http404
 
     attending = False
     joinable = False
-    if request.user.is_authenticated and event:
-        attending = event.attendees.contains(request.user)
-        joinable = event.can_join(request.user)
+    subscribed = False
+    if user.is_authenticated and event:
+        attending = event.attendees.contains(user)
+        joinable = event.can_join(user)
+        subscribed = circle.subscribed.contains(user)
 
     # if attending:
     #     ih = ics_hash(slug, request.user.ics_key)
@@ -70,6 +69,7 @@ def _detail(request, circle: Circle, event):
             "object": circle,
             "attending": attending,
             "joinable": joinable,
+            "subscribed": subscribed,
             "event": event,
             "other_events": other_events,
         },

totem/dev/templates/dev/widgets.html

@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+{% block content %}
+    <section class="max-w-5xl m-auto">
+        <h1 class="h1 pb-10">Buttons</h1>
+        <h2 class="h2 pb-5">Base button</h2>
+        <button class="btn">Button</button>
+        <h2 class="h2 pb-5">Primary button</h2>
+        <button class="btn-primary">Button</button>
+        <h2 class="h2 pb-5">Danger button</h2>
+        <button class="btn-danger">Button</button>
+        <h2 class="h2 pb-5">Outline button</h2>
+        <button class="btn-outline">Button</button>
+        <h2 class="h2 pb-5">Shimmer button</h2>
+        <button class="btn-primary shimmer">Button</button>
+    </section>
+{% endblock content %}

totem/dev/urls.py

@@ -1,4 +1,5 @@
 from django.urls import path
+from django.views.generic import TemplateView
 
 from . import views
 
@@ -10,4 +11,5 @@
         name="rrule",
     ),
     path("healthcheck/", views.healthcheck, name="healthcheck"),
+    path("widgets/", TemplateView.as_view(template_name="dev/widgets.html"), name="widgets"),
 ]