Design Lint with UX Flow

app/lib/components/navigation/primary-workmode-select.tsx

@@ -55,6 +55,11 @@ const WorkmodeLabel = styled.h3<Props>`
   font-size: 21px;
   letter-spacing: 0em;
   cursor: pointer;
+  user-select: none;
+
+  // reset for h3 init style
+  margin: 0;
+  margin-top: 8px;
 
   &:first-child {
     margin-right: 12px;

app/lib/components/navigation/secondary-workmode-choice.tsx

@@ -25,6 +25,7 @@ const Title = styled.h6`
   text-transform: capitalize;
   margin: 0; // for reset h6 inital margin
   margin-right: 10px;
+  user-select: none;
 
   /* &:nth-child(3n) {
     margin-right: 0;

app/lib/components/navigation/secondary-workmode-menu.tsx

@@ -12,7 +12,7 @@ export function SecondaryWorkmodeMenu(props: {
 }) {
   return (
     <Wrapper>
-      <Column>
+      <Column style={{ marginTop: "4px" }}>
         <Row style={{ marginBottom: "4px" }}>
           {props.menus.map((menu, index) => {
             if (index < 3) {

app/lib/components/navigation/workmode-screen-tabs.tsx

@@ -34,6 +34,7 @@ export function WorkmodeScreenTabs(props: {
       TabIndicatorProps={{
         style: {
           display: "none",
+          userSelect: "none",
         },
       }}
     >

app/lib/components/style/global-style.ts

@@ -11,6 +11,7 @@ export const ButtonStyle = css`
   box-sizing: border-box;
   padding-top: 16px;
   padding-bottom: 16px;
+  cursor: pointer;
 
   // FIXME: CHEKC IS RIGHT capitalize?
   text-transform: capitalize;
@@ -28,6 +29,12 @@ export const BlackButton = css`
     color: #fff;
     background: #17181a;
   }
+
+  &:disabled {
+    background: #949494;
+    color: #bbb;
+    border: 1px solid #949494;
+  }
 `;
 
 export const WhtieButton = css`
@@ -39,10 +46,12 @@ export const WhtieButton = css`
 
 export const TransparencyButton = css`
   ${ButtonStyle}
-  color: #C1C1C1;
+  color: #c1c1c1;
+  border: 0;
+  background: rgba(255, 255, 255, 0);
 
   &:hover {
-    background: rgba(255, 255, 255, 0);
+    background: rgba(255, 255, 255, 0.3);
   }
 `;
 

app/lib/pages/lint/lint-colors.ts → app/lib/lint/lint-colors.ts

@@ -1,5 +1,5 @@
 export enum Level {
-  warn = "warn",
+  warn = "warning",
   error = "error",
   none = "none",
   ignore = "ignore",

app/lib/lint/lint-error-icon.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+export enum LintError {
+  text = "missingTextStyle",
+  name = "nameError",
+  mdi = "mdiTexture",
+  color = "missingColorStyleError",
+}
+
+interface Props {
+  id?: string;
+}
+
+export function LintErrorIcon(props: Props) {
+  const MdiTextureIcon =
+    require("../components/assets/mdi-texture.svg") as string;
+  const ColorErrorIcon =
+    require("../components/assets/missing-color-style-error.svg") as string;
+  const TextErrorIcon =
+    require("../components/assets/missing-text.svg") as string;
+  const NameErrorIcon =
+    require("../components/assets/name-error.svg") as string;
+
+  switch (props.id) {
+    case LintError.text:
+      return <img src={TextErrorIcon} />;
+    case LintError.name:
+      return <img src={NameErrorIcon} />;
+    case LintError.mdi:
+      return <img src={MdiTextureIcon} />;
+    case LintError.color:
+      return <img src={ColorErrorIcon} />;
+    default:
+      return <></>;
+  }
+}

app/lib/lint/lint-item-row/lint-item-row.tsx

@@ -1,24 +1,124 @@
-import * as React from "react"
-
+import * as React from "react";
+import styled from "@emotion/styled";
+import { LintError, LintErrorIcon } from "../lint-error-icon";
+import { LintLevelIndicator } from "../lint-level-indicator";
+import { choiceItem } from "../lint-list-view";
+import { OptionChoiceItem } from "../../pages/lint/lint-option-choice-item";
 
 interface Props {
-    onTap: Function
-    name: string
-    icon?: any
+  onTap: Function;
+  name: string;
+  icon?: any;
+  expand: boolean;
+  level: string;
+  error: {
+    id: string;
+    name: string;
+    userMessage: string;
+  };
+  children?: any;
 }
 
-interface State {
-
+function Options(children: any[]) {
+  return (
+    <>
+      {children.map((item, i) => {
+        return <OptionChoiceItem key={i} {...item} />;
+      })}
+    </>
+  );
 }
 
-export class LintItemRow extends React.Component<Props, State> {
-    constructor(props) {
-        super(props)
-    }
+export function LintItemRow(props: Props) {
+  const CloseIcon = require("../../components/assets/close.svg") as string;
+  const ExpandIcon = require("../../components/assets/expand.svg") as string;
+
+  return (
+    <Wrapper>
+      <Outer onClick={() => props.onTap()}>
+        <Inner>
+          <IconWrapper>
+            <LintErrorIcon id={props.icon} />
+          </IconWrapper>
+
+          <Title>{props.error.name}</Title>
+          <IndicatorWrapper>
+            <LintLevelIndicator color={props.level} />
+          </IndicatorWrapper>
+
+          {props.expand ? <img src={CloseIcon} /> : <img src={ExpandIcon} />}
+        </Inner>
+        <SubTitle>{props.error.userMessage}</SubTitle>
+      </Outer>
 
-    render() {
-        return <>
-            <p>{this.props.name}</p>
-        </>
-    }
+      <ChoiceWrapper display={props.expand}>
+        {Options([choiceItem])}
+      </ChoiceWrapper>
+    </Wrapper>
+  );
 }
+
+const Wrapper = styled.div`
+  background: #fff;
+  height: 100px;
+  margin-bottom: 16px;
+
+  // for reset parent margin
+  margin-right: -16px;
+  margin-left: -16px;
+  padding: 16px;
+  padding-bottom: 32px;
+
+  &:hover {
+    background: #fcfcfc;
+  }
+`;
+
+const Outer = styled.div`
+  padding-bottom: 32px;
+  cursor: pointer;
+`;
+
+const Inner = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const IconWrapper = styled.div`
+  margin-right: 6px;
+`;
+
+const IndicatorWrapper = styled.div`
+  margin-right: 10px;
+`;
+
+const Title = styled.h6`
+  margin: 0;
+  margin-right: auto;
+
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 20px;
+  color: #202020;
+`;
+
+const SubTitle = styled.h6`
+  margin: 0;
+  font-size: 12px;
+  line-height: 14px;
+  margin-top: 4px;
+  max-width: 262px;
+
+  color: #666666;
+`;
+
+const ChoiceWrapper = styled.div<{ display: boolean }>`
+  margin-bottom: 5px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  display: ${(props) => (props.display ? "block" : "none")};
+`;

app/lib/pages/lint/lint-level-indicator.tsx → app/lib/lint/lint-level-indicator.tsx

@@ -4,15 +4,15 @@ import * as React from "react";
 import { Level } from "./lint-colors";
 
 interface ILintLevelIndicator {
-  color: Level;
+  color: string;
 }
 
 export function LintLevelIndicator(props: ILintLevelIndicator) {
   return <Indicator color={props.color} />;
 }
 
 interface IIndicator {
-  color: Level;
+  color: string;
 }
 
 const Indicator = styled.div<IIndicator>`
@@ -21,19 +21,19 @@ const Indicator = styled.div<IIndicator>`
   border-radius: 50%;
 
   ${(props) =>
-    props.color === Level.warn
+    props.color == Level.warn
       ? css`
           background: #ffc700;
         `
-      : props.color === Level.error
+      : props.color == Level.error
       ? css`
           background: #ff3a3a;
         `
-      : props.color === Level.ignore
+      : props.color == Level.ignore
       ? css`
           background: #c6c6c6;
         `
-      : props.color === Level.todo
+      : props.color == Level.todo
       ? css`
           background: #000;
         `

app/lib/lint/lint-list-view/index.tsx

@@ -0,0 +1,25 @@
+/** @deprecated this is dummy. replace me */
+export const dummy = "dummy";
+
+export const choiceItem = {
+  selected: false,
+  choice: {
+    title: "choice 1",
+    explanation: "I’ll choose this option to resolve this issue.",
+  },
+};
+
+export const rowDummy = {
+  onTap: function T() {
+    // FIXME: here is setState
+  },
+  name: "hi",
+  icon: "missingTextStyle",
+  expand: false, // FIXME: here is state
+  level: "warning",
+  error: {
+    id: "id",
+    name: "Error name",
+    userMessage: "This error is caused by “layer-name” and needs to be fixed.",
+  },
+};