Tweak styles to look better on phones

BlossomLabs · Sep 25, 2024 · 927c662 · 927c662
1 parent af4c467
commit 927c662
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -3,6 +3,7 @@
 import { Badge } from "@repo/ui/components/ui/badge";
 import { Label } from "@repo/ui/components/ui/label";
 import { Skeleton } from "@repo/ui/components/ui/skeleton";
+import { cn } from "@repo/ui/lib/utils";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -49,17 +50,16 @@ export default function Page() {
 
   return (
     <main>
-      <ContractLinks council={council} pool={pool} />
       <Link
         href={`https://explorer.superfluid.finance/${NETWORK}-mainnet/accounts/${council}?tab=pools`}
         target="_blank"
       >
         <CouncilName
           name={councilName}
-          className="h-12 text-4xl font-bold mb-4 text-accent"
+          className="min-h-12 text-4xl font-bold mb-4 text-accent text-center"
         />
       </Link>
-      <div className="flex flex-col gap-4 mb-4">
+      <div className="flex flex-col gap-4 mb-4 text-justify">
         {totalVotingPower ? (
           <p>
             You are 1 of {councilMembers?.length} council members, holding{" "}
@@ -83,19 +83,29 @@ export default function Page() {
         isLoading={isLoading || !council}
         votingPower={votingPower}
       />
+      <ContractLinks
+        council={council}
+        pool={pool}
+        className="mt-4 justify-center"
+      />
     </main>
   );
 }
 
 function ContractLinks({
   council,
   pool,
-}: { council: string | undefined; pool: string | undefined }) {
+  className,
+}: {
+  council: string | undefined;
+  pool: string | undefined;
+  className?: string;
+}) {
   const chains = useChains();
   const chain = chains[0]; // It should be the one defined in NETWORK
   const explorer = chain?.blockExplorers?.default.url;
   return (
-    <div className="flex flex-row gap-1 mb-4 items-center justify-end">
+    <div className={cn("flex flex-row gap-1 mb-4 items-center", className)}>
       <Label className="pr-2">Contracts: </Label>
       <Badge variant="outline">
         <Link href={`${explorer}/address/${council}`} target="_blank">

diff --git a/apps/web/src/components/Footer.tsx b/apps/web/src/components/Footer.tsx
@@ -6,15 +6,15 @@ export default function Footer() {
   return (
     <div className="bg-gray-800 py-4">
       <div className="container max-w-4xl mx-auto flex justify-between items-center">
-        <p className="text-md text-gray-400">
+        <p className="text-md text-center text-gray-400">
           Built with ❤️ by{" "}
           <Button variant="link" className="text-gray-400 px-0 text-lg" asChild>
             <Link href="https://blossom.software" target="_blank">
               Blossom Labs
             </Link>
           </Button>
         </p>
-        <p className="text-md text-gray-400">
+        <p className="text-md text-center text-gray-400">
           ⚡️ Powered by{" "}
           <Button variant="link" className="text-gray-400 px-0 text-lg" asChild>
             <Link href="https://superfluid.finance" target="_blank">

diff --git a/apps/web/src/components/VotingCard.tsx b/apps/web/src/components/VotingCard.tsx
@@ -81,14 +81,19 @@ const VotingCard = ({
         ) : (
           <>
             <div className="flex justify-between">
-              <h4 className="h-12 text-xl mb-6 text-accent">
+              <h4 className="h-12 text-xl mb-6 text-accent flex-wrap">
                 Cast Your Vote{" "}
-                {projects.length > maxVotedProjects
-                  ? `(${votedProjects.length} / ${maxVotedProjects} projects)`
-                  : ""}
+                {projects.length > maxVotedProjects ? (
+                  <span className="text-nowrap text-sm">
+                    ({votedProjects.length} / {maxVotedProjects} projects)
+                  </span>
+                ) : null}
               </h4>
               <div className="text-sm mt-2">
-                Used {totalVotes} / {votingPower}
+                Used{" "}
+                <span className="text-nowrap">
+                  {totalVotes} / {votingPower}
+                </span>
               </div>
             </div>
             {projects.map((project) => {
@@ -98,7 +103,9 @@ const VotingCard = ({
                   key={project.account}
                   className="flex items-center justify-between mb-3"
                 >
-                  <span className="flex-grow">{project.name}</span>
+                  <span className="flex-grow text-ellipsis overflow-hidden">
+                    {project.name}
+                  </span>
                   <div className="flex items-center">
                     <Button
                       disabled={voteCount <= 0}
@@ -143,7 +150,7 @@ const VotingCard = ({
                     >
                       +
                     </Button>
-                    <span className="w-12 text-right">
+                    <span className="w-12 text-right hidden sm:block">
                       {totalVotes > 0
                         ? Math.round((voteCount / votingPower) * 100)
                         : 0}

diff --git a/constants.ts b/constants.ts
@@ -3,7 +3,7 @@ export const SITE_DESCRIPTION =
   "Democratically allocate a budget across projects";
 
 export const DEFAULT_COUNCIL_ADDRESS =
-  "0xaBED086b76DD178d7a981fAC412335Bac4E64Dd7";
+  "0xfa942226e5dd1e2d4d99014982846786b09939da";
 export const COUNCIL_FACTORY_ADDRESS =
   "0xdef306E171B39101cf133747f391E5e1A49C8948"; // Update also in contracts/councilhaus/subgraph/config/*.json
 export const NETWORK: "optimism" | "base" = "base";