Skip to content

Commit

Permalink
fix: proposal header
Browse files Browse the repository at this point in the history
  • Loading branch information
radzionc committed Jul 17, 2023
1 parent a23a041 commit b112f4b
Show file tree
Hide file tree
Showing 8 changed files with 55 additions and 180 deletions.
16 changes: 16 additions & 0 deletions apps/enterprise/src/lib/ui/Text/ShyLinkText.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import styled from 'styled-components';
import { defaultTransitionCSS } from '../animations/transitions';
import { getColor } from '../theme/getters';
import { interactiveCSS } from '../utils/interactiveCSS';
import { Text } from '.';

export const ShyLinkText = styled(Text)`
color: ${getColor('textSupporting')};
${interactiveCSS};
${defaultTransitionCSS}
font-size: 14px;
:hover {
color: ${getColor('text')};
}
`;
16 changes: 1 addition & 15 deletions apps/enterprise/src/pages/create-proposal/Header.module.sass
Original file line number Diff line number Diff line change
@@ -1,21 +1,7 @@
@import ../../themes/mixins.sass

.root
&.compact
background-color: var(--section-background-color)
display: grid
grid-template-columns: auto 1fr auto
padding: 32px 48px
column-gap: 16px !important
.logo
grid-row: 1
grid-column: 1
.name
grid-row: 1
grid-column: 2

