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

New style #826

wants to merge 25 commits into
base: master


Copy link

commented Jun 6, 2019

Before merging:

  • Revert #898 upon merging to master
  • Merge to master via normal merge / rebase

@auto-assign auto-assign bot requested review from AquiGorka and sohkai Jun 6, 2019

@bpierre bpierre changed the title Base for the new style New style Jun 6, 2019

@bpierre bpierre removed request for AquiGorka and sohkai Jun 6, 2019

bpierre added some commits Jun 6, 2019

bpierre added some commits Jun 20, 2019

@bpierre bpierre referenced this pull request Jul 22, 2019
Global settings (#861)
* GlobalSettingsButton: add button with popover component

* OrgView: add global settings button to header

* GlobalPreferences: add boilerplate and network flow

* Network: move network to its own folder

* Network: update architecture to one file with view and hook

* HelpAndFeedback: add component, view and hook

* GlobalPreferences: update layout and remove hooks

* GlobalSettingsButton: update styles

* GlobalPreferences: add close button and boilperplate to open

* Wrapper: add global preferences boilerplate

* CustomLabels: use old custom labels as boilerplate

* GlobalPreferences: update notifications and close icon

* Notifications: update boilerplate folder

* Help and feedback: set image dimensions to avoid gap when loading image

* Assets: add global preferences svgs

* GlobalSettingsButton: add global preferences icons

* GlobalSettingsButton: use icons and update styles

* GlobalSettingsButton: add label to buttons

* Network: refactor & cleanup

* ButtonDropDown: add component

* Custom Labels: refactor to hooks and new designs

* GlobalPreferences: cleanup of imports and styles

* GlobalSettingsButton: cleanup imports

* Wrapper: remove old preferences

* Hooks: update hooks and add new hooks

* CustomLabels: remove comments and order imports

* useLocalIdentityModal: add hook to abstract modal

* useLocalIdentitiesActions: fix deps

* useLocalIdentities: fix deps

* CustomLabels: add show modal handler

* HelpAndFeedback: refactor component to receive handler and state

* GlobalPreferences: add navigation boilerplate and send props to help and feedback

* Wrapper: send help scout props to global preferences component

* App: integrate opt out state, handler and rendering of help scout component

* GlobalPreferencesButton: add styles

* Wrapper: implement navigation prototype

* App: remove console log

* Hooks: remove hook specific to shared link from custom labels

* useSharedLink: add hook under custom labels path in global preferences

* EmptyLocalIdentities: update markup

* useIdentitiesActions: remove shared link from hook

* ShareModal: add focus, toast and save functionality

* LocalIdentities: add shared link flow

* CustomLabels: add shared link hook and flow

* GlobalPreferences: refactor custom router

* Import: update button label and mode

* EmptyLocalIdentities: update markup

* EmptyIdentities: rename component

* CustomLabels: rename empty identities component and pass props to clear search term

* Add no results svg

* EmptyFilteredIdentities: add component

* LocalIdentities: add empty filtered identities and move import button out of dropdown

* ShareModal: update copy

* ButtonDropDown: add button as cover container

* LocalIdentities: update styles

* GlobalSettingsButton: add useCallback and React.memo

* GlobalSettingsButton: add styles from theme

* GlobalPreferences: use styles from theme

* ButtonDropDown: use new theming functionality

* EmptyFilteredIdentities: use new theming functionality

* LocalIdentities: use new theme functionality

* EmptyIdentities: use new theme functionality

* RemoveModal: reorder and align buttons

* ShareModal: use new theme functionality

* LocalIdentities: fix list alignment

* GlobalSettingsButton: fix border radius for last item

* ShareModal: reorder and align buttons

* RemoveModal: reorder and align buttons

* useSharedLink: move hook to its own folder

* SharedIdentities: add component

* LocalIdentities: remove shared identities functionality

* CustomLabels: remove shared link functionality

* GlobalPreferences: add shared link functionality as top level section

* ButtonDropDown: add react memo to default export

* GlobalPreferences: add transition, prop types and react optimizations

* GlobalPreferences: add react memo optimizations

* GlobalSettingsButton: fix imports and dependencies

* SharedIdentities: add prop types and react memo optimization

* useSharedLink: add react cache optimizations

* Network: add prop types, react memo and cache optimizations

* HelpAndFeedback: add prop types and react memo optimization

* SharedIdentities: fix dependency type and selected number

* useIdentitiesActions: add react cache optimizations

* useIdentities: remove unused dep

* ShareModal: add prop types, react memo and react cache optimizations

* RemoveModa: add prop types and react memo optimization

* LocalIdentities: add prop types and react memo optimizations

* EmptyIdentities: fix deps

* EmptyFilteredIdentities: add prop types and react memo optimization

* CustomLabels: add prop types and react memo optimizations

* ButtonDropDown: add transition, react memo and prop types polishing

* ShareModal: fix prop type

* useLocalIdentities: fix handling fetching data if not mounted anymore

* useLocalIdentityModal: add react cache optimizations

* Remove old preferences folder and components

* useLocalIdentities: add sorting functionality

* LocalIdentities: add sorting functionality

* CustomLabels: add sorting functionality

* useLocalIdentities: use ref instead of let on react comment suggestedion

* GlobalPreferences: fix deps and remove unused var

* Remove CLEAR flow from local identities

* Hooks: remove arrow focus refs for merge

* CustomLabels: remove shared identities unused props

* GlobalSettingsButton: fix closing when opened

* Optimized via svgo

* ButtonDropDown: add toggle handler to hook

* ButtonDropDown: use RADIUS constant from aragon ui

* ButtonDropDown: update highlight border width

* ButtonDropDown: optimize handler

* ButtonDropDown: update prop types

* CustomLabels: add react cache optimization to handler

* LocalIdentities: use color from theme

* Utils: add ios check

* LocalIdentities: update ios check import

* Import: accept custom button for render

* LocalIdentities: reuse import component

* ShareModal: remove hardcoded color and fix icon dimensions

* LocalIdentities: remove sort button when a search is performed

* ShareModal: use radius constant from aragonUI

* ShareModal: use theme value for background

Co-Authored-By: Pierre Bertet <>

* Utils: add global preferences path

* Wrapper: use global preferences path from utils

* GlobalPreferences: use global preferences path from utils

* SharedIdentities: fix vertical alignment

* useIdentitiesActions: update to hook

Co-Authored-By: Pierre Bertet <>

* useLocalIdentities: update to hook

Co-Authored-By: Pierre Bertet <>

* useLocalIdentities: update to hook

Co-Authored-By: Pierre Bertet <>

* useLocalIdentityModal: import hook

Co-Authored-By: Pierre Bertet <>

* useLocalIdentityModal: update to hook

Co-Authored-By: Pierre Bertet <>

* useSharedLink: import hook

Co-Authored-By: Pierre Bertet <>

* useSharedLink: update to hook

Co-Authored-By: Pierre Bertet <>

* useIdentitiesActions: import hook

* HelpAndFeedback: fix typo

Co-Authored-By: Pierre Bertet <>

* HelpAndFeedback: fix typo on img src

Co-Authored-By: Pierre Bertet <>

* GlobalSettingsButton: no need to use react memo on inner components

* GlobalSettingsButton: update values to radius constant

* useIdentitiesActions: add react cache optimization to exported functions

* useIdentitiesActions: update identities in parallel when importing

* useSharedLink: update identities in parallel when saving

* useIdentitiesActions: update to use utils logs

* ButtonDropDown: add compact styles

* LocalIdentities: add responsive styling

* Remove old file

* GlobalPreferences: add mobile styles to close button

* HelpAndFeedback: fix centering text

* useFilterIdentities: fix comparison always using lower case

* LocalIdentities: fix header centering

* LocalIdentities: align labels vertically and fix ellipsis

* GlobalPreferences: fix close button right alignment on mobile

* GlobalPreferences: fix close button right alignment on larger screens

* EmptyFilteredIdentities: add text alignment

* ButtonDropDown: move compact style rules out of styled component because of warning

* Routing: add prefrerences parsing and remove full domain from app path

* Wrapper: remove preferences opened state var

* CustomLabels: implement new locator navigation

* GlobalPreferences: refactor to locator navigation

* useIdentitiesActions: refactor to locator navigation

* useSharedLink: refactor to locator navigation

* Utils: remove constant

* Wrapper: fix duplicate import

* Routing: fix substring typo

* useSharedLink: fix imports and dependencies

* GlobalPreferences: fix lint issues

* useLocalIdentities: remove unused import

* useIdentitiesActions: fix lint issues

* LocalIdentities: fix lint issues

* Import: fix lint issues

* ButtonDropDown: remove unused export

* CustomLabels: fix prop types

* ShareModal: refactor functionality into hook

* LocalIdentities: fix header alignment

* GlobalSettingsButton: fix cog color and pressed state

* GlobalPreferences: fix colors and sizes

* ButtonDropDown: fix pressed state

* LocalIdentities: fix sizing

* Import: remove dotted outline on focus

* ButtonDropDown: add correct border-radius to last item

* useSelectIdentities: only select all identities the first time all are rendered

* LocalIdentities: fix sorting button

* ButtonDropDown: fix typo

* GlobalPreferences: fix destructure defaults

* Modals: add z-index param and fix copy and spacing

* EmptyIdentities: fix copy

* ShareModal: update copy

* useIdentitiesActions: remove unused prop

* CustomLabels: remove unused prop

* EmptyFilteredIdentities: fix size and container width and pressed state

* Network: add enter key press handler

* HelpAndFeedback: update sizing, spacing and colors

* Icons: update color to theme prop

* ButtonDropDown: fix deps

* GlobalSettingsButton: udpate icon color

* Network: fix dependencies on use callback

* LocalIdentities: update icon color

* GlobalPreferences: update close icon color

* Fix on spacing on global settings buttons (#882)

@now now bot had a problem deploying to staging Jul 23, 2019 Failure

bpierre added some commits Jul 24, 2019

Merge branch origin/newstyle into newstyle
- Only fixed a minor conflict in utils.js

@now now bot temporarily deployed to staging Aug 11, 2019 Inactive

Help Scout opt-out fix (#905)
* App: destroy existing Beacon if user opted in and then opts out

* HelpScoutBeacon: add check for iframe content window

* HelpScoutBeacon: update theme and colors
import React from 'react'
import PropTypes from 'prop-types'
import { Box, Checkbox, Info, GU, useTheme } from '@aragon/ui'
import helpAndFeedbackSvg from './help-and-feedback.svg'

This comment has been minimized.

Copy link

sohkai Aug 13, 2019


@owisixseven We should also optimize this; it's currently 1.9M



This comment has been minimized.

Copy link

sohkai Aug 15, 2019


We'll likely want to move this and its related routing logic out to be at the App level, since it'll need to be shown during onboarding as well.

@@ -1,51 +1,32 @@
import React, { useCallback, useContext } from 'react'

This comment has been minimized.

Copy link

sohkai Aug 15, 2019


Perhaps we can just push this into MenuPanel since we're taking the ActivityPanel out.

@@ -0,0 +1,158 @@
import React, { useState, useRef, useCallback } from 'react'

This comment has been minimized.

Copy link

sohkai Aug 15, 2019


Hopefully we can replace most of this with just a style applied to a DropDown?

const [sectionIndex, setSectionIndex] = useState(null)
const handleNavigation = useCallback(
index => {
window.location.hash = `${getAppPath(

This comment has been minimized.

Copy link

sohkai Aug 15, 2019


We should really refactor all these window.location manipulations in the preferences into a hook or etc. and have them interact directly with history.


export default useSharedLink

This comment has been minimized.

Copy link

sohkai Aug 15, 2019


Most of this could probably belong directly in SharedIdentities since we don't really have much use for them elsewhere.

The route handling and parsing bits could then be put into its own routing hook, so that they're accessible from outside of the SharedIdentities component (e.g. when they need to be used in the GlobalPreferences component.

useEffect(() => {
window.addEventListener('keypress', handleKeyPress)
return () => window.removeEventListener('keypress', handleKeyPress)
}, [handleKeyPress])

This comment has been minimized.

Copy link

sohkai Aug 15, 2019


This is quite weird, no? Shouldn't we only do this if we press enter when either of the input fields or the save button is focused?

Help Scout lets you easily browse the knowledge base and open tickets so
you can get support when using Aragon organizations. Disabling it will
disable that functionality as well.

This comment has been minimized.

Copy link

sohkai Aug 15, 2019


@dizzypaty We could probably rework this copy a bit.

@now now bot temporarily deployed to staging Aug 19, 2019 Inactive

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
3 participants
You can’t perform that action at this time.