fix(AccessCodeTable): layout broken on mobile (#574)

seamapi · Dec 5, 2023 · 973e093 · 973e093
1 parent c4138d4
commit 973e093
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 10 deletions.
diff --git a/src/lib/seam/components/AccessCodeTable/AccessCodeMainIcon.tsx b/src/lib/seam/components/AccessCodeTable/AccessCodeMainIcon.tsx
@@ -0,0 +1,65 @@
+import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
+import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
+import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
+import type { UseAccessCodesData } from 'lib/seam/access-codes/use-access-codes.js'
+
+export interface AccessCodeMainIconProps {
+  accessCode: UseAccessCodesData[number]
+}
+
+export function AccessCodeMainIcon({
+  accessCode,
+}: AccessCodeMainIconProps): JSX.Element {
+  const errorCount = accessCode.errors.length
+  const warningCount = accessCode.warnings.length
+  const isPlural = errorCount === 0 || errorCount > 1
+  const errorIconTitle = isPlural
+    ? `${errorCount} ${t.codeIssues}`
+    : `${errorCount} ${t.codeIssue}`
+  const warningIconTitle = isPlural
+    ? `${warningCount} ${t.codeIssues}`
+    : `${warningCount} ${t.codeIssue}`
+
+  if (errorCount > 0) {
+    return (
+      <>
+        <div
+          className='seam-issue-icon-wrap seam-md-invisible'
+          title={errorIconTitle}
+        >
+          <ExclamationCircleOutlineIcon />
+        </div>
+        <div className='seam-invisible seam-md-flex'>
+          <AccessCodeKeyIcon />
+        </div>
+      </>
+    )
+  }
+
+  if (errorCount === 0 && warningCount > 0) {
+    return (
+      <>
+        <div
+          className='seam-issue-icon-wrap seam-md-invisible'
+          title={warningIconTitle}
+        >
+          <TriangleWarningOutlineIcon />
+        </div>
+        <div className='seam-invisible seam-md-flex'>
+          <AccessCodeKeyIcon />
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <div className='seam-issue-icon-wrap'>
+      <AccessCodeKeyIcon />
+    </div>
+  )
+}
+
+const t = {
+  codeIssue: 'code issue',
+  codeIssues: 'code issues',
+}
diff --git a/src/lib/seam/components/AccessCodeTable/AccessCodeRow.tsx b/src/lib/seam/components/AccessCodeTable/AccessCodeRow.tsx
@@ -1,7 +1,7 @@
-import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
 import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
 import type { UseAccessCodesData } from 'lib/seam/access-codes/use-access-codes.js'
+import { AccessCodeMainIcon } from 'lib/seam/components/AccessCodeTable/AccessCodeMainIcon.js'
 import { AccessCodeMenu } from 'lib/seam/components/AccessCodeTable/AccessCodeMenu.js'
 import { CodeDetails } from 'lib/seam/components/AccessCodeTable/CodeDetails.js'
 import { TableCell } from 'lib/ui/Table/TableCell.js'
@@ -36,22 +36,26 @@ export function AccessCodeRow({
   return (
     <TableRow onClick={onClick}>
       <TableCell className='seam-icon-cell'>
-        <div>
-          <AccessCodeKeyIcon />
-        </div>
+        <AccessCodeMainIcon accessCode={accessCode} />
       </TableCell>
       <TableCell className='seam-name-cell'>
         <Title className='seam-truncated-text'>{accessCode.name}</Title>
         <CodeDetails accessCode={accessCode} />
       </TableCell>
       <TableCell className='seam-action-cell'>
         {errorCount > 0 && (
-          <div className='seam-issue-icon-wrap' title={errorIconTitle}>
+          <div
+            className='seam-issue-icon-wrap seam-invisible seam-md-flex'
+            title={errorIconTitle}
+          >
             <ExclamationCircleOutlineIcon />
           </div>
         )}
         {errorCount === 0 && warningCount > 0 && (
-          <div className='seam-issue-icon-wrap' title={warningIconTitle}>
+          <div
+            className='seam-issue-icon-wrap seam-invisible seam-md-flex'
+            title={warningIconTitle}
+          >
             <TriangleWarningOutlineIcon />
           </div>
         )}

diff --git a/src/lib/seam/components/AccessCodeTable/CodeDetails.tsx b/src/lib/seam/components/AccessCodeTable/CodeDetails.tsx
@@ -17,7 +17,8 @@ export function CodeDetails(props: { accessCode: AccessCode }): JSX.Element {
       <DotDivider />
       <Duration accessCode={accessCode} />
       <DotDivider />
-      {t.code}: {accessCode.code}
+      <span className='seam-invisible seam-md-block'>{t.code}: </span>
+      {accessCode.code}
     </div>
   )
 }

diff --git a/src/styles/_main.scss b/src/styles/_main.scss
@@ -5,6 +5,7 @@
 @use './alert';
 @use './buttons';
 @use './layout';
+@use './visibility';
 @use './loading_toast';
 @use './colors';
 @use './icons';
@@ -41,6 +42,7 @@
   @include form-field.all;
   @include buttons.all;
   @include layout.all;
+  @include visibility.all;
   @include loading_toast.all;
   @include icons.all;
   @include menus.all;

diff --git a/src/styles/_seam-table.scss b/src/styles/_seam-table.scss
@@ -27,11 +27,17 @@
         justify-content: center;
 
         > div {
-          width: 40px;
+          width: 32px;
           height: 40px;
           display: flex;
           align-items: center;
           justify-content: center;
+          margin-right: 4px;
+
+          @media only screen and (width >= 768px) {
+            width: 40px;
+            margin-right: 4px;
+          }
         }
       }
 
@@ -48,10 +54,15 @@
         }
 
         .seam-details {
-          font-size: 14px;
+          font-size: 12px;
           line-height: 134%;
           color: colors.$text-gray-1;
           display: flex;
+          flex-wrap: wrap;
+
+          @media only screen and (width >= 768px) {
+            font-size: 14px;
+          }
 
           .seam-device-name {
             max-width: 190px;
@@ -66,10 +77,14 @@
       }
 
       .seam-action-cell {
-        margin-right: 12px;
+        margin-right: 8px;
         display: flex;
         align-items: center;
         justify-content: center;
+
+        @media only screen and (width >= 768px) {
+          margin-right: 12px;
+        }
       }
 
       .seam-issue-icon-wrap {

diff --git a/src/styles/_visibility.scss b/src/styles/_visibility.scss
@@ -0,0 +1,25 @@
+@use './colors';
+
+@mixin all {
+  .seam-invisible {
+    display: none !important;
+  }
+
+  .seam-md-flex {
+    @media only screen and (width >= 768px) {
+      display: flex !important;
+    }
+  }
+
+  .seam-md-block {
+    @media only screen and (width >= 768px) {
+      display: block !important;
+    }
+  }
+
+  .seam-md-invisible {
+    @media only screen and (width >= 768px) {
+      display: none !important;
+    }
+  }
+}