&:not(.compact)
.container
.container
display: grid
grid-template-columns: auto 1fr auto
grid-template-rows: repeat(3, auto)
Expand Down
15 changes: 1 addition & 14 deletions apps/enterprise/src/pages/create-proposal/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,10 @@ interface HeaderProps {

export const Header = forwardRef((props: HeaderProps, ref: Ref<HTMLDivElement>) => {
const dao = useCurrentDao();
const { className, compact = false, title } = props;
const { className, title } = props;

const navigate = useNavigate();

if (compact) {
return (
<Stack direction="row" ref={ref} className={classNames(className, styles.root, styles.compact)}>
<div className={styles.logo}>
<DAOLogo size="s" logo={getDaoLogo(dao)} />
</div>
<Text className={styles.name} variant="heading2">
{title}
</Text>
</Stack>
);
}

return (
<Stack className={classNames(className, styles.root)} direction="column">
<Stack direction="row" ref={ref} className={styles.container}>
Expand Down
19 changes: 2 additions & 17 deletions apps/enterprise/src/pages/dao/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,7 @@ import { getDaoLogo } from 'dao/utils/getDaoLogo';
import { toDao } from 'dao/utils/toDao';
import { SeparatedByLine } from 'lib/ui/SeparatedByLine';
import { Text } from 'lib/ui/Text';
import styled from 'styled-components';
import { getColor } from 'lib/ui/theme/getters';
import { interactiveCSS } from 'lib/ui/utils/interactiveCSS';
import { defaultTransitionCSS } from 'lib/ui/animations/transitions';

// TODO: turn into a reusable component
const BackLink = styled(Text)`
color: ${getColor('textSupporting')};
${interactiveCSS};
${defaultTransitionCSS}
font-size: 14px;

:hover {
color: ${getColor('text')};
}
`;
import { ShyLinkText } from 'lib/ui/Text/LinkText';

export const Header = () => {
const dao = useCurrentDao();
Expand All @@ -34,7 +19,7 @@ export const Header = () => {
<SeparatedByLine fullWidth gap={20}>
<VStack gap={16}>
<InternalLink to={Path.Daos}>
<BackLink>Back</BackLink>
<ShyLinkText>Back</ShyLinkText>
</InternalLink>
<HStack alignItems="center" gap={20}>
<HStack alignItems="center" gap={8}>
Expand Down
30 changes: 10 additions & 20 deletions apps/enterprise/src/pages/daos/Header.module.sass
Original file line number Diff line number Diff line change
@@ -1,21 +1,11 @@
.root
&.compact
background-color: var(--section-background-color)
padding: 32px 48px
.searchInput
width: 380px
.results
flex-grow: 1
justify-content: flex-end

&:not(.compact)
width: 100%
.container
border-bottom: 1px solid var(--section-background-color)
padding-bottom: 32px
.heading, .subHeading
margin-bottom: 24px
.searchInput
width: 380px
.results
margin-top: 24px
width: 100%
.container
border-bottom: 1px solid var(--section-background-color)
padding-bottom: 32px
.heading, .subHeading
margin-bottom: 24px
.searchInput
width: 380px
.results
margin-top: 24px
51 changes: 0 additions & 51 deletions apps/enterprise/src/pages/proposal/Header.module.sass

This file was deleted.

68 changes: 25 additions & 43 deletions apps/enterprise/src/pages/proposal/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,59 +1,41 @@
import { Stack } from 'lib/ui/Stack';
import classNames from 'classnames';
import { Text as DeprecatedText } from 'components/primitives';
import { HStack, VStack } from 'lib/ui/Stack';
import { ProposalTags } from 'pages/shared/ProposalTags';
import { forwardRef, Ref } from 'react';
import { useNavigate } from 'react-router';
import { useCurrentProposal } from './CurrentProposalProvider';
import styles from './Header.module.sass';
import { DaoLogoLink } from 'components/dao-logo/DaoLogoLink';
import { Text } from 'lib/ui/Text';
import { InternalLink } from 'lib/navigation/Link/InternalLink';
import { getDaoPath } from 'navigation';
import { ShyLinkText } from 'lib/ui/Text/ShyLinkText';
import { DAOLogo } from 'components/dao-logo';

interface HeaderProps {
className?: string;
compact?: boolean;
}

export const Header = forwardRef((props: HeaderProps, ref: Ref<HTMLDivElement>) => {
const { className, compact = false } = props;

const proposal = useCurrentProposal();

const navigate = useNavigate();

const title = (
<DeprecatedText className={styles.name} variant="heading2">
<Text style={{ marginRight: 8 }} as="span" color="shy">
#{proposal.id}
</Text>
{proposal.title}
</DeprecatedText>
);

if (compact) {
return (
<Stack direction="row" ref={ref} className={classNames(className, styles.root, styles.compact)}>
<div className={styles.logo}>
<DaoLogoLink address={proposal.dao.address} size="s" logo={proposal.dao.logo} />
</div>
{title}
<ProposalTags proposal={proposal} />
</Stack>
);
}
const { dao } = proposal;

return (
<Stack ref={ref} className={classNames(className, styles.root)} direction="column">
<Stack direction="row" className={styles.container}>
<DeprecatedText className={styles.back} variant="link" onClick={() => navigate(-1)}>
Back
</DeprecatedText>
<div className={styles.logo}>
<DaoLogoLink address={proposal.dao.address} size="s" logo={proposal.dao.logo} />
</div>
{title}
<ProposalTags proposal={proposal} />
</Stack>
</Stack>
<VStack gap={16}>
<InternalLink to={getDaoPath(proposal.dao.address)}>
<ShyLinkText>Back</ShyLinkText>
</InternalLink>
<HStack alignItems="center" gap={20}>
<HStack alignItems="center" gap={8}>
<InternalLink to={getDaoPath(proposal.dao.address)}>
<DAOLogo size="m" logo={dao.logo} />
</InternalLink>
<Text as="h1">
<Text style={{ marginRight: 8 }} as="span" color="shy">
#{proposal.id}
</Text>
{proposal.title}
</Text>
<ProposalTags proposal={proposal} />
</HStack>
</HStack>
</VStack>
);
});
20 changes: 0 additions & 20 deletions apps/enterprise/src/pages/shared/ProposalTags.module.sass

This file was deleted.

0 comments on commit b112f4b

Please sign in to comment.