Point group/select lead points#256

app/components/point-group.jsx

@@ -1,5 +1,6 @@
 // https://github.com/EnCiv/civil-pursuit/issues/35
 // https://github.com/EnCiv/civil-pursuit/issues/80
+// https://github.com/EnCiv/civil-pursuit/issues/256
 
 'use strict'
 
@@ -94,6 +95,9 @@ const PointGroup = props => {
                         point={pD}
                         vState={pD._id === selected ? 'selected' : 'default'}
                         className={cx(classes.selectPointsPassDown, classes.noBoxShadow)}
+                        onClick={() => {
+                          setSelected(pD._id)
+                        }}
                       >
                         <div className={classes.invisibleElement}>
                           {/* this is here to take up space for the heigth calculation of every grid cell, but not be visible */}
@@ -123,6 +127,7 @@ const PointGroup = props => {
           <div className={cx(classes.bottomButtons, classes.bottomButtonsOne)}>
             <span>
               <SecondaryButton
+                className={classes.secondaryButton}
                 disabled={selected === ''}
                 title="Done"
                 children="Done"
@@ -217,6 +222,17 @@ const PointGroup = props => {
                           point={pD}
                           vState={'default'}
                           className={cx(classes.selectPointsPassDown, classes.noBoxShadow)}
+                          onClick={() => {
+                            const newPointDoc = {
+                              ...pD,
+                              groupedPoints: [soloPoint, ...groupedPoints.filter((e, i) => i !== leadIndex)],
+                            }
+                            setPointDoc(newPointDoc)
+                            onDone({
+                              valid: true,
+                              value: { pointObj: newPointDoc },
+                            })
+                          }}
                         >
                           <div className={classes.pointBottomButtons}>
                             <div className={classes.pointWidthButton}>
@@ -340,9 +356,6 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
   borderStyle: {
     borderRadius: '0.9375rem',
     boxShadow: theme.boxShadow,
-    '&:hover': {
-      outline: `0.1875rem solid ${theme.colors.success}`,
-    },
     '&:hover $defaultSubject': {
       color: theme.colors.success,
     },
@@ -388,7 +401,7 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
-    gap: '0.625rem',
+    gap: '1rem',
     position: 'relative',
     width: '100%',
     boxSizing: 'border-box',
@@ -432,11 +445,21 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
 
   bottomButtonsTwo: {},
   bottomButtonsOne: {},
+  secondaryButton: {
+
+    width: '40%',
+
+    '&:disabled': {
+
+      opacity: '30%',
 
+    },
+
+  },
   bottomButtons: {
     boxSizing: 'border-box',
     width: '100%',
-    padding: '1.5rem 1rem 0 1rem',
+    padding: '1rem 1rem 0 1rem',
     display: 'flex',
     '&$bottomButtonsTwo': {
       '& span': {
@@ -496,21 +519,38 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
   },
 
   selectButtonRow: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     position: 'absolute',
     bottom: '1rem',
-    left: 0,
-    width: '100%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: 'calc(100% - 3.75rem)',
+    padding: '0 1.875rem',
     textAlign: 'center',
+    [`@media (max-width: ${theme.condensedWidthBreakPoint})`]: {
+      width: 'calc(100% - 3.75rem)',
+      padding: '1rem 0',
+      bottom: '0.5rem',
+    },
   },
 
   selectSelectButton: {
-    width: '75%',
+  width: '100%',
+
+    '&:focus': {
+
+      outline: 'none',
+
+    },
   },
 
   selectedButton: {
     backgroundColor: theme.colors.encivYellow,
     '&:hover, &.hover': {
       backgroundColor: theme.colors.encivYellow,
+        outline: 'none',
     },
   },
 
@@ -530,8 +570,8 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
   },
 
   noBoxShadow: {
-    boxShadow: 'none',
     border: '1px solid rgba(217, 217, 217, 0.40)',
+    boxShadow: '0.1875rem 0.1875rem 0.4375rem 0.1rem rgba(217, 217, 217, 0.40) !important',
   },
   selectedSubject: {
     color: theme.colors.success,

app/components/point.jsx

@@ -143,7 +143,7 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
     boxShadow: 'none !important',
     backgroundColor: 'rgba(235, 235, 235, 0.30)',
     '& $contentContainer': {
-      padding: '1.25rem',
+      padding: '0.25rem 1.25rem',
     },
   },
   secondaryBorder: {
@@ -180,6 +180,9 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
   disabledDescription: {
     color: theme.colors.title,
   },
+  collapsedDescription: {
+    display: 'none',
+  },
 
   // shared styling
   sharedBorderStyle: {
@@ -190,7 +193,9 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
     ...theme.font,
     fontSize: '1.25rem',
     fontWeight: '400',
-    lineHeight: '1rem',
+    marginBlockStart: '.3925rem',
+    lineHeight: '1.5em',
+    marginBlockEnd: '.3925rem',
   },
   sharedDescriptionStyle: {
     ...theme.font,