From d84ee9050b069eecccc3524964c784c5d701adc3 Mon Sep 17 00:00:00 2001 From: Jonathan <56612797+jonathan3692bf@users.noreply.github.com> Date: Wed, 15 Jun 2022 01:32:55 +0200 Subject: [PATCH] Gently adjust typography and colors for upcoming refresh (#736) * Start using new fonts * Adjust dark theme primary color, use heading font for buttons * Use new logo for Navbar, make responsive for mobile * Add background image * Update Switch to use brand gradient when selected * Update footer * Fix navbar to look good across view-ports * Add Realms favicon and set page title to "Realms" * Align Navbar to content * Update theme colors * Adjust components to be more stylistically consistent * Polish styling with Dan * Lighten up h3,h4 and Tabs a tags * Adjust colors again * Feed linter * Make treasury accounts more prominent * Make MembersTab items look like AccountTab items * Update colors and font weights * Change font back to Inter * Bring back bold to buttons (load normal and bold font weights) * Use images for logo and logotype * Change proposal "p" styles Co-authored-by: Jonathan --- components/Button.tsx | 4 +- components/ConnectWalletButton.tsx | 40 +++--- components/DiscordIcon.tsx | 27 ---- components/Footer.tsx | 107 ++++++++------- components/GithubIcon.tsx | 22 --- components/Members/MembersTabs.tsx | 10 +- components/NavBar.tsx | 27 ++-- components/PageBodyContainer.tsx | 8 +- components/RealmHeader.tsx | 30 ++--- components/Switch.tsx | 2 +- components/Tabs.tsx | 4 +- components/TokenBalance/TokenBalanceCard.tsx | 22 +-- components/TreasuryAccount/AccountItem.tsx | 6 +- .../TreasuryAccount/AccountOverview.tsx | 30 ++--- components/TreasuryAccount/AccountsTabs.tsx | 6 +- components/TwitterIcon.tsx | 22 --- components/VoteResults.tsx | 18 +-- package.json | 2 +- pages/_app.tsx | 119 +++++++++++++---- pages/_document.tsx | 8 +- pages/dao/[symbol]/treasury/index.tsx | 18 +-- public/browserconfig.xml | 2 + public/favicon.ico | Bin 0 -> 1150 bytes public/favicons/android-icon-144x144.png | Bin 0 -> 10253 bytes public/favicons/android-icon-192x192.png | Bin 0 -> 14622 bytes public/favicons/android-icon-36x36.png | Bin 0 -> 2059 bytes public/favicons/android-icon-48x48.png | Bin 0 -> 2677 bytes public/favicons/android-icon-72x72.png | Bin 0 -> 3902 bytes public/favicons/android-icon-96x96.png | Bin 0 -> 5624 bytes public/favicons/apple-icon-114x114.png | Bin 0 -> 7107 bytes public/favicons/apple-icon-120x120.png | Bin 0 -> 7726 bytes public/favicons/apple-icon-144x144.png | Bin 0 -> 10253 bytes public/favicons/apple-icon-152x152.png | Bin 0 -> 11119 bytes public/favicons/apple-icon-180x180.png | Bin 0 -> 14472 bytes public/favicons/apple-icon-57x57.png | Bin 0 -> 3081 bytes public/favicons/apple-icon-60x60.png | Bin 0 -> 3257 bytes public/favicons/apple-icon-72x72.png | Bin 0 -> 3902 bytes public/favicons/apple-icon-76x76.png | Bin 0 -> 4244 bytes public/favicons/apple-icon-precomposed.png | Bin 0 -> 15164 bytes public/favicons/apple-icon.png | Bin 0 -> 15164 bytes public/favicons/favicon-16x16.png | Bin 0 -> 1356 bytes public/favicons/favicon-32x32.png | Bin 0 -> 1865 bytes public/favicons/favicon-96x96.png | Bin 0 -> 5624 bytes public/favicons/ms-icon-144x144.png | Bin 0 -> 10253 bytes public/favicons/ms-icon-150x150.png | Bin 0 -> 10978 bytes public/favicons/ms-icon-310x310.png | Bin 0 -> 33411 bytes public/favicons/ms-icon-70x70.png | Bin 0 -> 3839 bytes public/fonts/Ambit-Black.woff | Bin 0 -> 34976 bytes public/fonts/Ambit-Black.woff2 | Bin 0 -> 32312 bytes public/fonts/Ambit-BlackItalic.woff | Bin 0 -> 35500 bytes public/fonts/Ambit-BlackItalic.woff2 | Bin 0 -> 32648 bytes public/fonts/Ambit-Bold.woff | Bin 0 -> 37240 bytes public/fonts/Ambit-Bold.woff2 | Bin 0 -> 34116 bytes public/fonts/Ambit-BoldItalic.woff | Bin 0 -> 37752 bytes public/fonts/Ambit-BoldItalic.woff2 | Bin 0 -> 34628 bytes public/fonts/Ambit-ExtraLight.woff | Bin 0 -> 34620 bytes public/fonts/Ambit-ExtraLight.woff2 | Bin 0 -> 31896 bytes public/fonts/Ambit-ExtraLightItalic.woff | Bin 0 -> 36400 bytes public/fonts/Ambit-ExtraLightItalic.woff2 | Bin 0 -> 33672 bytes public/fonts/Ambit-Italic.woff | Bin 0 -> 35048 bytes public/fonts/Ambit-Italic.woff2 | Bin 0 -> 32392 bytes public/fonts/Ambit-Light.woff | Bin 0 -> 35416 bytes public/fonts/Ambit-Light.woff2 | Bin 0 -> 32824 bytes public/fonts/Ambit-LightItalic.woff | Bin 0 -> 36552 bytes public/fonts/Ambit-LightItalic.woff2 | Bin 0 -> 33644 bytes public/fonts/Ambit-Regular.woff | Bin 0 -> 34256 bytes public/fonts/Ambit-Regular.woff2 | Bin 0 -> 31540 bytes public/fonts/Ambit-SemiBold.woff | Bin 0 -> 36620 bytes public/fonts/Ambit-SemiBold.woff2 | Bin 0 -> 33532 bytes public/fonts/Ambit-SemiBoldItalic.woff | Bin 0 -> 36968 bytes public/fonts/Ambit-SemiBoldItalic.woff2 | Bin 0 -> 33908 bytes public/fonts/Ambit-Thin.woff | Bin 0 -> 31336 bytes public/fonts/Ambit-Thin.woff2 | Bin 0 -> 29104 bytes public/fonts/Ambit-ThinItalic.woff | Bin 0 -> 32560 bytes public/fonts/Ambit-ThinItalic.woff2 | Bin 0 -> 30132 bytes public/icons/discord.svg | 4 + public/icons/github.svg | 11 ++ public/icons/twitter.svg | 4 + public/img/bg-desktop.png | Bin 0 -> 2832770 bytes public/img/bg-mobile.png | Bin 0 -> 1586125 bytes public/img/logo-realms.svg | 15 +++ public/img/logo.svg | 3 - public/img/logotype-realms-blue-white.svg | 21 +++ public/manifest.json | 41 ++++++ styles/ambit-font.css | 125 ++++++++++++++++++ styles/index.css | 32 +++-- tailwind.config.js | 30 ++--- yarn.lock | 7 +- 88 files changed, 539 insertions(+), 288 deletions(-) delete mode 100644 components/DiscordIcon.tsx delete mode 100644 components/GithubIcon.tsx delete mode 100644 components/TwitterIcon.tsx create mode 100644 public/browserconfig.xml create mode 100644 public/favicon.ico create mode 100644 public/favicons/android-icon-144x144.png create mode 100644 public/favicons/android-icon-192x192.png create mode 100644 public/favicons/android-icon-36x36.png create mode 100644 public/favicons/android-icon-48x48.png create mode 100644 public/favicons/android-icon-72x72.png create mode 100644 public/favicons/android-icon-96x96.png create mode 100644 public/favicons/apple-icon-114x114.png create mode 100644 public/favicons/apple-icon-120x120.png create mode 100644 public/favicons/apple-icon-144x144.png create mode 100644 public/favicons/apple-icon-152x152.png create mode 100644 public/favicons/apple-icon-180x180.png create mode 100644 public/favicons/apple-icon-57x57.png create mode 100644 public/favicons/apple-icon-60x60.png create mode 100644 public/favicons/apple-icon-72x72.png create mode 100644 public/favicons/apple-icon-76x76.png create mode 100644 public/favicons/apple-icon-precomposed.png create mode 100644 public/favicons/apple-icon.png create mode 100644 public/favicons/favicon-16x16.png create mode 100644 public/favicons/favicon-32x32.png create mode 100644 public/favicons/favicon-96x96.png create mode 100644 public/favicons/ms-icon-144x144.png create mode 100644 public/favicons/ms-icon-150x150.png create mode 100644 public/favicons/ms-icon-310x310.png create mode 100644 public/favicons/ms-icon-70x70.png create mode 100644 public/fonts/Ambit-Black.woff create mode 100644 public/fonts/Ambit-Black.woff2 create mode 100644 public/fonts/Ambit-BlackItalic.woff create mode 100644 public/fonts/Ambit-BlackItalic.woff2 create mode 100644 public/fonts/Ambit-Bold.woff create mode 100644 public/fonts/Ambit-Bold.woff2 create mode 100644 public/fonts/Ambit-BoldItalic.woff create mode 100644 public/fonts/Ambit-BoldItalic.woff2 create mode 100644 public/fonts/Ambit-ExtraLight.woff create mode 100644 public/fonts/Ambit-ExtraLight.woff2 create mode 100644 public/fonts/Ambit-ExtraLightItalic.woff create mode 100644 public/fonts/Ambit-ExtraLightItalic.woff2 create mode 100644 public/fonts/Ambit-Italic.woff create mode 100644 public/fonts/Ambit-Italic.woff2 create mode 100644 public/fonts/Ambit-Light.woff create mode 100644 public/fonts/Ambit-Light.woff2 create mode 100644 public/fonts/Ambit-LightItalic.woff create mode 100644 public/fonts/Ambit-LightItalic.woff2 create mode 100644 public/fonts/Ambit-Regular.woff create mode 100644 public/fonts/Ambit-Regular.woff2 create mode 100644 public/fonts/Ambit-SemiBold.woff create mode 100644 public/fonts/Ambit-SemiBold.woff2 create mode 100644 public/fonts/Ambit-SemiBoldItalic.woff create mode 100644 public/fonts/Ambit-SemiBoldItalic.woff2 create mode 100644 public/fonts/Ambit-Thin.woff create mode 100644 public/fonts/Ambit-Thin.woff2 create mode 100644 public/fonts/Ambit-ThinItalic.woff create mode 100644 public/fonts/Ambit-ThinItalic.woff2 create mode 100644 public/icons/discord.svg create mode 100644 public/icons/github.svg create mode 100644 public/icons/twitter.svg create mode 100644 public/img/bg-desktop.png create mode 100644 public/img/bg-mobile.png create mode 100644 public/img/logo-realms.svg delete mode 100644 public/img/logo.svg create mode 100644 public/img/logotype-realms-blue-white.svg create mode 100644 public/manifest.json create mode 100644 styles/ambit-font.css diff --git a/components/Button.tsx b/components/Button.tsx index b2c2dc7e4d..fa6a48347f 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -29,7 +29,7 @@ const Button: FunctionComponent = ({ } text-sm focus:outline-none ${ disabled ? 'bg-fgd-4 cursor-not-allowed text-fgd-3' - : 'bg-primary-light text-bkg-2 hover:bg-primary-dark' + : 'bg-primary-light text-bkg-2 hover:bg-fgd-1' }`} {...props} style={style} @@ -58,7 +58,7 @@ export const SecondaryButton: FunctionComponent = ({ - - diff --git a/components/DiscordIcon.tsx b/components/DiscordIcon.tsx deleted file mode 100644 index 6283e77ad4..0000000000 --- a/components/DiscordIcon.tsx +++ /dev/null @@ -1,27 +0,0 @@ -const DiscordIcon = ({ className }) => { - return ( - - - - - - - ) -} - -export default DiscordIcon diff --git a/components/Footer.tsx b/components/Footer.tsx index f69f81079d..82f8770a48 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,6 +1,25 @@ -import DiscordIcon from './DiscordIcon' -import GithubIcon from './GithubIcon' -import TwitterIcon from './TwitterIcon' +import Image from 'next/image' + +const RelevantLinks = { + Docs: 'https://docs.realms.today/', + 'Programs Github': + '"https://github.com/solana-labs/solana-program-library/blob/master/governance/README.md"', +} + +const Socials = { + Twitter: { + url: 'https://twitter.com/solana', + imgSrc: '/icons/twitter.svg', + }, + Github: { + url: 'https://github.com/solana-labs/governance-ui', + imgSrc: '/icons/github.svg', + }, + Discord: { + url: 'https://discord.com/invite/VsPbrK2hJk', + imgSrc: '/icons/discord.svg', + }, +} const Footer = () => { const { REALM } = process.env @@ -8,57 +27,43 @@ const Footer = () => { if (REALM) return null else return ( -
-
- - Docs - - +
+
+ {Object.keys(RelevantLinks).map((linkTitle) => { + const href = RelevantLinks[linkTitle] + return ( + + {linkTitle} + + ) + })}
-
- - - - - - - - - +
+ {Object.keys(Socials).map((name) => { + const { url, imgSrc } = Socials[name] + return ( + + {name} + + ) + })}
-
-

+

+

Powered by

@@ -66,7 +71,7 @@ const Footer = () => { rel="noreferrer" href="https://solana.com/" target="_blank" - className="text-white text-base font-bold hover:text-primary-dark transition-all duration-200" + className="text-base font-bold default-transition hover:text-primary-dark" > Solana diff --git a/components/GithubIcon.tsx b/components/GithubIcon.tsx deleted file mode 100644 index ffa778eebe..0000000000 --- a/components/GithubIcon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const GithubIcon = ({ className }) => { - return ( - - - - ) -} - -export default GithubIcon diff --git a/components/Members/MembersTabs.tsx b/components/Members/MembersTabs.tsx index 8090a1bfb0..5ac1ad3871 100644 --- a/components/Members/MembersTabs.tsx +++ b/components/Members/MembersTabs.tsx @@ -105,7 +105,7 @@ const MemberItems = ({ address={new PublicKey(walletAddress)} height="32px" width="32px" - placeholder={} + placeholder={} /> ), [walletAddress] @@ -122,13 +122,13 @@ const MemberItems = ({ `} >
-
+
{renderAddressImage}
-

{renderAddressName}

-

Votes Cast: {votesCasted}

- +

{renderAddressName}

+

Votes Cast: {votesCasted}

+ {(communityAmount || !councilAmount) && ( {tokenName} Votes {communityAmount || 0} diff --git a/components/NavBar.tsx b/components/NavBar.tsx index dbfb4aca1b..6b07731754 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -9,20 +9,31 @@ const NavBar = () => { const { fmtUrlWithCluster } = useQueryContext() return ( -
-
+
+
-
- - {/*

Sierra

*/} +
+ + + +
-
- - +
+
+ + +
+
+ + +
) } diff --git a/components/PageBodyContainer.tsx b/components/PageBodyContainer.tsx index 368a1d261d..5ee9368ea7 100644 --- a/components/PageBodyContainer.tsx +++ b/components/PageBodyContainer.tsx @@ -1,5 +1,11 @@ const PageBodyContainer = ({ children }) => ( -
+
+
+ + + + +
{children}
diff --git a/components/RealmHeader.tsx b/components/RealmHeader.tsx index ba999b618a..841d703e58 100644 --- a/components/RealmHeader.tsx +++ b/components/RealmHeader.tsx @@ -27,7 +27,7 @@ const RealmHeader = () => { const realmUrl = `https://${explorerHost}/#/realm/${realmInfo?.realmId.toBase58()}?programId=${realmInfo?.programId.toBase58()}` return ( -
+
{ > {isBackNavVisible ? ( - - + + Back ) : null}
-
+
{realmDisplayName ? (
-
+
{realmInfo?.ogImage ? ( ) : ( @@ -62,21 +62,21 @@ const RealmHeader = () => {
) : ( -
+ diff --git a/components/Switch.tsx b/components/Switch.tsx index 570b3798de..793e93d312 100644 --- a/components/Switch.tsx +++ b/components/Switch.tsx @@ -24,7 +24,7 @@ const Switch: FunctionComponent = ({ diff --git a/components/TwitterIcon.tsx b/components/TwitterIcon.tsx deleted file mode 100644 index 013f634af2..0000000000 --- a/components/TwitterIcon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -const TwitterIcon = ({ className }) => { - return ( - - - - ) -} - -export default TwitterIcon diff --git a/components/VoteResults.tsx b/components/VoteResults.tsx index f064686493..f9c94f7825 100644 --- a/components/VoteResults.tsx +++ b/components/VoteResults.tsx @@ -15,7 +15,7 @@ const VoteResults = ({ isListView, proposal }: VoteResultsProps) => { relativeYesVotes, } = useProposalVotes(proposal) return ( -
+
{proposal ? (
{

Yes Votes

{yesVoteCount.toLocaleString()} {isListView ? ( - + {relativeYesVotes?.toFixed(1)}% ) : null}

{!isListView ? ( -
+
{relativeYesVotes?.toFixed(1)}%
) : null}
-
+

No Votes

{noVoteCount.toLocaleString()} {isListView ? ( - + {relativeNoVotes?.toFixed(1)}% ) : null}

{!isListView ? ( -
+
{relativeNoVotes?.toFixed(1)}%
) : null} @@ -69,7 +69,7 @@ const VoteResults = ({ isListView, proposal }: VoteResultsProps) => {
) : ( <> -
+
)}
diff --git a/package.json b/package.json index fdc97786ed..31b4040a56 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@emotion/styled": "^11.8.1", "@friktion-labs/friktion-sdk": "^1.1.118", "@foresight-tmp/foresight-sdk": "^0.1.45", - "@headlessui/react": "^1.5.0", + "@headlessui/react": "^1.6.0", "@heroicons/react": "^1.0.1", "@marinade.finance/marinade-ts-sdk": "^2.0.9", "@metaplex-foundation/mpl-token-metadata": "^1.2.5", diff --git a/pages/_app.tsx b/pages/_app.tsx index 8332a4259c..9d321cbff7 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,6 @@ import { ThemeProvider } from 'next-themes' import '@dialectlabs/react-ui/index.css' +// import '../styles/ambit-font.css' import '../styles/index.css' import useWallet from '../hooks/useWallet' import NavBar from '../components/NavBar' @@ -26,6 +27,7 @@ import useMembers from '@components/Members/useMembers' import TransactionLoader from '@components/TransactionLoader' import dynamic from 'next/dynamic' +import Head from 'next/head' const Notifications = dynamic(() => import('../components/Notification'), { ssr: false, }) @@ -54,15 +56,16 @@ function App({ Component, pageProps }) { const prevStringifyPossibleNftsAccounts = usePrevious( JSON.stringify(possibleNftsAccounts) ) - const title = realmName ? `${realmName}` : 'Solana Governance' + const title = realmName ? `${realmName}` : 'Realms' // Note: ?v==${Date.now()} is added to the url to force favicon refresh. // Without it browsers would cache the last used and won't change it for different realms // https://stackoverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh - const faviconSelector = symbol ?? 'SOLANA' - const faviconUrl = `/realms/${getResourcePathPart( - faviconSelector as string - )}/favicon.ico?v=${Date.now()}` + const faviconUrl = + symbol && + `/realms/${getResourcePathPart( + symbol as string + )}/favicon.ico?v=${Date.now()}` useEffect(() => { if (realm?.pubkey) { loadMarket(connection, connection.cluster) @@ -96,30 +99,7 @@ function App({ Component, pageProps }) { wallet?.connected, client, ]) - //hack to remove 'Do not add