From 3f6e989b9dc5e60371f9674ca2d7514cdab93659 Mon Sep 17 00:00:00 2001 From: veralygit <57183851+veralygit@users.noreply.github.com> Date: Wed, 15 Feb 2023 18:21:34 +0800 Subject: [PATCH 01/41] chore: update tailwindconfigs for 2.0 (#489) * chore: update tailwindconfigs for 2.0 * add ui styles to globals --- src/styles/globals.css | 66 +++++++++++++++++++++++++++++++ tailwind.config.js | 89 ++++++++++++++++++++---------------------- 2 files changed, 109 insertions(+), 46 deletions(-) diff --git a/src/styles/globals.css b/src/styles/globals.css index ece046237..89ed0787d 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -24,6 +24,72 @@ body { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } + + /* UI components */ + .card-bg { + background: linear-gradient(144deg, rgba(0, 0, 0, 0.5) -0.38%, rgba(0, 0, 0, 0.5) 100.17%); + } + + .banner-bg { + background: linear-gradient(97.67deg, rgba(0, 0, 0, 0.4) 0.05%, rgba(0, 0, 0, 0) 93%); + } + + .card-stroke { + background: rgba(51, 51, 51, 0.5); + } + + .card-section-bg { + background: linear-gradient(144.57deg, rgba(124, 124, 124, 0.1) -0.38%, rgba(74, 74, 74, 0.1) 98.45%); + } + + .grid-lines { + background: rgba(142, 142, 142, 0.3); + } + + .on-button-hover { + background: linear-gradient(144deg, rgba(46, 46, 46, 0.5) -0.38%, rgba(18, 18, 18, 0.5) 100.17%); + } + + .on-list-hover { + background: linear-gradient(144deg, rgba(46, 46, 46, 0.2) -0.38%, rgba(18, 18, 18, 0.2) 100.17%); + } + + .on-button-press { + background: linear-gradient(144deg, rgba(46, 46, 46, 0.95) -0.38%, rgba(18, 18, 18, 0.95) 100.17%); + } + + .on-list-press { + background: linear-gradient(144deg, rgba(46, 46, 46, 0.4) -0.38%, rgba(18, 18, 18, 0.4) 100.17%); + } + + .cta-on-hover { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), #FFFFFF; + } + + .cta-on-press { + background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), #FFFFFF; + } + + /* Accent gradients */ + .accent-dfc-gradient { + background: linear-gradient(90deg, #FF00FF 0%, #EC0C8D 100.04%); + } + + .accent-gradient-1 { + background: linear-gradient(72.57deg, #EC008C 17.15%, #5B10FF 89.41%, #0468D6 102.56%); + } + + .accent-gradient-2 { + background: linear-gradient(261.07deg, #EC008C -0.26%, #5B10FF 79.46%, #082FD4 100%); + } + + .accent-gradient-3 { + background: linear-gradient(90.66deg, #42F9C2 -6.44%, #082FD4 76.25%); + } + + .accent-gradient-4 { + background: linear-gradient(270deg, #7FF5C5 0%, #1530CC 100%); + } } /*Slick slider overrides*/ diff --git a/tailwind.config.js b/tailwind.config.js index 247342035..0d4e9305a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,5 @@ module.exports = { + darkMode: "class", content: [ "./src/components/**/*.{js,ts,jsx,tsx}", "./src/layouts/**/*.{js,ts,jsx,tsx}", @@ -7,30 +8,46 @@ module.exports = { plugins: [require("@tailwindcss/typography")], theme: { fontFamily: { - sans: ['"IBM Plex Sans"', "sans-serif"], + sans: ['"Space Grotesk"', "sans-serif"], }, colors: { - black: "#000000", - white: "#FFFFFF", - primary: { - 50: "#FFE5F7", - 100: "#FFCCEF", - 200: "#FF99DF", - 300: "#FF66CF", - 400: "#FF33BF", - 500: "#FF00AF", - 600: "#D60093", - 700: "#AD0077", - 800: "#85005B", - 900: "#5C003F", + transparent: "rgba(0, 0, 0 ,0)", + dark: { + "00": "#000000", + 100: "#121212", + 200: "#2B2B2B", + 300: "#333333", + 500: "#8C8C8C", + 700: "#A6A6A6", + 800: "#D9D9D9", + 900: "#F2F2F2", + 1000: "#FFFFFF", + "card-stroke": "rgba(51, 51, 51, 0.5)", + }, + light: { + "00": "#FFFFFF", + 100: "#F2F2F2", + 200: "#D9D9D9", + 300: "#CCCCCC", + 500: "#737373", + 700: "#595959", + 800: "#2B2B2B", + 900: "#121212", + 1000: "#000000", + "card-stroke": "rgba(204, 204, 204, 0.3)", }, - secondary: { + brand: { + 100: "#FF00AF", + 200: "#EA3369", + }, + primary: { 50: "#E8DEFF", 100: "#D9C7FF", 200: "#B999FF", + 250: "#AD87FF", 300: "#9A6BFF", 400: "#7A3DFF", - 500: "#5B0FFF", + 500: "#5B10FF", 600: "#4A00EB", 700: "#3E00C7", 800: "#3400A3", @@ -38,6 +55,7 @@ module.exports = { }, gray: { 50: "#FAFAFA", + 75: "#F9F9F9", 100: "#F5F5F5", 200: "#E5E5E5", 300: "#D4D4D4", @@ -48,36 +66,15 @@ module.exports = { 800: "#262626", 900: "#171717", }, - red: { - 50: "#FFF2F2", - 100: "#FFE6E6", - 200: "#FFBFBF", - 300: "#FF9999", - 500: "#FF0000", - 600: "#E60000", - }, - orange: { - 50: "#FFFAF4", - 100: "#FFF5EA", - 200: "#FFE5CA", - 300: "#FFD5A9", - 500: "#FF9629", - 600: "#E68725", - }, - green: { - 50: "#F2FBF4", - 100: "#E6F7E8", - 200: "#C0ECC6", - 300: "#9AE1A4", - 500: "#02B31B", - 600: "#02A118", - }, - blue: { - 50: "#F7FBFE", - 100: "#EFF6FD", - 200: "#D6EAF9", - 500: "#5AA9E6", - }, + electric: "#BBFF00", + error: "#E54545", + warning: "#D97B01", + valid: "#0CC72C", }, + extend: { + fontFamily: { + "montserrat": ["Montserrat", "sans-serif"] + } + } }, }; From 3537bb40c92735da40a6482dc44b1b1d83618621 Mon Sep 17 00:00:00 2001 From: veralygit <57183851+veralygit@users.noreply.github.com> Date: Tue, 21 Feb 2023 14:39:05 +0800 Subject: [PATCH 02/41] feat(ui-ux): add Buttons 2.0 component (#493) * feat(ui-ux): add Buttons 2.0 component * add href to GradientButton * update button styles * update border padding for gradient button * fix gradient button style * update buttons to follow DSM and add LinkButton * fix link button stylings * fix link disabled style * remove is cta button * update link buttons to be more customisable * fix link button default style * update button stylings for gradient button and minwidth for cta button * update naming of gradient button hover style * update naming for gradient border hover style --- src/components/commons/Buttons.tsx | 181 +++++++++++++++++++++++++++-- src/layouts/components/Header.tsx | 23 +++- src/styles/globals.css | 27 ++--- 3 files changed, 204 insertions(+), 27 deletions(-) diff --git a/src/components/commons/Buttons.tsx b/src/components/commons/Buttons.tsx index 178f2a8d8..0114910da 100644 --- a/src/components/commons/Buttons.tsx +++ b/src/components/commons/Buttons.tsx @@ -1,24 +1,185 @@ -import { PropsWithChildren } from "react"; +import { PropsWithChildren, useState } from "react"; import classNames from "classnames"; +import { IoMdArrowRoundForward } from "react-icons/io"; -/** - * Container implementation that is part of the design language. - */ -export function Button( - props: PropsWithChildren<{ className?: string; text: string }> -): JSX.Element { +export function Button({ + buttonText, + className, + disabled, + href, + onClick, +}: { + buttonText: string; + className?: string; + disabled?: boolean; + href?: string; + onClick?: () => void; +}) { + if (href) { + return ( + + + + ); + } + return ( + + ); +} + +function ButtonElement({ + buttonText, + className, + disabled, + onClick, +}: { + buttonText: string; + className?: string; + disabled?: boolean; + onClick?: () => void; +}) { return ( ); } +export function GradientButton({ + buttonText, + className, + disabled, + onClick, + href, +}: { + buttonText: string; + className?: string; + disabled?: boolean; + onClick?: () => void; + href?: string; +}) { + if (href) { + return ( + + + + ); + } + return ( + + ); +} + +function GradientButtonElement({ + buttonText, + className, + disabled, + onClick, +}: { + buttonText: string; + className?: string; + disabled?: boolean; + onClick?: () => void; +}) { + return ( + + ); +} + +export function LinkButton({ + buttonText, + className, + disabled, + href, + horizontalArrow, + diagonalArrow, +}: { + buttonText: string; + className?: string; + disabled?: boolean; + href: string; + horizontalArrow?: boolean; + diagonalArrow?: boolean; +}) { + const [isMouseEnter, setIsMouseEnter] = useState(false); + return ( + setIsMouseEnter(true)} + onMouseLeave={() => setIsMouseEnter(false)} + href={href} + className={classNames( + "hover:text-brand-100 flex flex-row gap-x-2 items-center", + className ?? "text-lg text-dark-1000 font-semibold", + { + "pointer-events-none opacity-30": disabled, + } + )} + > + {buttonText} + {(horizontalArrow || diagonalArrow) && isMouseEnter && ( + + )} + + ); +} + +// To remove currently not removed yet to load homescreen without error export function ButtonUnfilled( props: PropsWithChildren<{ className?: string; text: string }> ): JSX.Element { diff --git a/src/layouts/components/Header.tsx b/src/layouts/components/Header.tsx index 044b4f2ea..a957fc92c 100644 --- a/src/layouts/components/Header.tsx +++ b/src/layouts/components/Header.tsx @@ -6,6 +6,11 @@ import { MdClose, MdMenu } from "react-icons/md"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { useTranslation } from "next-i18next"; +import { + Button, + GradientButton, + LinkButton, +} from "@components/commons/Buttons"; import { useWhaleApiClient } from "../context/WhaleContext"; import { BuyDFIButton } from "./BuyDFIButton"; import { LanguageDropdown } from "./LanguageDropdown"; @@ -141,7 +146,23 @@ function DesktopNavbar({ price }: { price: string }): JSX.Element { className="hidden lg:block" testId="Desktop.HeaderLink.Downloads" /> - + + + ); } @@ -72,12 +72,14 @@ function ButtonElement({ export function GradientButton({ buttonText, className, + borderClassName, disabled, onClick, href, }: { buttonText: string; className?: string; + borderClassName?: string; disabled?: boolean; onClick?: () => void; href?: string; @@ -91,6 +93,7 @@ export function GradientButton({ className={classNames({ "pointer-events-none": disabled })} > void; + borderClassName?: string; }) { return (