feat: gesture img in controls

rooms/room.go

@@ -257,26 +257,31 @@ func (g HandGesture) GetGestureInfo() GestureInfo {
 		result = GestureInfo{
 			Color:     "--change-topic-color",
 			ColorDark: "--change-topic-dark",
+			IconUrl: "/static/images/change-topic.png",
 		}
 	case ProbingQ:
 		result = GestureInfo{
 			Color:     "--probing-q-color",
 			ColorDark: "--probing-q-dark",
+			IconUrl: "/static/images/probing-q.png",
 		}
 	case Expand:
 		result = GestureInfo{
 			Color:     "--expand-color",
 			ColorDark: "--expand-dark",
+			IconUrl: "/static/images/expand.png",
 		}
 	case ClarifyingQ:
 		result = GestureInfo{
 			Color:     "--clarifying-q-color",
 			ColorDark: "--clarifying-q-dark",
+			IconUrl: "/static/images/clarifying-q.png",
 		}
 	case Meta:
 		result = GestureInfo{
 			Color:     "--meta-color",
 			ColorDark: "--meta-dark",
+			IconUrl: "/static/images/meta.png",
 		}
 	}
 	result.Name = g.String()

routes/static/out.css

@@ -570,6 +570,10 @@ video {
   height: 3.5rem;
 }
 
+.h-16 {
+  height: 4rem;
+}
+
 .h-4\/5 {
   height: 80%;
 }
@@ -668,14 +672,19 @@ video {
   gap: 1.5rem;
 }
 
-.gap-y-10 {
+.gap-y-5 {
-  row-gap: 2.5rem;
+  row-gap: 1.25rem;
 }
 
 .rounded {
   border-radius: 0.25rem;
 }
 
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
 .border {
   border-width: 1px;
 }
@@ -753,26 +762,21 @@ video {
   padding: 1rem;
 }
 
-.px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;

routes/templates/room.gohtml

@@ -47,15 +47,18 @@
           {{ end }}
         </div>
         {{/* This is personal hand controls */}}
-        <div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-10">
+        <div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-5">
           {{ range .Gestures }}
           <button
             hx-get="{{ .Url }}"
-            class="bg-white rounded border-[hsl(var(--border-color))] border-2 text-[hsl(var(--text-color))] font-bold px-10 py-4"
+            class="bg-white rounded border-[hsl(var(--border-color))] border-2 text-[hsl(var(--text-color))] font-bold h-16 rounded-l-full flex flex-row items-center"
             style="--border-color: var({{.Gesture.GetGestureInfo.Color}});
                    --text-color: var({{.Gesture.GetGestureInfo.ColorDark}})
                    ">
-            {{ .Gesture.String }}
+            <img src="{{.Gesture.GetGestureInfo.IconUrl}}" alt=""
+                 class="h-full"
+                 />
+            <p class="px-5 text-l">{{ .Gesture.String }} </p>
           </button>
           {{ end }}
           <button