fix: query, and merge conflicts

netlify.toml

@@ -1,7 +1,7 @@
 [context.production.environment]
-  VITE_ENDPOINT = "http://167.99.249.42:3000"
+  VITE_ENDPOINT = "https://gh-discuss.devnet.govgen.dev"
   VITE_REPO = "allinbits/govgen-governance-discussions-test"
 
 [context.deploy-preview.environment]
-  VITE_ENDPOINT = "http://167.99.249.42:3000"
+  VITE_ENDPOINT = "https://gh-discuss.devnet.govgen.dev"
   VITE_REPO = "allinbits/govgen-governance-discussions-test"

src/components/home/ProposalCard.vue

@@ -9,11 +9,11 @@ const { link } = defineProps<{ link: string }>();
     </div>
     <div class="flex flex-col text-grey-100 text-300 font-medium">
       <slot name="number"></slot>
-      <div class="flex flex-col text-[white] text-500 font-semibold text-left">
+      <div class="flex flex-col text-[white] text-400 xl:text-500 font-semibold text-left mt-1">
         <slot></slot>
       </div>
     </div>
-    <div class="flex flex-row">
+    <div class="flex flex-row mt-auto">
       <slot name="footer"></slot>
     </div>
   </router-link>

src/components/layout/HeaderSection.vue

@@ -5,8 +5,8 @@ import WalletConnect from "@/components/popups/WalletConnect.vue";
 <template>
   <header>
     <nav class="flex flex-row justify-between items-center py-4 w-full select-none relative">
-      <router-link to="/" class="text-400 font-termina py-4">GovGen</router-link>
-      <WalletConnect />
+      <router-link to="/" class="text-500 font-termina py-4">GovGen</router-link>
+      <WalletConnect class="hidden md:block" />
     </nav>
   </header>
 </template>

src/components/popups/WalletConnect.vue

