fix(app): fix NetworkSettings DQA (#13291)

* fix(app): fix NetworkSettings round1 DQA
Opentrons · Aug 22, 2023 · 39b3efc · 39b3efc
1 parent 64d64fc
commit 39b3efc
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 30 deletions.
diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx
@@ -130,6 +130,14 @@ function Input(props: InputFieldProps): JSX.Element {
     }
   `
 
+  const ERROR_TEXT_STYLE = css`
+    color: ${COLORS.errorEnabled};
+    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+      font-size: ${TYPOGRAPHY.fontSize22};
+      color: ${COLORS.red2};
+    }
+  `
+
   return (
     <Flex width="100%" flexDirection={DIRECTION_COLUMN}>
       <Flex css={INPUT_FIELD}>
@@ -161,7 +169,7 @@ function Input(props: InputFieldProps): JSX.Element {
         {props.secondaryCaption != null ? (
           <Flex paddingBottom={SPACING.spacing4}>{props.secondaryCaption}</Flex>
         ) : null}
-        <Flex color={COLORS.errorEnabled}>{props.error}</Flex>
+        <Flex css={ERROR_TEXT_STYLE}>{props.error}</Flex>
       </Flex>
     </Flex>
   )

diff --git a/app/src/organisms/ChildNavigation/index.tsx b/app/src/organisms/ChildNavigation/index.tsx
@@ -8,9 +8,10 @@ import {
   Icon,
   JUSTIFY_FLEX_START,
   JUSTIFY_SPACE_BETWEEN,
+  POSITION_FIXED,
+  RESPONSIVENESS,
   SPACING,
   TYPOGRAPHY,
-  RESPONSIVENESS,
 } from '@opentrons/components'
 import { ODD_FOCUS_VISIBLE } from '../../atoms/buttons/constants'
 
@@ -42,6 +43,11 @@ export function ChildNavigation({
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       paddingX={SPACING.spacing40}
       paddingY={SPACING.spacing32}
+      position={POSITION_FIXED}
+      top="0"
+      left="0"
+      width="100%"
+      backgroundColor={COLORS.white}
     >
       <Flex gridGap={SPACING.spacing16} justifyContent={JUSTIFY_FLEX_START}>
         <IconButton onClick={onClickBack}>

diff --git a/app/src/organisms/NetworkSettings/DisplayWifiList.tsx b/app/src/organisms/NetworkSettings/DisplayWifiList.tsx
@@ -24,6 +24,17 @@ import { DisplaySearchNetwork } from './DisplaySearchNetwork'
 import type { WifiNetwork } from '../../redux/networking/types'
 
 const NETWORK_ROW_STYLE = css`
