Main -> Staging

frontend/Dockerfile.stage

@@ -27,7 +27,7 @@ FROM nginx:latest as production-stage
 RUN mkdir -p /var/run/nginx-cache && chmod 0755 /var/run/nginx-cache
 WORKDIR /app
 COPY --from=build-stage /app/packages/client/build /app
-COPY ./packages/client/public/cast.png /app
+COPY ./packages/client/public/cast.jpg /app
 COPY ./deploy/nginx.conf /etc/nginx/nginx.conf
 EXPOSE 80
 RUN ls -la /app

frontend/deploy/nginx.conf

@@ -27,7 +27,7 @@ http {
             index  index.html;
             try_files $uri $uri/ /index.html;
         }
-        location  /app/cast.png{
+        location  /app/cast.jpg{
         }
         location /js/script.js {
         # Change this if you use a different variant of the script

frontend/packages/client/public/index.html

@@ -12,7 +12,7 @@
     <meta property="og:title" content="Cast" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://cast.fyi" />
-    <meta property="og:image" content="%PUBLIC_URL%/cast.png" />
+    <meta property="og:image" content="%PUBLIC_URL%/cast.jpg" />
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />

frontend/packages/client/src/App.sass

@@ -152,6 +152,8 @@ code
 	flex: 2 0 0
 .has-background-orange
 	background-color: $orange
+.has-background-light-grey
+	background-color: $light-grey
 .has-background-yellow
 	background-color: $yellow
 	&.button
@@ -231,6 +233,8 @@ label > input[type="radio"].is-chosen + *::before
 .proposal-copy a:hover
 	filter: opacity(0.7)
 	color: $link
+header#navbar
+	border-top: 4px solid $yellow
 .navbar
 	display: flex
 	justify-content: space-between
@@ -349,6 +353,8 @@ hr
 	font-size: 0.88rem !important
 .smaller-text
 	font-size: 0.75rem !important
+.smallest-text
+	font-size: 10px
 
 @import './components/StepByStep/StepByStep.sass'
 
@@ -597,8 +603,6 @@ span[data-tooltip]
 	td
 		vertical-align: middle !important
 		height: 64px !important
-	.has-background-light-grey
-		background-color: $light-grey
 	thead th
 		border-width: 0 0 1px !important
 	.index-cell
@@ -704,9 +708,6 @@ span[data-tooltip]
 	.header-text
 		font-size: 2.5rem
 		line-height: 3rem !important
-.beta-label
-	font-size: 10px
-	font-weight: 700
 .wallet-connect-footer
 	background-color: #F2F2F2
 

frontend/packages/client/src/components/Community/CommunitiesPresenter.js

@@ -36,7 +36,9 @@ const CommunitiesPresenter = ({
 
   return (
     <div className={containerClasses}>
-      <h1 className="is-uppercase small-text communities">{title}</h1>
+      <h1 className="is-uppercase has-text-weight-bold communities mb-5">
+        {title}
+      </h1>
       <div className="columns is-multiline">
         {communities.map((community, index) => {
           const { logo, name, body, id, isComingSoon, slug } = community;

frontend/packages/client/src/components/Header.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { NavLink, withRouter } from 'react-router-dom';
+import Label from './Label';
 import Sidenavbar from './SideNavbar';
-import { LinkOut, Logo } from './Svg';
+import { Logo } from './Svg';
 import WalletConnect from './WalletConnect';
 
 function Header(props) {
@@ -18,7 +19,8 @@ function Header(props) {
   return (
     <>
       <header
-        className={`header ${props.location.pathname} has-background-white is-block navbar is-fixed-top`}
+        id="navbar"
+        className={`${props.location.pathname} has-background-white is-block navbar is-fixed-top`}
       >
         <div className="px-4 divider">
           <div className="container header-spacing">
@@ -27,49 +29,44 @@ function Header(props) {
                 <NavLink to="/" className="navbar-item p-0 mr-2">
                   <Logo />
                 </NavLink>
+                <div className="is-flex is-align-items-center">
+                  <Label
+                    labelText="Beta"
+                    classNames="has-text-weight-bold smallest-text is-uppercase"
+                  />
+                </div>
+                <span
+                  role="button"
+                  className="navbar-burger mr-2"
+                  onClick={openNavbarMenu}
+                >
+                  <span />
+                  <span />
+                  <span />
+                </span>
+              </div>
+              <div className="navbar-end">
                 <NavLink
                   to={{
                     pathname: '/about',
                     state: { modal: true },
                   }}
-                  className="navbar-item p-0 ml-4 mr-4 is-hidden-mobile"
+                  className="navbar-item p-0 mr-6 is-hidden-mobile"
                 >
-                  <span className="navbar-item-hover transition-all">
-                    About
+                  <span className="navbar-item-hover transition-all has-text-weight-bold">
+                    About Us
                   </span>
                 </NavLink>
                 <NavLink
                   to={{
                     pathname: '/community/create',
                   }}
-                  className="navbar-item p-0 ml-4 mr-4 is-hidden-mobile"
+                  className="navbar-item p-0 mr-6 is-hidden-mobile"
                 >
-                  <span className="navbar-item-hover transition-all">
-                    Create Community
+                  <span className="navbar-item-hover transition-all has-text-weight-bold">
+                    Create a Community
                   </span>
                 </NavLink>
-                <a
-                  href="https://github.com/DapperCollectives/CAST"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="navbar-item p-0 ml-4 is-hidden-mobile"
-                >
-                  <div className="is-flex is-align-items-center navbar-item-hover transition-all">
-                    <span className="mr-2">Codebase</span>
-                    <LinkOut width="17" height="17" />
-                  </div>
-                </a>
-                <span
-                  role="button"
-                  className="navbar-burger mr-2"
-                  onClick={openNavbarMenu}
-                >
-                  <span />
-                  <span />
-                  <span />
-                </span>
-              </div>
-              <div className="navbar-end">
                 <span className="navbar-item p-0">
                   <WalletConnect expandContainer />
                 </span>

frontend/packages/client/src/components/HomeFooter.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 export default function HomeFooter() {
   return (
-    <div className="container pt-6">
+    <div className="container pt-7 mt-7">
       <div className="columns">
         <div className="column">
           <p className="has-text-grey small-text is-flex">
@@ -26,7 +26,7 @@ export default function HomeFooter() {
               href="https://docs.cast.fyi"
               className="is-underlined has-text-grey"
             >
-              Docs
+              FAQ
             </a>
           </p>
         </div>

frontend/packages/client/src/components/HomeHeader.js

@@ -8,7 +8,7 @@ const stars = [
   { topPer: 0.1, leftPer: 0.45, width: '31px', height: '31px', start: 700 },
   { topPer: 0.1, leftPer: 0.99, width: '31px', height: '31px', start: 1100 },
   { topPer: 0.35, leftPer: 0.7, width: '31px', height: '31px', start: 1100 },
-  { topPer: 0.9, leftPer: 0.7, width: '25px', height: '25px', start: 500 },
+  { topPer: 0.92, leftPer: 0.67, width: '25px', height: '25px', start: 500 },
 ];
 
 export default function HomeHeader() {
@@ -17,7 +17,13 @@ export default function HomeHeader() {
   });
 
   return (
-    <div className="is-flex is-flex-direction-column is-align-items-center is-justify-content-center pb-7">
+    <div
+      className="is-flex is-flex-direction-column is-align-items-center is-justify-content-center py-7 has-background-light-grey"
+      style={{
+        position: 'relative',
+        zIndex: 0, // needed for stars to show up
+      }}
+    >
       <div
         className="is-flex is-flex-direction-column is-align-items-center is-justify-content-center px-4"
         style={{ position: 'relative' }}
@@ -28,7 +34,7 @@ export default function HomeHeader() {
             Make decisions, together.
           </h1>
         </div>
-        <h4 className="py-5 is-size-5 has-text-centered">
+        <h4 className="py-4 mb-4 is-size-4 has-text-centered">
           CAST is a voting tool for token communities.{' '}
         </h4>
         {starArray.map((position, index) => (
@@ -43,20 +49,20 @@ export default function HomeHeader() {
         <div className="column">
           <Link to={`/about`}>
             <div
-              className="button is-fullwidth rounded-sm is-uppercase is-flex small-text has-text-white has-background-black"
+              className="button is-fullwidth rounded-lg is-flex has-text-weight-bold has-text-white has-background-black px-5"
               style={{ minHeight: '40px' }}
             >
-              LEARN MORE
+              Learn More
             </div>
           </Link>
         </div>
         <div className="column">
           <Link to={`/community/create`}>
             <div
-              className="button is-fullwidth rounded-sm is-uppercase is-flex small-text"
+              className="button is-fullwidth rounded-lg is-flex has-text-weight-bold has-background-white px-5"
               style={{ minHeight: '40px' }}
             >
-              CREATE A COMMUNITY
+              Create a Community
             </div>
           </Link>
         </div>

frontend/packages/client/src/components/Label.js

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 export default function Label({ labelText = '', classNames } = {}) {
   const className = classnames(
-    'has-background-black has-text-white rounded-sm px-3 py-2 mr-2',
+    'has-background-black has-text-white rounded-lg px-3 py-2',
     { [classNames]: !!classNames }
   );
   return <span className={className}>{labelText}</span>;

frontend/packages/client/src/components/Message.js

@@ -3,7 +3,9 @@ import Label from './Label';
 import WrapperResponsive from './WrapperResponsive';
 
 const Message = ({ messageText = '', labelText = null, icon = null } = {}) => {
-  const labelComponent = labelText ? <Label labelText={labelText} /> : null;
+  const labelComponent = labelText ? (
+    <Label labelText={labelText} className="mr-2" />
+  ) : null;
   return (
     <div className="container message-container">
       <div className="has-background-white-ter rounded-sm">

frontend/packages/client/src/components/TooltipMessage.js

@@ -4,7 +4,10 @@ import { Close, InfoOutLine } from 'components/Svg';
 import { useMediaQuery } from 'hooks';
 import classnames from 'classnames';
 
-export default function TooltipMesssage({ onClose = () => {} } = {}) {
+export default function TooltipMesssage({
+  onClose = () => {},
+  className = '',
+} = {}) {
   const notMobile = useMediaQuery();
 
   const [closeToolTip, setCloseToolTip] = useState(false);
@@ -23,6 +26,10 @@ export default function TooltipMesssage({ onClose = () => {} } = {}) {
     { 'is-align-flex-center is-align-items-center pl-2 pr-3': notMobile },
     { 'is-align-flex-start pt-2 pl-4 pr-3': !notMobile }
   );
+  const tooltipClasses = classnames(
+    'container has-background-white-ter rounded-sm',
+    className
+  );
 
   return (
     <FadeInOut
@@ -31,7 +38,7 @@ export default function TooltipMesssage({ onClose = () => {} } = {}) {
         onClose();
       }}
     >
-      <div className="container message-container has-background-white-ter rounded-sm">
+      <div className={tooltipClasses}>
         <div className="columns is-mobile m-0 p-0">
           <div className="column is-flex is-flex-grow-1 pl-3" style={styles}>
             <div className={classesInfoOutLine}>

frontend/packages/client/src/components/WalletConnect.js

@@ -13,7 +13,6 @@ const SignInOutButton = ({
   openWalletModal,
   injectedProvider,
   closeModal,
-  expandContainer = false,
 }) => {
   const notMobile = useMediaQuery();
 
@@ -67,7 +66,7 @@ const SignInOutButton = ({
   });
 
   const buttonClass = classnames(
-    'wallet-connect button is-uppercase transition-all small-text rounded-sm',
+    'wallet-connect button transition-all small-text rounded-lg',
     { 'is-primary': !loggedIn },
     { 'px-2': !notMobile }
   );
@@ -88,10 +87,7 @@ const SignInOutButton = ({
         aria-controls="dropdown-menu"
         style={{ position: 'relative' }}
       >
-        <div
-          className="dropdown-trigger is-flex is-justify-content-flex-end"
-          style={notMobile && expandContainer ? { width: '280px' } : {}}
-        >
+        <div className="dropdown-trigger is-flex is-justify-content-flex-end">
           <button
             onClick={loggedIn ? openDropdown : connectWallet}
             className={buttonClass}
@@ -130,7 +126,7 @@ const SignInOutButton = ({
           id="dropdown-menu"
           role="menu"
           ref={dropdownRef}
-          style={!notMobile ? { left: '-160px' } : {}}
+          style={!notMobile ? { left: '-160px' } : { left: '-130px' }}
         >
           <div className="dropdown-content p-0" style={{ width: '277px' }}>
             <div className="px-4 pt-4 pb-2">
@@ -143,7 +139,7 @@ const SignInOutButton = ({
               >
                 <CopyToClipboard text={addr} onCopy={markAddressCopied}>
                   <div
-                    className="columns flex-1 is-mobile m-0 px-4 py-0 rounded-sm button is-white border-light"
+                    className="columns flex-1 is-mobile m-0 px-4 py-0 rounded-lg button is-white border-light"
                     style={{
                       borderColor: 'hsl(0deg, 0%, 86%)',
                       height: '32px',
@@ -168,11 +164,11 @@ const SignInOutButton = ({
             <hr className="dropdown-divider" />
             <div className="px-4 pb-4 pt-2">
               <div
-                className="button is-fullwidth rounded-sm is-uppercase is-flex small-text has-text-white has-background-black"
+                className="button is-fullwidth rounded-lg is-flex small-text has-text-white has-background-black"
                 style={{ height: '32px' }}
                 onClick={signOut}
               >
-                disconnect
+                Disconnect
               </div>
             </div>
           </div>

frontend/packages/client/src/pages/About.js

@@ -26,7 +26,10 @@ const AboutPage = ({ location }) => {
         >
           <div className="columns px-5 px-3-mobile-only pt-4 flex-1 is-mobile">
             <div className="column px-2 pt-1">
-              <Label labelText="Beta" classNames="beta-label is-uppercase" />
+              <Label
+                labelText="Beta"
+                classNames="has-text-weight-bold smallest-text is-uppercase mr-2"
+              />
             </div>
             <div
               className={`column is-flex is-narrow has-text-right is-size-2 leading-tight cursor-pointer px-2 px-3-mobile-only pt-3`}