diff --git a/web/app/globals.css b/web/app/globals.css index c848782..171575a 100644 --- a/web/app/globals.css +++ b/web/app/globals.css @@ -2,22 +2,37 @@ @tailwind components; @tailwind utilities; +html { + @apply bg-indigo-300; +} + body { - color: rgb(var(--foreground-rgb)); - @apply font-medium bg-gradient-to-br from-indigo-200 to-indigo-300 text-indigo-900; + @apply font-medium text-indigo-900; } .checkbox { - @apply rounded border-2 border-indigo-500 w-4 h-4 transition-colors duration-300 cursor-pointer hover:border-indigo-400; + @apply rounded border-2 border-indigo-500 w-5 h-5 transition-colors duration-300 cursor-pointer hover:border-indigo-400; } .checkbox.checked { - @apply border-cyan-500 bg-cyan-500/50 text-white hover:border-cyan-400; + @apply border-indigo-500 bg-indigo-500/50 text-white hover:border-indigo-400; } .checkmark { @apply w-full h-full bg-no-repeat; background-image: url("../public/checkmark.svg"); - background-size: 70%; - background-position: 56% 58%; + background-size: 65%; + background-position: 52% 57%; +} + +.text-subdued { + @apply text-indigo-900/60; +} + +th { + @apply px-4 pt-4 pb-2 text-indigo-900/50 font-semibold text-xs leading-none uppercase; +} + +td { + @apply p-4; } diff --git a/web/app/layout.tsx b/web/app/layout.tsx index bab5559..f1e415d 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -3,6 +3,7 @@ import { Plus_Jakarta_Sans } from "next/font/google"; import "./globals.css"; import WalletProvider from "./WalletProvider"; +import Main from "./main"; import { Logo } from "@/components/Logo"; const sans = Plus_Jakarta_Sans({ @@ -17,7 +18,7 @@ export const metadata: Metadata = { function Header() { return ( -
+
@@ -53,13 +54,11 @@ export default function RootLayout({ -
+
-
- {children} -
+ {children}
-
+
diff --git a/web/app/lib/utils/pluralize.ts b/web/app/lib/utils/pluralize.ts new file mode 100644 index 0000000..a3bdd0f --- /dev/null +++ b/web/app/lib/utils/pluralize.ts @@ -0,0 +1,10 @@ +interface PluralizeProps { + strings: string[]; + count: number; +} + +// If count is greater than 1, +// the second string will be used, +// otherwise the first will be used +export const pluralize = (strings: string[], count: number) => + strings[count && count > 1 ? 1 : 0]; diff --git a/web/app/main.tsx b/web/app/main.tsx new file mode 100644 index 0000000..ac7e4f7 --- /dev/null +++ b/web/app/main.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { usePathname } from "next/navigation"; +import clsx from "clsx"; + +export default function Main({ children }: { children: React.ReactNode }) { + const pathname = usePathname(); + + return ( +
+
+ {children} +
+
+ ); +} diff --git a/web/components/Button.tsx b/web/components/Button.tsx index 6fa875d..0c77def 100644 --- a/web/components/Button.tsx +++ b/web/components/Button.tsx @@ -24,7 +24,7 @@ const Button = ({ const [showTooltip, setShowTooltip] = useState(false); const hierarchyClasses = { primary: clsx( - "bg-button border-cyan-300 bg-gradient-to-b from-cyan-300 via-cyan-600 to-cyan-800 bg-bottom text-white", + "border-indigo-100 bg-indigo-900 text-white shadow-button transform active:translate-y-1 active:bg-indigo-800/90 hover:bg-indigo-600 transition-all duration-100 ease-in-out active:shadow-button-0 focus-visible:ring-1 focus-visible:ring-white focus-visible:outline-0", { "hover:bg-top": !disabled, } diff --git a/web/components/Icons.tsx b/web/components/Icons.tsx index cf0d6bb..5e86de4 100644 --- a/web/components/Icons.tsx +++ b/web/components/Icons.tsx @@ -1,3 +1,5 @@ +import colors from "tailwindcss/colors"; + export interface IconProps { size?: number; className?: string; @@ -60,3 +62,57 @@ export const SparkleIcon = ({ size = 32, className }: IconProps) => { ); }; + +export interface ScoreIconProps extends IconProps { + rank: number; +} + +export const ScoreIcon = ({ size = 20, rank, className }: ScoreIconProps) => { + const ranking = rank > 0.74 ? "high" : rank < 0.53 ? "low" : "med"; + const fills = { + high: { + fill: colors.green[500], + opacities: [1, 1, 1], + }, + med: { + fill: colors.amber[500], + opacities: [1, 1, 0.3], + }, + low: { + fill: colors.red[500], + opacities: [1, 0.3, 0.3], + }, + }; + + return ( + + + + + + ); +}; diff --git a/web/components/Score.tsx b/web/components/Score.tsx index cae118f..9e6a2bf 100644 --- a/web/components/Score.tsx +++ b/web/components/Score.tsx @@ -1,22 +1,16 @@ -import HighScoreIcon from "@/public/high-score-icon.svg"; -import CopyToClipboardIcon from "@/public/copy-to-clipboard.svg" -import Image from "next/image"; +import { Info } from "@phosphor-icons/react/dist/ssr"; +import { ScoreIcon } from "./Icons"; export default function Score({ rank }: { rank: number }) { - // TODO: Attach medium and low icons - const Icon = rank > 0.6 ? HighScoreIcon : null; - if (Icon) { - return ( -
-
- score -
+ return ( +
+
+
{(rank * 10).toFixed(1)}
-
- copy-clipboard -
- ); - } - return null; +
+ +
+
+ ); } diff --git a/web/components/Strategy.tsx b/web/components/Strategy.tsx index 4489f2d..3c75ccb 100644 --- a/web/components/Strategy.tsx +++ b/web/components/Strategy.tsx @@ -6,6 +6,7 @@ import { StrategyTable, StrategyWithProjects } from "./StrategyTable"; import TextField from "./TextField"; import { useConnectWallet } from "@web3-onboard/react"; import Dropdown from "./Dropdown"; +import { pluralize } from "@/app/lib/utils/pluralize"; function Information(props: { title: string; @@ -15,10 +16,10 @@ function Information(props: { disabled?: boolean; }) { return ( -
-
-
{props.title}
-
{props.subtitle}
+
+
+
{props.title}
+
{props.subtitle}