Make "Enter" buttons shorter using default styles (#84)

Author: artem-blazhko

CHANGELOG.md

@@ -1,7 +1,7 @@
 # Change history for ui-requests-mediated
 
 ## 2.1.0 (IN PROGRESS)
-
+* Make "Enter" buttons shorter using default styles. Refs UIREQMED-71.
 
 ## [2.0.1] (https://github.com/folio-org/ui-requests-mediated/tree/v2.0.1) (2024-12-06)
 [Full Changelog](https://github.com/folio-org/ui-requests-mediated/compare/v2.0.0...v2.0.1)

src/components/MediatedRequestsActivities/components/InstanceInformation/InstanceInformation.css

@@ -0,0 +1,8 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.instanceHridField {
+  margin-right: 20px;
+}

src/components/MediatedRequestsActivities/components/InstanceInformation/InstanceInformation.js

@@ -25,6 +25,8 @@ import {
 import TitleInformation from '../TitleInformation';
 import { memoizeValidation } from '../../../../utils';
 
+import css from './InstanceInformation.css';
+
 export const INSTANCE_SEGMENT_FOR_PLUGIN = 'instances';
 
 class InstanceInformation extends Component {
@@ -210,7 +212,10 @@ class InstanceInformation extends Component {
       <Row>
         <Col xs={12}>
           <Row>
-            <Col xs={9}>
+            <Col
+              xs={12}
+              className={css.fieldWrapper}
+            >
               <FormattedMessage id="ui-requests-mediated.form.instance.inputPlaceholder">
                 {placeholder => {
                   const key = values.keyOfInstanceIdField ?? 0;
@@ -239,20 +244,18 @@ class InstanceInformation extends Component {
                             onBlur={this.handleBlur(input)}
                             onKeyDown={this.onKeyDown}
                             disabled={!isEditPermission}
+                            className={css.instanceHridField}
                           />
                         );
                       }}
                     </Field>
                   );
                 }}
               </FormattedMessage>
-            </Col>
-            <Col xs={3}>
               <Button
                 id="selectInstanceButton"
-                buttonStyle="primary noRadius"
+                buttonStyle="default"
                 buttonClass={enterButtonClass}
-                fullWidth
                 onClick={this.handleClick}
                 disabled={isEnterButtonDisabled}
               >

src/components/MediatedRequestsActivities/components/ItemInformation/ItemInformation.css

@@ -0,0 +1,8 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.itemBarcodeField {
+  margin-right: 20px;
+}

src/components/MediatedRequestsActivities/components/ItemInformation/ItemInformation.js

@@ -23,6 +23,8 @@ import {
 import ItemDetail from '../ItemDetail';
 import { memoizeValidation } from '../../../../utils';
 
+import css from './ItemInformation.css';
+
 class ItemInformation extends Component {
   static propTypes = {
     triggerValidation: PropTypes.func.isRequired,
@@ -211,7 +213,10 @@ class ItemInformation extends Component {
       <Row>
         <Col xs={12}>
           <Row>
-            <Col xs={9}>
+            <Col
+              xs={12}
+              className={css.fieldWrapper}
+            >
               <FormattedMessage id="ui-requests-mediated.form.item.inputPlaceholder">
                 {placeholder => {
                   const key = values.keyOfItemBarcodeField ?? 0;
@@ -240,20 +245,18 @@ class ItemInformation extends Component {
                             onBlur={this.handleBlur(input)}
                             onKeyDown={this.onKeyDown}
                             disabled={!isEditPermission}
+                            className={css.itemBarcodeField}
                           />
                         );
                       }}
                     </Field>
                   );
                 }}
               </FormattedMessage>
-            </Col>
-            <Col xs={3}>
               <Button
                 id="selectItemButton"
-                buttonStyle="primary noRadius"
+                buttonStyle="default"
                 buttonClass={enterButtonClass}
-                fullWidth
                 onClick={this.handleClick}
                 disabled={isEnterButtonDisabled}
               >

src/components/MediatedRequestsActivities/components/RequesterInformation/RequesterInformation.css

@@ -0,0 +1,8 @@
+.fieldWrapper {
+  display: flex;
+  align-items: start;
+}
+
+.requesterBarcodeField {
+  margin-right: 20px;
+}

src/components/MediatedRequestsActivities/components/RequesterInformation/RequesterInformation.js

@@ -29,6 +29,8 @@ import {
   DEFAULT_REQUEST_TYPE_VALUE,
 } from '../../../../constants';
 
+import css from './RequesterInformation.css';
+
 export const VISIBLE_COLUMNS = ['active', 'name', 'patronGroup', 'username', 'barcode'];
 export const COLUMN_MAPPING = {
   name: <FormattedMessage id="ui-requests-mediated.form.requesterLookup.name" />,
@@ -248,7 +250,10 @@ class RequesterInformation extends Component {
       <Row>
         <Col xs={12}>
           <Row>
-            <Col xs={9}>
+            <Col
+              xs={12}
+              className={css.fieldWrapper}
+            >
               <FormattedMessage id="ui-requests-mediated.form.requester.inputPlaceholder">
                 {placeholder => {
                   const key = values.keyOfUserBarcodeField ?? 0;
@@ -277,41 +282,39 @@ class RequesterInformation extends Component {
                             onBlur={this.handleBlur(input)}
                             onKeyDown={this.onKeyDown}
                             disabled={!isEditPermission}
+                            className={css.requesterBarcodeField}
                           />
                         );
                       }}
                     </Field>
                   );
                 }}
               </FormattedMessage>
-              {
-                isEditPermission &&
-                  <Pluggable
-                    aria-haspopup="true"
-                    type="find-user"
-                    searchLabel={<FormattedMessage id="ui-requests-mediated.form.requester.lookupLabel" />}
-                    searchButtonStyle="link"
-                    dataKey="users"
-                    selectUser={this.onSelectUser}
-                    visibleColumns={VISIBLE_COLUMNS}
-                    columnMapping={COLUMN_MAPPING}
-                    disableRecordCreation
-                    marginTop0
-                  />
-              }
-            </Col>
-            <Col xs={3}>
               <Button
-                buttonStyle="primary noRadius"
+                buttonStyle="default"
                 buttonClass={enterButtonClass}
-                fullWidth
                 onClick={this.handleClick}
                 disabled={isEnterButtonDisabled}
               >
                 <FormattedMessage id="ui-requests-mediated.form.enterButton" />
               </Button>
             </Col>
           </Row>
+          {
+            isEditPermission &&
+              <Pluggable
+                aria-haspopup="true"
+                type="find-user"
+                searchLabel={<FormattedMessage id="ui-requests-mediated.form.requester.lookupLabel" />}
+                searchButtonStyle="link"
+                dataKey="users"
+                selectUser={this.onSelectUser}
+                visibleColumns={VISIBLE_COLUMNS}
+                columnMapping={COLUMN_MAPPING}
+                disableRecordCreation
+                marginTop0
+              />
+          }
           {
             isLoading && <Icon {...BASE_SPINNER_PROPS} />
           }