Update version handling and dev bar styling.

bcgov · Nov 28, 2024 · 4adc2c2 · 4adc2c2
1 parent 3e2146f
commit 4adc2c2
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/app/components/RuleManager/RuleManager.module.css b/app/components/RuleManager/RuleManager.module.css
@@ -12,7 +12,11 @@
   width: calc(100vw - 15px);
   height: 103%;
   background: transparent;
-  background-color: var(--version-color);
+  background: linear-gradient(
+    to bottom, 
+    var(--version-color) 0%,
+    transparent 170%
+  );
   z-index: -1;
   opacity: 0.1;
 }

diff --git a/app/components/VersionBar/VersionBar.tsx b/app/components/VersionBar/VersionBar.tsx
@@ -10,7 +10,10 @@ interface VersionBarProps {
   version?: string;
 }
 
-export default function VersionBar({ ruleInfo, version = RULE_VERSION.inProduction }: VersionBarProps) {
+export default function VersionBar({
+  ruleInfo,
+  version = process.env.NEXT_PUBLIC_IN_PRODUCTION ? RULE_VERSION.inProduction : RULE_VERSION.inDev,
+}: VersionBarProps) {
   const versionColor = getVersionColor(version);
 
   const getButtonStyle = (buttonVersion: RULE_VERSION) => {

diff --git a/app/rule/[ruleId]/page.tsx b/app/rule/[ruleId]/page.tsx
@@ -25,9 +25,11 @@ export async function generateMetadata({ params, searchParams }: Props): Promise
 }
 
 export default async function Rule({ params: { ruleId }, searchParams }: Props) {
-  // Get version of rule to use
-  const { version = process.env.NEXT_PUBLIC_IN_PRODUCTION ? RULE_VERSION.inProduction : RULE_VERSION.inDev } =
-    searchParams;
+  const version = searchParams.version?.trim()
+    ? searchParams.version
+    : process.env.NEXT_PUBLIC_IN_PRODUCTION
+    ? RULE_VERSION.inProduction
+    : RULE_VERSION.inDev;
 
   const oAuthRequired = version === RULE_VERSION.draft; // only require oauth if editing a draft
   // Ensure user is first logged into github so they can save what they edit

diff --git a/app/styles/layout.module.css b/app/styles/layout.module.css
@@ -5,10 +5,12 @@
 }
 
 .alertBanner {
-  width: 100%;
+  position: relative;
+  left: 0;
+  right: 0;
   background: purple;
   margin: -8px 0 8px -8px;
-  width: calc(100% + 16px);
+  width: calc(100% + 8px);
   border-radius: 0;
   padding: 4px;
   color: white;