Fix/175 frontend grid refactoring (#197)

* fix: refactor dashboard css * fix: fixed responsive bug at exact 1056px screen width * fix: adding column sizes and other minor fixes to dashboard grids * fix: fixing seedlot dashboard grid * fix: fixing create a class page grid * fix: fixing seedlot details page * fix: adjusting columns sizes on seedlot details page * fix: fixing ownership step grid * fix: fixing interim step grid * fix: fixing grid on orchard step * fix: removing broken media query rule * fix: removing unused scss rule * fix: fixing extract and storage step * fix: adjusting columns on collection step * fix: fixing columns and minor adjustments on interim step * fix: fixing my seedlot page grid * fix: adjusting interim step unit test * fix: removing unused import
bcgov · May 14, 2024 · 427c4a7 · 427c4a7
1 parent 666b520
commit 427c4a7
Show file tree

Hide file tree

Showing 30 changed files with 730 additions and 795 deletions.
diff --git a/frontend/src/__test__/components/InterimStep.test.tsx b/frontend/src/__test__/components/InterimStep.test.tsx
@@ -50,7 +50,7 @@ describe('Interim Storage Step test', () => {
       titleStorage: 'Storage information',
       subtitleStorage: 'Enter the interim storage information for this seedlot'
     }
-    const titleBox = component.getElementsByClassName('interim-agency-title')[0];
+    const titleBox = component.getElementsByClassName('interim-title-row')[0];
     expect(titleBox).toHaveTextContent(content.title);
     expect(titleBox).toHaveTextContent(content.subtitle);
     expect(screen.getByText(content.titleStorage)).toBeInTheDocument();

diff --git a/frontend/src/components/ApplicantInformationForm/styles.scss b/frontend/src/components/ApplicantInformationForm/styles.scss
@@ -3,7 +3,6 @@
 
 .applicant-information-form {
   margin-top: 1rem;
-  padding-left: 2.5rem;
 }
 
 .applicant-information-form h2 {
@@ -34,10 +33,3 @@
 .save-button {
   margin-bottom: 3rem;
 }
-
-
-@media only screen and (max-width: 1584px) {
-  .applicant-information-form {
-    padding-left: 2rem;
-  }
-}
diff --git a/frontend/src/components/Card/StandardCard/styles.scss b/frontend/src/components/Card/StandardCard/styles.scss
@@ -20,7 +20,7 @@ p.std-card-title {
   display: flex;
   flex-direction: column;
   padding: 1.25rem 1rem;
-  margin: 0.5rem;
+  margin: 0.5rem 2rem 0.5rem 0;
   width: 20.25rem;
   height: 22.5625rem;
   background: var(--bcgov-layer-02);

diff --git a/frontend/src/components/FavouriteActivities/index.tsx b/frontend/src/components/FavouriteActivities/index.tsx
@@ -26,7 +26,7 @@ const FavouriteActivities = () => {
 
   return (
     <Row className="favourite-activities">
-      <Column lg={4} className="favourite-activities-title">
+      <Column sm={4} md={8} lg={16} xlg={4} className="favourite-activities-title">
         <h2>My favourite activities</h2>
         <Subtitle text="Quick access to your favourite activities." className="favourite-activities-subtitle" />
         <Tooltip
@@ -39,7 +39,7 @@ const FavouriteActivities = () => {
           </button>
         </Tooltip>
       </Column>
-      <Column lg={12} className="favourite-activities-cards">
+      <Column sm={4} md={8} lg={16} xlg={12} className="favourite-activities-cards">
         <Row>
           {favActQuery.isLoading && <Loading withOverlay={false} />}
           {favActQuery.isSuccess && (

diff --git a/frontend/src/components/FavouriteActivities/styles.scss b/frontend/src/components/FavouriteActivities/styles.scss
@@ -3,19 +3,19 @@
 @use '@carbon/type';
 
 .favourite-activities {
-  background-color: var(--bcgov-layer-01);
-  padding: 2rem 0;
-}
-
-.favourite-activities-title {
-  padding-left: 3.5rem;
+  background-color: var(--#{vars.$bcgov-prefix}-layer-01);
+  padding: 2rem;
 }
 
 .favourite-activities-title > h2 {
   @include type.type-style('heading-03');
   margin-bottom: 0.5rem;
 }
 
+.#{vars.$bcgov-prefix}--row > .favourite-activities-title {
+  padding-left: 0.5rem;
+}
+
 .favourite-activities-subtitle {
   display: inline;
 }
@@ -34,29 +34,3 @@ button.tooltip-button > svg {
   top: 0.1875rem;
   padding-left: 0.3125rem;
 }
-
-@media only screen and (max-width: 1584px) {
-  .favourite-activities-title {
-    padding-left: 3rem;
-  }
-}
-
-@media only screen and (max-width: 1056px) {
-  .favourite-activities-cards {
-    padding-left: 3.5rem;
-  }
-}
-
-@media only screen and (max-width: 672px) {
-  .favourite-activities-title {
-    padding-left: 2rem;
-  }
-
-  .favourite-activities-cards {
-    padding-left: 2.5rem;
-  }
-
-  .cards-row {
-    flex-direction: column;
-  }
-}
diff --git a/frontend/src/components/PageTitle/index.tsx b/frontend/src/components/PageTitle/index.tsx
@@ -54,7 +54,7 @@ const PageTitle = ({
   const isFavourited = thisFavAct !== undefined;
 
   return (
-    <Column sm={4} md={4} className="title-section">
+    <Column className="title-section">
       <div className="title-favourite">
         <h1>{title}</h1>
         {enableFavourite && activity && (

diff --git a/frontend/src/components/RecentActivities/index.tsx b/frontend/src/components/RecentActivities/index.tsx
@@ -61,63 +61,67 @@ const RecentActivities = () => {
   ];
 
   return (
-    <Row className="main-content recent-activity">
-      <Column sm={4} className="recent-activity-title">
-        <h2>My recent activities</h2>
-        <Subtitle text="Check your recent requests and files" className="recent-activity-subtitle" />
-      </Column>
-      <Column sm={4}>
-        <Tabs>
-          <TabList aria-label="List of tabs">
-            <Tab>Requests</Tab>
-            <Tab>Files & Docs.</Tab>
-          </TabList>
-          <TabPanels>
-            <TabPanel>
-              {
-                listItems.length === 0
-                  ? (
-                    <div className="empty-recent-activities">
-                      <EmptySection
-                        icon="Application"
-                        title="There is no activity to show yet!"
-                        description="Your recent requests will appear here once you generate one"
+    <>
+      <Row className="recent-activity-title-row">
+        <Column>
+          <h2>My recent activities</h2>
+          <Subtitle text="Check your recent requests and files" className="recent-activity-subtitle" />
+        </Column>
+      </Row>
+      <Row>
+        <Column className="recent-activity-table">
+          <Tabs>
+            <TabList aria-label="List of tabs">
+              <Tab>Requests</Tab>
+              <Tab>Files & Docs.</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel>
+                {
+                  listItems.length === 0
+                    ? (
+                      <div className="empty-recent-activities">
+                        <EmptySection
+                          icon="Application"
+                          title="There is no activity to show yet!"
+                          description="Your recent requests will appear here once you generate one"
+                        />
+                      </div>
+                    )
+                    : (
+                      <ActivityTable
+                        elements={listItems}
+                        clickFn={goToActivity}
+                        headers={tableHeaders}
                       />
-                    </div>
-                  )
-                  : (
-                    <ActivityTable
-                      elements={listItems}
-                      clickFn={goToActivity}
-                      headers={tableHeaders}
-                    />
-                  )
-              }
-            </TabPanel>
-            <TabPanel>
-              {
-                filesDocsItems.length === 0
-                  ? (
-                    <div className="empty-recent-activity-files-docs">
-                      <EmptySection
-                        icon="Application"
-                        title="There is no files & docs to show yet!"
-                        description="Your recent files & docs will appear here once you generate one"
+                    )
+                }
+              </TabPanel>
+              <TabPanel>
+                {
+                  filesDocsItems.length === 0
+                    ? (
+                      <div className="empty-recent-activity-files-docs">
+                        <EmptySection
+                          icon="Application"
+                          title="There is no files & docs to show yet!"
+                          description="Your recent files & docs will appear here once you generate one"
+                        />
+                      </div>
+                    )
+                    : (
+                      <FilesDocsTable
+                        elements={filesDocsItems}
+                        headers={fileDocstableHeaders}
                       />
-                    </div>
-                  )
-                  : (
-                    <FilesDocsTable
-                      elements={filesDocsItems}
-                      headers={fileDocstableHeaders}
-                    />
-                  )
-              }
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
-      </Column>
-    </Row>
+                    )
+                }
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </Column>
+      </Row>
+    </>
   );
 };
 

diff --git a/frontend/src/components/RecentActivities/styles.scss b/frontend/src/components/RecentActivities/styles.scss
@@ -6,55 +6,22 @@ p.recent-activity-subtitle {
   padding-bottom: 1rem;
 }
 
-.recent-activity {
-  background-color: var(--bcgov-background) !important;
-}
-
-.activity-table {
-  padding: 0 !important;
-}
+.recent-activity-title-row {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
 
-.recent-activity-title {
-  padding-left: 3.5rem;
+  h2 {
+    @include type.type-style('heading-03');
+    margin-bottom: 0.5rem;
+  }
 }
 
-.recent-activity-title > h2 {
-  @include type.type-style('heading-03');
-  margin-bottom: 0.5rem;
-}
-.recent-activity {
+.recent-activity-table {
   .#{vars.$bcgov-prefix}--tabs {
     padding-left: 1.5rem;
   }
 }
+
 .empty-recent-activities {
   margin: 3.44rem 0;
 }
-
-@media only screen and (max-width: 1584px) {
-  .recent-activity-title {
-    padding-left: 3rem;
-  }
-
-  .recent-activity {
-    .#{vars.$bcgov-prefix}--tabs {
-      padding-left: 1rem;
-    }
-  }
-}
-
-@media only screen and (max-width: 672px) {
-  .recent-activity-title {
-    padding-left: 2rem;
-  }
-
-  .recent-activity {
-    .#{vars.$bcgov-prefix}--tabs {
-      padding-left: 0;
-    }
-  }
-
-  .recent-activity {
-    overflow-x: scroll;
-  }
-}
diff --git a/frontend/src/components/RecentSeedlots/styles.scss b/frontend/src/components/RecentSeedlots/styles.scss
@@ -6,11 +6,9 @@ p.recent-seedlots-subtitle {
 }
 
 .recent-seedlots {
-  background-color: var(--bcgov-layer-02) !important;
-  margin-left: 2rem;
-  margin-right: 2rem;
-  margin-bottom: 2rem;
-  border: 1px solid var(--bcgov-border-subtle-02);
+  background-color: var(--#{vars.$bcgov-prefix}-layer-02) !important;
+  margin: 0 2rem 2rem 2rem;
+  border: 1px solid var(--#{vars.$bcgov-prefix}-border-subtle-02);
   border-radius: 4px;
 }
 

diff --git a/frontend/src/components/SeedlotActivities/index.tsx b/frontend/src/components/SeedlotActivities/index.tsx
@@ -59,23 +59,21 @@ const SeedlotActivities = () => {
   ];
 
   return (
-    <div className="seedlot-activities">
-      <Row className="seedlot-activities-cards">
-        {cards.map((card) => (
-          <StandardCard
-            key={card.id}
-            type={card.id}
-            image={card.image}
-            header={card.header}
-            description={card.description}
-            url={card.link}
-            isEmpty={card.isEmpty}
-            emptyTitle={card.emptyTitle}
-            emptyDescription={card.emptyDescription}
-          />
-        ))}
-      </Row>
-    </div>
+    <Row className="seedlot-activities-cards">
+      {cards.map((card) => (
+        <StandardCard
+          key={card.id}
+          type={card.id}
+          image={card.image}
+          header={card.header}
+          description={card.description}
+          url={card.link}
+          isEmpty={card.isEmpty}
+          emptyTitle={card.emptyTitle}
+          emptyDescription={card.emptyDescription}
+        />
+      ))}
+    </Row>
   );
 };
 

diff --git a/frontend/src/components/SeedlotActivities/styles.scss b/frontend/src/components/SeedlotActivities/styles.scss
@@ -1,16 +1,4 @@
-.seedlot-activities {
-  margin-left: 2.5rem;
+.seedlot-activities-cards {
+  margin-left: 2rem;
   margin-right: 2.5rem;
 }
-
-@media only screen and (max-width: 1056px) {
-  .seedlot-activities-cards {
-    padding-left: 3.5rem;
-  }
-}
-
-@media only screen and (max-width: 672px) {
-  .seedlot-activities-cards {
-    padding-left: 2.5rem;
-  }
-}