feat: controls styling from gesture info

routes/templates/room.gohtml

@@ -29,6 +29,7 @@
     <main class="h-screen">
       <div class="h-full w-full flex flex-row">
         <script src="/static/dist/ext/sse.js"></script>
+        {{/* This is dynamic table, updated from SSE */}}
         <div
           id="roomTextContainer"
           class="grid place-content-center grow"
@@ -45,19 +46,21 @@
           </div>
           {{ end }}
         </div>
+        {{/* This is personal hand controls */}}
         <div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-10">
           {{ range .Gestures }}
           <button
             hx-get="{{ .Url }}"
-            class="bg-white rounded border-blue-700 border-2"
-          >
-            {{ .Name }}
+            class="bg-white rounded border-[hsl(var(--border-color))] border-2 text-[hsl(var(--text-color))] font-bold px-10 py-4"
+            style="--border-color: var({{.Gesture.GetGestureInfo.Color}});
+                   --text-color: var({{.Gesture.GetGestureInfo.ColorDark}})
+                   ">
+            {{ .Gesture.String }}
           </button>
           {{ end }}
           <button
             hx-get="/rooms/releaseHand"
-            class="bg-white rounded border-yellow-700 border-4"
-          >
+            class="bg-white rounded border-yellow-700 border-4">
             Release Hand
           </button>
         </div>