Merge pull request #60 from bcgov/dev

Release to main
bcgov · Jan 14, 2025 · 4e57dfe · 4e57dfe
2 parents 6d68370 + c9ad186
commit 4e57dfe
Show file tree

Hide file tree

Showing 27 changed files with 165 additions and 132 deletions.
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
@@ -215,7 +215,7 @@ export default function Admin() {
   };
 
   return (
-    <>
+    <div>
       <Flex justify="space-between" align="center">
         <Link href="/">
           <HomeOutlined />
@@ -247,6 +247,6 @@ export default function Admin() {
           dataSource={rules.map((rule, key) => ({ key, ...rule }))}
         />
       )}
-    </>
+    </div>
   );
 }
diff --git a/app/components/InputOutputTable/InputOutputTable.module.css b/app/components/InputOutputTable/InputOutputTable.module.css
@@ -5,8 +5,8 @@
   align-items: center; 
   margin: 0;
   background: #f9f9f9;
-  padding: 16px;
+  padding: 1rem;
   border: 1px solid #f0f0f0;
-  border-radius: 8px 8px 0 0;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
   font-weight: normal;
 }
diff --git a/app/components/RuleHeader/RuleHeader.module.css b/app/components/RuleHeader/RuleHeader.module.css
@@ -1,28 +1,23 @@
 .headerContainer {
   position: relative;
-  margin-bottom: 8px;
-  border-radius: 12px 12px 0 0;
-  background: white;
+  padding-bottom: 0.5rem;
+  box-shadow: #0000001a 0px 2px 5px;
 }
 
 .homeWrapper {
-  padding: 8px 8px 0 8px;
+  max-width: var(--max-width);;
+  margin: auto;
+  padding: 0.5rem 0.5rem 0 0.5rem;
 }
 
 .headerWrapper {
-  padding: 8px;
+  max-width: var(--max-width);
+  margin: auto;
+  padding: 0.5rem;
 }
 
 .homeButton {
-  color: #666 !important;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  background: white;
-  border: 1px solid;
-  border-radius: 10px;
-  font-size: 16px;
+  color: var(--color-text-primary) !important;
 }
 
 .titleHeader {
@@ -51,29 +46,29 @@
   border: none;
   cursor: pointer;
   padding: 0;
-  font-size: 18px;
+  font-size: 1.125rem;
   color: #4b4b4b;
 }
 
