UI/improvements

source/frontend/src/components/common/Section/Section.tsx

@@ -83,8 +83,8 @@ export const StyledSectionHeader = styled.h2<{ isStyledHeader?: boolean }>`
 `;
 
 const StyledFormSection = styled.div<{ noPadding?: boolean }>`
- margin: ${props => (props.noPadding === true ? '' : '1.5rem')};
- padding: ${props => (props.noPadding === true ? '' : '1.5rem')};
+ margin: ${props => (props.noPadding === true ? '' : '1.6rem')};
+ padding: ${props => (props.noPadding === true ? '' : '1.6rem')};
  background-color: white;
  text-align: left;
  border-radius: 0.5rem;

source/frontend/src/components/common/TabView.tsx

@@ -1,14 +1,13 @@
 import { TabsProps } from 'react-bootstrap';
+import { Tabs as BsTabs } from 'react-bootstrap';
 import styled from 'styled-components';
 
-import * as Styled from '@/components/common/styles';
-
 const TabView: React.FunctionComponent<
  React.PropsWithChildren<TabsProps & { className?: string }>
 > = ({ children, className, ...props }) => {
  return (
  <StyledTabWrapper className={className}>
- <Styled.Tabs {...props}>{children}</Styled.Tabs>
+ <StyledTabs {...props}>{children}</StyledTabs>
  </StyledTabWrapper>
  );
 };
@@ -26,4 +25,31 @@ const StyledTabWrapper = styled.div`
  height: 100%;
 `;
 
+const StyledTabs = styled(BsTabs)`
+ background-color: white;
+ color: ${props => props.theme.css.linkColor};
+ font-size: 1.4rem;
+ border-color: transparent;
+ .nav-tabs {
+ height: auto;
+ }
+ .nav-item {
+ color: ${props => props.theme.css.linkColor};
+ min-width: 5rem;
+ padding: 0.1rem 1.2rem;
+
+ &:hover {
+ color: ${props => props.theme.css.linkHoverColor};
+ border-color: transparent;
+ text-decoration: underline;
+ }
+ &.active {
+ background-color: ${props => props.theme.css.highlightBackgroundColor};
+ font-family: 'BCSans-Bold';
+ color: ${props => props.theme.css.linkHoverColor};
+ border-color: transparent;
+ }
+ }
+`;
+
 export default TabView;

source/frontend/src/components/common/form/AsyncTypeahead.tsx

@@ -139,8 +139,8 @@ function AsyncTypeaheadInner<T extends TypeaheadModel>(
  {/* hide the search icon when user is interacting with typeahead control */}
  {({ selected, isMenuShown }: TypeaheadManagerChildProps) =>
  isLoading || isMenuShown || selected.length > 0 ? null : (
- <div className="rbt-aux">
- <FaSearch size="2.5rem" color="#bcbec5" />
+ <div className="rbt-aux pr-3">
+ <FaSearch size="1.6rem" color="#bcbec5" />
  </div>
  )
  }

source/frontend/src/components/common/form/FastDatePicker.tsx

@@ -123,18 +123,19 @@ const FormikDatePicker: FunctionComponent<React.PropsWithChildren<FastDatePicker
 
 const StyledGroup = styled(Form.Group)`
  .react-datepicker__calendar-icon {
- width: 3rem;
+ width: 2.4rem;
  height: 3rem;
  margin-top: 0.5rem;
+ margin-right: 1.2rem;
  right: 0;
  fill: ${props => props.theme.css.linkColor};
  pointer-events: none;
  }
  .react-datepicker__view-calendar-icon input {
- padding: 0.6rem 1rem 0.5rem 0.6rem;
+ padding: 0.8rem 1.2rem 0.8rem 1.2rem;
  }
  .react-datepicker-wrapper {
- max-width: 16rem;
+ max-width: 17rem;
  }
 `;
 

source/frontend/src/components/common/form/Form.scss

@@ -36,23 +36,26 @@ $fc-invalid-bg: #f2f2f2;
  text-align: right;
 }
 
+.form-group {
+ margin-bottom: 1.2rem;
+ //padding-bottom: 0px;
+}
+
 .form-control-sm {
  height: calc(1.5em + 0.8rem + 2px);
  padding: 0.4rem 0.58rem;
  font-size: 1.4rem;
  line-height: 1.5;
  border-radius: 0.3rem;
+ text-indent: 20px;
 }
 
 .form-control {
  font-size: 1.6rem;
- padding: 0.6rem 1.2rem;
- height: calc(1.5em + 1.2rem + 2px);
+ padding-left: 1.2rem;
+ padding-top: 0.8rem;
+ padding-bottom: 0.8rem;
+ height: 3.8rem;
  border-radius: 0.4rem;
  text-overflow: ellipsis;
 }
-
-.form-select:not(.is-invalid),
-.form-control:not(.is-invalid) {
- border: 0.1rem solid #606060;
-}

source/frontend/src/components/common/form/Select.scss

@@ -1,6 +1,33 @@
+@import '@/assets/scss/colors.scss';
+
 .form-select {
+ align-items: center;
+
+ // Selects have an extra padding added by the browser. Removing and manually center it prevents letter clipping.
+ padding-top: 0px;
+ padding-bottom: 0px;
+
+
+ // Custom dropdown icon requires clearning the browser's style
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ // Same path as MdArrowDropDown
+ background-image: url("data:image/svg+xml,<svg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' class='sc-jIILKH kTbtSw' height='1.6rem' width='1.6rem' xmlns='http://www.w3.org/2000/svg'><path fill='none' d='M0 0h24v24H0z'></path><path d='M7 10l5 5 5-5z'></path></svg>");
+ background-repeat: no-repeat;
+ // sizes below set by trial-and-error to look good
+ background-position-x: calc(100% - 0.8rem);
+ background-position-y: 6px;
+ padding-right: 3.5rem;
+
  min-width: 9.5rem;
+
  .option {
  padding: 0.5rem;
  }
 }
+
+.form-select:not(.is-invalid),
+.form-control:not(.is-invalid) {
+ border: 0.1rem solid #606060;
+}

source/frontend/src/components/common/styles.ts

@@ -1,6 +1,5 @@
 import { CSSProperties } from 'react';
 import { Breadcrumb as BsBreadcrumb } from 'react-bootstrap';
-import { Tabs as BsTabs } from 'react-bootstrap';
 import styled, { css } from 'styled-components';
 
 import { LoadingBackdropProps } from '@/components/common/LoadingBackdrop';
@@ -67,41 +66,14 @@ export const FlexBox = styled.div<IFlexBoxProps>`
  `}
 `;
 
