261 implement layout for voting tab

src/common/assets/svgs/CheckCircle.tsx

@@ -0,0 +1,13 @@
+const CheckCircle = (props: any) => (
+  <svg {...props} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Icon/check_circle">
+      <path
+        id="Vector"
+        d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
+        fill={props.color ?? "#629D13"}
+      />
+    </g>
+  </svg>
+);
+
+export default CheckCircle;

src/common/assets/svgs/FileText.tsx

@@ -0,0 +1,10 @@
+const FileText = (props: any) => (
+  <svg {...props} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6 12H12V13.5H6V12ZM6 9H12V10.5H6V9ZM10.5 1.5H4.5C3.675 1.5 3 2.175 3 3V15C3 15.825 3.6675 16.5 4.4925 16.5H13.5C14.325 16.5 15 15.825 15 15V6L10.5 1.5ZM13.5 15H4.5V3H9.75V6.75H13.5V15Z"
+      fill={props.fill ?? "#EA6A25"}
+    />
+  </svg>
+);
+
+export default FileText;

src/common/assets/svgs/HowToVote.tsx

@@ -0,0 +1,20 @@
+const HowToVote = (props: any) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Icon/how_to_vote">
+      <path
+        id="Vector"
+        d="M18 13.0005H17.32L15.32 15.0005H17.23L19 17.0005H5L6.78 15.0005H8.83L6.83 13.0005H6L3 16.0005V20.0005C3 21.1005 3.89 22.0005 4.99 22.0005H19C20.1 22.0005 21 21.1105 21 20.0005V16.0005L18 13.0005ZM19 20.0005H5V19.0005H19V20.0005ZM11.34 15.0205C11.73 15.4105 12.36 15.4105 12.75 15.0205L19.11 8.66053C19.5 8.27053 19.5 7.64053 19.11 7.25053L14.16 2.30053C13.78 1.90053 13.15 1.90053 12.76 2.29053L6.39 8.66053C6 9.05053 6 9.68053 6.39 10.0705L11.34 15.0205ZM13.46 4.41053L17 7.95053L12.05 12.9005L8.51 9.36053L13.46 4.41053Z"
+        fill="#EE8949"
+      />
+    </g>
+  </svg>
+);
+
+export default HowToVote;

src/common/assets/svgs/Star.tsx

@@ -0,0 +1,62 @@
+const Star = (props: any) => (
+  <svg
+    {...props}
+    width="16"
+    height="15"
+    viewBox="0 0 16 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Star 9" filter="url(#filter0_ii_22042_17248)">
+      <path
+        d="M7.4056 0.829151C7.59271 0.253362 8.40729 0.25336 8.5944 0.829149L9.88048 4.78677C9.96415 5.04427 10.2041 5.21861 10.4749 5.21862L14.6362 5.21877C15.2416 5.2188 15.4934 5.99352 15.0036 6.3494L11.6371 8.7955C11.418 8.95465 11.3264 9.23674 11.41 9.49424L12.6958 13.452C12.8829 14.0278 12.2239 14.5066 11.734 14.1507L8.36735 11.7049C8.1483 11.5457 7.8517 11.5457 7.63265 11.7049L4.26596 14.1507C3.77615 14.5066 3.11713 14.0278 3.3042 13.452L4.58997 9.49424C4.67363 9.23674 4.58198 8.95465 4.36294 8.7955L0.996436 6.3494C0.506648 5.99352 0.758368 5.2188 1.3638 5.21877L5.52514 5.21862C5.79589 5.21861 6.03585 5.04427 6.11952 4.78677L7.4056 0.829151Z"
+        fill="#ECC113"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_ii_22042_17248"
+        x="0.737671"
+        y="-1.10278"
+        width="14.5247"
+        height="16.1257"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="-1.5" />
+        <feGaussianBlur stdDeviation="1.125" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.501961 0 0 0 0 0.321569 0 0 0 0 0.0745098 0 0 0 0.24 0"
+        />
+        <feBlend mode="normal" in2="shape" result="effect1_innerShadow_22042_17248" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="0.75" />
+        <feGaussianBlur stdDeviation="0.375" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
+        <feBlend
+          mode="normal"
+          in2="effect1_innerShadow_22042_17248"
+          result="effect2_innerShadow_22042_17248"
+        />
+      </filter>
+    </defs>
+  </svg>
+);
+
+export default Star;

src/common/ui/components/atoms/filter-chip.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+
+import { cn } from "../../utils";
+
+// TODO: add correct hover effects
+const filterChipVariants = cva(
+  cn(
+    "flex text-sm leading-[157%] items-center justify-center text-[#292929] gap-2 font-medium whitespace-nowrap px-12px py-6px",
+    "no-underline cursor-pointer transition-all duration-200 ease-in-out w-fit rounded-md",
+    "border-none focus:shadow-button-focus disabled:cursor-not-allowed",
+  ),
+
+  {
+    variants: {
+      variant: {
+        // Brand
+        "brand-filled": cn(
+          "bg-#fce9d5 shadow-amber outline-none translate-y-[-1.5px] text-#91321B font-bold border border-#f4b37d border-solid hover:translate-y-0 focus:shadow-#f4b37d",
+          "hover:shadow-[0px_0px_0px_1px_rgba(244, 179, 125, 1)_inset,0px_1px_1px_1px_rgba(252, 233, 213, 1)_inset,0px_0px_0px_2px_rgba(252, 233, 213, 1)_inset]",
+          "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
+        ),
+
+        "brand-plain": cn(
+          "text-[color:var(--primary-600)] p-0 hover:text-[color:var(--Primary-400)]",
+          "disabled:text-[#a6a6a6] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset] disabled:bg-[var(--neutral-100)]",
+        ),
+
+        "brand-outline": cn(
+          "bg-white hover:bg-[var(--neutral-50) outline-none focus:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)]",
+          "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.22)_inset,0px_-1px_0px_0px_rgba(15,15,15,0.15)_inset,0px_1px_2px_-0.5px_rgba(5,5,5,0.08)]",
+          "disabled:text-[#c7c7c7] disabled:shadow-[0px_0px_0px_1px_rgba(15,15,15,0.15)_inset]",
+        ),
+      },
+
+      size: {
+        default: "px-4 py-[9px]",
+        icon: "h-10 w-10",
+      },
+
+      font: {
+        default: "font-medium",
+        bold: "font-bold",
+        semibold: "font-semibold",
+      },
+    },
+
+    defaultVariants: {
+      font: "default",
+      variant: "brand-filled",
+      size: "default",
+    },
+  },
+);
+
+export interface FilterChipProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof filterChipVariants> {
+  asChild?: boolean;
+}
+
+const FilterChip = React.forwardRef<HTMLButtonElement, FilterChipProps>(
+  ({ className, variant, font, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(filterChipVariants({ variant, size, font, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+FilterChip.displayName = "FilterChip";
+
+export { FilterChip, filterChipVariants };

src/common/ui/components/index.ts

@@ -37,6 +37,7 @@ export * from "./atoms/textarea";
 export * from "./atoms/toggle";
 export * from "./atoms/tooltip";
 export * from "./atoms/typography";
+export * from "./atoms/filter-chip";
 
 /**
  * Molecules