UI Changes

components/WalletContainer.tsx

@@ -42,7 +42,7 @@ const WalletContainer = () => {
     <button
       className={classNames(
         "shrink-none flex h-12 items-center rounded-full border border-neutral-100 bg-neutral-0 leading-tight text-neutral-500",
-        "outline-none focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset", // focus styles
+        "cursor-pointer outline-none focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset", // focus styles
         { "px-1 md:px-0 md:pl-4 md:pr-1": isConnected },
         { "px-4": !isConnected }
       )}

components/footer/index.tsx

@@ -0,0 +1,18 @@
+export default function Footer() {
+  return (
+    <div className="flex flex-col items-center py-[30px]">
+      <div className="my-[30px] flex items-center gap-[20px] sm:my-[40px]">
+        <a href="https://x.com/ringecosystem" target="_blank">
+          <img src="/icons/X.svg" alt="X" className="sm:h-[48px] sm:w-[48px]" />
+        </a>
+        <a href="https://t.me/ringecosystem" target="_blank">
+          <img src="/icons/Telegram.svg" alt="Telegram" className="sm:h-[48px] sm:w-[48px]" />
+        </a>
+        <a href="https://github.com/ringecosystem" target="_blank">
+          <img src="/icons/Github.svg" alt="Github" className="sm:h-[48px] sm:w-[48px]" />
+        </a>
+      </div>
+      <p className="text-white text-[16px] font-[300] leading-[19.2px] tracking-[1px]">2024 powered by RingDAO</p>
+    </div>
+  );
+}

components/layout.tsx

@@ -1,17 +1,36 @@
 import { type ReactNode } from "react";
 import { Navbar } from "./nav/navbar";
+import Image from "next/image";
+import Footer from "./footer";
 
 export const Layout: React.FC<{ children: ReactNode }> = (props) => {
   return (
-    <div className="flex flex-col items-center gap-20">
+    <div className="flex flex-col items-center bg-[#000]">
       <div className="flex w-full flex-col items-center">
+        <Image
+          src="/images/1920bg1.png"
+          alt="vote ringdao"
+          width={1000}
+          height={1000}
+          className="absolute right-0 h-[100vh] w-[100vw] object-contain object-right-top"
+        />
+        <Image
+          src="/images/1920bg2.png"
+          alt="vote ringdao"
+          width={1000}
+          height={1000}
+          className="absolute left-0 right-0 top-0 h-[100vh] w-[100vw] object-contain object-left-top"
+        />
         <Navbar />
-        <div className="flex w-full flex-col items-center px-4 py-6 md:w-4/5 md:p-6 lg:w-2/3 xl:py-10 2xl:w-3/5">
-          {props.children}
+        <div className="relative z-10 flex w-full justify-center">
+          <span className="absolute left-0 top-0 block h-[20px] w-[20px] bg-[#fff]" />
+          <div className="flex w-full flex-col items-center px-4 py-6 md:w-4/5 md:p-6 lg:w-2/3 xl:py-10 2xl:w-3/5">
+            {props.children}
+          </div>
         </div>
       </div>
 
-      {/* Footer */}
+      <Footer />
     </div>
   );
 };

components/nav/navLink.tsx

@@ -38,26 +38,15 @@ export const NavLink: React.FC<INavLinkProps> = (props) => {
   }
 
   const containerClasses = classNames(
-    "group relative md:-mb-0.25 md:border-b md:hover:border-b-neutral-800", // base styles
-    {
-      "md:border-b-transparent md:active:border-b-primary-400": !selected, // unselected link styles
-      "md:border-b-primary-400 md:hover:border-b-primary-400": selected, // base selected link styles
-
-      // using after so that the size of the links don't change when one is selected and active
-      "md:after:bg-primary-400 md:after:content-[attr(aria-current)] md:active:after:hidden": selected,
-      "md:after:absolute md:after:-bottom-0 md:after:left-0 md:after:right-0 md:after:h-[1px]": selected,
-    }
+    "group relative md:-mb-0.25" // base styles
   );
 
   const anchorClasses = classNames(
     "w-full py-3", // base styles
     "group-hover:text-neutral-800", // hover styles
     "outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset", // focus styles
     "flex h-12 flex-1 items-center justify-between gap-3 rounded-xl px-4 leading-tight", // mobile styles
-    "md:h-11 md:rounded-none md:px-0 md:leading-normal", // desktop nav styles
-    {
-      "bg-neutral-50 md:bg-neutral-0": selected,
-    }
+    "md:h-11 md:rounded-none md:px-0 md:leading-normal" // desktop nav styles
   );
 
   return (
@@ -67,14 +56,14 @@ export const NavLink: React.FC<INavLinkProps> = (props) => {
           <Icon
             icon={icon}
             size="md"
-            className={classNames("text-neutral-300 group-hover:text-neutral-800 lg:hidden", {
-              "text-neutral-800": selected,
+            className={classNames("text-[#fff] group-hover:text-[#afafaf] lg:hidden", {
+              "text-[#afafaf]": selected,
             })}
           />
         )}
         <span
-          className={classNames("flex-1 truncate text-neutral-500 group-hover:text-neutral-800", {
-            "text-neutral-800": selected,
+          className={classNames("flex-1 truncate text-[#fff] group-hover:text-[#afafaf]", {
+            "text-[#afafaf]": selected,
           })}
         >
           {name}

components/nav/navbar.tsx

@@ -12,7 +12,7 @@ export const Navbar: React.FC = () => {
   const [open, setOpen] = useState(false);
 
   const navLinks: INavLink[] = [
-    { path: "/", id: "dashboard", name: "Dashboard", icon: IconType.APP_DASHBOARD },
+    // { path: "/", id: "dashboard", name: "Dashboard", icon: IconType.APP_DASHBOARD },
     ...plugins.map((p) => ({
       id: p.id,
       name: p.title,
@@ -23,7 +23,7 @@ export const Navbar: React.FC = () => {
 
   return (
     <>
-      <nav className="h-30 sticky top-0 w-full flex-col gap-2 border-b border-b-neutral-100 bg-neutral-0 p-3 md:px-6 md:pb-0 md:pt-5 lg:gap-3">
+      <nav className="h-30 top-0 w-full flex-col gap-2 border-b border-b-neutral-100 p-3 md:px-6 md:pb-0 md:pt-5 lg:gap-3">
         <div className="flex w-full items-center justify-between">
           <Link
             href="/"
@@ -32,27 +32,28 @@ export const Navbar: React.FC = () => {
               "outline-none focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset" // focus styles
             )}
           >
-            <Image src="/logo-bw-lg.png" width="36" height="36" className="shrink-0" alt="Aragonette" />
-            <span className="hidden py-1 text-lg font-semibold leading-tight text-neutral-700 sm:block md:text-xl">
+            <Image src="/images/logo-icon.png" width="36" height="36" className="shrink-0" alt="Ring Dao" />
+            <Image src="/images/logo.png" width="100" height="36" className="shrink-0" alt="Ring Dao" />
+
+            {/* <span className="hidden py-1 text-lg font-semibold leading-tight text-[#fff] sm:block md:text-xl">
               Aragonette
-            </span>
+            </span> */}
           </Link>
-
-          <div className="flex items-center gap-x-2">
+          <div className="z-20 flex items-center gap-x-2">
             <div className="shrink-0">
               <WalletContainer />
             </div>
 
             {/* Nav Trigger */}
-            <button
+            {/* <button
               onClick={() => setOpen(true)}
               className={classNames(
                 "rounded-full border border-neutral-100 bg-neutral-0 p-1 md:hidden",
                 "outline-none focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset" // focus styles
               )}
             >
               <AvatarIcon size="lg" icon={IconType.MENU} />
-            </button>
+            </button> */}
           </div>
         </div>
 

components/not-found.tsx

@@ -3,7 +3,7 @@ const DEFAULT_MESSAGE = "The link you followed refers to a resource that doesn't
 export function NotFound({ message }: { message?: string }) {
   return (
     <section className="w-screen min-w-full max-w-full">
-      <h3 className="pr-4 text-3xl font-semibold text-neutral-700">Not found</h3>
+      <h3 className="pr-4 text-3xl font-semibold text-[#fff]">Not found</h3>
       <p>{message ?? DEFAULT_MESSAGE}</p>
     </section>
   );

constants.ts

@@ -29,7 +29,7 @@ export const PUB_IPFS_ENDPOINT = process.env.NEXT_PUBLIC_IPFS_ENDPOINT ?? "";
 export const PUB_IPFS_API_KEY = process.env.NEXT_PUBLIC_IPFS_API_KEY ?? "";
 
 // General
-export const PUB_APP_NAME = "Aragonette";
+export const PUB_APP_NAME = "Ring DAO";
 export const PUB_APP_DESCRIPTION = "Simplified user interface for Aragon DAO's";
 
 export const PUB_PROJECT_URL = "https://aragon.org/";

next.config.js

@@ -1,6 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   trailingSlash: true,
+  transpilePackages: ["react-hook-mousetrap"],
+  async redirects() {
+    return [
+      {
+        source: "/", // Match the homepage
+        destination: "/plugins/community-proposals/#/", // The URL to redirect to
+        permanent: true, // Set to false for a temporary redirect
+      },
+    ];
+  },
   webpack: (config) => {
     config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;

package.json

@@ -13,16 +13,15 @@
     "prepare": "husky"
   },
   "lint-staged": {
-    "*.{js, jsx,ts,tsx}": [
-      "eslint --quiet --fix"
-    ],
     "*.{json,js,ts,jsx,tsx,html}": [
       "prettier --write --ignore-unknown"
     ]
   },
   "dependencies": {
-    "@aragon/ods": "^1.0.28",
+    "@aragon/ods": "^1.0.24",
+    "@react-native-async-storage/async-storage": "^2.0.0",
     "@shazow/whatsabi": "0.11.0",
+    "@tailwindcss/typography": "^0.5.14",
     "@tanstack/query-async-storage-persister": "^5.28.8",
     "@tanstack/react-query": "^5.28.8",
     "@tanstack/react-query-persist-client": "^5.28.8",
@@ -52,7 +51,7 @@
     "eslint": "^8.57.0",
     "eslint-config-next": "14.1.4",
     "eslint-config-prettier": "^9.1.0",
-    "husky": "^9.0.11",
+    "husky": "^9.1.6",
     "lint-staged": "^15.2.2",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",

pages/globals.css

@@ -19,10 +19,13 @@
   }
 }
 
+html {
+  background: #000;
+}
+
 body {
   /* Variables imported from layout.tsx > @aragon/ods */
-  color: var(--ods-color-neutral-800);
-  background-color: var(--ods-color-neutral-50);
+  color: #fff;
   font-family: var(--ods-font-family);
 }
 
@@ -33,14 +36,13 @@ h4,
 h5,
 h6 {
   /* Variables imported from layout.tsx > @aragon/ods */
-  color: var(--ods-color-neutral-800);
+  color: #fff;
 }
 
-p,
 ul,
 ol {
   /* Variables imported from layout.tsx > @aragon/ods */
-  color: var(--ods-color-neutral-600);
+  color: #fff;
 }
 
 /* Inline alerts */
@@ -64,3 +66,24 @@ label div p.leading-tight {
   }
 }
 */
+
+
+/* Overrides for aragon ods */
+.text-neutral-800 , .text-neutral-900 {
+  color: #fff !important;
+}
+
+.border-primary-300 {
+  border-color: #ff0083 !important;
+}
+
+
+.VotingIcon svg:first-child path {
+  fill: #000;
+
+}
+
+.VotingIcon svg:first-child path {
+  fill: #ff0083;
+
+}

plugins/delegateAnnouncer/components/UserDelegateCard.tsx

@@ -76,7 +76,9 @@ export const SelfDelegationProfileCard = ({
           alt="profile pic"
         />
         <div className="flex flex-col justify-center">
-          <Link className="!font-xl !text-xl">{result.data ? result.data : formatHexString(address)}</Link>
+          <Link className="!font-xl !text-xl !text-[#ff0083]">
+            {result.data ? result.data : formatHexString(address)}
+          </Link>
           <p className="text-md text-neutral-300">{votingPower ? formatUnits(votingPower!, 18)! : 0} Voting Power</p>
         </div>
       </div>
@@ -101,14 +103,20 @@ export const SelfDelegationProfileCard = ({
       <div className="flex flex-row gap-2">
         <If condition={delegates !== address}>
           <div className="mt-1">
-            <Button variant="secondary" size="sm" onClick={() => delegateTo()}>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => delegateTo()}
+              className="!border-[#000] !bg-transparent !text-[#000] hover:!border-none hover:!bg-[#000] hover:!text-[#fff]"
+            >
               Delegate
             </Button>
           </div>
         </If>
         <If not={message}>
           <div className="mt-1">
             <Button
+              className="!border-none !bg-[#000] !text-[#fff] disabled:opacity-50"
               variant="primary"
               size="sm"
               disabled={inputDescription === "<p></p>" || !inputDescription}

plugins/delegateAnnouncer/pages/index.tsx

@@ -28,7 +28,7 @@ export default function DelegateAnnouncements() {
     <MainSection>
       <If condition={account?.address}>
         <SectionView>
-          <h2 className="pb-3 text-xl font-semibold text-neutral-700">Your profile</h2>
+          <h2 className="pb-3 text-xl font-semibold text-[#fff]">Your profile</h2>
           <SelfDelegationProfileCard
             address={account.address!}
             tokenAddress={PUB_TOKEN_ADDRESS}
@@ -39,7 +39,7 @@ export default function DelegateAnnouncements() {
         </SectionView>
       </If>
 
-      <h2 className="text-3xl font-semibold text-neutral-700">Delegates</h2>
+      <h2 className="text-3xl font-semibold text-[#fff]">Delegates</h2>
       <If condition={delegateAnnouncements.length}>
         <Then>
           <div className="mb-14 mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">

plugins/tokenVoting/components/proposal/header.tsx

@@ -55,7 +55,7 @@ const ProposalHeader: React.FC<ProposalHeaderProps> = ({
                 )}
               </div>
             </If>
-            <span className="pt-1 text-xl font-semibold text-neutral-700">Proposal {proposalNumber}</span>
+            <span className="pt-1 text-xl font-semibold text-[#fff]">Proposal {proposalNumber}</span>
           </div>
         </div>
         <div className="flex">

plugins/tokenVoting/components/vote/voting-modal.tsx

@@ -24,7 +24,7 @@ const VotingModal: React.FC<VotingModalProps> = ({ onDismissModal, selectedVote
           <div className="relative flex w-full flex-col rounded-lg bg-neutral-100 outline-none focus:outline-none">
             {/*header*/}
             <div className="flex items-start justify-between rounded-t p-3">
-              <h3 className="pr-4 text-lg font-semibold text-neutral-700">Vote submission</h3>
+              <h3 className="pr-4 text-lg font-semibold text-[#fff]">Vote submission</h3>
               <button
                 className="opacity-1 float-right rounded-lg bg-transparent text-3xl text-neutral-800 hover:bg-neutral-200 active:bg-neutral-200"
                 onClick={() => onDismissModal()}