Better styles and content-loader

kausaltech · Oct 13, 2024 · a8e138e · a8e138e
1 parent c2318ec
commit a8e138e
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 33 deletions.
diff --git a/components/paths/CategoryCard.tsx b/components/paths/CategoryCard.tsx
@@ -5,8 +5,8 @@ import { Link } from 'common/links';
 import ActionParameters from 'components/paths/ActionParameters';
 import { useTranslations } from 'next-intl';
 import { readableColor, transparentize } from 'polished';
-import { Spinner } from 'reactstrap';
-import styled from 'styled-components';
+import ContentLoader from 'react-content-loader';
+import styled, { useTheme } from 'styled-components';
 
 import { activeGoalVar, yearRangeVar } from '@/context/paths/cache';
 import { GET_PATHS_ACTION } from '@/queries/paths/get-paths-actions';
@@ -19,11 +19,6 @@ import { getHttpHeaders } from '@/utils/paths/paths.utils';
 import PathsActionNode from '@/utils/paths/PathsActionNode';
 import { NetworkStatus, useQuery, useReactiveVar } from '@apollo/client';
 
-const ContentLoader = styled(Spinner)`
-  margin: 0 auto;
-  //background-color: ${(props) => props.theme.themeColors.light};
-`;
-
 const GroupIdentifierHeader = styled.div`
   background-color: ${(props) => props.$color};
   color: ${(props) => readableColor(props.$color || '#ffffff')};
@@ -58,6 +53,26 @@ const Identifier = styled.span`
   color: ${(props) => props.theme.textColor.tertiary};
 `;
 
+const PathsContentLoader = (props) => {
+  const theme = useTheme();
+  return (
+    <ContentLoader
+      speed={1}
+      width={330}
+      height={80}
+      viewBox="0 0 330 80"
+      backgroundColor={theme.graphColors.grey010}
+      foregroundColor={theme.graphColors.grey030}
+      {...props}
+    >
+      <rect x="5" y="1" rx="3" ry="3" width="166" height="16" />
+      <rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
+      <rect x="6" y="24" rx="3" ry="3" width="130" height="27" />
+      <rect x="4" y="61" rx="3" ry="3" width="166" height="16" />
+    </ContentLoader>
+  );
+};
+
 const PathsBasicNodeContent = (props) => {
   const { categoryId, node, pathsInstance, onLoaded } = props;
   const yearRange = useReactiveVar(yearRangeVar);
@@ -96,7 +111,7 @@ const PathsBasicNodeContent = (props) => {
   }, [activeGoal, data, yearRange]);
 
   if (loading && !refetching) {
-    return <ContentLoader type="grow" />;
+    return <PathsContentLoader />;
   }
   if (error) {
     return <div>Error: {error.message}</div>; // Handle error appropriately
@@ -177,7 +192,7 @@ const PathsActionNodeContent = (props) => {
   }, [activeGoal, data, yearRange]);
 
   if (loading && !refetching) {
-    return <ContentLoader type="grow" />;
+    return <PathsContentLoader />;
   }
   if (error) {
     return <div>Error: {error.message}</div>; // Handle error appropriately
@@ -212,7 +227,7 @@ const PathsNodeContent = (props) => {
   });
 
   if (loading) {
-    return <ContentLoader type="grow" />;
+    return <PathsContentLoader />;
   }
   if (error) {
     return <div>Error: {error.message}</div>; // Handle error appropriately

diff --git a/components/paths/PathsPageContent.tsx b/components/paths/PathsPageContent.tsx
@@ -14,17 +14,6 @@ type CategoryPage = { __typename: 'CategoryPage' } & GeneralPlanPage;
 
 const MainContent = styled.div`
   position: relative;
-  padding-top: 100px;
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    z-index: -100;
-    height: 500px;
-    background-color: ${({ theme }) => theme.brandDark};
-    width: 100%;
-  }
 `;
 
 const columnLayout = css`
@@ -56,9 +45,7 @@ const columnLayout = css`
   }
 `;
 
