Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Experience Brand Kit 1.0 #1948

Merged
merged 62 commits into from
Dec 5, 2019
Merged

Experience Brand Kit 1.0 #1948

merged 62 commits into from
Dec 5, 2019

Conversation

aaronmgdr
Copy link
Member

@aaronmgdr aaronmgdr commented Nov 27, 2019

Description

A place to get assets / logos/ icons for celo brand. A styleguide for Celo projects.

This is the first part of the Experience tool kit. To start there are 4 pages. Logo, Typogrpahy, color, icons.

Some Highlights.
  1. A Sidebar that responds to hash changes and scrolling
  2. Icons loading from airtable
  3. click/press to copy hexcode for colors
  4. NO MORE TYPEKIT. now using google font and another third party for jost.
  5. futura is out jost is in. can you tell?
packages added
  • yiq 916b, tiny lib for determining of color should have dark or light text over it.
  • colortranslator 14k, for getting CMYK. not as small as id but didn't have time for smaller one.
  • "scroll-into-view": previous scrolling intro view was not great. this one works much better than what i wrote

note a few links are still in TODO

Tested

Screen Shot 2019-11-27 at 2 44 05 PM

Logo

Screen Shot 2019-11-27 at 2 44 33 PM

Screen Shot 2019-11-27 at 2 44 43 PM

Screen Shot 2019-11-27 at 2 44 51 PM

Screen Shot 2019-11-27 at 2 45 02 PM

Screen Shot 2019-11-27 at 2 45 10 PM

Screen Shot 2019-11-27 at 2 45 22 PM

Screen Shot 2019-11-27 at 2 45 44 PM

Screen Shot 2019-11-27 at 2 45 50 PM

Color

Screen Shot 2019-11-27 at 3 18 27 PM

Screen Shot 2019-11-27 at 3 18 32 PM

Screen Shot 2019-11-27 at 3 18 43 PM

Screen Shot 2019-11-27 at 3 18 51 PM

Typography

Screen Shot 2019-11-27 at 3 19 49 PM

Screen Shot 2019-11-27 at 3 20 01 PM

Screen Shot 2019-11-27 at 3 20 09 PM

Screen Shot 2019-11-27 at 3 20 16 PM

Icons

Screen Shot 2019-11-27 at 3 13 07 PM

Screen Shot 2019-11-27 at 3 13 17 PM

Other changes

finally replace all the adhoc Links...

function Link({ children, href }: Props) {
  return <Button text={children} href={href} kind={BTN.INLINE} />
}

..which I had been creating randomly whenever A link was needed to be interpolated into a translated text.

Now there is one InlineAnchor component

Related issues

Backwards compatibility

brand new!

