DaisyUI

assets/css/styles.css

@@ -8,18 +8,6 @@
 }
 
 @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 btn bg-tyellow border-tyellow text-tslate shadow-md hover:bg-yellow-500;
-  }
-  .btn-danger {
-    @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;
   }
@@ -41,8 +29,11 @@
   .a {
     @apply text-blue-500 underline;
   }
-  input, textarea, select {
-    @apply my-2 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-tyellow sm:text-sm sm:leading-6 !important;
+  input[type="email"],
+  input[type="password"],
+  input[type="text"], textarea, select {
+    /* @apply my-2 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-tyellow sm:text-sm sm:leading-6 !important; */
+    @apply input input-bordered;
   }
   label {
     @apply text-sm font-medium leading-6 text-gray-900 !important;
@@ -62,7 +53,7 @@
   }
 }
 
-.shimmer {
+/* .shimmer {
   background: linear-gradient(
     135deg,
     #f4dc92 0%,
@@ -80,7 +71,7 @@
   background-color: #f4dc92;
   animation: light 1s;
   -webkit-animation: light 1s;
-}
+} */
 
 @keyframes light {
   0% {

assets/js/components/card.js

@@ -32,25 +32,27 @@ function Card(props) {
     <div class="relative max-w-[300px] overflow-clip rounded-3xl border border-gray-200 bg-white shadow ">
       {image}
       <div class="p-5">
-        <p class="mb-3 font-normal text-gray-700 ">{props.start}</p>
-        <a href={props.href} class="btn-primary inline-flex items-center">
-          {props.buttonText}
-          <svg
-            class="ml-2 h-3.5 w-3.5"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 14 10"
-          >
-            <path
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M1 5h12m0 0L9 1m4 4L9 9"
-            />
-          </svg>
-        </a>
+        <div class="flex justify-between">
+          <p class="mb-3 w-32 font-normal text-gray-700 ">{props.start}</p>
+          <a href={props.href} class="btn btn-primary inline-flex items-center">
+            {props.buttonText}
+            <svg
+              class="ml-2 h-3.5 w-3.5"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 14 10"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M1 5h12m0 0L9 1m4 4L9 9"
+              />
+            </svg>
+          </a>
+        </div>
       </div>
     </div>
   )

package.json

@@ -23,6 +23,7 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.2",
     "concurrently": "^8.2.0",
+    "daisyui": "^3.9.2",
     "esbuild": "^0.19.0",
     "livereload": "^0.9.3",
     "postcss": "^8.4.14",

tailwind.config.js

@@ -99,5 +99,21 @@ module.exports = {
     require("@tailwindcss/typography"),
     require("@tailwindcss/line-clamp"),
     require("@tailwindcss/aspect-ratio"),
+    require("daisyui"),
   ],
+  daisyui: {
+    themes: [
+      {
+        mytheme: {
+          ...require("daisyui/src/theming/themes")["[data-theme=bumblebee]"],
+          primary: totemColors.yellow,
+        },
+      },
+    ], // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
+    base: false, // applies background color and foreground color for root element by default
+    styled: true, // include daisyUI colors and design decisions for all components
+    utils: true, // adds responsive and modifier utility classes
+    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+    logs: false, // Shows info about daisyUI version and used config in the console when building your CSS
+  },
 }

totem/circles/templates/circles/detail.html

@@ -15,7 +15,7 @@
             <h2 class="h3">All Circles</h2>
         </a>
     </div>
-    <div class="m-auto px-5 pb-5 max-w-5xl">
+    <div class="m-auto px-5 max-w-5xl">
         {% if object.image %}
             <style>
             .circle-bg-image{
@@ -26,7 +26,7 @@ <h2 class="h3">All Circles</h2>
             }
             </style>
         {% endif %}
-        <div class="circle-bg-image rounded-2xl relative bg-gradient-to-r from-purple-500 to-pink-500 mb-5">
+        <div class="circle-bg-image rounded-2xl relative bg-gradient-to-r from-purple-500 to-pink-500">
             <div class="pt-10 m-auto w-[200px]">
                 <a class="inline" href="{{ object.author.get_keeper_url }}">
                     {% avatar object.author size=200 classes="m-auto" %}
@@ -47,7 +47,7 @@ <h1 class="h1 pb-3 text-white">{{ object.title }}</h1>
              hx-swap="outerHTML"
              hx-target="this"
              class="hx-circle-sidebar">
-            <div class="max-md:fixed max-md:bottom-0 max-md:left-0 bg-white p-5 rounded-2xl border w-80 md:top-20 border-gray-200 max-md:w-full">
+            <div class="mt-5 max-md:fixed max-md:bottom-0 max-md:left-0 bg-white p-5 rounded-2xl border w-80 md:top-20 border-gray-200 max-md:w-full">
                 {% if event %}
                     <div>
                         <strong>{{ event.start|date:'l, F j' }} <span class="inline-block">@ {{ event.start|date:'P T' }}</span></strong>
@@ -59,7 +59,7 @@ <h1 class="h1 pb-3 text-white">{{ object.title }}</h1>
                             <p>This Circle session has been cancelled.</p>
                         {% elif joinable %}
                             <p class="pb-4">The Circle is starting!</p>
-                            <a class="w-full inline-block btn-primary p-2 px-6 shimmer"
+                            <a class="w-full inline-block btn btn-primary p-2 px-6 shimmer"
                                target="_blank"
                                href="{% url 'circles:join' event_slug=event.slug %}">Join now</a>
                         {% elif event.ended %}
@@ -85,7 +85,7 @@ <h1 class="h1 pb-3 text-white">{{ object.title }}</h1>
                                       action="{% url 'circles:rsvp' event_slug=event.slug %}"
                                       method="post">
                                     {% csrf_token %}
-                                    <button class="w-full btn-primary p-2 px-6 shimmer"
+                                    <button class="w-full btn btn-primary p-2 px-6 shimmer"
                                             type="submit"
                                             value="Submit">Reserve a spot</button>
                                 </form>
@@ -99,7 +99,7 @@ <h1 class="h1 pb-3 text-white">{{ object.title }}</h1>
                 {% 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">
+                <div class="bg-white p-5 mt-5 rounded-2xl border w-80 border-gray-200 max-md:w-full">
                     <form hx-post="{% url 'circles:subscribe' slug=object.slug %}"
                           action="{% url 'circles:subscribe' slug=object.slug %}"
                           method="post">
@@ -114,13 +114,13 @@ <h1 class="h1 pb-3 text-white">{{ object.title }}</h1>
                             </div>
                         {% else %}
                             <div class="pb-2">Subscribe to this Circle to get updates when new sessions are added.</div>
-                            <button class="w-full btn-outline p-2 px-6" type="submit" value="Submit">Subscribe</button>
+                            <button class="w-full btn btn-outline p-2 px-6" type="submit" value="Submit">Subscribe</button>
                         {% endif %}
                     </form>
                 </div>
             {% endif %}
             {% if attending %}
-                <div class="bg-white p-5 mb-10 rounded-2xl border w-80 mt-5 border-gray-200 max-md:w-full">
+                <div class="bg-white p-5 rounded-2xl border w-80 mt-5 border-gray-200 max-md:w-full">
                     <div class="pb-3">
                         <strong>Attending</strong>
                     </div>
@@ -132,19 +132,17 @@ <h1 class="h1 pb-3 text-white">{{ object.title }}</h1>
                 </div>
             {% endif %}
             {% if other_events %}
-                <div class="bg-white p-5 rounded-2xl border w-80 mb-8 mt-5 border-gray-200 max-md:w-full">
-                    <div class="pb-3">
-                        <strong>Other Sessions</strong>
-                    </div>
+                <ul class="menu rounded-2xl bg-white border w-80 mt-5 border-gray-200 max-md:w-full">
+                    <li class="menu-title">Other Sessions</li>
                     {% for other_event in other_events %}
-                        <div>
-                            <a class="a" href="{{ other_event.get_absolute_url }}">{{ other_event.start }}</a>
-                        </div>
+                        <li>
+                            <a href="{{ other_event.get_absolute_url }}">{{ event.start|date:'M jS' }} @ {{ event.start|date:'P T' }}</a>
+                        </li>
                     {% endfor %}
-                </div>
+                </ul>
             {% endif %}
         </div>
-        <div class="pr-4 flex-grow">
+        <div class="pr-4 mt-5 flex-grow">
             <div>
                 {% if not object.published %}
                     <div class="text-red-500">This circle is not published yet.</div>

totem/circles/templates/circles/list.html

@@ -35,17 +35,20 @@ <h2 class="h2 pb-5">Upcoming Circles</h2>
             <ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                 {% for event in circles %}
                     <t-card
-                    {% if event.circle.image %}image="{{ event.circle.image.url }}"{% endif %} href="{% url "circles:event_detail" event_slug=event.slug %}">
-                        <span slot="title">{{ event.circle.title }}</span>
-                        <span slot="description">By {{ event.circle.author.name }}</span>
-                        <span slot="buttonText">Join</span>
-                        <span slot="avatar">{% avatar event.circle.author %}</span>
-                        <span slot="start">{{ event.start|date:'M jS' }} @ {{ event.start|date:'P T' }}</span>
-                        </t-card>
-                    {% empty %}
-                        <h2 class="h2">No Circles. 😥</h2>
-                    {% endfor %}
-                </ul>
-            </section>
-        </div>
-    {% endblock content %}
+                    {% if event.circle.image %}image="{{ event.circle.image.url }}"{% endif %}
+                    href="{% url "circles:event_detail" event_slug=event.slug %}">
+                    <span slot="title">{{ event.circle.title }}</span>
+                    <span slot="description">By {{ event.circle.author.name }}</span>
+                    <span slot="buttonText">Join</span>
+                    <span slot="avatar">{% avatar event.circle.author %}</span>
+                    <span slot="start">{{ event.start|date:'M jS' }} @
+                        <div>{{ event.start|date:'P T' }}</div>
+                    </span>
+                    </t-card>
+                {% empty %}
+                    <h2 class="h2">No Circles. 😥</h2>
+                {% endfor %}
+            </ul>
+        </section>
+    </div>
+{% endblock content %}

totem/dev/templates/dev/test.html

@@ -22,7 +22,7 @@ <h1 class="h1">Test</h1>
         </t-dropdown>
         <t-popover>
         <span slot="trigger">
-            <button class="btn-primary">yolo</button>
+            <button class="btn btn-primary">yolo</button>
         </span>
         <span slot="content">I'm content!</span>
         </t-popover>

totem/dev/templates/dev/widgets.html

@@ -5,12 +5,12 @@ <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>
+        <button class="btn 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>
+        <button class="btn btn-primary shimmer">Button</button>
     </section>
 {% endblock content %}