-const ContentArea = styled.div`
-  margin-bottom: 100px;
-`;
+const ContentArea = styled.div``;
 
 const PathsPageContent = ({
   page,

diff --git a/components/paths/StreamField.tsx b/components/paths/StreamField.tsx
@@ -87,7 +87,14 @@ function StreamFieldBlock(props: StreamFieldBlockProps) {
     }
 
     case 'PathsOutcomeBlock': {
-      return <PathsOutcomeBlock />;
+      const { heading, helpText, outcomeNodeId } = block;
+      return (
+        <PathsOutcomeBlock
+          heading={heading}
+          helpText={helpText}
+          outcomenodeId={outcomeNodeId}
+        />
+      );
     }
     case 'ActionCategoryFilterCardsBlock': {
       const { cards } = block;

diff --git a/components/paths/contentblocks/PathsOutcomeBlock.tsx b/components/paths/contentblocks/PathsOutcomeBlock.tsx
@@ -18,13 +18,24 @@ import GET_PAGE from '@/queries/paths/get-paths-page';
 import { getHttpHeaders } from '@/utils/paths/paths.utils';
 import { NetworkStatus, useQuery, useReactiveVar } from '@apollo/client';
 
-const ErrorBackground = styled.div`
+const Background = styled.div`
+  padding: 4rem 0 6rem;
   background-color: ${(props) => props.theme.brandDark};
+  color: ${(props) => props.theme.themeColors.white};
   min-height: 800px;
 `;
 
+const StyledTitle = styled.h1`
+  margin-bottom: 2rem;
+  font-size: ${(props) => props.theme.fontSizeLg};
+  color: inherit;
+
+  @media (min-width: ${(props) => props.theme.breakpointMd}) {
+    font-size: ${(props) => props.theme.fontSizeXl};
+  }
+`;
+
 const StyledCard = styled(Card)<{ $disabled?: boolean }>`
-  margin-top: 5rem;
   width: 100%;
   transition: all 0.5s ease;
   overflow: hidden;
@@ -58,8 +69,8 @@ const findVisibleNodes = (allNodes, lastNodeId: string, visibleNodes) => {
   return visibleNodes;
 };
 
-export default function PathsOutcomeBlock() {
-  //const { heading, helpText, outcomeNodeId } = props;
+export default function PathsOutcomeBlock(props) {
+  const { heading, helpText, outcomeNodeId } = props;
   const t = useTranslations();
   const pathsInstance = usePaths();
   const yearRange = useReactiveVar(yearRangeVar);
@@ -69,7 +80,7 @@ export default function PathsOutcomeBlock() {
   const router = useRouter();
   const pathname = usePathname();
   const queryNodeId = searchParams.get('node') ?? undefined;
-
+  console.log('PathsOutcomeBlock', props);
   const [lastActiveNodeId, setLastActiveNodeId] = useState<string | undefined>(
     queryNodeId
   );
@@ -137,10 +148,11 @@ export default function PathsOutcomeBlock() {
     //const outcomeType = visibleNodes[0].quantity;
 
     return (
-      <ErrorBackground className="mb-5">
+      <Background>
         <Container>
           <Row>
             <Col>
+              <StyledTitle>{heading}</StyledTitle>
               <StyledCard $disabled={refetching}>
                 <CardBody>
                   {visibleNodes.map((node, index) => (
@@ -173,7 +185,7 @@ export default function PathsOutcomeBlock() {
             </Col>
           </Row>
         </Container>
-      </ErrorBackground>
+      </Background>
     );
   }
 }
diff --git a/components/paths/outcome/OutcomeNodeContent.tsx b/components/paths/outcome/OutcomeNodeContent.tsx
@@ -174,6 +174,7 @@ const OutcomeNodeContent = ({
   const singleYearGraph = useMemo(
     () => (
       <div>
+        <h3>COMING SOON</h3>
         {/*<DimensionalBarGraph metric={node.metricDim!} endYear={endYear} />*/}
       </div>
     ),
@@ -290,7 +291,8 @@ const OutcomeNodeContent = ({
               <Icon name="table" /> {t('table')}
             </NavLink>
           </DisplayTab>
-          {showNodeLinks && (
+          {/* TODO: Hide info tab for now as we can not link to paths actions inside watch */}
+          {showNodeLinks && false && (
             <DisplayTab role="presentation">
               <NavLink
                 href="#"

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "proper-lockfile": "^4.1.2",
     "react": "18.2.0",
     "react-bootstrap-typeahead": "^6.0.0-alpha.11",
+    "react-content-loader": "^7.0.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.2.0",
     "react-highlight-words": "^0.18.0",

diff --git a/yarn.lock b/yarn.lock
@@ -16928,6 +16928,7 @@ __metadata:
     react: 18.2.0
     react-bootstrap-typeahead: ^6.0.0-alpha.11
     react-color: ^2.19.3
+    react-content-loader: ^7.0.2
     react-copy-to-clipboard: ^5.1.0
     react-dom: 18.2.0
     react-highlight-words: ^0.18.0
@@ -20232,6 +20233,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-content-loader@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "react-content-loader@npm:7.0.2"
+  peerDependencies:
+    react: ">=16.0.0"
+  checksum: 8f2f97cfb9a831cf487b8295fc60e05b153340a7bbaa2aa117c4af4c694ce0759313d8f538677ed231d3eb11d626e0561c416bc94f4ed158426bab5e8fa2ff67
+  languageName: node
+  linkType: hard
+
 "react-copy-to-clipboard@npm:^5.1.0":
   version: 5.1.0
   resolution: "react-copy-to-clipboard@npm:5.1.0"