+  display: ${DISPLAY_FLEX};
+  width: 100%;
+  height: 5rem;
+  padding: ${SPACING.spacing20} ${SPACING.spacing32};
+  align-items: ${ALIGN_CENTER};
+  grid-gap: ${SPACING.spacing16};
+
+  background-color: ${COLORS.light1};
+  margin-bottom: ${SPACING.spacing8};
+  border-radius: ${BORDERS.borderRadiusSize4};
+
   &:hover {
     border: none;
     box-shadow: none;
@@ -81,18 +92,9 @@ export function DisplayWifiList({
         {list != null && list.length > 0
           ? list.map(nw => (
               <Btn
-                display={DISPLAY_FLEX}
-                width="100%"
-                height="5rem"
                 key={nw.ssid}
-                backgroundColor={COLORS.light1}
-                marginBottom={SPACING.spacing8}
-                borderRadius={BORDERS.borderRadiusSize3}
                 css={NETWORK_ROW_STYLE}
                 flexDirection={DIRECTION_ROW}
-                padding={`${SPACING.spacing20} ${SPACING.spacing32}`}
-                alignItems={ALIGN_CENTER}
-                gridGap={SPACING.spacing4}
                 onClick={() => handleNetworkPress(nw.ssid)}
               >
                 <Icon name="wifi" size="2.5rem" />

diff --git a/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx b/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx
@@ -95,7 +95,7 @@ export function SelectAuthenticationType({
               />
             ))}
           </Flex>
-          <Flex marginTop="1.75rem">
+          <Flex marginY={SPACING.spacing24}>
             <StyledText
               as="h4"
               fontWeight={TYPOGRAPHY.fontWeightRegular}
@@ -106,11 +106,11 @@ export function SelectAuthenticationType({
           </Flex>
           <Btn
             display={DISPLAY_FLEX}
-            marginTop={SPACING.spacing40}
             width="100%"
             alignItems={ALIGN_CENTER}
             justifyContent={JUSTIFY_CENTER}
             onClick={() => setShowAlternativeSecurityTypeModal(true)}
+            padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
           >
             <StyledText
               as="p"

diff --git a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx
@@ -149,6 +149,7 @@ export function DeviceReset({
         gridGap={SPACING.spacing24}
         flexDirection={DIRECTION_COLUMN}
         paddingX={SPACING.spacing40}
+        marginTop="7.75rem"
       >
         <Flex gridGap={SPACING.spacing8} flexDirection={DIRECTION_COLUMN}>
           {availableOptions.map(option => {

diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/EthernetConnectionDetails.tsx
@@ -50,6 +50,7 @@ export function EthernetConnectionDetails(
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing8}
         paddingX={SPACING.spacing40}
+        marginTop="7.75rem"
       >
         {/* IP Address */}
         <EthernetDetailsRow

diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx
@@ -3,17 +3,18 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 import {
-  Flex,
-  SPACING,
+  ALIGN_CENTER,
+  BORDERS,
+  Btn,
   COLORS,
-  TYPOGRAPHY,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
-  Icon,
-  Btn,
-  BORDERS,
-  ALIGN_CENTER,
   DISPLAY_FLEX,
+  Flex,
+  Icon,
+  JUSTIFY_SPACE_BETWEEN,
+  SPACING,
+  TYPOGRAPHY,
 } from '@opentrons/components'
 
 import { StyledText } from '../../../atoms/text'
@@ -68,7 +69,7 @@ export function WifiConnectionDetails({
           securityType={connectedWifiAuthType}
         />
       ) : null}
-      <Flex flexDirection={DIRECTION_COLUMN}>
+      <Flex flexDirection={DIRECTION_COLUMN} marginTop="7.75rem">
         {activeSsid != null ? (
           <Flex
             flexDirection={DIRECTION_COLUMN}
@@ -91,9 +92,14 @@ export function WifiConnectionDetails({
               onClick={() => setShowNetworkDetailModal(true)}
               alignItems={ALIGN_CENTER}
             >
-              <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing24}>
+              <Flex
+                flexDirection={DIRECTION_ROW}
+                gridGap={SPACING.spacing24}
+                width="100%"
+                justifyContent={JUSTIFY_SPACE_BETWEEN}
+              >
                 <Flex gridGap={SPACING.spacing8} width="34.8125rem">
-                  <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing4}>
+                  <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing16}>
                     <Icon
                       name="wifi"
                       size="2.5rem"
@@ -112,18 +118,15 @@ export function WifiConnectionDetails({
                 <Flex
                   alignItems={ALIGN_CENTER}
                   flexDirection={DIRECTION_ROW}
-                  gridGap={SPACING.spacing12}
+                  gridGap={SPACING.spacing10}
                 >
                   <Icon
                     size="2.5rem"
                     name="info"
                     aria-label={`${activeSsid}_info_icon`}
+                    color={COLORS.darkBlack100}
                   />
-                  <StyledText
-                    as="p"
-                    fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-                    color={COLORS.darkBlack70}
-                  >
+                  <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
                     {t('view_details')}
                   </StyledText>
                 </Flex>
@@ -137,6 +140,7 @@ export function WifiConnectionDetails({
             fontWeight={TYPOGRAPHY.fontWeightSemiBold}
             color={COLORS.darkBlack70}
             paddingX={SPACING.spacing40}
+            marginBottom={SPACING.spacing8}
           >
             {t('other_networks')}
           </StyledText>

diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx
@@ -55,6 +55,7 @@ export function NetworkSettings({
         onClickBack={() => setCurrentOption(null)}
       />
       <Flex
+        marginTop="7.75rem"
         paddingX={SPACING.spacing40}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing8}

diff --git a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx
@@ -74,6 +74,7 @@ export function RobotSystemVersion({
           gridGap="16rem"
           flexDirection={DIRECTION_COLUMN}
           paddingX={SPACING.spacing40}
+          marginTop="7.75rem"
         >
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing24}>
             <StyledText as="p">{`${t(

diff --git a/app/src/organisms/RobotSettingsDashboard/TouchScreenSleep.tsx b/app/src/organisms/RobotSettingsDashboard/TouchScreenSleep.tsx
@@ -64,6 +64,7 @@ export function TouchScreenSleep({
         gridGap={SPACING.spacing8}
         paddingX={SPACING.spacing40}
         paddingBottom={SPACING.spacing40}
+        marginTop="7.75rem"
       >
         {settingsButtons.map(radio => (
           <RadioButton

diff --git a/app/src/organisms/RobotSettingsDashboard/TouchscreenBrightness.tsx b/app/src/organisms/RobotSettingsDashboard/TouchscreenBrightness.tsx
@@ -85,6 +85,7 @@ export function TouchscreenBrightness({
         gridGap={SPACING.spacing24}
         paddingX={SPACING.spacing60}
         paddingY={SPACING.spacing120}
+        marginTop="7.75rem"
       >
         <IconButton
           disabled={brightness === LOWEST_BRIGHTNESS}

diff --git a/app/src/organisms/RobotSettingsDashboard/UpdateChannel.tsx b/app/src/organisms/RobotSettingsDashboard/UpdateChannel.tsx
@@ -68,7 +68,11 @@ export function UpdateChannel({
         header={t('app_settings:update_channel')}
         onClickBack={handleBackPress}
       />
-      <Flex flexDirection={DIRECTION_COLUMN} paddingX={SPACING.spacing40}>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        paddingX={SPACING.spacing40}
+        marginTop="7.75rem"
+      >
         <StyledText
           fontSize={TYPOGRAPHY.fontSize28}
           lineHeight={TYPOGRAPHY.lineHeight36}