Radio design done.

src/assets/vendors.css

@@ -59,3 +59,20 @@
 .p-slider.p-slider-horizontal {
   @apply !h-1
 }
+/* radio */
+/* inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary */
+/* p-radiobutton
+p-radiobutton-box
+p-radiobutton-icon */
+.p-radiobutton {
+  @apply !align-text-top
+}
+.p-radiobutton-box {
+  @apply !bg-neutral-10
+}
+.p-radiobutton-box .p-highlight:not(.p-disabled):hover {
+  @apply !bg-neutral-10
+}
+.p-radiobutton-icon {
+  @apply !bg-primary
+}

src/components/Discover/SidebarFilter.vue

@@ -12,51 +12,51 @@
       <div class="space-y-2 mr-4 w-48 text-sm">
         <div>
           <p class="h2">Filter Type</p>
-          <div v-for="(item, index) in selectFilter['Filter Type']" :key="index" class="flex align-items-center">
-            <RadioButton v-model="selectValue[0]" :inputId="item + index" name="Filter Type" :value="item" />
-            <label :for="item + index" class="ml-2">{{ item }}</label>
+          <div v-for="(item, index) in selectFilter['Filter Type']" :key="index">
+            <RadioButton v-model="selectValue[0]" :inputId="item + index" name="Filter Type" :value="item" class="mb-1 mr-2"/>
+            <label :for="item + index">{{ item }}</label>
           </div>
         </div>
         <div v-show="selectValue[0] === 'Sequence'">
           <p class="h2">Activity Sequence</p>
-          <div v-for="(item, index) in selectFilter['Activity Sequence']" :key="index" class="flex align-items-center">
-            <RadioButton v-model="selectValue[1]" :inputId="item + index" name="Activity Sequence" :value="item" />
-            <label :for="item + index" class="ml-2">{{ item }}</label>
+          <div v-for="(item, index) in selectFilter['Activity Sequence']" :key="index">
+            <RadioButton v-model="selectValue[1]" :inputId="item + index" name="Activity Sequence" :value="item" class="mb-1 mr-2"/>
+            <label :for="item + index">{{ item }}</label>
           </div>
         </div>
         <div v-show="selectValue[0] === 'Sequence' && selectValue[1] === 'Start activity / End activity'">
           <p class="h2">Start & End</p>
-          <div v-for="(item, index) in selectFilter['Start & End']" :key="index" class="flex align-items-center">
-            <RadioButton v-model="selectValue[2]" :inputId="item + index" name="Start & End" :value="item" />
-            <label :for="item + index" class="ml-2">{{ item }}</label>
+          <div v-for="(item, index) in selectFilter['Start & End']" :key="index">
+            <RadioButton v-model="selectValue[2]" :inputId="item + index" name="Start & End" :value="item" class="mb-1 mr-2"/>
+            <label :for="item + index">{{ item }}</label>
           </div>
         </div>
         <div v-show="selectValue[0] === 'Sequence' && selectValue[1] === 'Sequence'">
           <p class="h2">Mode</p>
-          <div v-for="(item, index) in selectFilter['Mode']" :key="index" class="flex align-items-center">
-            <RadioButton v-model="selectValue[3]" :inputId="item + index" name="Mode" :value="item" />
-            <label :for="item + index" class="ml-2">{{ item }}</label>
+          <div v-for="(item, index) in selectFilter['Mode']" :key="index">
+            <RadioButton v-model="selectValue[3]" :inputId="item + index" name="Mode" :value="item" class="mb-1 mr-2"/>
+            <label :for="item + index">{{ item }}</label>
           </div>
         </div>
         <div v-show="selectValue[0] === 'Attributes'">
           <p class="h2">Mode</p>
-          <div v-for="(item, index) in selectFilter['ModeAtt']" :key="index" class="flex align-items-center">
-            <RadioButton v-model="selectValue[4]" :inputId="item + index" name="ModeAtt" :value="item" />
-            <label :for="item + index" class="ml-2">{{ item }}</label>
+          <div v-for="(item, index) in selectFilter['ModeAtt']" :key="index">
+            <RadioButton v-model="selectValue[4]" :inputId="item + index" name="ModeAtt" :value="item" class="mb-1 mr-2"/>
+            <label :for="item + index">{{ item }}</label>
           </div>
         </div>
         <div>
           <p class="h2">Refine</p>
-          <div v-for="(item, index) in selectFilter['Refine']" :key="index" class="flex align-items-center">
-            <RadioButton v-model="selectValue[5]" :inputId="item + index" name="Refinee" :value="item" />
-            <label :for="item + index" class="ml-2">{{ item }}</label>
+          <div v-for="(item, index) in selectFilter['Refine']" :key="index">
+            <RadioButton v-model="selectValue[5]" :inputId="item + index" name="Refinee" :value="item" class="mb-1 mr-2"/>
+            <label :for="item + index">{{ item }}</label>
           </div>
         </div>
         <div v-show="selectValue[0] === 'Timeframes'">
           <p class="h2">Containment</p>
-          <div v-for="(item, index) in selectFilter['Containment']" :key="index" class="flex align-items-center">
-            <RadioButton v-model="selectValue[6]" :inputId="item + index" name="Containment" :value="item" />
-            <label :for="item + index" class="ml-2">{{ item }}</label>
+          <div v-for="(item, index) in selectFilter['Containment']" :key="index">
+            <RadioButton v-model="selectValue[6]" :inputId="item + index" name="Containment" :value="item" class="mb-1 mr-2"/>
+            <label :for="item + index">{{ item }}</label>
           </div>
         </div>
       </div>

src/components/Discover/SidebarView.vue

@@ -43,10 +43,12 @@
         <ul class="space-y-2">
           <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')">
             <div class="flex items-center w-1/2">
-              <input type="radio" id="freq" value="freq" name="dataLayer" class="peer hidden" checked/>
+              <!-- <input type="radio" id="freq" value="freq" name="dataLayer" class="peer hidden" checked/>
               <label for="freq" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary">
               </label>
-              <span class="inline-block ml-2">Frequency</span>
+              <span class="inline-block ml-2">Frequency</span> -->
+              <RadioButton v-model="dataLayerType" inputId="freq" name="dataLayer" value="freq" class="mr-2"/>
+              <label>Frequency</label>
             </div>
             <div class="w-1/2">
               <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'">
@@ -56,9 +58,11 @@
           </li>
           <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')">
             <div class="flex items-center w-1/2">
-              <input type="radio" id="duration" value="duration" name="dataLayer" class="peer hidden" />
+              <!-- <input type="radio" id="duration" value="duration" name="dataLayer" class="peer hidden" />
               <label for="duration" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary"></label>
-              <span class="inline-block ml-2">Duration</span>
+              <span class="inline-block ml-2">Duration</span> -->
+              <RadioButton v-model="dataLayerType" inputId="duration" name="dataLayer" value="duration" class="mr-2"/>
+              <label>Duration</label>
             </div>
             <div class="w-1/2">
               <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'">