@@ -67,7 +67,7 @@ bus.on("open", () => {
     <!-- Normal signed out button -->
     <template v-if="connectState">
       <div
-        class="justify-center px-6 py-4 rounded bg-grey-400 text-300 text-center cursor-pointer w-64"
+        class="justify-center px-6 py-4 rounded bg-grey-400 text-300 text-center cursor-pointer"
         @click="isOpen = true"
       >
         {{ $t("components.WalletConnect.button") }}

src/components/proposals/Breakdown.vue

@@ -36,6 +36,7 @@ watch(offset, async (newOffset, oldOffset) => {
 const filteredVotes = computed(() => {
   return votes.value?.proposal_vote;
 });
+
 const getTxHash = (vote: AllVotesQuery["proposal_vote"][0]) => {
   if (vote.block && vote.block.transactions && vote.block.transactions.length > 0) {
     const transaction = vote.block.transactions.filter((tx) => {

src/components/proposals/VotePanel.vue

@@ -46,16 +46,16 @@ const totalVoteText = computed(() => {
 <template>
   <div class="flex flex-col gap-12 rounded-md bg-grey-400 p-10 pb-14 w-full">
     <!-- Upper Section -->
-    <div class="flex flex-row">
+    <div class="flex flex-row items-center">
       <div class="flex flex-col flex-grow">
-        <span class="text-500 text-light"><slot name="header"></slot></span>
-        <span class="text-300 text-grey-100">{{ totalVoteText }} <slot name="type"></slot></span>
+        <span class="text-300 md:text-500 text-light mb-1"><slot name="header"></slot></span>
+        <span class="text-200 md:text-300 text-grey-100">{{ totalVoteText }} <slot name="type"></slot></span>
       </div>
-      <CommonButton class="!bg-grey-200" @click="emits('onBreakdown')">Breakdown</CommonButton>
+      <CommonButton class="!bg-grey-200 hidden md:flex" @click="emits('onBreakdown')">Breakdown</CommonButton>
     </div>
     <!-- Lower Section -->
-    <div v-if="voters >= 1" class="flex flex-row gap-12 w-full items-center">
-      <div class="flex items-center w-28 h-28 pb-1">
+    <div v-if="voters >= 1" class="flex flex-col sm:flex-row gap-6 md:gap-12 w-full sm:items-center">
+      <div class="flex items-center w-28 h-28 pb-1 mr-6">
         <VoteChart
           :yes="voteTallies.yes"
           :no="voteTallies.no"
@@ -67,27 +67,36 @@ const totalVoteText = computed(() => {
         <div class="flex flex-col gap-1">
           <span class="text-accent-100 text-300 start-6">Yes: {{ voteTallies.yes }}</span>
           <span class="text-grey-100 text-100"
-            >{{ formatAmount(tokenTallies.yes, precision) }} {{ denom }} | {{ decToPerc(pcts.yes, 2) }}%</span
+            ><span class="sm:block md:inline-block">{{ formatAmount(tokenTallies.yes, precision) }} {{ denom }} </span>
+            <span class="sm:hidden md:inline-block">&nbsp;|&nbsp;</span
+            ><span> {{ decToPerc(pcts.yes, 2) }}%</span></span
           >
         </div>
         <div class="flex flex-col gap-1">
           <span class="text-accent-200 text-300 start-6">Veto: {{ voteTallies.veto }}</span>
           <span class="text-grey-100 text-100"
-            >{{ formatAmount(tokenTallies.veto, precision) }} {{ denom }} | {{ decToPerc(pcts.veto, 2) }}%</span
+            ><span class="sm:block md:inline-block">{{ formatAmount(tokenTallies.veto, precision) }} {{ denom }}</span>
+            <span class="sm:hidden md:inline-block">&nbsp;|&nbsp;</span
+            ><span> {{ decToPerc(pcts.veto, 2) }}%</span></span
           >
         </div>
       </div>
       <div class="flex flex-col gap-6">
         <div class="flex flex-col gap-1">
           <span class="text-neg-200 text-300 start-6">No: {{ voteTallies.no }}</span>
           <span class="text-grey-100 text-100"
-            >{{ formatAmount(tokenTallies.no, precision) }} {{ denom }} | {{ decToPerc(pcts.no, 2) }}%</span
+            ><span class="sm:block md:inline-block">{{ formatAmount(tokenTallies.no, precision) }} {{ denom }}</span>
+            <span class="sm:hidden md:inline-block">&nbsp;|&nbsp;</span><span> {{ decToPerc(pcts.no, 2) }}%</span></span
           >
         </div>
         <div class="flex flex-col gap-1">
           <span class="text-grey-100 text-300 start-6">Abstain: {{ voteTallies.abstain }}</span>
           <span class="text-grey-100 text-100"
-            >{{ formatAmount(tokenTallies.abstain, precision) }} {{ denom }} | {{ decToPerc(pcts.abstain, 2) }}%</span
+            ><span class="sm:block md:inline-block"
+              >{{ formatAmount(tokenTallies.abstain, precision) }} {{ denom }}</span
+            >
+            <span class="sm:hidden md:inline-block">&nbsp;|&nbsp;</span
+            ><span> {{ decToPerc(pcts.abstain, 2) }}%</span></span
           >
         </div>
       </div>

src/components/ui/DropDown.vue

@@ -27,17 +27,14 @@ const currentValues = computed(() => {
 </script>
 
 <template>
-  <div
-    class="flex flex-col relative bg-grey-300 min-w-56 max-w-56 select-none"
-    :class="open ? ['rounded-t'] : ['rounded']"
-  >
-    <div class="flex flex-row justify-between cursor-pointer gap-3 text-200 px-5 py-4" @click="open = !open">
+  <div class="flex flex-col relative bg-grey-300 min-w-56 select-none" :class="open ? ['rounded-t'] : ['rounded']">
+    <div class="flex flex-row justify-between cursor-pointer gap-3 px-5 py-4" @click="open = !open">
       <div>{{ props.values[model] }}</div>
       <Icon icon="CaretDown" />
     </div>
     <div
       v-if="open"
-      class="flex flex-col absolute top-[52px] min-w-56 left-0 z-50 text-left px-5 pb-2 bg-grey-200 rounded-b"
+      class="flex flex-col absolute top-[calc(1rlh+1lh)] min-w-56 left-0 w-full z-50 text-left px-5 pb-2 bg-grey-200 rounded-b"
     >
       <div
         v-for="(data, index) in currentValues"

src/components/ui/ProposalStatus.vue

@@ -6,11 +6,11 @@ import { PropStatus } from "@/types/proposals";
 const { status } = defineProps<{ status: PropStatus }>();
 
 const colors = {
-  deposit: ["fill-accent-100", "text-accent-100"],
+  deposit: ["fill-accent-200", "text-accent-200"],
   voting: ["fill-accent-100", "text-accent-100"],
-  passed: ["fill-accent-100", "text-accent-100"],
-  rejected: ["fill-neg-200", "text-neg-200"],
-  failed: ["fill-neg-200", "text-neg-200"],
+  passed: ["fill-accent-100"],
+  rejected: ["fill-neg-200"],
+  failed: ["fill-neg-200"],
   unspecified: ["fill-neg-200", "text-neg-200"],
 };
 

src/components/ui/SimpleCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col bg-grey-300 rounded">
+  <div class="flex flex-col bg-grey-300 rounded p-5 md:p-10">
     <slot />
   </div>
 </template>

src/components/ui/UiTabs.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="flex flex-col w-full pt-12 relative">
-    <div ref="toggler" class="flex flex-row w-full gap-12 relative" role="radiogroup" aria-label="Switch">
+  <DropDown v-model="tabIdx" :values="options" @select="changeTab" class="md:hidden" v-bind="$attrs" />
+
+  <div class="hidden md:flex flex-col w-full pt-12 relative" v-bind="$attrs">
+    <div ref="toggler" class="flex flex-row w-full gap-6 md:gap-12 relative" role="radiogroup" aria-label="Switch">
       <!-- Tabs -->
       <div v-for="(option, index) in options" :key="option" :ref="(el) => tabRefs.push(el as any)" class="z-2">
         <input
@@ -17,7 +19,7 @@
           :for="id + option"
           class="flex text-grey-50 py-1.5 text-500 cursor-pointer peer-checked:text-light ease-in-out duration-300"
         >
-          {{ $t('ui.tabs.'+option) }}
+          {{ $t("ui.tabs." + option) }}
         </label>
       </div>
     </div>
@@ -30,6 +32,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import DropDown from "./DropDown.vue";
 
 type Props = {
   modelValue?: string | number;
@@ -41,12 +44,13 @@ const tabSelected = defineModel<string>();
 const toggler = ref<HTMLElement | null>(null);
 const tabRefs = ref<HTMLElement[]>([]);
 const line = ref<HTMLElement | null>(null);
+const tabIdx = ref<number>(0);
 
 const props = withDefaults(defineProps<Props>(), { modelValue: undefined });
-
 function changeTab(idx: number = 0) {
-  tabSelected.value = props.options[idx];
-  const el = tabRefs.value[idx] as HTMLElement;
+  tabIdx.value = idx;
+  tabSelected.value = props.options[tabIdx.value];
+  const el = tabRefs.value[tabIdx.value] as HTMLElement;
   if (!el || !line.value) {
     return;
   }

src/composables/useChainData.ts

@@ -75,11 +75,11 @@ export const useChainData = () => {
     return result;
   };
   const getVotes = (address: string, proposalId: number) => {
-    const { result } = useVotesQuery({ address, proposalId, propId: proposalId.toString() });
+    const { result } = useVotesQuery({ address, proposalId });
     return result;
   };
   const getAllVotes = (proposalId: number, limit: number, offset: number) => {
-    const { result } = useAllVotesQuery({ limit, offset, proposalId, propId: proposalId.toString() });
+    const { result } = useAllVotesQuery({ limit, offset, proposalId });
     return result;
   };
   const getVoteOption = (proposalId: number, option: string) => {
@@ -131,12 +131,12 @@ export const useChainData = () => {
     return result;
   };
   const getVotesAsync = async (address: string, proposalId: number) => {
-    const result = await useLazyVotesQuery({ address, proposalId, propId: proposalId.toString() }).load();
+    const result = await useLazyVotesQuery({ address, proposalId }).load();
     return result;
   };
 
   const getAllVotesAsync = async (proposalId: number, limit: number, offset: number) => {
-    const result = useLazyAllVotesQuery({ limit, offset, proposalId, propId: proposalId.toString() }).load();
+    const result = useLazyAllVotesQuery({ limit, offset, proposalId }).load();
     return result;
   };
   const getVoteOptionAsync = async (proposalId: number, option: string) => {