feat(protocol-designer): use CSS Modules for Landing page component

use CSS Modules for Landing page component

close AUTH-

Author: koji

app/package.json

@@ -30,7 +30,6 @@
     "@opentrons/step-generation": "link:../step-generation",
     "@thi.ng/paths": "1.6.5",
     "@types/uuid": "^3.4.7",
-    "classnames": "2.2.5",
     "connected-react-router": "6.9.3",
     "core-js": "3.2.1",
     "date-fns": "2.25.0",
@@ -69,7 +68,6 @@
   },
   "devDependencies": {
     "@tanstack/react-query-devtools": "5.59.16",
-    "@types/classnames": "2.2.5",
     "@types/file-saver": "2.0.1",
     "@types/jszip": "3.1.7",
     "@types/mixpanel-browser": "^2.35.6",

package.json

@@ -78,6 +78,7 @@
     "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "2.0.7",
     "babel-plugin-unassert": "^3.0.1",
+    "classnames": "2.5.1",
     "concurrently": "8.2.2",
     "conventional-changelog": "^3.1.25",
     "core-js": "^3.6.4",

protocol-designer/src/pages/Landing/Landing.module.css

@@ -0,0 +1,48 @@
+.label {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.label input[type='file'] {
+  display: none;
+}
+
+.buttonText {
+  line-height: 1.5rem; /* 24px */
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 600; /* semibold */
+}
+
+.navLink {
+  color: white;
+  text-decoration: none;
+}
+
+.hiddenInput {
+  display: none;
+}
+
+.landingPage {
+  display: flex;
+  background-color: #f7f8fa; /* COLORS.grey10 */
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: calc(100vh - 9rem);
+  width: 100%;
+  gap: 2rem; /* SPACING.spacing32 */
+}
+
+.contentSection {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem; /* SPACING.spacing16 */
+}
+
+.textSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem; /* SPACING.spacing8 */
+  align-items: center;
+}

protocol-designer/src/pages/Landing/index.tsx

@@ -2,19 +2,12 @@ import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { NavLink, useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
 
 import {
-  ALIGN_CENTER,
   BasicButton,
   COLORS,
-  CURSOR_POINTER,
-  DIRECTION_COLUMN,
-  Flex,
   INFO_TOAST,
-  JUSTIFY_CENTER,
   LargeButton,
-  SPACING,
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
@@ -32,8 +25,9 @@ import {
   localStorageAnnouncementKey,
   setLocalStorageItem,
 } from '../../persist'
+import styles from './Landing.module.css'
 
-import type { ChangeEvent, ComponentProps } from 'react'
+import type { ChangeEvent } from 'react'
 import type { ThunkDispatch } from '../../types'
 
 import welcomeImage from '../../assets/images/welcome_page.png'
@@ -80,7 +74,7 @@ export function Landing(): JSX.Element {
             setShowAnnouncementModal(true)
           },
           disableTimeout: true,
-          justifyContent: JUSTIFY_CENTER,
+          justifyContent: 'center',
         }
       )
     }
@@ -113,28 +107,15 @@ export function Landing(): JSX.Element {
           }}
         />
       ) : null}
-      <Flex
-        data-cy="landing-page"
-        backgroundColor={COLORS.grey10}
-        flexDirection={DIRECTION_COLUMN}
-        alignItems={ALIGN_CENTER}
-        justifyContent={JUSTIFY_CENTER}
-        height="calc(100vh - 9rem)"
-        width="100%"
-        gridGap={SPACING.spacing32}
-      >
-        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
+      <div data-cy="landing-page" className={styles.landingPage}>
+        <div className={styles.contentSection}>
           <img
             src={welcomeImage}
             height="132px"
             width="548px"
             aria-label="welcome image"
           />
-          <Flex
-            flexDirection={DIRECTION_COLUMN}
-            gridGap={SPACING.spacing8}
-            alignItems={ALIGN_CENTER}
-          >
+          <div className={styles.textSection}>
             <StyledText desktopStyle="headingLargeBold">
               {t('welcome')}
             </StyledText>
@@ -146,53 +127,34 @@ export function Landing(): JSX.Element {
             >
               {t('no-code-required')}
             </StyledText>
-          </Flex>
-        </Flex>
-        <StyledNavLink to="/createNew">
+          </div>
+        </div>
+        <NavLink to="/createNew" className={styles.navLink}>
           <LargeButton
             onClick={() => {
               dispatch(toggleNewProtocolModal(true))
             }}
-            buttonText={<ButtonText>{t('create_a_protocol')}</ButtonText>}
+            buttonText={
+              <span className={styles.buttonText}>
+                {t('create_a_protocol')}
+              </span>
+            }
           />
-        </StyledNavLink>
-        <StyledLabel>
+        </NavLink>
+        <label className={styles.label}>
           <BasicButton onClick={handleImportClick} underLine>
             {t('import_existing_protocol')}
           </BasicButton>
-          <StyledInput
+          <input
             type="file"
             onChange={loadFile}
             ref={fileInputRef}
             aria-label={t('import')}
+            className={styles.hiddenInput}
           />
-        </StyledLabel>
-      </Flex>
+        </label>
+      </div>
       <EndUserAgreementFooter />
     </>
   )
 }
-
-const StyledLabel = styled.label`
-  display: inline-block;
-  cursor: ${CURSOR_POINTER};
-  input[type='file'] {
-    display: none;
-  }
-`
-
-const ButtonText = styled.span`
-  line-height: ${TYPOGRAPHY.lineHeight24};
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
-`
-
-const StyledNavLink = styled(NavLink)<ComponentProps<typeof NavLink>>`
-  color: ${COLORS.white};
-  text-decoration: none;
-`
-
-const StyledInput = styled.input`
-  display: none;
-`

yarn.lock

@@ -3786,7 +3786,6 @@
     "@opentrons/step-generation" "link:step-generation"
     "@thi.ng/paths" "1.6.5"
     "@types/uuid" "^3.4.7"
-    classnames "2.2.5"
     connected-react-router "6.9.3"
     core-js "3.2.1"
     date-fns "2.25.0"
@@ -8955,6 +8954,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
   integrity sha512-DTt3GhOUDKhh4ONwIJW4lmhyotQmV2LjNlGK/J2hkwUcqcbKkCLAdJPtxQnxnlc7SR3f1CEXCyMmc7WLUsWbNA==
 
+[email protected]:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 [email protected]:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"