refactor: start grouping brick attributes info

routes/templates/room.gohtml

@@ -27,11 +27,11 @@
     <![endif]-->
     {{ define "main-content" }}
     <main class="h-screen">
-      <div class="h-full w-full grid">
+      <div class="h-full w-full flex flex-row">
         <script src="/static/dist/ext/sse.js"></script>
         <div
           id="roomTextContainer"
-          class="grid place-content-center"
+          class="grid place-content-center grow"
           hx-ext="sse"
           sse-connect="/rooms/subscribe?roomName={{ .Room.Name }}"
         >
@@ -45,7 +45,7 @@
           </div>
           {{ end }}
         </div>
-        <div id="controls" class="bg-green-300">
+        <div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-10">
           {{ range .Gestures }}
           <button
             hx-get="{{ .Url }}"

routes/templates/tableTemplates.gohtml

@@ -1,5 +1,8 @@
 <h2>Single templates</h2>
 
+
+{{/* takes in rooms.GestureInfo as parameter */}}
+
 {{ define "inactiveBrick" }}
 <div
   class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5"
@@ -28,7 +31,7 @@
 {{ end }}
 {{ define "markAndRaisedBrick" }}
 <div
-  class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border bg-[hsl(var(--brick-color))]/25 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50"
+  class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50"
   style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
 >
   X

routes/templates/tableTemplatesPreview.gohtml

@@ -9,13 +9,15 @@
   <p> speaker </p>
   <p> mark </p>
   <p> mark and active </p>
-  {{ range .Bricks }}
+  {{ range .Gestures }}
+  {{ with .GetGestureInfo }}
   <div class="border-2">for {{ .Name }}</div>
-  <div>{{ template "inactiveBrick" .ColorClass }}</div>
-  <div>{{ template "raisedBrick" .ColorClass }}</div>
-  <div>{{ template "speakerBrick" .ColorClass }}</div>
-  <div>{{ template "markBrick" .ColorClass }}</div>
-  <div>{{ template "markAndRaisedBrick" .ColorClass }}</div>
+  <div>{{ template "inactiveBrick" .Color }}</div>
+  <div>{{ template "raisedBrick" .Color }}</div>
+  <div>{{ template "speakerBrick" .Color }}</div>
+  <div>{{ template "markBrick" .Color }}</div>
+  <div>{{ template "markAndRaisedBrick" .Color }}</div>
+  {{ end }}
   {{ end }}
 </section>