Dark theme wip

voteagora · Dec 6, 2024 · 76b2276 · 76b2276
1 parent 05a54fc
commit 76b2276
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 51 deletions.
diff --git a/src/app/delegates/components/IssuesFilter.tsx b/src/app/delegates/components/IssuesFilter.tsx
@@ -59,7 +59,7 @@ export default function IssuesFilter() {
     >
       {() => (
         <>
-          <Listbox.Button className="w-full sm:w-[200px] bg-wash text-base font-medium border border-line rounded-full py-2 px-4 flex items-center justify-between">
+          <Listbox.Button className="w-full sm:w-[200px] font-medium border border-line rounded-full py-2 px-4 flex items-center justify-between bg-neutral text-primary">
             <span>
               {issuesFilterOptions[filterParam]?.value ||
                 issuesFilterOptions.all.value}

diff --git a/src/components/Delegates/DelegateCard/DelegateCard.tsx b/src/components/Delegates/DelegateCard/DelegateCard.tsx
@@ -5,10 +5,10 @@ import { Delegate } from "@/app/api/common/delegates/delegate";
 import { SCWProfileImage } from "@/components/Delegates/DelegateCard/SCWProfileImage";
 
 const CardHeader = ({
-                      title,
-                      cornerTitle,
-                      subtitle,
-                    }: {
+  title,
+  cornerTitle,
+  subtitle,
+}: {
   title: string;
   cornerTitle: string;
   subtitle: string;
@@ -53,7 +53,6 @@ export default function DelegateCard({
   delegate: Delegate;
   totalProposals: number;
 }) {
-
   // Display SCW if exists
   const hasSCWAddress = Boolean(delegate.statement?.scw_address);
 

diff --git a/src/components/Delegates/DelegatesFilter/DelegatesFilter.tsx b/src/components/Delegates/DelegatesFilter/DelegatesFilter.tsx
@@ -35,7 +35,7 @@ export default function DelegatesFilter() {
     >
       {() => (
         <>
-          <Listbox.Button className="w-full sm:w-[200px] bg-wash text-base font-medium border border-line rounded-full py-2 px-4 flex items-center justify-between">
+          <Listbox.Button className="w-full sm:w-[200px] text-base font-medium border border-line rounded-full py-2 px-4 flex items-center justify-between bg-neutral text-primary">
             <span>
               {delegatesFilterOptions[
                 orderByParam as keyof typeof delegatesFilterOptions

diff --git a/src/components/Header/DesktopConnectButton.tsx b/src/components/Header/DesktopConnectButton.tsx
@@ -8,7 +8,7 @@ export function DesktopConnectButton() {
         return (
           <div
             onClick={!isConnected ? () => show?.() : undefined}
-            className="border border-line font-medium bg-wash py-2 px-4 rounded-full cursor-pointer hidden sm:flex items-center transition-all hover:shadow-newDefault"
+            className="border border-line text-primary font-medium bg-neutral py-2 px-4 rounded-full cursor-pointer hidden sm:flex items-center transition-all hover:shadow-newDefault"
           >
             {isConnected ? (
               <DesktopProfileDropDown ensName={ensName} />

diff --git a/src/components/Header/DesktopProfileDropDown.tsx b/src/components/Header/DesktopProfileDropDown.tsx
@@ -80,7 +80,7 @@ export const DesktopProfileDropDown = ({ ensName }: Props) => {
           >
             <Popover.Panel>
               {({ close }) => (
-                <div className="bg-neutral py-8 px-6 mt-4 mr-[-16px] rounded-xl w-[350px]">
+                <div className="bg-neutral border border-line py-8 px-6 mt-4 mr-[-16px] rounded-xl w-[350px]">
                   <VStack gap={3} className="min-h-[250px] justify-center">
                     <HStack className="items-center mb-1">
                       <div

diff --git a/src/components/Proposals/Proposal/OPApprovalProposalStatus.jsx b/src/components/Proposals/Proposal/OPApprovalProposalStatus.jsx
@@ -1,14 +1,13 @@
-import { HStack, VStack } from "@/components/Layout/Stack";
 import { pluralize } from "@/lib/utils";
 
 export default function OPApprovalProposalStatus({ proposal }) {
   const maxOptions = proposal.proposalData.proposalSettings.maxApprovals;
   return (
-    <VStack alignItems="items-end">
+    <div className="flex flex-col items-end">
       <div className="text-xs text-secondary">Select {maxOptions} of</div>
-      <HStack gap={1}>
+      <div className="flex flex-row gap-1">
         {pluralize("Option", proposal.proposalData.options.length)}
-      </HStack>
-    </VStack>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/Proposals/Proposal/OPOptimisticProposalStatus.jsx b/src/components/Proposals/Proposal/OPOptimisticProposalStatus.jsx
@@ -1,4 +1,3 @@
-import { VStack } from "@/components/Layout/Stack";
 import { formatUnits } from "ethers";
 import { disapprovalThreshold } from "@/lib/constants";
 
@@ -20,16 +19,16 @@ export default function OPOptimisticProposalStatus({
   const status =
     againstRelativeAmount <= disapprovalThreshold ? "approved" : "defeated";
   return (
-    <VStack className="text-right">
-      <VStack>
+    <div className="flex flex-col text-right text-primary">
+      <div>
         <div className="text-xs text-secondary">
           <p>
             {againstRelativeAmount}% / {disapprovalThreshold}% against needed to
             defeat
           </p>
         </div>
         <p>Optimistically {status}</p>
-      </VStack>
-    </VStack>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/Proposals/Proposal/OPStandardProposalStatus.jsx b/src/components/Proposals/Proposal/OPStandardProposalStatus.jsx
@@ -1,4 +1,3 @@
-import { HStack } from "@/components/Layout/Stack";
 import { TokenAmountDisplay } from "@/lib/utils";
 import { formatUnits } from "ethers";
 
@@ -14,7 +13,7 @@ export default function OPStandardProposalStatus({ proposal }) {
   const totalLength = forLength + againstLength + abstainLength;
   return (
     <div className="flex flex-col items-end gap-1 justify-center">
-      <HStack gap={1} justifyContent="space-between">
+      <div className="flex flex-row space-between text-primary gap-1">
         <div>
           {TokenAmountDisplay({
             amount: proposal.proposalResults.for,
@@ -30,7 +29,7 @@ export default function OPStandardProposalStatus({ proposal }) {
           })}{" "}
           Against
         </div>
-      </HStack>
+      </div>
 
       {totalLength > 0 && (
         <div className="flex w-52 h-1 bg-wash rounded-full">
@@ -49,7 +48,7 @@ export default function OPStandardProposalStatus({ proposal }) {
         </div>
       )}
 
-      {totalLength == 0 && (
+      {totalLength === 0 && (
         <div className="flex w-52 h-1 bg-wash rounded-full">
           <div className=" bg-tertiary h-1" style={{ width: `100%` }}></div>
         </div>

diff --git a/src/components/Proposals/Proposal/Proposal.tsx b/src/components/Proposals/Proposal/Proposal.tsx
@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { HStack, VStack } from "@/components/Layout/Stack";
 import ProposalStatus from "../ProposalStatus/ProposalStatus";
 import OPStandardProposalStatus from "./OPStandardProposalStatus";
 import OPApprovalProposalStatus from "./OPApprovalProposalStatus";
@@ -35,19 +34,19 @@ export default function Proposal({
       target={proposal.proposalType === "SNAPSHOT" ? "_blank" : ""}
     >
       <div className="border-b border-line items-center flex flex-row bg-neutral">
-        <VStack
+        <div
           className={cn(
-            "whitespace-nowrap overflow-ellipsis overflow-hidden py-4 px-6",
+            "flex flex-col whitespace-nowrap overflow-ellipsis overflow-hidden py-4 px-6",
             "w-full sm:w-[55%] items-start justify-center"
           )}
         >
           {proposal.proposalType === "SNAPSHOT" ? (
-            <HStack className="text-xs text-secondary" gap={1}>
+            <div className="flex flex-row text-xs text-secondary gap-1">
               <p>Snapshot Proposal</p>
               <ArrowTopRightOnSquareIcon className="w-3 h-3 mt-1" />
-            </HStack>
+            </div>
           ) : (
-            <HStack className="text-xs text-secondary" gap={1}>
+            <div className="flex flex-row text-xs text-secondary gap-1">
               {/* Warning: this assumes OP FND is the only proposer. Will need to maintain an array of OP Foundation proposals eventually */}
               <div>
                 {proposalText}{" "}
@@ -64,18 +63,16 @@ export default function Proposal({
               <div className="block sm:hidden">
                 <ProposalStatus proposal={proposal} />
               </div>
-            </HStack>
+            </div>
           )}
-          <div
-            className={`overflow-ellipsis overflow-visible whitespace-normal break-words`}
-          >
+          <div className="overflow-ellipsis overflow-visible whitespace-normal break-words text-primaryW">
             {proposal.markdowntitle.length > 80
               ? `${proposal.markdowntitle.slice(0, 80)}...`
               : proposal.markdowntitle}
           </div>
-        </VStack>
-        <VStack className="whitespace-nowrap overflow-ellipsis overflow-hidden py-4 px-6 w-[20%] flex-start justify-center hidden sm:block">
-          <VStack alignItems="items-end">
+        </div>
+        <div className="flex-col whitespace-nowrap overflow-ellipsis overflow-hidden py-4 px-6 w-[20%] flex-start justify-center hidden sm:block">
+          <div className="flex flex-col items-end">
             <div className="text-xs text-secondary">
               <ProposalTimeStatus
                 proposalStatus={proposal.status}
@@ -85,9 +82,9 @@ export default function Proposal({
               />
             </div>
             <ProposalStatus proposal={proposal} />
-          </VStack>
-        </VStack>
-        <VStack className="whitespace-nowrap overflow-ellipsis overflow-hidden py-4 px-6 w-[25%] flex-start justify-center hidden sm:block">
+          </div>
+        </div>
+        <div className="flex-col whitespace-nowrap overflow-ellipsis overflow-hidden py-4 px-6 w-[25%] flex-start justify-center hidden sm:block">
           <div className="overflow-hidden overflow-ellipsis">
             {proposal.proposalType === "SNAPSHOT" && (
               <SnapshotProposalStatus proposal={proposal} />
@@ -107,7 +104,7 @@ export default function Proposal({
               <OPApprovalProposalStatus proposal={proposal} />
             )}
           </div>
-        </VStack>
+        </div>
       </div>
     </Link>
   );

diff --git a/src/components/Proposals/ProposalsFilter/ProposalsFilter.tsx b/src/components/Proposals/ProposalsFilter/ProposalsFilter.tsx
@@ -25,9 +25,9 @@ export default function ProposalsFilter() {
   }, [router, selected, isRecentFilter]);
 
   return (
-    <div className="relative">
+    <div className="relative text-primary">
       <Listbox value={selected} onChange={setSelected}>
-        <Listbox.Button className="w-full sm:w-fit bg-wash text-base font-medium border-none rounded-full py-2 px-4 flex items-center">
+        <Listbox.Button className="text-primary w-full sm:w-fit bg-neutral font-medium border-wash rounded-full py-2 px-4 flex items-center">
           {selected === proposalsFilterOptions.relevant.filter
             ? proposalsFilterOptions.relevant.value
             : proposalsFilterOptions.everything.value}

diff --git a/src/components/Proposals/ProposalsList/ProposalsList.tsx b/src/components/Proposals/ProposalsList/ProposalsList.tsx
@@ -1,11 +1,10 @@
 "use client";
 
+import * as React from "react";
 import { useEffect, useRef, useState } from "react";
 import { useAccount } from "wagmi";
 import PageHeader from "@/components/Layout/PageHeader/PageHeader";
-import { HStack, VStack } from "@/components/Layout/Stack";
 import ProposalsFilter from "@/components/Proposals/ProposalsFilter/ProposalsFilter";
-import * as React from "react";
 import InfiniteScroll from "react-infinite-scroller";
 import CurrentGovernanceStage from "@/components/Proposals/CurrentGovernanceStage/CurrentGovernanceStage";
 import { useSearchParams } from "next/navigation";
@@ -76,7 +75,7 @@ export default function ProposalsList({
   const proposals = pages.flatMap((page) => page.data);
 
   return (
-    <VStack className="max-w-[76rem]">
+    <div className="flex flex-col max-w-[76rem]">
       {/* {address && <NonVotedProposalsList address={address} />} */}
       <div className="flex flex-col sm:flex-row justify-between items-baseline gap-2 mb-4 sm:mb-auto">
         <PageHeader headerText="All Proposals" />
@@ -95,7 +94,7 @@ export default function ProposalsList({
           reviewPeriod={governanceCalendar.reviewPeriod}
         />
       )}
-      <VStack className="bg-neutral border border-line rounded-lg shadow-newDefault overflow-hidden">
+      <div className="flex flex-col bg-neutral border border-line rounded-lg shadow-newDefault overflow-hidden">
         <div>
           {proposals.length === 0 ? (
             <div className="flex flex-row justify-center py-8 text-secondary">
@@ -108,12 +107,12 @@ export default function ProposalsList({
               loadMore={loadMore}
               loader={
                 <div key={0}>
-                  <HStack
+                  <div
+                    className="flex flex-row gl_loader justify-center py-6 text-sm text-secondary"
                     key="loader"
-                    className="gl_loader justify-center py-6 text-sm text-secondary"
                   >
                     Loading...
-                  </HStack>
+                  </div>
                 </div>
               }
               element="main"
@@ -128,7 +127,7 @@ export default function ProposalsList({
             </InfiniteScroll>
           )}
         </div>
-      </VStack>
-    </VStack>
+      </div>
+    </div>
   );
 }
diff --git a/src/lib/tenant/configs/ui/derive.ts b/src/lib/tenant/configs/ui/derive.ts
@@ -27,6 +27,19 @@ export const deriveTenantUIConfig = new TenantUI({
     retired: [],
   },
 
+  customization: {
+    primary: "233 232 226",
+    secondary: "148 158 158",
+    tertiary: "231 243 243",
+    neutral: "20 20 20",
+    wash: "10 10  10",
+    line: "39 42 42",
+    positive: "19 238 154",
+    negative: "246 62 88",
+    brandPrimary: "0 0 0",
+    brandSecondary: "0 0 0",
+  },
+
   links: [
     {
       name: "discord",