Browse Source

Fix several components theme compatibility

main
GreatBearShark 2 years ago
parent
commit
f1ba44455a
  1. 1
      package.json
  2. 51
      src/components/MenuButton.tsx
  3. 2
      src/components/ThemeSystemProvider.tsx
  4. 7
      src/components/Tooltip.tsx
  5. 2
      src/components/elements/Block.tsx
  6. 5
      src/components/elements/Card.tsx
  7. 20
      src/components/post-listing.tsx
  8. 2
      src/custom.css
  9. 52
      src/stories/Button.stories.tsx
  10. 18
      src/stories/Card.stories.tsx
  11. 28
      src/stories/Header.stories.tsx
  12. 8
      src/stories/PostListing.stories.tsx
  13. 6
      src/stories/Tooltip.stories.tsx
  14. 6
      src/theme.tsx
  15. 2
      yarn.lock

1
package.json

@ -14,6 +14,7 @@
},
"keywords": [],
"dependencies": {
"@emotion/styled": "^10.0.27",
"@pika/react": "^16.13.1",
"@pika/react-dom": "^16.13.1",
"@reach/combobox": "^0.10.5",

51
src/components/MenuButton.tsx

@ -8,35 +8,60 @@ import {
MenuItems as ReachMenuItems,
MenuPopover as ReachMenuPopover,
MenuLink as ReachMenuLink,
useMenuButtonContext,
} from '@reach/menu-button';
// import '@reach/menu-button/styles.css';
import { Box, Button, Flex } from 'theme-ui';
import Block from './elements/Block';
export const Menu = props => <Box as={ReachMenu} {...props} />;
export const MenuButton = props => <Button as={ReachMenuButton} {...props} />;
export const MenuList = props => (
<Box
bg="muted"
css={{ borderRadius: '4px', border: '1px solid #444' }}
<Block
bg="background"
css={{
borderRadius: '4px',
border: 0,
'::after': {
marginTop: '8px',
content: `''`,
boxShadow: '0 0 0 1px rgba(0,0,0,.05)',
borderRadius: '4px',
position: 'absolute',
top: 0,
width: '100%',
height: '100%',
pointerEvents: 'none',
},
}}
boxShadow="0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05)"
color="text"
mt={1}
mt="8px"
py={2}
as={ReachMenuList}
{...props}
/>
);
export const MenuItem = props => (
<Flex
px={3}
py="5px"
css={{ alignItems: 'center' }}
as={ReachMenuItem}
{...props}
/>
);
export const MenuItem = props => {
const context = useMenuButtonContext();
console.log({ context });
return (
<Flex
px={3}
py="5px"
css={{
alignItems: 'center',
'[data-selected]': { backgroundColor: 'red' },
}}
as={ReachMenuItem}
{...props}
/>
);
};
export const MenuLink = props => (
<Flex

2
src/components/ThemeSystemProvider.tsx

@ -23,8 +23,6 @@ function ThemeSystemProvider({
? themes[currentTheme]
: themes.chapo;
console.log({ theme });
useEffect(() => {
// const theme = UserService?.Instance?.user?.theme;
// if (theme) {

7
src/components/Tooltip.tsx

@ -94,7 +94,7 @@ const TriangleTooltip = React.forwardRef(
const { theme } = useThemeUI();
const color = currentTheme === 'chapo' ? '#2F2F37' : theme.colors.muted;
const color = currentTheme === 'chapo' ? '#2F2F37' : theme.colors.text;
return (
<>
{cloneElement(children, trigger)}
@ -127,7 +127,10 @@ const TriangleTooltip = React.forwardRef(
aria-label={ariaLabel}
style={{
backgroundColor: color,
color: 'white',
color:
currentTheme === 'chapo'
? theme.colors.text
: theme.colors.background,
border: 'none',
borderRadius: '6px',
padding: '15px',

2
src/components/elements/Block.tsx

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled from '@emotion/styled';
import StyledSystem, {
background,
border,

5
src/components/elements/Card.tsx

@ -1,11 +1,12 @@
import React from 'react';
import { Box } from 'theme-ui';
import Block from './Block';
export default function Card({ css = {}, ...props }) {
return (
<Box
<Block
mb={3}
css={{ borderRadius: '0.25rem', border: '1px solid #444', ...css }}
css={{ borderRadius: '0.25rem', ...css }}
bg="muted"
color="text"
p="1.25rem"

20
src/components/post-listing.tsx

@ -205,8 +205,8 @@ export const VoteButton = ({
const upvoteColor = theme?.colors?.accent ?? theme?.colors?.primary;
const downvoteColor = theme?.colors?.accent
? theme.colors.primary
: theme.colors.secondary;
? theme?.colors?.primary
: theme?.colors?.secondary;
if (voteType === VoteButtonTypes.Upvote) {
return (
@ -1041,14 +1041,12 @@ export class BasePostListing extends Component<
</>
)}
<li className="list-inline-item">
<Block display="flex" alignItems="center" mt={1}>
{/* <Icon name="upvote" /> */}
<Icon className="icon text-muted" name="upDownArrow" />
<Block display="flex" alignItems="center" mt={1} color="text">
<Icon name="upDownArrow" />
<Block mx={2}>{this.state.upvotes}</Block>
<Block as="span" fontSize="8px">
</Block>
{/* <Icon name="downvote" /> */}
<Block mx={2}>{this.state.downvotes}</Block>
</Block>
</li>
@ -1171,7 +1169,13 @@ export class BasePostListing extends Component<
return (
<>
<div className="row post-listing-row">
<Block
className="row post-listing-row"
borderColor="muted"
borderWidth={0}
borderBottomWidth="1px"
borderStyle="solid"
>
<div
className={`vote-bar small text-center ${
post.stickied ? 'stickied-border' : ''
@ -1336,7 +1340,7 @@ export class BasePostListing extends Component<
</div>
<div className="row">{this.listingActions()}</div>
</div>
</div>
</Block>
<ul className="list-inline mb-1 text-muted font-weight-bold">
{UserService.Instance.user && <>{this.advancedActions()}</>}
</ul>

2
src/custom.css

@ -753,7 +753,7 @@ button:hover [type="button"]:hover {
.post-listing-row {
padding: 0.5rem 0;
border-bottom: 1px solid #333;
/* border-bottom: 1px solid #333; */
}
/* post listing mobile styles */

52
src/stories/Button.stories.tsx

@ -12,40 +12,32 @@ import {
} from 'theme-ui';
import Button from '../components/elements/Button';
import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
import { themes } from '../theme';
import { AllThemes, themes } from '../theme';
export default { title: 'Buttons' };
export const Basic = () => {
return (
<div>
{Object.keys(themes).map(theme => {
return (
<ThemeSystemProvider key={theme} initialTheme={theme}>
<Box bg="background" p={2}>
<Button mx={1}>Primary</Button>
<Button variant="secondary" mx={1}>
Secondary
</Button>
<Button variant="highlight" mx={1}>
Highlight
</Button>
<Button variant="muted" mx={1}>
Muted
</Button>
<Button disabled mx={1}>
Disabled
</Button>
<Button variant="danger" mx={1}>
Danger
</Button>
<Button variant="outline" mx={1}>
Outline
</Button>
</Box>
</ThemeSystemProvider>
);
})}
</div>
<AllThemes>
<Button mx={1}>Primary</Button>
<Button variant="secondary" mx={1}>
Secondary
</Button>
<Button variant="highlight" mx={1}>
Highlight
</Button>
<Button variant="muted" mx={1}>
Muted
</Button>
<Button disabled mx={1}>
Disabled
</Button>
<Button variant="danger" mx={1}>
Danger
</Button>
<Button variant="outline" mx={1}>
Outline
</Button>
</AllThemes>
);
};

18
src/stories/Card.stories.tsx

@ -2,26 +2,18 @@ import React, { useState } from 'react';
import { Box, Heading } from 'theme-ui';
import Card from '../components/elements/Card';
import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
import { ThemeSelector } from '../theme';
import { AllThemes, ThemeSelector } from '../theme';
export default {
title: 'Card',
};
export const Basic = () => {
const [theme, setTheme] = useState('chapo');
return (
<ThemeSystemProvider>
<Box m={4}>
<ThemeSelector
value={theme}
onChange={newTheme => setTheme(newTheme)}
/>
</Box>
<AllThemes>
<Box m={4}>
<Card>
<div className="card-body">
<Card maxWidth="400px">
<div>
<Heading as="h4">
Trending{' '}
<a className="text-body" href="/communities">
@ -69,6 +61,6 @@ export const Basic = () => {
</div>
</Card>
</Box>
</ThemeSystemProvider>
</AllThemes>
);
};

28
src/stories/Header.stories.tsx

@ -12,7 +12,7 @@ import '@reach/menu-button/styles.css';
import { Menu, MenuButton, MenuItem, MenuList } from '../components/MenuButton';
import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
import { Icon } from '../components/icon';
import Block from '../components/elements/Block';
import Block, { Flex } from '../components/elements/Block';
import Header, { Separator } from '../components/Header';
import { themes } from '../theme';
import { Box } from 'theme-ui';
@ -46,9 +46,11 @@ export const UserProfile = () =>
<ThemeSystemProvider key={theme} initialTheme={theme}>
<Box bg="background">
<Header {...profileOptions}>
<Button variant="outline">Profile</Button>
<Separator />
<Button variant="primary">Send Message</Button>
<Flex>
<Button variant="outline">Profile</Button>
<Separator />
<Button variant="primary">Send Message</Button>
</Flex>
</Header>
</Box>
</ThemeSystemProvider>
@ -61,10 +63,12 @@ export const MyProfile = () =>
<ThemeSystemProvider key={theme} initialTheme={theme}>
<Box bg="background">
<Header {...profileOptions}>
<Separator />
<Button variant="outline">
<Icon name="settings" />
</Button>
<Flex>
<Separator />
<Button variant="outline">
<Icon name="settings" />
</Button>
</Flex>
</Header>
</Box>
</ThemeSystemProvider>
@ -79,9 +83,11 @@ export const Community = () =>
<ThemeSystemProvider key={theme} initialTheme={theme}>
<Box bg="background">
<Header {...communityOptions}>
<Button variant="outline">Unsubscribe</Button>
<Separator />
<Button variant="primary">Create Post</Button>
<Flex>
<Button variant="outline">Unsubscribe</Button>
<Separator />
<Button variant="primary">Create Post</Button>
</Flex>
</Header>
</Box>
</ThemeSystemProvider>

8
src/stories/PostListing.stories.tsx

@ -14,7 +14,7 @@ import {
import Button from '../components/elements/Button';
import { BasePostListing } from '../components/post-listing';
import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
import { themes } from '../theme';
import { AllThemes, themes } from '../theme';
export default { title: 'PostListing' };
@ -101,9 +101,9 @@ const postListingProps = {
export const Basic = () => {
return (
<MemoryRouter>
Post Listing Stories
{/* @ts-ignore */}
<BasePostListing {...postListingProps} />
<AllThemes>
<BasePostListing {...postListingProps} />
</AllThemes>
</MemoryRouter>
);
};

6
src/stories/Tooltip.stories.tsx

@ -14,7 +14,7 @@ import '@reach/tooltip/styles.css';
import Button from '../components/elements/Button';
import { Icon } from '../components/icon';
import { ThemeSystemProvider } from '../components/ThemeSystemProvider';
import { themes } from '../theme';
import { AllThemes, themes } from '../theme';
import Tooltip from '../components/Tooltip';
import Block from '../components/elements/Block';
@ -22,7 +22,7 @@ export default { title: 'Tooltip' };
export const Basic = () => {
return (
<ThemeSystemProvider>
<AllThemes>
<Block>
<Tooltip label="Settings" aria-label="Open Settings">
<Box css={{ display: 'inline-block' }}>
@ -30,6 +30,6 @@ export const Basic = () => {
</Box>
</Tooltip>
</Block>
</ThemeSystemProvider>
</AllThemes>
);
};

6
src/theme.tsx

@ -1,7 +1,7 @@
import React from 'react';
import * as allThemes from '@theme-ui/presets';
import { Select, Theme, ThemeProviderProps, useThemeUI } from 'theme-ui';
import { Box, Select, Theme, ThemeProviderProps, useThemeUI } from 'theme-ui';
import { darken, lighten } from '@theme-ui/color';
import { i18n } from './i18next';
import {
@ -333,7 +333,9 @@ export function AllThemes({ children }: { children: React.ReactNode }) {
<>
{Object.keys(themes).map(theme => (
<ThemeSystemProvider key={theme} initialTheme={theme}>
{children}
<Box bg="background" p={2}>
{children}
</Box>
</ThemeSystemProvider>
))}
</>

2
yarn.lock

@ -1359,7 +1359,7 @@
"@emotion/serialize" "^0.11.15"
"@emotion/utils" "0.11.3"
"@emotion/[email protected]^10.0.0", "@emotion/[email protected]^10.0.17":
"@emotion/[email protected]^10.0.0", "@emotion/[email protected]^10.0.17", "@emotion/[email protected]^10.0.27":
version "10.0.27"
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==

Loading…
Cancel
Save