Settings: Metric Configuration: Initial Work - Migrate to Settings Page, Update Metric List (1/n)

publisher/src/App.tsx

@@ -23,7 +23,6 @@ import { trackNavigation } from "./analytics";
 import { DataUpload } from "./components/DataUpload";
 import { PageWrapper } from "./components/Forms";
 import Header from "./components/Header";
-import { MetricsView } from "./components/MetricsView";
 import CreateReports from "./components/Reports/CreateReport";
 import ReportDataEntry from "./components/Reports/ReportDataEntry";
 import ReviewMetrics from "./components/ReviewMetrics/ReviewMetrics";
@@ -46,7 +45,6 @@ const App: React.FC = (): ReactElement => {
           <Route path="/reports/create" element={<CreateReports />} />
           <Route path="/reports/:id" element={<ReportDataEntry />} />
           <Route path="/settings" element={<Settings />} />
-          <Route path="/metrics" element={<MetricsView />} />
           <Route path="/upload" element={<DataUpload />} />
           <Route path="/review-metrics" element={<ReviewMetrics />} />
         </Routes>

publisher/src/components/Badge/Badge.tsx

@@ -28,19 +28,21 @@ export type BadgeProps = {
   color: BadgeColors;
   disabled?: boolean;
   loading?: boolean;
+  noMargin?: boolean;
 };
 
 export const BadgeElement = styled.div<{
   color?: BadgeColors;
   disabled?: boolean;
+  noMargin?: boolean;
 }>`
   height: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: ${({ color, disabled }) => {
     if (color === "GREY" || disabled) {
-      return palette.highlight.grey9;
+      return palette.highlight.grey8;
     }
     if (color === "RED") {
       return palette.solid.red;
@@ -55,21 +57,22 @@ export const BadgeElement = styled.div<{
   }};
   color: ${palette.solid.white};
   padding: 4px 8px;
-  margin-left: 10px;
   font-size: 0.65rem;
   font-weight: 600;
   white-space: nowrap;
   text-transform: capitalize;
+  ${({ noMargin }) => !noMargin && `margin-left: 10px;`};
 `;
 
 export const Badge: React.FC<BadgeProps> = ({
   color,
   disabled,
   loading,
+  noMargin,
   children,
 }) => {
   return (
-    <BadgeElement color={color} disabled={disabled}>
+    <BadgeElement color={color} disabled={disabled} noMargin={noMargin}>
       {children}
       {loading && <MiniLoader />}
     </BadgeElement>

publisher/src/components/Menu/Menu.tsx

@@ -37,7 +37,6 @@ enum MenuItems {
   LearnMore = "LEARN MORE",
   Settings = "SETTINGS",
   Agencies = "AGENCIES",
-  Metrics = "METRICS",
 }
 
 const Menu = () => {
@@ -77,8 +76,6 @@ const Menu = () => {
       setActiveMenuItem(MenuItems.CreateReport);
     } else if (location.pathname === "/settings") {
       setActiveMenuItem(MenuItems.Settings);
-    } else if (location.pathname === "/metrics") {
-      setActiveMenuItem(MenuItems.Metrics);
     } else {
       setActiveMenuItem(undefined);
     }
@@ -92,14 +89,6 @@ const Menu = () => {
           `Welcome, ${userStore.nameOrEmail} at ${userStore.currentAgency.name}`}
       </WelcomeUser>
 
-      {/* Metrics View */}
-      <MenuItem
-        onClick={() => navigate("/metrics")}
-        active={activeMenuItem === MenuItems.Metrics}
-      >
-        Metrics
-      </MenuItem>
-
       {/* Reports */}
       <MenuItem
         onClick={() => navigate("/")}

publisher/src/components/MetricsView/MetricsView.styles.tsx

@@ -31,6 +31,7 @@ export const MetricsViewControlPanel = styled.div`
   height: calc(100% - 170px);
   width: 100%;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
 `;
 
@@ -55,33 +56,29 @@ export const PanelContainerRight = styled.div`
 
 type MetricBoxContainerProps = {
   enabled?: boolean;
-  selected?: boolean;
 };
 
 export const MetricBoxContainer = styled.div<MetricBoxContainerProps>`
+  height: 197px;
+  max-width: 50%;
   display: flex;
+  flex: 1 1 50%;
   flex-direction: column;
-  border: 1px solid
-    ${({ selected }) =>
-      selected ? palette.solid.blue : palette.highlight.grey2};
-  border-radius: 12px;
-  padding: 15px;
-  margin-bottom: 11px;
+  justify-content: space-between;
+  border: 1px solid ${palette.highlight.grey2};
+  padding: 27px 24px;
   transition: 0.2s ease;
   color: ${({ enabled }) =>
-    enabled ? palette.solid.darkgrey : palette.highlight.grey7};
-  ${({ selected }) =>
-    selected && `box-shadow: 0px 4px 10px ${palette.highlight.blue};`}
+    enabled ? palette.solid.darkgrey : palette.highlight.grey10};
 
   &:hover {
     cursor: pointer;
-    ${({ selected }) =>
-      !selected && `border: 1px solid ${palette.highlight.lightblue2}`};
+    border: 1px solid ${palette.solid.blue};
   }
 `;
 
 export const MetricBoxWrapper = styled.div`
-  display: block;
+  display: flex;
 `;
 
 export const ActiveMetricSettingHeader = styled.div`
@@ -106,12 +103,13 @@ type MetricNameProps = { isTitle?: boolean };
 
 export const MetricName = styled.div<MetricNameProps>`
   ${({ isTitle }) =>
-    isTitle ? typography.sizeCSS.title : typography.sizeCSS.medium}
+    isTitle ? typography.sizeCSS.title : typography.sizeCSS.large}
 `;
 
 export const MetricDescription = styled.div`
   ${typography.sizeCSS.normal}
-  color: ${palette.highlight.grey9};
+  height: 100%;
+  margin: 11px 0;
 
   @media only screen and (max-width: 1000px) {
     ${typography.sizeCSS.small}
@@ -121,7 +119,7 @@ export const MetricDescription = styled.div`
 export const MetricDetailsDisplay = styled.div`
   width: 100%;
   overflow-y: scroll;
-  padding: 24px 15px 0 15px;
+  padding: 24px 0;
 `;
 
 export const MetricOnOffWrapper = styled.div`
@@ -328,3 +326,28 @@ export const MetricSettingsDisplayError = styled.div`
   justify-content: center;
   margin-top: 50px;
 `;
+
+export const StickyHeader = styled.div`
+  width: 100%;
+  position: sticky;
+  top: 0;
+  background: ${palette.solid.white};
+  margin-bottom: 29px;
+`;
+
+export const BackToMetrics = styled.div`
+  color: ${palette.solid.blue};
+  transition: 0.2s ease;
+  margin-bottom: 24px;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.85;
+  }
+`;
+
+export const MetricConfigurationDisplay = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;