UI Tweaks on stock operations and user role scope (openmrs#34)

jabahum · Dec 5, 2023 · ce8ef71 · ce8ef71
1 parent 7c97add
commit ce8ef71
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/...ck-operations/stock-operation-types-selector/stock-operation-types-selector.component.tsx b/...ck-operations/stock-operation-types-selector/stock-operation-types-selector.component.tsx
@@ -32,12 +32,13 @@ const StockOperationTypesSelector: React.FC<
       )}
       menuOffset={{ right: "-100px" }}
       style={{
-        backgroundColor: "#0f62fe !important",
+        backgroundColor: "#007d79",
         backgroundImage: "none",
         color: "#fff",
-        minHeight: "1em",
+        minHeight: "1rem",
         padding: ".95rem !important",
-        width: "auto",
+        width: "8rem",
+        marginRight: "0.5rem",
         whiteSpace: "nowrap",
       }}
     >

diff --git a/src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.component.tsx b/src/stock-user-role-scopes/add-stock-user-scope/add-stock-user-role-scope.component.tsx
@@ -16,8 +16,11 @@ import {
   useStockOperationTypes,
 } from "../../stock-lookups/stock-lookups.resource";
 import { ResourceRepresentation } from "../../core/api/api";
+import { closeOverlay } from "../../core/components/overlay/hook";
+import { useTranslation } from "react-i18next";
 
 const AddStockUserRoleScope: React.FC = () => {
+  const { t } = useTranslation();
   // get stock sources
   // operation types
   const {
@@ -76,7 +79,7 @@ const AddStockUserRoleScope: React.FC = () => {
               stockOperations.map((type) => {
                 return (
                   <div style={{ display: "flex", flexDirection: "row" }}>
-                    <Checkbox labelText={type.name} id="operationType" />
+                    <Checkbox labelText={type.name} id={type.operationType} />
                   </div>
                 );
               })}
@@ -93,12 +96,14 @@ const AddStockUserRoleScope: React.FC = () => {
           <CheckboxGroup className={styles.section}>
             {locations?.length > 0 &&
               locations.map((type) => {
-                return <Checkbox labelText={type.name} id="locations" />;
+                return <Checkbox labelText={type.name} id={type.uuid} />;
               })}
           </CheckboxGroup>
         </ModalBody>
         <ModalFooter>
-          <Button kind="secondary">Cancel</Button>
+          <Button kind="secondary" onClick={closeOverlay}>
+            {t("cancel", "Cancel")}
+          </Button>
           <Button type="submit">Save</Button>
         </ModalFooter>
       </Form>