~breatheoutbreathein/u4u

433434aba74d98da02458cbefc9e7854c8069f58 — Joseph Turner 1 year, 9 months ago 62f752f
slight improvements to shape icons
2 files changed, 9 insertions(+), 9 deletions(-)

M src/components/AllShapes.tsx
M src/components/SevenShapes.tsx
M src/components/AllShapes.tsx => src/components/AllShapes.tsx +4 -4
@@ 22,12 22,12 @@ import { PointShape } from 'ushin-db'
import './all-shapes.scss'

export const FactsSvg = (): ReactElement => <path d='M 2,2 14,2 14,14 2,14 Z' />
export const ThoughtsSvg = (): ReactElement => <circle cx='8' cy='8' r='6' />
export const ThoughtsSvg = (): ReactElement => <circle cx='8' cy='8' r='6.25' />
export const FeelingsSvg = (): ReactElement => <path d='M 8,4 A 2 2 0 0 1 14 8 L 8,14 L 2,8 A 2 2 0 0 1 8 4' />
export const NeedsSvg = (): ReactElement => <path d='M 8,2 L 14,14 L 2,14 Z' />
export const TopicsSvg = (): ReactElement => <path d='M 2,2 L 14,2 L 11,14 L 5,14 Z' />
export const ActionsSvg = (): ReactElement => <path d='M 2,4.5 H 8 V 2 L 14,8 L 8,14 V 11.5 H 2 Z' />
export const PeopleSvg = (): ReactElement => <path d='M 2,2 Q 5,0.5 8,2 T 14,2 L 14,14 Q 11,15.5 8,14 T 2,14 Z' />
export const TopicsSvg = (): ReactElement => <path d='M 2,2.5 L 14,2.5 L 11,14 L 5,14 Z' />
export const ActionsSvg = (): ReactElement => <path d='M 2,3 H 8 V 1 L 14,8 L 8,15 V 13 H 2 Z' />
export const PeopleSvg = (): ReactElement => <path d='M 2,3 Q 5,1 8,3 T 14,3 L 14,13 Q 11,15 8,13 T 2,13 Z' />

interface Props {
  shape: PointShape

M src/components/SevenShapes.tsx => src/components/SevenShapes.tsx +5 -5
@@ 28,7 28,7 @@ interface Props {
}

export const SevenShapes = (props: Props): ReactElement => (
  <svg className='seven-shapes' viewBox='0 0 56 56'>
  <svg className='seven-shapes' viewBox='0 0 50 52'>
    <g onClick={() => props.onShapeClick('facts')}>
      <FactsSvg />
    </g>


@@ 38,16 38,16 @@ export const SevenShapes = (props: Props): ReactElement => (
    <g transform='translate(4 32)' onClick={() => props.onShapeClick('feelings')}>
      <FeelingsSvg />
    </g>
    <g transform='translate(16 36)' onClick={() => props.onShapeClick('needs')}>
    <g transform='translate(17 36)' onClick={() => props.onShapeClick('needs')}>
      <NeedsSvg />
    </g>
    <g transform='translate(28 32)' onClick={() => props.onShapeClick('topics')}>
    <g transform='translate(29.5 32.5)' onClick={() => props.onShapeClick('topics')}>
      <TopicsSvg />
    </g>
    <g transform='translate(32 16)' onClick={() => props.onShapeClick('actions')}>
    <g transform='translate(34 16)' onClick={() => props.onShapeClick('actions')}>
      <ActionsSvg />
    </g>
    <g transform='translate(32 0)' onClick={() => props.onShapeClick('people')}>
    <g transform='translate(34 0)' onClick={() => props.onShapeClick('people')}>
      <PeopleSvg />
    </g>
  </svg>