Merge branch 'dev' into fix-pool-form-conviction-growth-not-converted

1Hive · Sep 21, 2024 · 73eed4a · 73eed4a
2 parents 0202ac0 + 8d83a03
commit 73eed4a
Show file tree

Hide file tree

Showing 26 changed files with 161 additions and 156 deletions.
diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx
@@ -192,7 +192,7 @@ export default function Page({
  <MarkdownWrapper>
  {metadata?.description ?? "No description found"}
  </MarkdownWrapper>
- <div className="flex justify-between">
+ <div className="flex justify-between flex-wrap gap-2">
  <div className="flex flex-col gap-2">
  {!isSignalingType && (
  <>

diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx
@@ -219,7 +219,7 @@ export default function Page({
 
  return (
  <div className="page-layout">
- <header className="section-layout flex flex-row items-center gap-10">
+ <header className="section-layout flex flex-row items-center gap-10 flex-wrap justify-end">
  <div>
  <Image
  src={commImg}
@@ -268,7 +268,7 @@ export default function Page({
  </div>
  </div>
  </div>
- <div className="flex flex-col gap-4">
+ <div className="flex flex-col gap-4 mt-auto">
  <RegisterMember
  memberData={isMemberResult}
  registrationCost={getTotalRegistrationCost()}

diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/page.tsx
@@ -126,7 +126,7 @@ export default function Page({
  <div className="mb-2 flex flex-col">
  <div className="flex items-center gap-4">
  <h2>{tokenGarden?.name}</h2>{" "}
- <TokenLabel chainId={chain} classNames="bg-neutral-soft" />
+ <TokenLabel chainId={chain} className="bg-neutral-soft" />
  </div>
  <EthAddress
  icon={false}
@@ -166,13 +166,14 @@ export default function Page({
  <div className="relative flex h-[219px] justify-center">
  <Link
  href={`/gardens/${chain}/${garden}/create-community`}
- className="mt-6"
+ className="mt-6 z-10"
  >
  <Button
  btnStyle="filled"
  disabled={!isConnected || missmatchUrl}
  tooltip={tooltipMessage}
  icon={<PlusIcon height={24} width={24} />}
+ className="shadow-[0_9px_15px_-8px_rgba(0,0,0,0.75)]"
  >
  Create a community
  </Button>

diff --git a/apps/web/app/(app)/gardens/page.tsx b/apps/web/app/(app)/gardens/page.tsx
@@ -103,7 +103,7 @@ export default function Page() {
  </div>
  </header>
  <section className="my-2 flex w-full max-w-2xl flex-col items-center justify-center gap-8 2xl:mt-10">
- <div className="grid max-w-7xl grid-cols-[repeat(auto-fit,minmax(310px,1fr))] gap-6 md:grid-cols-[repeat(auto-fit,320px)] z-10">
+ <div className="flex flex-wrap mx-4 sm:grid max-w-7xl grid-cols-[repeat(auto-fit,minmax(310px,1fr))] gap-6 md:grid-cols-[repeat(auto-fit,320px)] z-10">
  {GardenList}
  </div>
  </section>

diff --git a/apps/web/components/Badge.tsx b/apps/web/components/Badge.tsx
@@ -9,7 +9,7 @@ type BadgeProps = {
  type?: number;
  status?: number;
  label?: string;
- classNames?: string;
+ className?: string;
  icon?: React.ReactNode;
  isCapitalize?: boolean;
 };
@@ -37,7 +37,7 @@ export function Badge({
  type,
  status,
  label,
- classNames,
+ className,
  icon,
 }: BadgeProps): JSX.Element {
  const isStatusBadge = status !== undefined;
@@ -69,7 +69,7 @@ export function Badge({
 
  return (
  <div
- className={`${BASE_STYLES} ${styles} ${classNames} flex items-center gap-2`}
+ className={`${BASE_STYLES} ${styles} ${className} flex items-center gap-2`}
  >
  {iconIncluded && (
  <div className="h-6 w-6 text-inherit">{iconIncluded}</div>

diff --git a/apps/web/components/Button.tsx b/apps/web/components/Button.tsx
@@ -83,7 +83,7 @@ export function Button({
  <button
  type={type}
  className={`${btnStyles[btnStyle][disabled ? "disabled" : color]}
- flex relative cursor-pointer justify-center rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed ${styles}`}
+ flex relative cursor-pointer justify-center rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed h-fit ${styles}`}
  onClick={onClick}
  disabled={disabled || isLoading}
  >

diff --git a/apps/web/components/Card.tsx b/apps/web/components/Card.tsx
@@ -12,7 +12,7 @@ export const Card = ({ children, href, className }: CardProps) => {
  //todo: div or section ?
  <Link href={href}>
  <div
- className={`border1 group relative cursor-pointer rounded-2xl bg-neutral p-6 transition-all duration-200 ease-in-out hover:border-secondary-content hover:bg-secondary-soft ${className}`}
+ className={`border1 group relative cursor-pointer rounded-2xl bg-neutral p-6 transition-all duration-200 ease-in-out hover:border-secondary-content hover:bg-secondary-soft overflow-visible ${className}`}
  >
  {children}
  </div>

diff --git a/apps/web/components/Charts/ChartWrapper.tsx b/apps/web/components/Charts/ChartWrapper.tsx
@@ -47,7 +47,7 @@ export const ChartWrapper = ({
  <>
  <div className="mt-7 flex flex-col gap-12">
  <h3>Conviction voting chart</h3>
- <div className="flex gap-4">
+ <div className="flex gap-4 flex-wrap">
  {legend
  .filter((item) => !(isSignalingType && item.name === "Threshold"))
  .map((item) => (

diff --git a/apps/web/components/CommunityCard.tsx b/apps/web/components/CommunityCard.tsx
@@ -33,7 +33,7 @@ export function CommunityCard({
  <Card
  key={id}
  href={`${pathname}/${id}`}
- className={`w-[313px] ${isNewCommunity ? "shadow-2xl" : ""}`}
+ className={`w-[275px] sm:m-w-[313px] ${isNewCommunity ? "shadow-2xl" : ""}`}
  >
  <Image
  src={commImg}

diff --git a/apps/web/components/DisputeButton.tsx b/apps/web/components/DisputeButton.tsx
@@ -257,7 +257,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
  useDisableButtons(disableSubmitBtn);
 
  const content = (
- <div className="flex md:flex-col gap-10">
+ <div className="flex md:flex-col gap-10 flex-wrap">
  {proposalStatus !== "active" ?
  <div className="p-16 rounded-lg">
  {disputes.map((dispute) => (
@@ -300,7 +300,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
  const buttons = (
  <div className="modal-action w-full">
  {isDisputed ?
- <div className="w-full flex justify-end gap-4">
+ <div className="w-full flex justify-end gap-4 flex-wrap">
  {(
  DisputeStatus[lastDispute.status] === "waiting" &&
  ((isTribunalMember ?? isTribunalSafe) || isTimeout)
@@ -314,7 +314,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
  disabled={disableTribunalSafeButtons}
  >
  <InfoWrapper
- classNames={`[&>svg]:text-secondary-content ${isTimeout ? "tooltip-left" : ""}`}
+ className={"[&>svg]:text-secondary-content"}
  tooltip={
  "Abstain to follow the pool's default resolution (approve/reject) and return collaterals to both parties."
  }
@@ -333,7 +333,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
  tooltip={tooltipMessage}
  >
  <InfoWrapper
- classNames="[&>svg]:text-primary-content"
+ className="[&>svg]:text-primary-content"
  tooltip={
  "Approve if the dispute is invalid and the proposal should remain active."
  }
@@ -350,7 +350,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
  tooltip={tooltipMessage}
  >
  <InfoWrapper
- classNames="[&>svg]:text-danger-button [&:before]:mr-10 tooltip-left"
+ className="[&>svg]:text-danger-button [&:before]:mr-10"
  tooltip={
  "Reject if the proposal violates the rules outlined in the community covenant."
  }
@@ -367,7 +367,7 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
  />
  }
  </div>
- : <div className="flex w-full justify-between items-end">
+ : <div className="flex w-full justify-between items-end flex-wrap gap-2">
  <div>
  {totalStake && (
  <WalletBalance
@@ -390,7 +390,6 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
  <Button
  onClick={handleSubmit}
  color="danger"
- tooltipSide="tooltip-left"
  disabled={
  !isConnected || missmatchUrl || !isEnoughBalance || isCooldown
  }

diff --git a/apps/web/components/Forms/PoolEditForm.tsx b/apps/web/components/Forms/PoolEditForm.tsx
@@ -401,7 +401,7 @@ export default function PoolEditForm({
  <div className="flex flex-col">
  <h4 className="my-4">Arbitration settings</h4>
  </div>
- <div className="flex gap-4 mt-2">
+ <div className="flex gap-4 mt-2 flex-wrap">
  <FormRadioButton
  label="Global gardens tribunal"
  checked={

diff --git a/apps/web/components/Forms/PoolForm.tsx b/apps/web/components/Forms/PoolForm.tsx
@@ -658,7 +658,7 @@ export function PoolForm({ token, communityAddr }: Props) {
  )}
  </div>
  <InfoBox
- classNames="w-fit mt-4"
+ className="w-fit mt-4"
  infoBoxType="info"
  content={
  "The following sections can be updated by the council in the future."
@@ -753,7 +753,7 @@ export function PoolForm({ token, communityAddr }: Props) {
  {/* pool settings section */}
  <div className="flex flex-col">
  <h4 className="my-4">Pool settings</h4>
- <div className="flex gap-8">
+ <div className="flex gap-8 flex-wrap">
  {Object.entries(poolSettingValues).map(
  ([key, { label, description }]) => {
  return (

diff --git a/apps/web/components/Forms/ProposalForm.tsx b/apps/web/components/Forms/ProposalForm.tsx
@@ -406,7 +406,7 @@ export const ProposalForm = ({
  </div>
  </div>
  }
- <div className="flex w-full items-center justify-between py-6">
+ <div className="flex w-full items-center justify-between py-6 flex-wrap">
  <div>
  {arbitrableConfig && (
  <WalletBalance

diff --git a/apps/web/components/IncreasePower.tsx b/apps/web/components/IncreasePower.tsx
@@ -232,7 +232,7 @@ export const IncreasePower = ({
  </div>
  </TransactionModal>
 
- <div className="flex justify-between gap-4">
+ <div className="flex justify-between gap-4 flex-wrap">
  <div className="flex flex-col justify-between gap-2">
  <div className="flex justify-between">
  <div className="flex-start flex gap-2">
@@ -253,7 +253,7 @@ export const IncreasePower = ({
  <InfoBox
  content="staking more tokens in the community can increase your voting power in pools to support proposals."
  infoBoxType="info"
- classNames="max-w-xl"
+ className="max-w-xl"
  />
  </div>
  <div className="flex flex-col gap-4">

diff --git a/apps/web/components/InfoBox.tsx b/apps/web/components/InfoBox.tsx
@@ -7,7 +7,7 @@ type InfoBoxProps = {
  infoBoxType: InfoBoxStyles;
  content?: string;
  contentStyle?: string;
- classNames?: string;
+ className?: string;
  icon?: React.ReactNode;
  hideIcon?: boolean;
  children?: React.ReactNode;
@@ -28,14 +28,14 @@ export function InfoBox({
  infoBoxType,
  content,
  contentStyle,
- classNames,
+ className,
  icon,
  hideIcon,
  children,
 }: InfoBoxProps): JSX.Element {
  return (
  <div
- className={`${BASE_STYLES} ${infoBoxStyles[infoBoxType]} ${classNames}`}
+ className={`${BASE_STYLES} ${infoBoxStyles[infoBoxType]} ${className}`}
  >
  {!hideIcon && (
  <div className="h-9 w-9 text-inherit">

diff --git a/apps/web/components/InfoWrapper.tsx b/apps/web/components/InfoWrapper.tsx
@@ -4,7 +4,7 @@ import { InformationCircleIcon } from "@heroicons/react/24/outline";
 type InfoWrapperProps = {
  tooltip: string;
  children?: React.ReactNode;
- classNames?: string;
+ className?: string;
  customIcon?: React.ReactNode;
  size?: "sm" | "md" | "lg";
 };
@@ -18,15 +18,15 @@ const sizeMap = {
 export function InfoWrapper({
  tooltip,
  children,
- classNames,
+ className,
  customIcon,
  size = "md",
 }: InfoWrapperProps): JSX.Element {
  const { width, height } = sizeMap[size];
 
  return (
  <div
- className={`tooltip flex gap-2 cursor-pointer items-center [&>svg]:text-primary-content max-w-sm [&>svg]:stroke-2 ${classNames}`}
+ className={`tooltip flex gap-2 cursor-pointer items-center [&>svg]:text-primary-content max-w-sm [&>svg]:stroke-2 ${className}`}
  data-tip={tooltip}
  >
  {children}

diff --git a/apps/web/components/Modal.tsx b/apps/web/components/Modal.tsx
@@ -53,7 +53,7 @@ export function Modal({
  className={`modal max-sm:modal-bottom ${className}`}
  ref={dialogRef}
  >
- <div className="modal-box max-w-5xl w-fit flex flex-col gap-8 rounded-3xl bg-primary p-8">
+ <div className="modal-box overflow-auto sm:overflow-visible max-w-5xl w-fit flex flex-col gap-8 rounded-3xl bg-primary p-8">
  <div className="flex items-center justify-between gap-6">
  <div className="flex gap-4 items-center">
  {icon && (

diff --git a/apps/web/components/PoolCard.tsx b/apps/web/components/PoolCard.tsx
@@ -76,7 +76,7 @@ export function PoolCard({ pool, tokenGarden }: Props) {
  </Statistic>
  </div>
  {!isEnabled ?
- <div className="banner  min-w-[262px]">
+ <div className="banner md:min-w-[262px]">
  <ClockIcon className="h-8 w-8 text-secondary-content" />
  <h6>Waiting for approval</h6>
  </div>

diff --git a/apps/web/components/PoolGovernance.tsx b/apps/web/components/PoolGovernance.tsx
@@ -44,7 +44,7 @@ export const PoolGovernance: React.FC<PoolGovernanceProps> = ({
 
  return (
  <section className="section-layout">
- <header className="flex justify-between">
+ <header className="flex justify-between flex-wrap">
  <h2>Pool Governance</h2>
  <div className="flex flex-col gap-2">
  <CheckPassport
@@ -62,9 +62,9 @@ export const PoolGovernance: React.FC<PoolGovernanceProps> = ({
  </header>
  {address && (
  <div className="mt-4 flex flex-col justify-between items-start">
- <div className="flex flex-1 gap-10">
+ <div className="flex flex-1 gap-10 flex-wrap">
  <div className="flex flex-col items-start gap-2">
- <div className="flex items-center gap-6">
+ <div className="flex items-center gap-6 flex-wrap">
  <p className="subtitle2">Your stake in the community:</p>
  <DisplayNumber
  tokenSymbol={strategy.registryCommunity.garden.symbol}
@@ -87,7 +87,7 @@ export const PoolGovernance: React.FC<PoolGovernanceProps> = ({
  <InfoBox
  content={poolSystemDefinition[poolSystem]}
  infoBoxType="info"
- classNames="flex-1 w-full"
+ className="flex-1 w-full"
  />
  </div>
  </div>

diff --git a/apps/web/components/PoolHeader.tsx b/apps/web/components/PoolHeader.tsx
@@ -234,9 +234,9 @@ export default function PoolHeader({
  );
 
  return (
- <section className="section-layout flex flex-col gap-0 overflow-hidden">
+ <section className="section-layout flex flex-col gap-0">
  <header className="mb-2 flex flex-col">
- <div className="flex justify-between">
+ <div className="flex justify-between flex-wrap">
  <h2>
  {ipfsResult?.title} #{poolId}
  </h2>
@@ -312,7 +312,7 @@ export default function PoolHeader({
  <MarkdownWrapper>
  {ipfsResult?.description ?? "No description found"}
  </MarkdownWrapper>
- <div className="mb-10 mt-8 flex items-start gap-24">
+ <div className="mb-10 mt-8 flex items-start justify-between gap-8 flex-wrap">
  <div className="flex flex-col gap-2 max-w-fit">
  <Statistic label="pool type">
  <Badge type={parseInt(proposalType)} />
@@ -330,7 +330,7 @@ export default function PoolHeader({
  <div className="flex flex-col gap-3 sm:flex-row">
  <Badge
  label="conviction voting"
- classNames="text-secondary-content"
+ className="text-secondary-content"
  icon={<ChartBarIcon />}
  />
  <Badge label={PointSystems[pointSystem]} icon={<BoltIcon />} />

diff --git a/apps/web/components/PoolMetrics.tsx b/apps/web/components/PoolMetrics.tsx
@@ -116,7 +116,7 @@ export const PoolMetrics: FC<PoolMetricsProps> = ({
  </TransactionModal>
  <section className="section-layout gap-4 flex flex-col">
  <h2>Pool Funds</h2>
- <div className="flex justify-between items-center">
+ <div className="flex justify-between items-center flex-wrap">
  <div className="flex gap-3 items-baseline">
  <p className="subtitle2">Funds available:</p>
  <DisplayNumber
@@ -127,7 +127,7 @@ export const PoolMetrics: FC<PoolMetricsProps> = ({
  />
  </div>
  <form
- className="flex gap-2"
+ className="flex gap-2 flex-wrap"
  onSubmit={(e) => {
  e.preventDefault();
  handleFundPool();