-@media (max-width: 767px) {
+@media (max-width: var(--mobile-breakpoint)) {
   .headerWrapper {
     flex-direction: column;
-    gap: 16px;
+    gap: 1rem;
   }
   .headerContent {
     flex-direction: column;
     align-items: flex-start !important;
-    gap: 8px !important;
+    gap: 0.5rem !important;
   }
   .rightContent {
     flex-direction: column;
     align-items: flex-start;
     min-width: unset;
   }
   .titleHeader {
-    font-size: 24px;
+    font-size: 1.5rem;
   }
   .titleFilePath {
-    font-size: 14px;
+    font-size: 0.875rem;
   }
 }
diff --git a/app/components/RuleManager/RuleManager.module.css b/app/components/RuleManager/RuleManager.module.css
@@ -1,32 +1,38 @@
 .rulesWrapper {
   position: relative;
-  min-height: 500px;
   z-index: 1;
+  background: var(--version-color);
+  padding: 0 0.5rem 1rem 0.5rem;
 }
 
 .rulesWrapper::before {
   content: "";
   position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: calc(100vw - 15px);
-  height: 103%;
-  background: transparent;
+  left: 0;
+  width: 100%;
+  height: 100%;
   background: linear-gradient(
     to bottom, 
-    var(--version-color) 0%,
-    transparent 170%
+    #ffffffdd 0%,
+    #fffffff9 100%
   );
   z-index: -1;
-  opacity: 0.1;
 }
 
 .rulesGraph {
+  width: 100%;
+  height: 100%;
+  max-width: var(--max-width);
+  min-height: 500px;
   border: 1px solid #d9d9d9;
+  background: white;
+  margin: auto;
 }
 
 .actionBar {
-  padding: 15px;
+  max-width: var(--max-width);
+  margin: auto;
+  padding: 1rem;
 }
 
 .rootLayout {

diff --git a/app/components/RuleManager/RuleManager.tsx b/app/components/RuleManager/RuleManager.tsx
@@ -149,7 +149,7 @@ export default function RuleManager({
   const versionColour = getVersionColor(editing.toString());
 
   return (
-    <Flex gap="large" vertical className={styles.rootLayout}>
+    <Flex gap="middle" vertical className={styles.rootLayout}>
       <div
         className={styles.rulesWrapper}
         style={editing !== false ? ({ "--version-color": versionColour } as React.CSSProperties) : undefined}
@@ -165,12 +165,12 @@ export default function RuleManager({
             />
           </Flex>
         )}
-        {isLoading && (
-          <Spin tip="Loading graph..." size="large" className="spinner">
-            <div className="content" />
-          </Spin>
-        )}
         <div className={styles.rulesGraph}>
+          {isLoading && (
+            <Spin tip="Loading graph..." size="large" wrapperClassName="spinnerWrapper" className="spinner">
+              <div className="content" />
+            </Spin>
+          )}
           <RuleViewerEditor
             jsonFilename={jsonFile}
             ruleContent={ruleContent}

diff --git a/app/components/RuleRelationsDisplay/RuleRelationsDisplay.module.css b/app/components/RuleRelationsDisplay/RuleRelationsDisplay.module.css
@@ -15,7 +15,7 @@
   z-index: 1000;
   background: white;
   padding: 15px;
-  border-radius: 8px;
+  border-radius: var(--border-radius);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   transition: max-height 0.3s ease-in-out;
   overflow: hidden;
@@ -40,20 +40,20 @@
 }
 
 .legend {
-    border-top: 1px solid #ccc;
-    padding-top: 8px;
-    font-size: 12px;
+  border-top: 1px solid #ccc;
+  padding-top: 0.5rem;
+  font-size: 12px;
 }
 
 .legendTitle {
-    font-weight: bold;
-    margin: 0px 8px 0px 0px;
+  font-weight: bold;
+  margin: 0px 0.5rem 0px 0px;
 }
 
 .legendItem {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem
 }
 
 .legendLine {

diff --git a/app/components/RuleRelationsDisplay/subcomponents/RuleDescription.module.css b/app/components/RuleRelationsDisplay/subcomponents/RuleDescription.module.css
@@ -7,7 +7,7 @@
 .metaInfo {
   font-family: monospace;
   font-size: 11px;
-  color: #666;
+  color: var(--color-text-primary);
   margin-bottom: 10px;
 }
 
@@ -18,13 +18,13 @@
 }
 
 .link {
-  color: #0066cc;
+  color: var(--color-link-focus);
   font-size: 12px;
   text-decoration: underline;
   cursor: pointer;
   display: block;
   margin: 10px 0;
-  padding: 4px 8px;
+  padding: 0.25rem 0.5rem;
   border-radius: 4px;
   transition: background-color 0.2s ease;
 }

diff --git a/app/components/RuleViewerEditor/subcomponents/LinkRuleComponent.module.css b/app/components/RuleViewerEditor/subcomponents/LinkRuleComponent.module.css
@@ -1,6 +1,6 @@
 .ruleSelect {
   min-width: 350px;
-  margin-bottom: 16px;
+  margin-bottom: 1rem;
 }
 
 .linkDrawer {

diff --git a/app/components/RuleViewerEditor/subcomponents/NotesComponent.module.css b/app/components/RuleViewerEditor/subcomponents/NotesComponent.module.css
@@ -21,5 +21,5 @@
 
 .note :global(textarea) {
   background: #fffde5;
-  border-radius: 0 0 8px 8px;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
diff --git a/app/components/RuleViewerEditor/subcomponents/ScenarioSelectionContent.tsx b/app/components/RuleViewerEditor/subcomponents/ScenarioSelectionContent.tsx
@@ -31,7 +31,7 @@ export default function ScenarioSelectionContent({ scenarios, onComplete }: Scen
         >
           Select All
         </Checkbox>
-        <div style={{ borderBottom: "1px solid #f0f0f0", margin: "8px 0" }} />
+        <div style={{ borderBottom: "1px solid #f0f0f0", margin: "0.5rem 0" }} />
         {selections.map((item, index) => (
           <Checkbox
             key={index}

diff --git a/app/components/SavePublish/SavePublish.module.css b/app/components/SavePublish/SavePublish.module.css
@@ -1,10 +1,10 @@
 .sendForReviewBtn {
-  background: orange !important;
-  border-color: orange !important;
+  background: var(--color-in-review) !important;
+  border-color: var(--color-in-review) !important;
 }
 
 
-@media (max-width: 767px) {
+@media (max-width: var(--mobile-breakpoint)) {
   .savePublishWrapper {
     justify-content: start !important;
   }
@@ -16,7 +16,7 @@
   border-top: 1px solid #EEE;
 }
 .notificationWarningList li {
-  padding: 4px 0;
+  padding: 0.25rem 0;
   border-bottom: 1px solid #EEE;
 }
 .notificationWarningList li span {

diff --git a/app/components/ScenariosManager/IsolationTester/IsolationTester.module.css b/app/components/ScenariosManager/IsolationTester/IsolationTester.module.css
@@ -3,7 +3,7 @@
   padding: 20px;
   margin: 20px 0;
   background-color: #f4f4f9;
-  border-radius: 8px;
+  border-radius: var(--border-radius);
   border: 1px solid #eaeaea;
 }
 
@@ -25,7 +25,7 @@
   left: -30px;
   top: 50%;
   transform: translateY(-50%);
-  background: #007bff;
+  background: var(--color-link-focus);
   color: white;
   border-radius: 50%;
   width: 24px;
@@ -36,7 +36,7 @@
 }
 
 .instructionsList a {
-  color: #007bff;
+  color: var(--color-link-focus);
   text-decoration: none;
 }
 
@@ -60,13 +60,13 @@
   width: 100%;
 }
 
-@media (max-width: 1100px) {
+@media (max-width: var(--tablet-breakpoint)) {
   .scenarioGenerator {
     flex-wrap: wrap;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: var(--mobile-breakpoint)) {
   .scenarioGenerator {
     flex-direction: column;
     width: 100%;

diff --git a/app/components/ScenariosManager/ScenarioCSV/ScenarioCSV.module.css b/app/components/ScenariosManager/ScenarioCSV/ScenarioCSV.module.css
@@ -3,7 +3,7 @@
   padding: 20px;
   margin: 20px 0;
   background-color: #f4f4f9;
-  border-radius: 8px;
+  border-radius: var(--border-radius);
   border: 1px solid #eaeaea;
 }
 
@@ -25,7 +25,7 @@
   left: -30px;
   top: 50%;
   transform: translateY(-50%);
-  background: #007bff;
+  background: var(--color-link-focus);
   color: white;
   border-radius: 50%;
   width: 24px;
@@ -36,7 +36,7 @@
 }
 
 .instructionsList a {
-  color: #007bff;
+  color: var(--color-link-focus);
   text-decoration: none;
 }
 

diff --git a/app/components/ScenariosManager/ScenarioFormatter/ScenarioFormatter.module.css b/app/components/ScenariosManager/ScenarioFormatter/ScenarioFormatter.module.css
@@ -5,8 +5,8 @@
   align-items: center; 
   margin: 0;
   background: #f9f9f9;
-  padding: 16px;
+  padding: 1rem;
   border: 1px solid #f0f0f0;
-  border-radius: 8px 8px 0 0;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
   font-weight: normal;
 }
diff --git a/app/components/ScenariosManager/ScenarioGenerator/ScenarioGenerator.module.css b/app/components/ScenariosManager/ScenarioGenerator/ScenarioGenerator.module.css
@@ -2,13 +2,13 @@
   width: 100%;
 }
 
-@media (max-width: 1100px) {
+@media (max-width: var(--tablet-breakpoint)) {
   .scenarioGenerator {
     flex-wrap: wrap;
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: var(--mobile-breakpoint)) {
   .scenarioGenerator {
     flex-direction: column;
     width: 100%;

diff --git a/app/components/ScenariosManager/ScenarioResults/ScenarioResults.module.css b/app/components/ScenariosManager/ScenarioResults/ScenarioResults.module.css
@@ -1,7 +1,7 @@
 .scenarioContainer {
   padding: 20px;
   background-color: #f9f9f9;
-  border-radius: 8px;
+  border-radius: var(--border-radius);
   max-width: 1180px;
 }