aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-06-27 06:01:11 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-06-29 02:50:08 +0800
commit6a39a69afeed7b0737cff70b4d3314e668b67308 (patch)
tree9453689f86e33ba04347833a96f7b2f520e9891c
parent2474d1d2f4cf4ae81d5d67c53005f018a0154ef5 (diff)
downloaddexon-sol-tools-6a39a69afeed7b0737cff70b4d3314e668b67308.tar
dexon-sol-tools-6a39a69afeed7b0737cff70b4d3314e668b67308.tar.gz
dexon-sol-tools-6a39a69afeed7b0737cff70b4d3314e668b67308.tar.bz2
dexon-sol-tools-6a39a69afeed7b0737cff70b4d3314e668b67308.tar.lz
dexon-sol-tools-6a39a69afeed7b0737cff70b4d3314e668b67308.tar.xz
dexon-sol-tools-6a39a69afeed7b0737cff70b4d3314e668b67308.tar.zst
dexon-sol-tools-6a39a69afeed7b0737cff70b4d3314e668b67308.zip
Added Circle component
-rw-r--r--packages/website/ts/components/ui/circle.tsx16
-rw-r--r--packages/website/ts/components/ui/identicon.tsx5
-rw-r--r--packages/website/ts/pages/jobs/list/list_item.tsx6
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>
);