feat: update branding & button component (#140)

* update button, fonts, colors, dark theme

* Update .eslintrc-auto-import.json

* Update auto-imports.d.ts

* update dark theme

* chore: update checkout action

* chore: lint on pr

* fix linting

* address review comments

---------

Co-authored-by: replygirl <moon@moon.fyi>

.github/workflows/lint.yml

@@ -1,10 +1,10 @@
 name: Lint
-on: push
+on: [push, pull_request]
 jobs:
   install_and_lint:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - name: Install modules
       run: yarn
     - name: Run ESLint

.gitignore

@@ -23,3 +23,4 @@
 node_modules
 npm-debug.log
 yarn-error.log
+.DS_Store

.storybook/main.js

@@ -7,6 +7,21 @@ module.exports = {
     '../stories/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  previewHead: (head) => (`
+    ${head}
+    <style>
+      @font-face {
+        font-family: 'Manrope';
+        src: url('/fonts/Manrope-Bold.ttf');
+        font-weight: 700;
+      }
+      @font-face {
+        font-family: 'Manrope';
+        src: url('/fonts/Manrope-Regular.ttf');
+        font-weight: 400;
+      }
+    </style>
+  `),
   webpackFinal: config => {
     config.plugins.push(
       new WindiCSSWebpackPlugin({
@@ -22,7 +37,7 @@ module.exports = {
 
     config.resolve.alias = {
       ...config.resolve?.alias,
-      '~': path.resolve(__dirname, '../src/'),
+      '~': path.dirname(__dirname),
     }
     return config
   },

components/button.tsx

@@ -1,23 +1,13 @@
 export interface ButtonProps {
-  color?: 'primary' | 'secondary'
   className?: string
   children: any
   onClick?: () => void
 }
 
-export const Button = ({
-  color = 'primary',
-  className,
-  ...props
-}: ButtonProps) => {
-  const styleMap = {
-    primary: 'bg-red-700 text-white font-bold',
-    secondary: 'bg-cool-gray-500 text-white font-bold',
-  }
-
+export const Button = ({ className, ...props }: ButtonProps) => {
   return (
     <button
-      className={`p-2 rounded-md m-2 ${styleMap[color]} ${className}`}
+      className={`btn ${className}`}
       {...props}
     />
   )

components/event.tsx

@@ -15,8 +15,8 @@ const EventComponent = ({ className, event }: EventProps) => {
 
   return (
     <div className={`flex items-start space-x-4 sm:space-x-8 ${className}`}>
-      <div className='flex-shrink-0 min-w-16 border-2 border-red-500 text-center'>
-        <p className='bg-red-500 text-white font-mono text-xs upppercase py-1'>
+      <div className='flex-shrink-0 min-w-16 border-2 border-reject text-center'>
+        <p className='bg-reject text-white font-mono text-xs upppercase py-1'>
           {format(date, 'LLL')}
         </p>
         <p className='py-2 text-4xl'>{format(date, 'd')}</p>

components/status.tsx

@@ -37,7 +37,7 @@ const StatusComponent: FC<StatusProps> = ({ onOpenVideo }) => {
           ))}
           {status?.live && (
             <li
-              className='whitespace-nowrap underline cursor-pointer text-red-500 first:font-bold'
+              className='whitespace-nowrap underline cursor-pointer text-red-500 first:font-bold dark:text-yield'
               key='live'
               role='button'
               onClick={onOpenVideo}

layouts/landing-page.tsx

@@ -63,24 +63,32 @@ const LandingPageLayout = ({
       )}
       <header className='grid grid-cols-3 lg:grid-cols-5 xl:grid-cols-3 items-end gap-8'>
         <Link href='/'>
-          <GlyphOtd className='h-18 w-18 cursor-pointer lg:col-span-2 xl:col-span-1' />
+          <GlyphOtd className='h-18 w-18 cursor-pointer lg:col-span-2 xl:col-span-1 dark:text-yield' />
         </Link>
         <nav className='col-span-2 justify-self-end lg:(col-start-3 col-span-3 justify-self-auto) xl:(col-start-2 col-span-2)'>
           <div className='flex flex-col border-b-2 py-2 pr-28 leading-6 font-bold xs:pr-32 sm:(flex-row items-end space-x-8 pr-32) md:pr-48'>
-            <div className='flex flex-col'>
-              <a href={twitterUrl}>Twitter</a>
-              <a href={roadmapUrl}>Roadmap</a>
-            </div>
+            <a
+              className='dark:text-yield'
+              href={twitterUrl}
+            >
+              Twitter
+            </a>
+            <a
+              className='dark:text-yield'
+              href={roadmapUrl}
+            >
+              Roadmap
+            </a>
             <Link href='/open-design'>
-              <a>
+              <a className='dark:text-yield'>
                 <span>Open Design&#32;</span>
                 <span className='<xs:hidden'>+ Build</span>
               </a>
             </Link>
           </div>
           {status?.live ? (
             <button
-              className={`absolute right-4 top-4 grid place-content-center rounded-full h-20 w-20 border-2 border-red-500 text-red-500 leading-5 text-center cursor-pointer animate-animated animate-pulse animate-infinite xs:top-2 lg:right-16 ${
+              className={`absolute right-4 top-4 grid place-content-center rounded-full h-20 w-20 border-2 border-red-500 text-red-500 leading-5 text-center cursor-pointer animate-animated animate-pulse animate-infinite xs:top-2 lg:right-16 dark:text-yield dark:border-yield ${
                 isDevelopment ? 'top-24 xs:top-22' : 'top-4 xs:top-2'
               } ${classNameDonate}`}
               onClick={() => setShowVideo(true)}
@@ -89,7 +97,7 @@ const LandingPageLayout = ({
             </button>
           ) : (
             <a
-              className={`absolute right-4 top-4 grid place-content-center rounded-full h-20 w-20 border-2 text-center cursor-pointer xs:top-2 lg:right-16 ${
+              className={`absolute right-4 top-4 grid place-content-center rounded-full h-20 w-20 border-2 dark:border-white text-center cursor-pointer xs:top-2 lg:right-16 ${
                 isDevelopment ? 'top-24 xs:top-22' : 'top-4 xs:top-2'
               } ${classNameDonate}`}
               href={donateUrl}
@@ -100,11 +108,11 @@ const LandingPageLayout = ({
         </nav>
       </header>
       <main className={`flex-grow ${classNameMain}`}>{children}</main>
-      <footer className='border-t-2 py-4 text-xs font-mono'>
+      <footer className='border-t-2 dark:border-white py-4 text-xs font-mono dark:text-light-gray'>
         <p>
           An Open Tech Development (OTD) project commissioned by{' '}
           <a
-            className='underline whitespace-nowrap'
+            className='underline whitespace-nowrap dark:text-yield'
             href={bsaUrl}
           >
             Black Socialists in America

package.json

@@ -15,7 +15,7 @@
     "dev": "next",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.json,.jsonc",
     "start": "next start",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "start-storybook -s public -p 6006"
   },
   "dependencies": {
     "@notionhq/client": "^0.4.9",

pages/_app.tsx

@@ -4,7 +4,8 @@ import Head from 'next/head'
 import 'destyle.css'
 import 'windi.css'
 
-import '~/styles/fonts-helvetica.css'
+import '~/styles/fonts-manrope.css'
+import '~/styles/fonts-space-grotesk.css'
 import '~/styles/index.css'
 import { useStatus } from '~/hooks'
 

pages/_document.tsx

@@ -3,14 +3,17 @@ import Document, { Head, Html, Main, NextScript } from 'next/document'
 class DualPowerAppDocument extends Document {
   render() {
     return (
-      <Html lang='en'>
+      <Html
+        className='dark'
+        lang='en'
+      >
         <Head>
           <link
             href='https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'
             rel='stylesheet'
           />
         </Head>
-        <body>
+        <body className='dark:bg-black'>
           <Main />
           <NextScript />
         </body>

pages/index.tsx

@@ -18,12 +18,14 @@ const IndexPage: NextPage = () => {
     >
       <div className='grid grid-cols-3 lg:grid-cols-5 xl:grid-cols-3 gap-8'>
         <section className='col-span-3 flex-shrink-0 space-y-2 lg:col-span-2 xl:col-span-1'>
-          <h1 className='text-6xl leading-12 lg:(text-7xl leading-16)'>
-            The&nbsp;Dual Power&nbsp;App
+          <h1 className='font-brand text-subheading uppercase dark:text-light-gray'>
+            Dual Power App
           </h1>
-          <p className='font-mono uppercase'>Build economic democracy</p>
+          <p className='font-mono uppercase dark:text-light-gray'>
+            Build economic democracy
+          </p>
         </section>
-        <section className='col-span-3 leading-5 space-y-2 lg:(col-start-3 col-span-3 text-4xl leading-8 space-y-4) xl:(col-start-2 col-span-2)'>
+        <section className='col-span-3 space-y-2 lg:(col-start-3 col-span-3 space-y-4) xl:(col-start-2 col-span-2) dark:text-light-gray'>
           <p>
             The Dual Power App is an app for democratic digital organizing and
             secure social networking that provides frameworks for the building
@@ -41,13 +43,13 @@ const IndexPage: NextPage = () => {
           {status?.text && <Status onOpenVideo={() => setShowVideo(true)} />}
         </section>
       </div>
-      <section className='border-t-2 space-y-8'>
+      <section className='border-t-2 space-y-8 dark:border-light-gray'>
         <div className='flex'>
-          <p className='px-4 py-2 bg-black text-white font-mono uppercase lg:(px-6 py-4)'>
+          <p className='px-4 py-2 bg-black text-light-gray dark:bg-light-gray  dark:text-black font-mono uppercase'>
             What is a Dual Power Project?
           </p>
         </div>
-        <div className='grid grid-flow-row-dense gap-4 leading-5 max-w-192 lg:(grid-cols-2)'>
+        <div className='grid grid-flow-row-dense gap-4 max-w-192 lg:(grid-cols-2) prose dark:text-light-gray'>
           <p className='row-span-2'>
             A Dual Power Project is a local, concerted effort to move the
             economy toward collective ownership and solidarity through the

pages/open-design.tsx

@@ -24,12 +24,14 @@ const OpenDesignPage: NextPage = () => {
         {docsHeadLink}
         {eventsHeadLink}
       </Head>
-      <div className='grid grid-flow-row-dense gap-8 grid-cols-3 <lg:space-y-8 lg:grid-cols-5 xl:grid-cols-3'>
+      <div className='grid grid-flow-row-dense gap-8 grid-cols-3 dark:text-light-gray <lg:space-y-8 lg:grid-cols-5 xl:grid-cols-3'>
         <div className='col-span-3 lg:col-span-2 xl:col-span-1'>
           <section className='space-y-4 lg:(space-y-8 sticky top-8)'>
             <h1 className='flex flex-col'>
-              <span className='text-2xl lg:text-3xl'>Dual&nbsp;Power App</span>
-              <span className='text-4xl lg:text-5xl'>
+              <span className='font-brand text-2xl uppercase'>
+                Dual&nbsp;Power App
+              </span>
+              <span className='font-mono text-4xl'>
                 Open&nbsp;Design +&nbsp;Build
               </span>
             </h1>
@@ -58,7 +60,7 @@ const OpenDesignPage: NextPage = () => {
               <MdiClose className='self-center' />
               <Link href='https://hydraulics.nyc/'>
                 <a>
-                  <GlyphManhattanHydraulics className='h-10' />
+                  <GlyphManhattanHydraulics className='h-10 dark:text-light-gray' />
                   <span className='hidden'>Manhattan Hydraulics</span>
                 </a>
               </Link>

public/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2018 The Manrope Project Authors (https://github.com/sharanda/manrope)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

stories/button.stories.tsx

@@ -4,9 +4,18 @@ export default {
   component: Button,
   title: 'Button',
 }
+export const Ballot = () => <Button className='bg-ballot'>Ballot Button</Button>
 
-export const Primary = () => <Button>Primary Button</Button>
+export const Greenlit = () => (
+  <Button className='bg-greenlit'>Greenlit Button</Button>
+)
+
+export const Primary = () => <Button className='bg-yield'>Yield Button</Button>
+
+export const Pop = () => <Button className='bg-pop'>Pop Button</Button>
+
+export const Reject = () => <Button className='bg-reject'>Reject Button</Button>
 
 export const Secondary = () => (
-  <Button color='secondary'>Secondary Button</Button>
+  <Button className='btn-secondary'>Secondary Button</Button>
 )