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/research/common/ResearchHeader.tsx

@@ -69,9 +69,6 @@ const ResearchHeader: React.FunctionComponent<
  <Col>
  <StyledFiller>
  <AuditSection lastUpdatedBy={props.lastUpdatedBy} baseAudit={researchFile} />
- <HeaderField className="justify-content-end" label="Status:">
- {researchFile?.fileStatusTypeCode?.description}
- </HeaderField>
  {exists(researchFile?.fileStatusTypeCode) && (
  <StatusField statusCodeType={researchFile.fileStatusTypeCode} />
  )}

source/frontend/src/features/notes/list/NoteResults/columns.tsx

@@ -36,8 +36,8 @@ export function createTableColumns(
  accessor: 'appLastUpdateUserid',
  align: 'center',
  sortable: true,
- minWidth: 28,
- maxWidth: 28,
+ minWidth: 34,
+ maxWidth: 34,
  },
 
  {