Merge pull request #1231 from dacadeorg/fix/scoreboard-filter-spacing

Fix: scoreboard filter spacing

Author: serapieTuyishime

src/components/sections/communities/overview/Sidebar.tsx

@@ -2,6 +2,7 @@ import { useSelector } from "@/hooks/useTypedSelector";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
+import classNames from "classnames";
 
 /**
  * @interface SidebarProps
@@ -41,7 +42,7 @@ export default function Sidebar(): JSX.Element {
       </Link>
       {hasCurrentCommunity && (
         <Link href={scoreboardLink}>
-          <div className={isActive(scoreboardLink) ? "pt-5" : "opacity-80 md:block hidden scroll-smooth pt-5"}>
+          <div className={classNames("pt-6", { "opacity-80 md:block hidden scroll-smooth": isActive(scoreboardLink) })}>
             <div className="font-medium text-.5xl leading-snug">{t("communities.overview.scoreboard.title")}</div>
             <div className="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">{t("communities.overview.scoreboard.description")}</div>
           </div>

src/components/sections/communities/overview/scoreboard/Filter.tsx

@@ -108,42 +108,38 @@ export default function Filters(): ReactElement {
   };
 
   return (
-    <div className="lg:flex flex-col w-2/4 mr-8 divide-y divide-solid divide-gray-200 hidden">
-      <div className="divide-y divide-gray-200">
-        <div className="block mt-6 mb-6">
-          <span className="text-gray-700 mb-4">Filter by</span>
-          <div className="mt-6 mb-6">
-            {filterOptions.map((option, i) => (
-              <FilterOption
-                key={`option-${i}`}
-                defaultChecked={filterBy === option.value}
-                label={option.label}
-                value={option.value}
-                data={filterBy}
-                name="filter-by-option"
-                onChange={handleFilterByChange}
-              />
-            ))}
-          </div>
+    <div className="lg:flex flex-col mr-8 hidden mt-6 space-y-6">
+      <div>
+        <span className="text-gray-700">Filter by</span>
+        <div className="mt-3 space-y-1">
+          {filterOptions.map((option, i) => (
+            <FilterOption
+              key={`option-${i}`}
+              defaultChecked={filterBy === option.value}
+              label={option.label}
+              value={option.value}
+              data={filterBy}
+              name="filter-by-option"
+              onChange={handleFilterByChange}
+            />
+          ))}
         </div>
       </div>
 
-      <div className="pt-4">
-        <div className="block">
-          <span className="text-gray-700 mb-4">Sort</span>
-          <div className="mt-6 mb-6">
-            {sortingOptions.map((option, i) => (
-              <FilterOption
-                key={`sorting-option-${i}`}
-                defaultChecked={sortBy === option.value}
-                label={option.label}
-                value={option.value}
-                data={sortBy}
-                name="sort-by-option"
-                onChange={handleSortByChange}
-              />
-            ))}
-          </div>
+      <div>
+        <span className="text-gray-700">Sort</span>
+        <div className="mt-3 space-y-1">
+          {sortingOptions.map((option, i) => (
+            <FilterOption
+              key={`sorting-option-${i}`}
+              defaultChecked={sortBy === option.value}
+              label={option.label}
+              value={option.value}
+              data={sortBy}
+              name="sort-by-option"
+              onChange={handleSortByChange}
+            />
+          ))}
         </div>
       </div>
     </div>

src/components/sections/communities/overview/scoreboard/_partials/FilterOption.tsx

@@ -33,16 +33,14 @@ export default function FilterOption({ label = "", value = "", data = "", name =
   const isChecked = useMemo(() => value.toString().toLowerCase() === data.toLowerCase(), [data, value]);
 
   return (
-    <div className="mt-2 mb-2">
-      <label className="inline-flex items-center">
-        <Radio disabled={isChecked} {...props} name={name} data={data} value={value} className="w-8" />
-        <span
-          className={classNames("ml-4", {
-            "font-bold": isChecked,
-          })}
-        >
-          {label}
-        </span>
+    <div className="flex items-center gap-2">
+      <Radio disabled={isChecked} {...props} name={name} data={data} value={value} className="!w-4.5 !h-4.5 mx-0" />
+      <label
+        className={classNames("text-sm", {
+          "font-bold": isChecked,
+        })}
+      >
+        {label}
       </label>
     </div>
   );

src/components/ui/Radio.tsx

@@ -3,6 +3,7 @@ import React, { HTMLProps, useMemo } from "react";
 
 interface RadioProps extends HTMLProps<HTMLInputElement> {
   communityStyles?: boolean;
+  className?: string;
 }
 
 const colors = {
@@ -20,10 +21,10 @@ const colors = {
  * @typedef {RadioProps}
  */
 
-export default function Radio({ disabled, communityStyles, ...props }: RadioProps) {
+export default function Radio({ disabled, communityStyles, className = "", ...props }: RadioProps) {
   const styles = useMemo(() => (!communityStyles ? {} : { color: colors?.textAccent }), [communityStyles]);
 
-  const radioClassName = classNames("w-9 h-9 border-gray-400 text-primary rounded-full", { "cursor-not-allowed border-4": disabled }, { "cursor-pointer": !disabled });
+  const radioClassName = classNames("w-9 h-9 border-gray-400 text-primary rounded-full", { "cursor-not-allowed border-4": disabled }, { "cursor-pointer": !disabled }, className);
 
   return <input disabled {...props} className={radioClassName} style={styles} type="radio" />;
 }