* master:
  Adjust e2e transfer and governance tests to match new fee distribution and eliminate ProposerFraction (#1585)
  [Wallet] Add more local currencies (#1698)
  Switch to correct cluster when fauceting (#1687)
  [Wallet] Use the country of the phone number for determining the default local currency (#1684)
  [Wallet] Limit QR code scanner to 1 code per second (#1676)
  Update Dark backgrounds text color (#1677)
  Remove integration sync test
  Minor attestation service fixes (#1680)
  Add golang to setup docs
color: colors.dark,
textRendering: 'geometricPrecision',
},
// deprecated replaced with h6
h5: {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didnt want to cause the diff on this PR to be even larger by changing all font.h5 refs to fonts.h6. i think this can be done separately

}

export const fonts = StyleSheet.create({
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change this so that on typography page i could print the styles out and know for sure that they matched. DRY

packages/web/server/AssetBase.ts Outdated Show resolved Hide resolved
packages/web/src/brandkit/Color.tsx Outdated Show resolved Hide resolved
packages/web/src/brandkit/IconsPage.tsx Outdated Show resolved Hide resolved
packages/web/src/brandkit/IconsPage.tsx Outdated Show resolved Hide resolved
packages/web/src/brandkit/KeyImagery.tsx Outdated Show resolved Hide resolved
packages/web/src/brandkit/Typography.tsx Outdated Show resolved Hide resolved
packages/web/src/brandkit/common/Fetch.tsx Outdated Show resolved Hide resolved
href: ICONS_PATH,
sections: [],
},
// {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to reduce comments, maybe just define this object outside the array and then don't use it? (might have to ts-ignore)

packages/web/src/brandkit/common/Page.tsx Outdated Show resolved Hide resolved
packages/web/src/brandkit/common/Page.tsx Outdated Show resolved Hide resolved
Add margin to subtitles
Make name Celo White
Fix monochrome logo
Icons make square small enough for 2x2 on mobile

Keep squares square and variable size

Add logo downloads

Thicken stroke on download icon

Remove buttons example

Converte minimums to be sag not png for better crispy scale

Better mobile spacing in general

Add new uiSmall first class type style
@codecov
Copy link

codecov bot commented Dec 3, 2019

Codecov Report

Merging #1948 into master will increase coverage by <.01%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1948      +/-   ##
==========================================
+ Coverage   74.42%   74.43%   +<.01%     
==========================================
  Files         281      281              
  Lines        7824     7822       -2     
  Branches      975      686     -289     
==========================================
- Hits         5823     5822       -1     
+ Misses       1884     1883       -1     
  Partials      117      117
Flag Coverage Δ
#mobile 74.43% <ø> (ø) ⬆️
Impacted Files Coverage Δ
packages/mobile/src/localCurrency/saga.ts 69.23% <0%> (+1.37%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fe32d2f...1cd2092. Read the comment docs.

@aaronmgdr aaronmgdr added the automerge Have PR merge automatically when checks pass label Dec 4, 2019
@cmcewen cmcewen merged commit fdc4839 into master Dec 5, 2019
aaronmgdr added a commit that referenced this pull request Dec 5, 2019
* master: (27 commits)
  Experience Brand Kit 1.0 (#1948)
  Adjust reference to the rewards app (#2065)
  [Wallet] Compatibility with exchange rate in string format (#2060)
  Fix Typo in CI config (#2056)
  Fix additional attestations instructions (#2057)
  Allow a specified address to disable/enable rewards distribution (#1828)
  Aaronmgdr/leaderboard patch (#2055)
  Move attestation service instructions to main page (#2051)
  Point To Updated Join Celo Video (#2052)
  Fix minor issue withe the ordering of instructions
  changes to docs related to discovery (#2025)
  [Docs] Fix typos in Running a Validator docs (#2045)
  Add node flag to celocli to set the target node for a single command (#2020)
  Fix broken links and spruce up CLI docs for accounts command (#2027)
  Prevent clipping of arrow component (#2036)
  Allocates an initial balance to the attestation bot (#2019)
  gold and dollar flags are required for faucet script (#1943)
  Clean seed words text area when returns from empty wallet view (#1904)
  Update validator script (#2026)
  Docs: PoS, metadata, gateway fee plus cleanup (#2022)
  ...
aaronmgdr added a commit that referenced this pull request Dec 5, 2019
* master: (208 commits)
  Fix potential hard timeouts (#2072)
  Add checkzero,blockscout,mulit-address support to faucet. Fix broken envType checks (#2068)
  README added mission (#1972)
  Add dev-utils README (#2081)
  Add validator:status command to check if a validator signer is online and producing blocks (#1906)
  Experience Brand Kit 1.0 (#1948)
  Adjust reference to the rewards app (#2065)
  [Wallet] Compatibility with exchange rate in string format (#2060)
  Fix Typo in CI config (#2056)
  Fix additional attestations instructions (#2057)
  Allow a specified address to disable/enable rewards distribution (#1828)
  Aaronmgdr/leaderboard patch (#2055)
  Move attestation service instructions to main page (#2051)
  Point To Updated Join Celo Video (#2052)
  Fix minor issue withe the ordering of instructions
  changes to docs related to discovery (#2025)
  [Docs] Fix typos in Running a Validator docs (#2045)
  Add node flag to celocli to set the target node for a single command (#2020)
  Fix broken links and spruce up CLI docs for accounts command (#2027)
  Prevent clipping of arrow component (#2036)
  ...

# Conflicts:
#	packages/web/src/layout/BookLayout.tsx
#	packages/web/src/lib.dom.d.ts
@aaronmgdr aaronmgdr deleted the aaronmgdr/brandkit branch December 12, 2019 21:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
automerge Have PR merge automatically when checks pass
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants