Replace custom CSS with tailwind classes where possible

client/src/components/ui/RatingScale.vue

@@ -10,17 +10,28 @@
       </span>
       <h5 class="text-base">{{ props.answers }} Antworten</h5>
     </div>
-    <div class="gradient-with-circle relative grid grid-cols-8 pt-3">
-      <div class="gradient relative z-10 h-2" :style="gradientStyle"></div>
-      <div class="empty-bar absolute h-2 w-full bg-gray-300"></div>
-      <div class="circle-wrapper relative">
-        <div class="circle z-20" :style="circleStyle"></div>
+    <div class="relative grid grid-cols-8 pt-3 grid-areas-rating-scale">
+      <div
+        class="gradient relative z-10 h-2 overflow-visible grid-in-bar"
+        :style="gradientStyle"
+      ></div>
+      <div class="empty-bar absolute h-2 w-full bg-gray-300 grid-in-bar"></div>
+      <div class="circle-wrapper relative grid-in-bar">
+        <div
+          class="circle absolute -top-3 z-20 h-8 w-8 -translate-x-1/2 rounded-full p-[3px] before:block before:h-full before:w-full before:rounded-full before:bg-white"
+          :style="circleStyle"
+        ></div>
       </div>
       <div
         v-for="legend in legends"
         :key="legend.index"
-        :class="`legend-${legend.index}`"
-        class="legend"
+        :class="{
+          'grid-in-fst': legend.index == 1,
+          'grid-in-snd': legend.index == 2,
+          'grid-in-trd': legend.index == 3,
+          'grid-in-fth': legend.index == 4,
+        }"
+        class="legend relative inline-flex flex-col items-center pt-4 before:absolute before:top-0 before:left-1/2 before:h-4 before:w-px before:bg-gray-500"
       >
         <div
           :class="[{ hidden: legend.index === 3 || legend.index === 2 }, 'md:block']"
@@ -137,32 +148,6 @@ console.log(props);
 </script>
 
 <style lang="postcss" scoped>
-.gradient-with-circle {
-  display: grid;
-  grid-template-areas:
-    ". b b b b b b ."
-    "f f s s t t o o";
-}
-
-.circle {
-  width: 32px;
-  height: 32px;
-  border-radius: 32px;
-  position: absolute;
-  transform: translateX(-50%);
-  top: -12px;
-  padding: 3px;
-}
-
-.circle:before {
-  content: "";
-  background-color: white;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-}
-
 .gradient {
   background-color: theme(colors.yellow.400);
   background: linear-gradient(
@@ -172,50 +157,5 @@ console.log(props);
     theme(colors.green.500) 66%,
     theme(colors.green.600) 100%
   );
-
-  grid-area: b;
-  overflow: visible;
-}
-
-.empty-bar {
-  grid-area: b;
-}
-
-.circle-wrapper {
-  grid-area: b;
-}
-
-.legend {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 16px;
-}
-
-.legend-1 {
-  grid-area: f;
-}
-
-.legend-2 {
-  grid-area: s;
-}
-
-.legend-3 {
-  grid-area: t;
-}
-
-.legend-4 {
-  grid-area: o;
-}
-
-.legend::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  width: 1px;
-  background-color: theme(colors.gray.500);
-  height: 16px;
-  left: 50%;
 }
 </style>

client/src/components/ui/VerticalBarChart.vue

@@ -13,7 +13,7 @@
         </span>
       </div>
       <div
-        class="background relative col-span-5 col-start-2 row-start-1 h-1/2 w-full self-center border-y border-y-gray-400"
+        class="background before:border-t before:border-t-gray-400 before:w-full before:absolute before:top-1/2 relative col-span-5 col-start-2 row-start-1 h-1/2 w-full self-center border-y border-y-gray-400"
       ></div>
       <div
         class="relative col-span-5 col-start-2 row-start-1 flex h-[200px] w-full content-center items-end justify-around border-y border-gray-400 border-y-gray-400"
@@ -61,14 +61,3 @@ const greenStyle = {
   height: `${100 * ratio.value}%`,
 };
 </script>
-
-<style lang="postcss">
-.background::before {
-  content: "";
-  border-top: 1px theme(colors.gray.400) solid;
-  width: 100%;
-  height: 0;
-  position: absolute;
-  top: 50%;
-}
-</style>

client/src/pages/StyleGuidePage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import IconLogout from "@/components/icons/IconLogout.vue";
 import IconSettings from "@/components/icons/IconSettings.vue";
-import VerticalBarChart from "@/components/ui/VerticalBarChar.vue";
+import VerticalBarChart from "@/components/ui/VerticalBarChart.vue";
 import ItCheckbox from "@/components/ui/ItCheckbox.vue";
 import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
 import ItDropdown from "@/components/ui/ItDropdown.vue";

client/tailwind.config.js

@@ -42,6 +42,9 @@ module.exports = {
           "y-axis . left-chart . right-chart .",
           "y-axis . left-label . right-label .",
         ],
+        "rating-scale": [
+          '.   bar bar bar bar bar bar   .',
+          'fst fst snd snd trd trd fth fth']
       },
       gridTemplateColumns: {
         "horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",