-export const Tabs = styled(BsTabs)`
- background-color: white;
- color: ${props => props.theme.css.linkColor};
- font-size: 1.4rem;
- border-color: transparent;
- .nav-tabs {
- height: auto;
- }
- .nav-item {
- color: ${props => props.theme.css.linkColor};
- min-width: 5rem;
- padding: 0.1rem 0.6rem;
-
- &:hover {
- color: ${props => props.theme.css.linkHoverColor};
- border-color: transparent;
- text-decoration: underline;
- }
- &.active {
- background-color: ${props => props.theme.css.highlightBackgroundColor};
- font-family: 'BCSans-Bold';
- color: ${props => props.theme.css.linkHoverColor};
- border-color: transparent;
- }
- }
-`;
-
 export const H1 = styled.h1`
  color: ${props => props.theme.bcTokens.typographyColorSecondary};
  font-family: 'BCSans-Bold';
  font-size: 3.2rem;
  border-bottom: solid 0.5rem ${props => props.theme.css.headerBorderColor};
  width: 100%;
  text-align: left;
- margin-bottom: 2rem;
+ margin-bottom: 2.4rem;
 `;
 
 export const H2 = styled.h2`
@@ -111,17 +83,17 @@ export const H2 = styled.h2`
  border-bottom: solid 0.2rem ${props => props.theme.css.headerBorderColor};
  width: 100%;
  text-align: left;
- margin-bottom: 2rem;
+ margin-bottom: 2.4rem;
 `;
 
 export const H3 = styled.h3`
  color: ${props => props.theme.css.headerTextColor};
  font-family: 'BCSans-Bold';
- font-size: 2rem;
+ font-size: 2.2rem;
  border-bottom: solid 0.2rem ${props => props.theme.css.actionColor};
  width: 100%;
  text-align: left;
- margin-bottom: 2rem;
+ margin-bottom: 2.4rem;
 `;
 
 export const FilterBoxForm = styled(Form)`

source/frontend/src/features/mapSideBar/MapSideBar.tsx

