Gently adjust typography and colors for upcoming refresh (solana-labs…

…#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 <[email protected]>
d0bby5 · Jun 14, 2022 · d84ee90 · d84ee90
1 parent e95676c
commit d84ee90
Show file tree

Hide file tree

Showing 88 changed files with 539 additions and 288 deletions.
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -29,7 +29,7 @@ const Button: FunctionComponent<ButtonProps> = ({
       } 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<ButtonProps> = ({
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`${className} border border-primary-light default-transition font-bold rounded-full px-4 ${
+      className={`${className} border border-primary-light font-bold default-transition rounded-full px-4 ${
         small ? 'py-1' : 'py-2.5'
       } text-primary-light text-sm hover:border-primary-dark hover:text-primary-dark focus:outline-none disabled:border-fgd-3 disabled:text-fgd-3 disabled:cursor-not-allowed`}
       {...props}

diff --git a/components/ConnectWalletButton.tsx b/components/ConnectWalletButton.tsx
@@ -21,7 +21,7 @@ import {
   WALLET_PROVIDERS,
 } from '../utils/wallet-adapters'
 import Switch from './Switch'
-import TwitterIcon from './TwitterIcon'
+import { TwitterIcon } from './icons'
 
 const StyledWalletProviderLabel = styled.p`
   font-size: 0.65rem;
@@ -115,7 +115,7 @@ const ConnectWalletButton = (props) => {
     <div className="flex">
       <div
         disabled={connected}
-        className={`bg-transparent border border-fgd-4 border-r-0 default-transition flex h-12 items-center pl-1 pr-2 rounded-l-full rounded-r-none ${
+        className={`bg-bkg-2 hover:bg-bkg-3  border border-fgd-4 border-r-0 default-transition flex h-12 items-center pl-1 pr-2 rounded-l-full rounded-r-none ${
           connected
             ? 'cursor-default'
             : 'cursor-pointer hover:bg-bkg-3 focus:outline-none'
@@ -150,7 +150,7 @@ const ConnectWalletButton = (props) => {
           {({ open }) => (
             <>
               <Menu.Button
-                className={`border border-fgd-4 cursor-pointer default-transition h-12 w-12 py-2 px-2 rounded-r-full hover:bg-bkg-3 focus:outline-none`}
+                className={`border bg-bkg-2 border-fgd-4 cursor-pointer default-transition h-12 w-12 py-2 px-2 rounded-r-full hover:bg-bkg-3 focus:outline-none`}
               >
                 <ChevronDownIcon
                   className={`${
@@ -195,29 +195,29 @@ const ConnectWalletButton = (props) => {
                       <hr
                         className={`border border-fgd-3 opacity-50 mt-2 mb-2`}
                       ></hr>
-                      <Menu.Item
-                        key={'twitter'}
-                        onClick={() =>
-                          show(
-                            // @ts-ignore
-                            current,
-                            connection.current,
-                            connection.cluster
-                          )
-                        }
-                      >
-                        <button className="flex items-center w-full p-2 font-normal default-transition h-9 hover:bg-bkg-3 hover:cursor-pointer hover:rounded focus:outline-none">
+                      <Menu.Item key={'twitter'}>
+                        <button
+                          className="flex items-center w-full p-2 font-normal default-transition h-9 hover:bg-bkg-3 hover:cursor-pointer hover:rounded focus:outline-none"
+                          onClick={() =>
+                            show(
+                              // @ts-ignore
+                              current,
+                              connection.current,
+                              connection.cluster
+                            )
+                          }
+                        >
                           <TwitterIcon className="w-4 h-4 mr-2" />
                           <span className="text-sm">
                             {displayName ? 'Edit Twitter' : 'Link Twitter'}
                           </span>
                         </button>
                       </Menu.Item>
-                      <Menu.Item
-                        key={'disconnect'}
-                        onClick={handleConnectDisconnect}
-                      >
-                        <button className="flex items-center w-full p-2 font-normal default-transition h-9 hover:bg-bkg-3 hover:cursor-pointer hover:rounded focus:outline-none">
+                      <Menu.Item key={'disconnect'}>
+                        <button
+                          className="flex items-center w-full p-2 font-normal default-transition h-9 hover:bg-bkg-3 hover:cursor-pointer hover:rounded focus:outline-none"
+                          onClick={handleConnectDisconnect}
+                        >
                           <BackspaceIcon className="w-4 h-4 mr-2" />
                           <span className="text-sm">Disconnect</span>
                         </button>

diff --git a/components/DiscordIcon.tsx b/components/DiscordIcon.tsx
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,72 +1,77 @@
-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
 
   if (REALM) return null
   else
     return (
-      <div className="flex flex-row h-20   justify-around bottom-0 bg-bkg-1 gap-y-8 md:gap-y-0 w-full absolute left-0  px-12 border-t border-primary-light">
-        <div className="flex justify-center  items-center gap-x-5   md:gap-x-6  ">
-          <a
-            rel="noreferrer"
-            href="https://docs.realms.today/"
-            target="_blank"
-            className="text-white text-base font-bold hover:text-primary-dark transition-all duration-200"
-          >
-            Docs
-          </a>
-          <div className=" justify-center  hidden md:flex  items-center gap-x-8 py-2 ">
-            <a
-              rel="noreferrer"
-              href="https://github.com/solana-labs/solana-program-library/blob/master/governance/README.md"
-              target="_blank"
-              className="text-white    text-base font-light hover:text-primary-dark transition-all duration-200"
-            >
-              Programs Github
-            </a>
-          </div>
+      <div className="absolute bottom-0 left-0 flex flex-row justify-around w-full h-20 px-12 border-t bg-bkg-1 gap-y-8 md:gap-y-0 border-brand-gradient">
+        <div className="flex items-center justify-center gap-x-5 md:gap-x-6 ">
+          {Object.keys(RelevantLinks).map((linkTitle) => {
+            const href = RelevantLinks[linkTitle]
+            return (
+              <a
+                key={linkTitle}
+                href={href}
+                target="_blank"
+                className="text-base font-bold default-transition hover:text-primary-dark"
+                rel="noreferrer"
+              >
+                {linkTitle}
+              </a>
+            )
+          })}
         </div>
 
-        <div className="flex justify-center items-center gap-x-10 sm:gap-x-20 md:gap-x-24">
-          <a
-            rel="noreferrer"
-            target="_blank"
-            href="https://twitter.com/solana"
-            className="text-primary-light text-base font-light transform transition duration-500 hover:scale-125 shadow-sm"
-          >
-            <TwitterIcon className="" />
-          </a>
-          <a
-            rel="noreferrer"
-            target="_blank"
-            href="https://github.com/solana-labs/governance-ui"
-            className="text-primary-light text-base font-light transform transition duration-500 hover:scale-125  shadow-sm"
-          >
-            <GithubIcon className="" />
-          </a>
-          <a
-            rel="noreferrer"
-            target="_blank"
-            href="https://discord.com/invite/VsPbrK2hJk"
-            className="text-primary-light text-base font-light transform transition duration-500 hover:scale-125 shadow-sm"
-          >
-            <DiscordIcon className="" />
-          </a>
+        <div className="flex items-center justify-center gap-x-10 sm:gap-x-20 md:gap-x-24">
+          {Object.keys(Socials).map((name) => {
+            const { url, imgSrc } = Socials[name]
+            return (
+              <a
+                key={name}
+                rel="noreferrer"
+                target="_blank"
+                href={url}
+                className="text-base default-transition hover:scale-125"
+              >
+                <Image src={imgSrc} width={36} height={36} alt={name} />
+              </a>
+            )
+          })}
         </div>
 
-        <div className=" justify-center items-center gap-x-1   hidden md:flex ">
-          <p className="text-white text-base font-light cursor-default ">
+        <div className="items-center justify-center hidden gap-x-1 md:flex">
+          <p className="text-base font-light hover:text-primary-dark ">
             Powered by
           </p>
 
           <a
             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
           </a>

diff --git a/components/GithubIcon.tsx b/components/GithubIcon.tsx
diff --git 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={<UserCircleIcon className="h-6 text-fgd-3 w-6" />}
+        placeholder={<UserCircleIcon className="w-6 h-6 text-fgd-3" />}
       />
     ),
     [walletAddress]
@@ -122,13 +122,13 @@ const MemberItems = ({
           `}
     >
       <div className="flex items-center text-left">
-        <div className="bg-bkg-4 flex flex-shrink-0 items-center justify-center h-8 rounded-full w-8 mr-2">
+        <div className="flex items-center justify-center flex-shrink-0 w-8 h-8 mr-2 rounded-full bg-bkg-4">
           {renderAddressImage}
         </div>
         <div>
-          <h3 className="mb-1 text-sm flex">{renderAddressName}</h3>
-          <p className="mb-0 text-fgd-1 text-xs">Votes Cast: {votesCasted}</p>
-          <span className="text-fgd-3 text-xs">
+          <h3 className="flex mb-1 text-base font-bold">{renderAddressName}</h3>
+          <p className="mb-0 text-xs text-fgd-1">Votes Cast: {votesCasted}</p>
+          <span className="text-xs text-fgd-3">
             {(communityAmount || !councilAmount) && (
               <span className="flex items-center">
                 {tokenName} Votes {communityAmount || 0}

diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -9,20 +9,31 @@ const NavBar = () => {
   const { fmtUrlWithCluster } = useQueryContext()
 
   return (
-    <div className="grid grid-cols-12 mb-3">
-      <div className="col-span-12 xl:col-start-2 xl:col-span-10 flex h-20 items-center justify-between px-4 md:px-8 xl:px-4">
+    <div className="flex flex-col sm:grid sm:grid-cols-12">
+      <div className="flex items-center justify-between h-20 col-span-12 px-4 xl:col-start-2 xl:col-span-10 md:px-8 xl:px-4">
         <Link href={fmtUrlWithCluster('/realms')}>
-          <div className="cursor-pointer flex items-center">
-            <img src="/img/solana-logo.svg" className="h-8 mr-3" />
-            {/* <h1 className="text-lg">Sierra</h1> */}
+          <div className="flex cursor-pointer sm:items-center min-w-[36px]">
+            <picture>
+              <source
+                srcSet="/img/logotype-realms-blue-white.svg"
+                media="(min-width: 640px)"
+              />
+              <img src="/img/logo-realms.svg" className="w-8 h-8 md:w-24" />
+            </picture>
           </div>
         </Link>
-        <div className="flex items-center space-x-4">
-          <ThemeSwitch />
-          <NotificationsSwitch />
+        <div className="flex flex-wrap items-center justify-end">
+          <div className="justify-between hidden mx-4 space-x-4 sm:flex">
+            <ThemeSwitch />
+            <NotificationsSwitch />
+          </div>
           <ConnectWalletButton />
         </div>
       </div>
+      <div className="flex justify-end px-4 space-x-4 sm:hidden">
+        <ThemeSwitch />
+        <NotificationsSwitch />
+      </div>
     </div>
   )
 }

diff --git a/components/PageBodyContainer.tsx b/components/PageBodyContainer.tsx
@@ -1,5 +1,11 @@
 const PageBodyContainer = ({ children }) => (
-  <div className="min-h-screen grid grid-cols-12 gap-4 pb-44 pt-4">
+  <div className="grid min-h-screen grid-cols-12 gap-4 pt-4 pb-44">
+    <div className="z-[-1] fixed top-0 left-0 w-[100vw] h-[100vh] bg-[#292833]">
+      <picture>
+        <source srcSet="/img/bg-desktop.png" media="(min-width: 640px)" />
+        <img src="/img/bg-mobile.png" />
+      </picture>
+    </div>
     <div className="col-span-12 px-4 md:px-8 xl:px-4 xl:col-start-2 xl:col-span-10">
       {children}
     </div>