diff --git a/ui/component/channelDiscussion/view.jsx b/ui/component/channelDiscussion/view.jsx index 0613f88db..232bc551d 100644 --- a/ui/component/channelDiscussion/view.jsx +++ b/ui/component/channelDiscussion/view.jsx @@ -10,7 +10,7 @@ type Props = { function ChannelDiscussion(props: Props) { const uri = props.uri; return ( -
+
diff --git a/ui/component/header/index.js b/ui/component/header/index.js index 4f1cf7edb..5e0754d86 100644 --- a/ui/component/header/index.js +++ b/ui/component/header/index.js @@ -23,6 +23,7 @@ const perform = dispatch => ({ setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)), signOut: () => dispatch(doSignOut()), openMobileNavigation: () => dispatch(doOpenModal(MODALS.MOBILE_NAVIGATION)), + openChannelCreate: () => dispatch(doOpenModal(MODALS.CREATE_CHANNEL)), }); export default connect( diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index d0ebb1d35..4f92db2ec 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -28,6 +28,7 @@ type Props = { syncError: ?string, signOut: () => void, openMobileNavigation: () => void, + openChannelCreate: () => void, }; const Header = (props: Props) => { @@ -43,6 +44,7 @@ const Header = (props: Props) => { signOut, syncError, openMobileNavigation, + openChannelCreate, } = props; const authenticated = Boolean(email); @@ -142,11 +144,11 @@ const Header = (props: Props) => { - history.push(`/$/${PAGES.SETTINGS}`)}> - + history.push(`/$/${PAGES.PUBLISH}`)}> + {__('New Publish')} - history.push(`/$/${PAGES.HELP}`)}> + {__('New Channel')} diff --git a/ui/component/sideNavigation/view.jsx b/ui/component/sideNavigation/view.jsx index 93ad58231..6a5c48d9e 100644 --- a/ui/component/sideNavigation/view.jsx +++ b/ui/component/sideNavigation/view.jsx @@ -7,6 +7,10 @@ import Button from 'component/button'; import Tag from 'component/tag'; import StickyBox from 'react-sticky-box/dist/esnext'; import Spinner from 'component/spinner'; +import usePersistedState from 'effects/use-persisted-state'; + +const SHOW_CHANNELS = 'SHOW_CHANNELS'; +const SHOW_TAGS = 'SHOW_TAGS'; type Props = { subscriptions: Array, @@ -34,6 +38,31 @@ function SideNavigation(props: Props) { } = props; const { pathname } = location; const isAuthenticated = Boolean(email); + const [sideInformation, setSideInformation] = usePersistedState( + 'side-navigation:information', + getSideInformation(pathname) + ); + + function getSideInformation(path) { + switch (path) { + case `/$/${PAGES.CHANNELS_FOLLOWING}`: + return SHOW_CHANNELS; + + case `/$/${PAGES.TAGS_FOLLOWING}`: + return SHOW_TAGS; + + case `/$/${PAGES.DISCOVER}`: + return null; + + default: + return sideInformation; + } + } + + React.useEffect(() => { + const sideInfo = getSideInformation(pathname); + setSideInformation(sideInfo); + }, [pathname, setSideInformation]); function buildLink(path, label, icon, onClick) { return { @@ -138,7 +167,7 @@ function SideNavigation(props: Props) { )} - {pathname.includes(PAGES.TAGS_FOLLOWING) && ( + {sideInformation === SHOW_TAGS && (
    {followedTags.map(({ name }, key) => (
  • @@ -148,7 +177,7 @@ function SideNavigation(props: Props) {
)} - {pathname.includes(PAGES.CHANNELS_FOLLOWING) && ( + {sideInformation === SHOW_CHANNELS && (
    {subscriptions.map(({ uri, channelName }, index) => (
  • diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss index 47a50e60d..9c7e5e6a7 100644 --- a/ui/scss/component/_button.scss +++ b/ui/scss/component/_button.scss @@ -88,6 +88,7 @@ svg + .button__label, &:last-of-type { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); + margin-right: var(--spacing-small); } } diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index 5f9a685ae..fa972a269 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -23,11 +23,8 @@ .claim-list__dropdown { padding: 0 var(--spacing-medium); - margin-left: var(--spacing-medium); - margin-right: var(--spacing-medium); @media (max-width: $breakpoint-small) { - margin-top: var(--spacing-small); margin-left: 0; } }