Update governance styles

.gitignore

@@ -14,4 +14,5 @@ scripts/claims_dev.json
 venv/
 out/
 .vscode
-brownie-deploy/
+brownie-deploy/
+.idea

client/.prettierignore

@@ -0,0 +1,6 @@
+**/.git
+**/.svn
+**/.hg
+**/node_modules
+**.idea
+.next

client/components/Card.tsx

@@ -10,6 +10,7 @@ interface CardProps {
   noShadow?: Boolean;
   red?: Boolean;
   margin?: Boolean;
+  className?: string;
 }
 
 const Card: FunctionComponent<CardProps> = ({
@@ -21,20 +22,21 @@ const Card: FunctionComponent<CardProps> = ({
   noShadow,
   red,
   margin,
+  className,
 }) => {
   const classes = classNames(
-    "overflow-x-auto w-full rounded-lg border h-full",
+    "overflow-x-auto w-full rounded-lg border border-accent-content h-full",
     {
-      "bg-secondary-focus text-white border-black": dark && !alt,
-      "bg-white text-black": !dark && !alt,
+      "bg-secondary-focus text-white border-accent-content": dark && !alt,
+      "bg-accent-content text-white": !dark && !alt,
       "p-4 md:p-5": tightPadding && !noPadding,
       "p-6 md:p-10": !tightPadding && !noPadding,
-      "bg-gray-100": alt && !dark,
       "shadow-lg": !noShadow,
       "px-4 py-5 md:px-5 md:py-6": tightPadding && !noPadding && noShadow,
-      "bg-[#dd0a0a1a] border-[#dd0a0a] text-[#dd0a0a]": red,
+      "text-error": red,
       "mt-6 h-full": margin,
-    }
+    },
+    className
   );
 
   return <div className={classes}>{children}</div>;

client/components/CardDescription.tsx

@@ -12,9 +12,7 @@ const CardDescription: FunctionComponent<CardDescription> = ({
   alt,
   large,
 }) => {
-  const classes = classNames("text-xs", {
-    "text-gray-300": alt,
-    "text-[#8293a4]": !alt,
+  const classes = classNames("text-xs text-neutral", {
     "text-base": large,
   });
 

client/components/CardLabel.tsx

@@ -5,7 +5,7 @@ interface CardLabelProps {
 }
 
 const CardLabel: FunctionComponent<CardLabelProps> = ({ children }) => (
-  <div className="text-sm text-[#8293a4]">{children}</div>
+  <div className="text-sm text-neutral">{children}</div>
 );
 
 export default CardLabel;

client/components/CardStat.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent, ReactNode } from "react";
+import classnames from "classnames";
 
 interface CardStatProps {
   children: ReactNode;
@@ -12,13 +13,14 @@ const CardStat: FunctionComponent<CardStatProps> = ({
   small,
 }) => (
   <div
-    className={
+    className={classnames(
+      "font-header",
       large
         ? "text-4xl whitespace-nowrap"
         : small
         ? "text-xl whitespace-nowrap"
         : "text-2xl whitespace-nowrap"
-    }
+    )}
   >
     {children}
   </div>

client/components/CrossIcon.tsx

@@ -2,7 +2,7 @@ import { FunctionComponent } from "react";
 import Image from "next/image";
 
 const CrossIcon: FunctionComponent = () => (
-  <Image src="/cross.svg" height={24} width={24} alt="Ineligible" />
+  <Image src="/cross-white.svg" height={24} width={24} alt="Ineligible" />
 );
 
 export default CrossIcon;

client/components/Footer.tsx

@@ -2,13 +2,13 @@ import { FunctionComponent } from "react";
 import Wrapper from "components/Wrapper";
 
 const Footer: FunctionComponent = () => (
-  <footer className="footer footer-center py-6 bg-base-100 text-gray-400 text-xs">
+  <footer className="footer footer-center py-6 bg-primary-content text-neutral text-xs">
     <Wrapper>
       <div className="w-full space-y-3 sm:space-y-0 sm:flex items-center justify-between">
         <ul className="flex space-x-5 lg:space-x-7">
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://analytics.ousd.com"
               target="_blank"
               rel="noopener noreferrer"
@@ -18,7 +18,7 @@ const Footer: FunctionComponent = () => (
           </li>
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://angel.co/company/originprotocol/jobs"
               target="_blank"
               rel="noopener noreferrer"
@@ -28,7 +28,7 @@ const Footer: FunctionComponent = () => (
           </li>
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://docs.ousd.com"
               target="_blank"
               rel="noopener noreferrer"
@@ -38,7 +38,7 @@ const Footer: FunctionComponent = () => (
           </li>
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://originprotocol.com/tos"
               target="_blank"
               rel="noopener noreferrer"
@@ -48,7 +48,7 @@ const Footer: FunctionComponent = () => (
           </li>
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://originprotocol.com/privacy"
               target="_blank"
               rel="noopener noreferrer"
@@ -58,7 +58,7 @@ const Footer: FunctionComponent = () => (
           </li>
           <li>
             <a
-              className="text-gray-400 hover:text-black"
+              className="text-gray-400 hover:text-neutral-focus"
               href="https://discord.gg/jyxpUSe"
               target="_blank"
               rel="noopener noreferrer"
@@ -69,7 +69,7 @@ const Footer: FunctionComponent = () => (
         </ul>
         <div className="flex space-x-5 lg:space-x-7">
           <a
-            className="text-gray-400 hover:text-black"
+            className="text-gray-400 hover:text-neutral-focus"
             href="https://originprotocol.com"
             target="_blank"
             rel="noopener noreferrer"

client/components/Header.tsx

@@ -34,7 +34,7 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
   );
 
   const mobileMenuClassNames = classNames(
-    "flex flex-col pt-8 bg-white z-30 fixed top-0 h-screen w-72 transition transition-right duration-200 lg:hidden",
+    "flex flex-col pt-8 bg-secondary z-30 fixed top-0 h-screen w-72 transition transition-right duration-200 lg:hidden",
     {
       "-right-full": !menuIsOpen,
       "right-0": menuIsOpen,
@@ -45,34 +45,34 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
     <>
       <header className="py-6 md:py-8 bg-secondary">
         <Wrapper>
-          <div className="flex items-center justify-between">
-            <div className="flex items-center">
-              <div className="flex-none -mb-3 mr-7 xl:mr-10">
+          <div className="flex flex-row items-center justify-between w-full">
+            <div className="flex flex-row items-center">
+              <div className="flex-none -mb-1 mr-7 xl:mr-10">
                 <Link href="/">
                   <Image
-                    width="204"
-                    height="29"
+                    width="174"
+                    height="24"
                     src="/logo.svg"
                     alt="OUSD Governance"
                   />
                 </Link>
               </div>
               {!hideNav && (
-                <ul className="space-x-7 xl:space-x-10 font-light h-0 invisible lg:h-auto lg:visible lg:flex">
+                <ul className="hidden lg:flex items-center space-x-7 xl:space-x-10 font-light h-0 lg:h-auto">
                   {navItems.map(({ href, label, external }) => (
                     <li key={label}>
                       <Link
-                        className="group text-sm text-white flex space-x-2"
+                        className="group text-sm text-neutral hover:text-neutral-focus flex space-x-2"
                         currentClassName="font-normal"
                         href={href}
                         type={external ? "external" : "internal"}
                         newWindow={external}
                       >
-                        <span className="group-hover:underline">{label}</span>
+                        <span>{label}</span>
                         {href === "/stake" && (
                           <div className="flex items-center">
                             <div
-                              className="w-0 h-0 
+                              className="w-0 h-0
                               border-t-[0.25rem] border-t-transparent
                               border-r-[0.4rem] border-r-white
                               border-b-[0.25rem] border-b-transparent
@@ -91,7 +91,7 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
               )}
             </div>
             {!hideNav && (
-              <div className="flex-none flex items-center space-x-3 md:space-x-4">
+              <div className="flex flex-grow-1 flex-shrink-0 items-center space-x-3 md:space-x-4">
                 <button
                   className="flex lg:hidden"
                   onClick={() => setMenuIsOpen(true)}
@@ -131,7 +131,7 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
               {navItems.map(({ href, label, external }) => (
                 <li key={label}>
                   <Link
-                    className="px-6 py-3 hover:text-gray-700 text-black border-l-4 border-white flex space-x-2"
+                    className="px-6 py-3 hover:text-neutral-focus text-neutral border-l-4 border-accent-content flex space-x-2"
                     currentClassName="font-normal border-primary"
                     href={href}
                     onClick={
@@ -144,7 +144,7 @@ const Header: FunctionComponent<HeaderProps> = ({ hideNav }) => {
                     {href === "/stake" && (
                       <div className="flex items-center">
                         <div
-                          className="w-0 h-0 
+                          className="w-0 h-0
                               border-t-[0.25rem] border-t-transparent
                               border-r-[0.4rem] border-r-primary
                               border-b-[0.25rem] border-b-transparent

client/components/LeaderboardTable.tsx

@@ -14,7 +14,7 @@ export const LeaderboardTable = ({ voters }: { voters: Array }) => {
   return (
     <table className="table w-full">
       <thead>
-        <tr>
+        <tr className="bg-inherit border-accent border-opacity-[40%]">
           <th>Rank</th>
           <th>Address</th>
           <th>Votes</th>
@@ -25,19 +25,25 @@ export const LeaderboardTable = ({ voters }: { voters: Array }) => {
       <tbody>
         {voters.map((voter, index) => (
           <tr key={index}>
-            <td>{index + 1}</td>
-            <td>
+            <td className="bg-inherit border-accent border-opacity-[40%]">
+              {index + 1}
+            </td>
+            <td className="bg-inherit border-accent border-opacity-[40%]">
               <Address address={voter.address} />
             </td>
-            <td>
+            <td className="bg-inherit border-accent border-opacity-[40%]">
               <TokenAmount
                 amount={ethers.utils.formatUnits(
                   ethers.BigNumber.from(voter.votes)
                 )}
               />
             </td>
-            <td>{((voter.votes / totalSupplyVeOgv) * 100).toFixed(2)}%</td>
-            <td>{voter.proposalsVoted}</td>
+            <td className="bg-inherit border-accent border-opacity-[40%]">
+              {((voter.votes / totalSupplyVeOgv) * 100).toFixed(2)}%
+            </td>
+            <td className="bg-inherit border-accent border-opacity-[40%]">
+              {voter.proposalsVoted}
+            </td>
           </tr>
         ))}
       </tbody>

client/components/Modal.tsx

@@ -23,7 +23,7 @@ const Modal: FunctionComponent<ModalProps> = ({
     <div className={className} style={{ marginTop: 0 }} onClick={handleClose}>
       <div
         onClick={(e) => e.stopPropagation()}
-        className="modal-box overflow-hidden bg-white"
+        className="modal-box overflow-hidden bg-secondary text-white"
       >
         {showCloseIcon && handleClose && (
           <button

client/components/PageTitle.tsx

@@ -10,6 +10,6 @@ export const PageTitle: FunctionComponent<PageTitleProps> = ({
   noBottomMargin,
 }) => (
   <div className={noBottomMargin ? "" : "pb-5"}>
-    <h1 className="text-2xl text-white mt-6">{children}</h1>
+    <h1 className="text-4xl text-white mt-6 font-bold">{children}</h1>
   </div>
 );

client/components/RangeInput.tsx

@@ -14,6 +14,7 @@ interface RangeInputProps {
   hideLabelFormatting?: Boolean;
 }
 
+// @ts-ignore
 const RangeInput: FunctionComponent<RangeInputProps> = ({
   label,
   counterUnit,
@@ -29,7 +30,7 @@ const RangeInput: FunctionComponent<RangeInputProps> = ({
   <>
     {!hideLabel && (
       <label className="label">
-        <span className="label-text text-lg flex justify-between items-center w-full">
+        <span className="label-text font-header text-white text-lg flex justify-between items-center w-full">
           <span>
             {label}&nbsp;
             {hideLabelFormatting ? value : <TokenAmount amount={value} />}
@@ -40,16 +41,22 @@ const RangeInput: FunctionComponent<RangeInputProps> = ({
     )}
     <div>
       <input
-        className="range range-lg range-accent"
+        className="range range-lg range-alt"
         type="range"
         min={min || "0"}
         max={max}
         value={value}
         onChange={onChange}
+        style={{
+          // @ts-ignore
+          "--value": value,
+          "--min": min,
+          "--max": max,
+        }}
       />
       {markers && markers.length > 0 && (
         <>
-          <div className="w-full flex justify-between text-xs text-gray-400">
+          <div className="w-full flex justify-between text-xs text-neutral">
             {markers.map((marker, index) => (
               <span key={index} className="flex flex-col items-center w-8">
                 <span>|</span>

client/components/SectionTitle.tsx

@@ -1,5 +1,7 @@
 export const SectionTitle = ({ children, noMarginBottom = false }) => (
   <div className={noMarginBottom ? "" : "mb-5"}>
-    <h3 className="text-lg leading-6 font-medium">{children}</h3>
+    <h3 className="text-xl font-header leading-6 font-medium text-white">
+      {children}
+    </h3>
   </div>
 );