diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/ProjectPropertiesSection.module.scss b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/ProjectPropertiesSection.module.scss index f546e66ed..9a073cfc8 100644 --- a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/ProjectPropertiesSection.module.scss +++ b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/ProjectPropertiesSection.module.scss @@ -1,17 +1,9 @@ -@import '~@fluentui/react/dist/sass/References.scss'; - -.root { - +.projectPropertiesSection { .fields { - margin: 25px 0 0 0; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; + flex-direction: row; flex-wrap: wrap; - -ms-flex-pack: distribute; - justify-content: flex-start; - align-content: flex-start; - align-items: flex-start; + gap: 24px; + margin-top: 12px; } } diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/ProjectPropertiesSection.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/ProjectPropertiesSection.tsx index 6eff17e88..a2bf9a562 100644 --- a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/ProjectPropertiesSection.tsx +++ b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/ProjectPropertiesSection.tsx @@ -1,6 +1,5 @@ import { stringIsNullOrEmpty } from '@pnp/core' import React, { FC, useContext } from 'react' -import { useProjectStatusContext } from '../../../ProjectStatus/context' import { StatusElement } from '../../StatusElement' import { BaseSection } from '../BaseSection/BaseSection' import { SectionContext } from '../context' @@ -9,7 +8,6 @@ import { StatusSectionField } from './StatusSectionField/StatusSectionField' import { useProjectPropertiesSection } from './useProjectPropertiesSection' export const ProjectPropertiesSection: FC = () => { - const context = useProjectStatusContext() const { section } = useContext(SectionContext) const { fieldValues, fields } = useProjectPropertiesSection() @@ -28,7 +26,6 @@ export const ProjectPropertiesSection: FC = () => { key={fieldName} label={field.Title} value={fieldValues[fieldName]} - width={context.props.fieldWidth} /> ) } @@ -40,7 +37,7 @@ export const ProjectPropertiesSection: FC = () => { return ( -
+
{renderFields()}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/StatusSectionField.module.scss b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/StatusSectionField.module.scss index 400e8b5b3..c29f5ef59 100644 --- a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/StatusSectionField.module.scss +++ b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/StatusSectionField.module.scss @@ -1,15 +1,11 @@ -.root { - padding: 0 18px 18px 0; - box-sizing: border-box; - .container { - .fieldLabel { - font-size: 14px; - font-weight: 600; - } - .fieldValue { - margin: 10px 0 0 0; - font-size: 17px; - font-weight: 300; - } +.statusSectionField { + .label { + font-size: var(--fontWeightRegular); + font-weight: 600; + } + .value { + margin-top: 8px; + font-size: var(--fontWeightRegular); + font-weight: 300; } } diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/StatusSectionField.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/StatusSectionField.tsx index 21581a922..2f9a84f0f 100644 --- a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/StatusSectionField.tsx +++ b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/StatusSectionField.tsx @@ -4,16 +4,11 @@ import styles from './StatusSectionField.module.scss' export const StatusSectionField: FC = (props) => { return ( -
-
-
{props.label}
-
{props.value}
-
+
+
{props.label}
+
{props.value}
) } StatusSectionField.displayName = 'StatusSectionField' -StatusSectionField.defaultProps = { - width: 250 -} diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/types.ts b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/types.ts index 46e675f31..c79a37cd6 100644 --- a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/types.ts +++ b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/StatusSectionField/types.ts @@ -8,9 +8,4 @@ export interface IStatusSectionFieldProps { * Value for the field */ value: string - - /** - * Width for the component - */ - width: number } diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/useProjectPropertiesSection.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/useProjectPropertiesSection.tsx index d57fa3ee6..f12bb1fca 100644 --- a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/useProjectPropertiesSection.tsx +++ b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/Sections/ProjectPropertiesSection/useProjectPropertiesSection.tsx @@ -4,8 +4,8 @@ export function useProjectPropertiesSection() { const context = useProjectStatusContext() return { fieldValues: { - ...context.state.data.properties.fieldValues, - ...context.state.selectedReport.fieldValues + ...context.state.data.properties.fieldValues['_fieldValuesAsText'], + ...context.state.selectedReport?.fieldValues['_fieldValuesAsText'] }, fields: [...context.state.data.properties.fields, ...context.state.data.reportFields] } diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/StatusElement/StatusElement.module.scss b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/StatusElement/StatusElement.module.scss index c72dd3206..b6ae51e0c 100644 --- a/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/StatusElement/StatusElement.module.scss +++ b/SharePointFramework/ProjectWebParts/src/components/ProjectStatus/StatusElement/StatusElement.module.scss @@ -24,7 +24,7 @@ .value { font-size: 18px; font-weight: 600; - margin-bottom: 5px; + margin-bottom: 4px; } } }