diff options
| -rw-r--r-- | packages/website/ts/components/ui/circle.tsx | 16 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/identicon.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/list/list_item.tsx | 6 |
3 files changed, 21 insertions, 6 deletions
diff --git a/packages/website/ts/components/ui/circle.tsx b/packages/website/ts/components/ui/circle.tsx new file mode 100644 index 000000000..75103d066 --- /dev/null +++ b/packages/website/ts/components/ui/circle.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +export interface CircleProps { + className?: string; + diameter: number; + fillColor: string; +} + +export const Circle: React.StatelessComponent<CircleProps> = ({ className, diameter, fillColor }) => { + const radius = diameter / 2; + return ( + <svg className={className} height={diameter} width={diameter}> + <circle cx={radius} cy={radius} r={radius} fill={fillColor} /> + </svg> + ); +}; diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx index cc1655962..d8036f0c1 100644 --- a/packages/website/ts/components/ui/identicon.tsx +++ b/packages/website/ts/components/ui/identicon.tsx @@ -2,6 +2,7 @@ import blockies = require('blockies'); import * as _ from 'lodash'; import * as React from 'react'; +import { Circle } from 'ts/components/ui/circle'; import { Image } from 'ts/components/ui/image'; import { colors } from 'ts/style/colors'; @@ -40,9 +41,7 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> { width={diameter} /> ) : ( - <svg height={diameter} width={diameter}> - <circle cx={radius} cy={radius} r={radius} fill={colors.grey200} /> - </svg> + <Circle diameter={diameter} fillColor={colors.grey200} /> )} </div> ); diff --git a/packages/website/ts/pages/jobs/list/list_item.tsx b/packages/website/ts/pages/jobs/list/list_item.tsx index d7838bc01..192433d39 100644 --- a/packages/website/ts/pages/jobs/list/list_item.tsx +++ b/packages/website/ts/pages/jobs/list/list_item.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; +import { Circle } from 'ts/components/ui/circle'; + export interface ListItemProps { bulletColor?: string; } export const ListItem: React.StatelessComponent<ListItemProps> = ({ bulletColor, children }) => { return ( <div className="flex items-center"> - <svg className="flex-none lg-px2 md-px2 sm-pl2" height="26" width="26"> - <circle cx="13" cy="13" r="13" fill={bulletColor || 'transparent'} /> - </svg> + <Circle className="flex-none lg-px2 md-px2 sm-pl2" diameter={26} fillColor={bulletColor || 'transparent'} /> <div className="flex-auto px2">{children}</div> </div> ); |