@@ -51,8 +51,7 @@ const StyledMapSideBar = styled.div<{ show: boolean; fullWidth: boolean }>`
  }
  min-width: ${props => (props.fullWidth ? `100%` : `93rem`)};
  margin-left: ${props => (props.show ? `0rem` : `-93rem`)};
- padding: 1.4rem 1.6rem;
- padding-bottom: 0rem;
+ padding: 1.6rem;
  overflow: hidden;
  transition: 1s;
  width: ${props => (props.show ? `100%` : `0`)};

source/frontend/src/features/mapSideBar/acquisition/AcquisitionView.tsx

@@ -10,7 +10,6 @@ import {
  useLocation,
  useRouteMatch,
 } from 'react-router-dom';
-import styled from 'styled-components';
 
 import RealEstateAgent from '@/assets/images/real-estate-agent.svg?react';
 import { FileTypes } from '@/constants';
@@ -28,6 +27,7 @@ import { FilePropertyRouter } from '../router/FilePropertyRouter';
 import { FileTabType } from '../shared/detail/FileTabs';
 import { PropertyForm } from '../shared/models';
 import SidebarFooter from '../shared/SidebarFooter';
+import { StyledFormWrapper } from '../shared/styles';
 import UpdateProperties from '../shared/update/properties/UpdateProperties';
 import { AcquisitionContainerState } from './AcquisitionContainer';
 import { isAcquisitionFile } from './add/models';
@@ -248,15 +248,4 @@ const getEditTitle = (
  return 'Acquisition File';
 };
 
-const StyledFormWrapper = styled.div`
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- text-align: left;
- height: 100%;
- overflow-y: auto;
- padding-right: 1rem;
- padding-bottom: 1rem;
-`;
-
 export default AcquisitionView;

source/frontend/src/features/mapSideBar/acquisition/add/AddAcquisitionContainer.tsx

@@ -2,7 +2,6 @@ import { FormikProps } from 'formik/dist/types';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import styled from 'styled-components';
 
 import RealEstateAgent from '@/assets/images/real-estate-agent.svg?react';
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
@@ -17,6 +16,7 @@ import { featuresetToMapProperty } from '@/utils/mapPropertyUtils';
 
 import { PropertyForm } from '../../shared/models';
 import SidebarFooter from '../../shared/SidebarFooter';
+import { StyledFormWrapper } from '../../shared/styles';
 import { useAddAcquisitionFormManagement } from '../hooks/useAddAcquisitionFormManagement';
 import { AddAcquisitionForm } from './AddAcquisitionForm';
 import { AcquisitionForm } from './models';
@@ -228,14 +228,3 @@ export const AddAcquisitionContainer: React.FC<IAddAcquisitionContainerProps> =
 };
 
 export default AddAcquisitionContainer;
-
-const StyledFormWrapper = styled.div`
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- text-align: left;
- height: 100%;
- overflow-y: auto;
- padding-right: 1rem;
- padding-bottom: 1rem;
-`;

source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/UpdateAcquisitionAgreementForm.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import LoadingBackdrop from '@/components/common/LoadingBackdrop';
 import SidebarFooter from '@/features/mapSideBar/shared/SidebarFooter';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { getCancelModalProps, useModalContext } from '@/hooks/useModalContext';
 
 import AcquisitionAgreementForm from '../form/AcquisitionAgreementForm';
@@ -81,16 +82,6 @@ const UpdateAcquisitionAgreementForm: React.FunctionComponent<
 
 export default UpdateAcquisitionAgreementForm;
 
-const StyledFormWrapper = styled.div`
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- text-align: left;
- height: 100%;
- overflow-y: auto;
- padding-bottom: 1rem;
-`;
-
 const StyledContent = styled.div`
  background-color: ${props => props.theme.css.highlightBackgroundColor};
 `;

source/frontend/src/features/mapSideBar/acquisition/tabs/compensation/update/UpdateCompensationRequisitionForm.tsx

@@ -21,6 +21,7 @@ import { Section } from '@/components/common/Section/Section';
 import { SectionField } from '@/components/common/Section/SectionField';
 import { PayeeOption } from '@/features/mapSideBar/acquisition/models/PayeeOptionModel';
 import SidebarFooter from '@/features/mapSideBar/shared/SidebarFooter';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { getCancelModalProps, useModalContext } from '@/hooks/useModalContext';
 import { IAutocompletePrediction } from '@/interfaces/IAutocomplete';
 import { ApiGen_Concepts_AcquisitionFile } from '@/models/api/generated/ApiGen_Concepts_AcquisitionFile';
@@ -392,16 +393,6 @@ const generateFiscalYearOptions = () => {
  return options;
 };
 
-const StyledFormWrapper = styled.div`
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- text-align: left;
- height: 100%;
- overflow-y: auto;
- padding-bottom: 1rem;
-`;
-
 const StyledContent = styled.div`
  background-color: ${props => props.theme.css.highlightBackgroundColor};
 `;

source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/UpdateForm8Form.tsx

@@ -9,6 +9,7 @@ import { SectionField } from '@/components/common/Section/SectionField';
 import { RestrictContactType } from '@/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent';
 import { PayeeOption } from '@/features/mapSideBar/acquisition/models/PayeeOptionModel';
 import SidebarFooter from '@/features/mapSideBar/shared/SidebarFooter';
+import { StyledFormWrapper } from '@/features/mapSideBar/shared/styles';
 import { getCancelModalProps, useModalContext } from '@/hooks/useModalContext';
 import { ApiGen_Concepts_ExpropriationPayment } from '@/models/api/generated/ApiGen_Concepts_ExpropriationPayment';
 
@@ -133,16 +134,6 @@ export const UpdateForm8Form: React.FC<IForm8FormProps> = ({
 
 export default UpdateForm8Form;
 
-const StyledFormWrapper = styled.div`
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- text-align: left;
- height: 100%;
- overflow-y: auto;
- padding-bottom: 1rem;
-`;
-
 const StyledContent = styled.div`
  background-color: ${props => props.theme.css.highlightBackgroundColor};
 `;