Merge pull request #1855 from RafaelTaranto/fix/ui-migration-fixes

LAM-1421 fix: UI migration fixes

packages/admin-ui/src/components/inputs/base/ToggleButtonGroup.jsx

@@ -14,6 +14,7 @@ const ToggleButtonGroup = ({
 }) => {
   return (
     <MUIToggleButtonGroup
+      className="flex flex-col gap-4"
       size={size}
       name={name}
       orientation={orientation}

packages/admin-ui/src/components/inputs/cashbox/Cashbox.module.css

@@ -27,8 +27,9 @@
   margin-top: 8px;
 }
 
+/*TODO important because of tailwind integration with MUI*/
 .fullPartP {
-  color: white;
+  color: white !important;
   display: inline;
 }
 

packages/admin-ui/src/components/table/TableRow.jsx

@@ -4,7 +4,8 @@ import React, { memo } from 'react'
 const TableRow = memo(
   ({ className, children, header, error, success, size = 'sm', ...props }) => {
     const classnamesObj = {
-      'p-1 h-12 bg-white': !header,
+      'p-1 bg-white': !header,
+      'h-12': !header && size !== 'sm' && size !== 'lg',
       'h-8': !header && size === 'sm',
       'h-9 font-bold text-base ': !header && size === 'lg',
       'bg-misty-rose': error,

packages/admin-ui/src/pages/Dashboard/Alerts/Alerts.jsx

@@ -1,6 +1,5 @@
 import { useQuery, gql } from '@apollo/client'
 import Button from '@mui/material/Button'
-import Grid from '@mui/material/Grid'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React from 'react'
@@ -56,11 +55,9 @@ const Alerts = ({ onReset, onExpand, size }) => {
           </Label1>
         )}
       </div>
-      <Grid
-        className={classnames({ 'm-0': true, 'max-h-115': showAllItems })}
-        container
-        spacing={1}>
-        <Grid item xs={12}>
+      <div
+        className={classnames({ 'm-0 mt-2': true, 'max-h-115': showAllItems })}>
+        <div className="w-full flex-1">
           {!alerts.length && (
             <Label1 className="text-comet -ml-1 h-30">
               No new alerts. Your system is running smoothly.
@@ -71,10 +68,10 @@ const Alerts = ({ onReset, onExpand, size }) => {
             alerts={alerts}
             machines={machines}
           />
-        </Grid>
-      </Grid>
+        </div>
+      </div>
       {!showAllItems && alertsLength > NUM_TO_RENDER && (
-        <Grid item xs={12}>
+        <div>
           <Label1 className="text-center mb-0">
             <Button
               onClick={() => onExpand('alerts')}
@@ -85,7 +82,7 @@ const Alerts = ({ onReset, onExpand, size }) => {
               {`Show all (${alerts.length})`}
             </Button>
           </Label1>
-        </Grid>
+        </div>
       )}
     </>
   )

packages/admin-ui/src/pages/Machines/Machines.jsx

@@ -100,7 +100,7 @@ const Machines = ({ data, refetch, reload }) => {
   const machineID = R.path(['deviceId'])(machine) ?? null
 
   return (
-    <div className="flex flex-1 h-full gap-12">
+    <div className="flex flex-1 h-full gap-12 mb-12">
       <div className="basis-1/4 min-w-1/4 pt-8">
         <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
           <Link to="/dashboard" className="no-underline">