From 5ba6c673b1cfcdd9ddb7a72d9171a92d5e43d0c2 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Wed, 4 Jan 2023 11:28:27 +0800
Subject: [PATCH 01/10] task: add icons

---
 .../schema/src/appRevamp/components/Field.tsx | 150 +++++++++++++++++-
 1 file changed, 148 insertions(+), 2 deletions(-)

diff --git a/src/apps/schema/src/appRevamp/components/Field.tsx b/src/apps/schema/src/appRevamp/components/Field.tsx
index e9f8c82f5b..c8bf7d1ebe 100644
--- a/src/apps/schema/src/appRevamp/components/Field.tsx
+++ b/src/apps/schema/src/appRevamp/components/Field.tsx
@@ -1,8 +1,145 @@
 import { useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
-import { Box } from "@mui/material";
+import { Box, ListItem, ListItemIcon, ListItemText } from "@mui/material";
+
 import { ContentModelField } from "../../../../../shell/services/types";
 import DragIndicatorRoundedIcon from "@mui/icons-material/DragIndicatorRounded";
+import PublicRoundedIcon from "@mui/icons-material/PublicRounded";
+import TitleRoundedIcon from "@mui/icons-material/TitleRounded";
+import SubjectRoundedIcon from "@mui/icons-material/SubjectRounded";
+import NewspaperRoundedIcon from "@mui/icons-material/NewspaperRounded";
+import LinkRoundedIcon from "@mui/icons-material/LinkRounded";
+import DocumentScannerRoundedIcon from "@mui/icons-material/DocumentScannerRounded";
+import AccountTreeRoundedIcon from "@mui/icons-material/AccountTreeRounded";
+import AttachmentRoundedIcon from "@mui/icons-material/AttachmentRounded";
+import PaymentsRoundedIcon from "@mui/icons-material/PaymentsRounded";
+import CalendarTodayRoundedIcon from "@mui/icons-material/CalendarTodayRounded";
+import ScheduleRoundedIcon from "@mui/icons-material/ScheduleRounded";
+import PinRoundedIcon from "@mui/icons-material/PinRounded";
+import TagRoundedIcon from "@mui/icons-material/TagRounded";
+import ToggleOnRoundedIcon from "@mui/icons-material/ToggleOnRounded";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import ColorLensRoundedIcon from "@mui/icons-material/ColorLensRounded";
+import FormatListNumberedRoundedIcon from "@mui/icons-material/FormatListNumberedRounded";
+import { Markdown, OneToOne } from "@zesty-io/material";
+
+// TODO: Verify with Zosh the missing icons
+const ICONS: { [key: string]: any } = {
+  article_writer: {
+    icon: <NewspaperRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  color: {
+    icon: <ColorLensRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  currency: {
+    icon: <PaymentsRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  date: {
+    icon: <CalendarTodayRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  datetime: {
+    icon: <ScheduleRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  dropdown: {
+    icon: <KeyboardArrowDownRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  files: {
+    icon: <AttachmentRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  fontawesome: {
+    icon: "",
+    backgroundColor: "",
+    borderColor: "",
+  },
+  images: {
+    icon: <AttachmentRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  internal_link: {
+    icon: <DocumentScannerRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  link: {
+    icon: <LinkRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  markdown: {
+    icon: <Markdown />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  number: {
+    icon: <PinRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  one_to_many: {
+    icon: <AccountTreeRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  one_to_one: {
+    icon: <OneToOne />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  sort: {
+    icon: <FormatListNumberedRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  text: {
+    icon: <TitleRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  textarea: {
+    icon: <SubjectRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  uuid: {
+    icon: "",
+    backgroundColor: "",
+    borderColor: "",
+  },
+  wysiwyg_advanced: {
+    icon: <NewspaperRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  wysiwyg_basic: {
+    icon: <NewspaperRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  yes_no: {
+    icon: <ToggleOnRoundedIcon />,
+    backgroundColor: "",
+    borderColor: "",
+  },
+};
+
+const generateIcon = (type: string) => {
+  return ICONS[type].icon;
+};
 
 interface Props {
   field: ContentModelField;
@@ -66,7 +203,16 @@ export const Field = ({
         onMouseLeave={() => setIsDraggable(false)}
         sx={{ cursor: "grab" }}
       />
-      {field.name}
+      {/* <ListItem>
+        <ListItemIcon sx={{
+          minWidth: '36px',
+        }}>
+          <PublicRoundedIcon />
+        </ListItemIcon>
+        <ListItemText>{field.name}</ListItemText>
+      </ListItem> */}
+      {ICONS[field.datatype].icon}
+      {field.name} - {field.datatype}
     </Box>
   );
 };

From 360ac290786b2d15ff9eee6166bf77f3b0dfa855 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Wed, 4 Jan 2023 13:39:41 +0800
Subject: [PATCH 02/10] task: updated field style

---
 .../schema/src/appRevamp/components/Field.tsx | 195 +++++-------------
 .../schema/src/appRevamp/components/utils.tsx | 148 +++++++++++++
 2 files changed, 195 insertions(+), 148 deletions(-)
 create mode 100644 src/apps/schema/src/appRevamp/components/utils.tsx

diff --git a/src/apps/schema/src/appRevamp/components/Field.tsx b/src/apps/schema/src/appRevamp/components/Field.tsx
index c8bf7d1ebe..5bbf0ccf27 100644
--- a/src/apps/schema/src/appRevamp/components/Field.tsx
+++ b/src/apps/schema/src/appRevamp/components/Field.tsx
@@ -1,145 +1,17 @@
 import { useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
-import { Box, ListItem, ListItemIcon, ListItemText } from "@mui/material";
+import {
+  Box,
+  IconButton,
+  ListItem,
+  ListItemText,
+  ListItemIcon,
+} from "@mui/material";
 
 import { ContentModelField } from "../../../../../shell/services/types";
 import DragIndicatorRoundedIcon from "@mui/icons-material/DragIndicatorRounded";
-import PublicRoundedIcon from "@mui/icons-material/PublicRounded";
-import TitleRoundedIcon from "@mui/icons-material/TitleRounded";
-import SubjectRoundedIcon from "@mui/icons-material/SubjectRounded";
-import NewspaperRoundedIcon from "@mui/icons-material/NewspaperRounded";
-import LinkRoundedIcon from "@mui/icons-material/LinkRounded";
-import DocumentScannerRoundedIcon from "@mui/icons-material/DocumentScannerRounded";
-import AccountTreeRoundedIcon from "@mui/icons-material/AccountTreeRounded";
-import AttachmentRoundedIcon from "@mui/icons-material/AttachmentRounded";
-import PaymentsRoundedIcon from "@mui/icons-material/PaymentsRounded";
-import CalendarTodayRoundedIcon from "@mui/icons-material/CalendarTodayRounded";
-import ScheduleRoundedIcon from "@mui/icons-material/ScheduleRounded";
-import PinRoundedIcon from "@mui/icons-material/PinRounded";
-import TagRoundedIcon from "@mui/icons-material/TagRounded";
-import ToggleOnRoundedIcon from "@mui/icons-material/ToggleOnRounded";
-import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
-import ColorLensRoundedIcon from "@mui/icons-material/ColorLensRounded";
-import FormatListNumberedRoundedIcon from "@mui/icons-material/FormatListNumberedRounded";
-import { Markdown, OneToOne } from "@zesty-io/material";
 
-// TODO: Verify with Zosh the missing icons
-const ICONS: { [key: string]: any } = {
-  article_writer: {
-    icon: <NewspaperRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  color: {
-    icon: <ColorLensRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  currency: {
-    icon: <PaymentsRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  date: {
-    icon: <CalendarTodayRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  datetime: {
-    icon: <ScheduleRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  dropdown: {
-    icon: <KeyboardArrowDownRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  files: {
-    icon: <AttachmentRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  fontawesome: {
-    icon: "",
-    backgroundColor: "",
-    borderColor: "",
-  },
-  images: {
-    icon: <AttachmentRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  internal_link: {
-    icon: <DocumentScannerRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  link: {
-    icon: <LinkRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  markdown: {
-    icon: <Markdown />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  number: {
-    icon: <PinRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  one_to_many: {
-    icon: <AccountTreeRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  one_to_one: {
-    icon: <OneToOne />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  sort: {
-    icon: <FormatListNumberedRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  text: {
-    icon: <TitleRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  textarea: {
-    icon: <SubjectRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  uuid: {
-    icon: "",
-    backgroundColor: "",
-    borderColor: "",
-  },
-  wysiwyg_advanced: {
-    icon: <NewspaperRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  wysiwyg_basic: {
-    icon: <NewspaperRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-  yes_no: {
-    icon: <ToggleOnRoundedIcon />,
-    backgroundColor: "",
-    borderColor: "",
-  },
-};
-
-const generateIcon = (type: string) => {
-  return ICONS[type].icon;
-};
+import { generateIcon } from "./utils";
 
 interface Props {
   field: ContentModelField;
@@ -186,10 +58,17 @@ export const Field = ({
     opacity: isDragging ? 0.5 : 1,
   };
 
+  // TODO: verify what to show when field is not required
+  const secondaryText = `${field.datatype} • ${
+    field.required ? "Required" : "Not Required"
+  } •  ${field.name}`;
+
   return (
     <Box
       minHeight="62px"
-      border="1px solid black"
+      border="1px solid"
+      borderColor="border"
+      borderRadius={1}
       ref={ref}
       sx={style}
       draggable={isDraggable}
@@ -197,22 +76,42 @@ export const Field = ({
       onDrag={handleDrag}
       onDragEnter={handleDragEnter}
       onDragEnd={handleDragEnd}
+      width="600px"
+      bgcolor="common.white"
+      display="flex"
+      alignItems="center"
     >
-      <DragIndicatorRoundedIcon
+      <IconButton
+        size="small"
+        disableRipple
         onMouseEnter={() => setIsDraggable(true)}
         onMouseLeave={() => setIsDraggable(false)}
         sx={{ cursor: "grab" }}
-      />
-      {/* <ListItem>
-        <ListItemIcon sx={{
-          minWidth: '36px',
-        }}>
-          <PublicRoundedIcon />
+      >
+        <DragIndicatorRoundedIcon />
+      </IconButton>
+      <ListItem
+        sx={{
+          py: 1,
+          px: 0,
+        }}
+      >
+        <ListItemIcon sx={{ minWidth: "36px" }}>
+          {generateIcon(field.datatype)}
         </ListItemIcon>
-        <ListItemText>{field.name}</ListItemText>
-      </ListItem> */}
-      {ICONS[field.datatype].icon}
-      {field.name} - {field.datatype}
+        <ListItemText
+          primary={field.label}
+          secondary={secondaryText}
+          primaryTypographyProps={{
+            fontSize: 14,
+            fontWeight: 700,
+          }}
+          secondaryTypographyProps={{
+            // @ts-expect-error missing body3 module augmentation
+            variant: "body3",
+          }}
+        />
+      </ListItem>
     </Box>
   );
 };
diff --git a/src/apps/schema/src/appRevamp/components/utils.tsx b/src/apps/schema/src/appRevamp/components/utils.tsx
new file mode 100644
index 0000000000..72b14dcc57
--- /dev/null
+++ b/src/apps/schema/src/appRevamp/components/utils.tsx
@@ -0,0 +1,148 @@
+import { SvgIconComponent } from "@mui/icons-material";
+import PublicRoundedIcon from "@mui/icons-material/PublicRounded";
+import TitleRounded from "@mui/icons-material/TitleRounded";
+import SubjectRounded from "@mui/icons-material/SubjectRounded";
+import NewspaperRounded from "@mui/icons-material/NewspaperRounded";
+import LinkRounded from "@mui/icons-material/LinkRounded";
+import DocumentScannerRounded from "@mui/icons-material/DocumentScannerRounded";
+import AccountTreeRounded from "@mui/icons-material/AccountTreeRounded";
+import AttachmentRounded from "@mui/icons-material/AttachmentRounded";
+import PaymentsRounded from "@mui/icons-material/PaymentsRounded";
+import CalendarTodayRounded from "@mui/icons-material/CalendarTodayRounded";
+import ScheduleRounded from "@mui/icons-material/ScheduleRounded";
+import PinRounded from "@mui/icons-material/PinRounded";
+import TagRounded from "@mui/icons-material/TagRounded";
+import ToggleOnRounded from "@mui/icons-material/ToggleOnRounded";
+import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
+import ColorLensRounded from "@mui/icons-material/ColorLensRounded";
+import FormatListNumberedRounded from "@mui/icons-material/FormatListNumberedRounded";
+import { Markdown, OneToOne } from "@zesty-io/material";
+import { Box } from "@mui/system";
+import { SvgIcon } from "@mui/material";
+
+// TODO: Verify with Zosh the missing icons
+type Icons = {
+  [key: string]: {
+    icon: SvgIconComponent;
+    backgroundColor: string;
+    borderColor: string;
+  };
+};
+const icons: Icons = {
+  article_writer: {
+    icon: NewspaperRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  color: {
+    icon: ColorLensRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  currency: {
+    icon: PaymentsRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  date: {
+    icon: CalendarTodayRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  datetime: {
+    icon: ScheduleRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  dropdown: {
+    icon: KeyboardArrowDownRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  files: {
+    icon: AttachmentRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  fontawesome: {
+    icon: PublicRoundedIcon,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  images: {
+    icon: AttachmentRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  internal_link: {
+    icon: DocumentScannerRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  link: {
+    icon: LinkRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  markdown: {
+    icon: Markdown as SvgIconComponent,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  number: {
+    icon: PinRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  one_to_many: {
+    icon: AccountTreeRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  one_to_one: {
+    icon: OneToOne as SvgIconComponent,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  sort: {
+    icon: FormatListNumberedRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  text: {
+    icon: TitleRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  textarea: {
+    icon: SubjectRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  uuid: {
+    icon: PublicRoundedIcon,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  wysiwyg_advanced: {
+    icon: NewspaperRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  wysiwyg_basic: {
+    icon: NewspaperRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+  yes_no: {
+    icon: ToggleOnRounded,
+    backgroundColor: "",
+    borderColor: "",
+  },
+};
+
+export const generateIcon = (type: string) => {
+  const icon = icons[type].icon;
+
+  return <SvgIcon component={icon} sx={{ verticalAlign: "middle" }} />;
+};

From a7cdbb3e52b157e8ef333107361f791bb4be20eb Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Wed, 4 Jan 2023 14:45:11 +0800
Subject: [PATCH 03/10] task: updated field icons

---
 .../schema/src/appRevamp/components/utils.tsx | 118 +++++++++++-------
 1 file changed, 73 insertions(+), 45 deletions(-)

diff --git a/src/apps/schema/src/appRevamp/components/utils.tsx b/src/apps/schema/src/appRevamp/components/utils.tsx
index 72b14dcc57..59412631b9 100644
--- a/src/apps/schema/src/appRevamp/components/utils.tsx
+++ b/src/apps/schema/src/appRevamp/components/utils.tsx
@@ -31,118 +31,146 @@ type Icons = {
 const icons: Icons = {
   article_writer: {
     icon: NewspaperRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "green.50",
+    borderColor: "green.500",
   },
   color: {
     icon: ColorLensRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
   },
   currency: {
     icon: PaymentsRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
   },
   date: {
     icon: CalendarTodayRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "deepOrange.50",
+    borderColor: "deepOrange.500",
   },
   datetime: {
     icon: ScheduleRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "deepOrange.50",
+    borderColor: "deepOrange.500",
   },
   dropdown: {
     icon: KeyboardArrowDownRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
   },
   files: {
     icon: AttachmentRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "blue.50",
+    borderColor: "blue.500",
   },
   fontawesome: {
     icon: PublicRoundedIcon,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
   },
   images: {
     icon: AttachmentRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "blue.50",
+    borderColor: "blue.500",
   },
   internal_link: {
     icon: DocumentScannerRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "pink.50",
+    borderColor: "pink.600",
   },
   link: {
     icon: LinkRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "pink.50",
+    borderColor: "pink.600",
   },
   markdown: {
     icon: Markdown as SvgIconComponent,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "green.50",
+    borderColor: "green.500",
   },
   number: {
     icon: PinRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "red.50",
+    borderColor: "red.600",
   },
   one_to_many: {
     icon: AccountTreeRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "pink.50",
+    borderColor: "pink.600",
   },
   one_to_one: {
     icon: OneToOne as SvgIconComponent,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "pink.50",
+    borderColor: "pink.600",
   },
   sort: {
     icon: FormatListNumberedRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
   },
   text: {
     icon: TitleRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "green.50",
+    borderColor: "green.600",
   },
   textarea: {
     icon: SubjectRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "green.50",
+    borderColor: "green.600",
   },
   uuid: {
     icon: PublicRoundedIcon,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
   },
   wysiwyg_advanced: {
     icon: NewspaperRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "green.50",
+    borderColor: "green.500",
   },
   wysiwyg_basic: {
     icon: NewspaperRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "green.50",
+    borderColor: "green.500",
   },
   yes_no: {
     icon: ToggleOnRounded,
-    backgroundColor: "",
-    borderColor: "",
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
   },
 };
 
 export const generateIcon = (type: string) => {
   const icon = icons[type].icon;
+  const borderColor = icons[type].borderColor;
+  const bgcolor = icons[type].backgroundColor;
+  const transform =
+    type === "files" || type === "images" ? "rotate(-45deg)" : "";
 
-  return <SvgIcon component={icon} sx={{ verticalAlign: "middle" }} />;
+  return (
+    <Box
+      border="1px solid red"
+      borderColor={borderColor}
+      borderRadius={1}
+      bgcolor={bgcolor}
+      color={borderColor}
+      width="24px"
+      height="24px"
+      fontSize="12px"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <SvgIcon
+        component={icon}
+        fontSize="inherit"
+        sx={{
+          verticalAlign: "middle",
+          transform,
+          textAlign: "center",
+        }}
+      />
+    </Box>
+  );
 };

From 4c2550028cc26da8f05e7856c30e1e7adcb3dcd6 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 5 Jan 2023 09:13:54 +0800
Subject: [PATCH 04/10] task: updated icon list & show/hide drag icon

---
 .../schema/src/appRevamp/components/Field.tsx | 33 +++++++++++--------
 .../src/appRevamp/components/FieldList.tsx    |  1 +
 .../schema/src/appRevamp/components/utils.tsx | 22 ++++---------
 3 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/src/apps/schema/src/appRevamp/components/Field.tsx b/src/apps/schema/src/appRevamp/components/Field.tsx
index 5bbf0ccf27..b02553b75a 100644
--- a/src/apps/schema/src/appRevamp/components/Field.tsx
+++ b/src/apps/schema/src/appRevamp/components/Field.tsx
@@ -19,6 +19,8 @@ interface Props {
   onReorder: () => void;
   setDraggedIndex: (index: number) => void;
   setHoveredIndex: (index: number) => void;
+  hasDragIcon: boolean;
+  customSecondaryText?: string;
 }
 
 export const Field = ({
@@ -27,6 +29,8 @@ export const Field = ({
   index,
   setDraggedIndex,
   setHoveredIndex,
+  hasDragIcon,
+  customSecondaryText,
 }: Props) => {
   const ref = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
@@ -58,10 +62,11 @@ export const Field = ({
     opacity: isDragging ? 0.5 : 1,
   };
 
-  // TODO: verify what to show when field is not required
-  const secondaryText = `${field.datatype} • ${
-    field.required ? "Required" : "Not Required"
-  } •  ${field.name}`;
+  const secondaryText = customSecondaryText
+    ? customSecondaryText
+    : `${field.datatype} • ${field.required ? "Required" : "Not Required"} •  ${
+        field.name
+      }`;
 
   return (
     <Box
@@ -81,15 +86,17 @@ export const Field = ({
       display="flex"
       alignItems="center"
     >
-      <IconButton
-        size="small"
-        disableRipple
-        onMouseEnter={() => setIsDraggable(true)}
-        onMouseLeave={() => setIsDraggable(false)}
-        sx={{ cursor: "grab" }}
-      >
-        <DragIndicatorRoundedIcon />
-      </IconButton>
+      {hasDragIcon && (
+        <IconButton
+          size="small"
+          disableRipple
+          onMouseEnter={() => setIsDraggable(true)}
+          onMouseLeave={() => setIsDraggable(false)}
+          sx={{ cursor: "grab" }}
+        >
+          <DragIndicatorRoundedIcon />
+        </IconButton>
+      )}
       <ListItem
         sx={{
           py: 1,
diff --git a/src/apps/schema/src/appRevamp/components/FieldList.tsx b/src/apps/schema/src/appRevamp/components/FieldList.tsx
index e436ceddee..b7cdd6a9c1 100644
--- a/src/apps/schema/src/appRevamp/components/FieldList.tsx
+++ b/src/apps/schema/src/appRevamp/components/FieldList.tsx
@@ -44,6 +44,7 @@ export const FieldList = () => {
     >
       {sortedFields?.map((field, index) => (
         <Field
+          hasDragIcon
           key={field.ZUID}
           index={index}
           field={field}
diff --git a/src/apps/schema/src/appRevamp/components/utils.tsx b/src/apps/schema/src/appRevamp/components/utils.tsx
index 59412631b9..df7cbc142e 100644
--- a/src/apps/schema/src/appRevamp/components/utils.tsx
+++ b/src/apps/schema/src/appRevamp/components/utils.tsx
@@ -20,7 +20,12 @@ import { Markdown, OneToOne } from "@zesty-io/material";
 import { Box } from "@mui/system";
 import { SvgIcon } from "@mui/material";
 
-// TODO: Verify with Zosh the missing icons
+/**
+ * TODO: Update icons for the ff once Zosh provides the correct icons:
+ * - UUID
+ * - WYSIWYG
+ * - Article Writer
+ */
 type Icons = {
   [key: string]: {
     icon: SvgIconComponent;
@@ -59,16 +64,6 @@ const icons: Icons = {
     backgroundColor: "purple.50",
     borderColor: "purple.700",
   },
-  files: {
-    icon: AttachmentRounded,
-    backgroundColor: "blue.50",
-    borderColor: "blue.500",
-  },
-  fontawesome: {
-    icon: PublicRoundedIcon,
-    backgroundColor: "purple.50",
-    borderColor: "purple.700",
-  },
   images: {
     icon: AttachmentRounded,
     backgroundColor: "blue.50",
@@ -124,11 +119,6 @@ const icons: Icons = {
     backgroundColor: "purple.50",
     borderColor: "purple.700",
   },
-  wysiwyg_advanced: {
-    icon: NewspaperRounded,
-    backgroundColor: "green.50",
-    borderColor: "green.500",
-  },
   wysiwyg_basic: {
     icon: NewspaperRounded,
     backgroundColor: "green.50",

From b4ad996c86263f2a85ef00ba1c46fa3d07d2132b Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 5 Jan 2023 12:34:45 +0800
Subject: [PATCH 05/10] task: moved field to it's own folder & added field icon
 component

---
 .../appRevamp/components/Field/FieldIcon.tsx  | 169 ++++++++++++++++++
 .../src/appRevamp/components/Field/index.tsx  | 123 +++++++++++++
 2 files changed, 292 insertions(+)
 create mode 100644 src/apps/schema/src/appRevamp/components/Field/FieldIcon.tsx
 create mode 100644 src/apps/schema/src/appRevamp/components/Field/index.tsx

diff --git a/src/apps/schema/src/appRevamp/components/Field/FieldIcon.tsx b/src/apps/schema/src/appRevamp/components/Field/FieldIcon.tsx
new file mode 100644
index 0000000000..8ce1695adf
--- /dev/null
+++ b/src/apps/schema/src/appRevamp/components/Field/FieldIcon.tsx
@@ -0,0 +1,169 @@
+import { SvgIconComponent } from "@mui/icons-material";
+import PublicRoundedIcon from "@mui/icons-material/PublicRounded";
+import TitleRounded from "@mui/icons-material/TitleRounded";
+import SubjectRounded from "@mui/icons-material/SubjectRounded";
+import NewspaperRounded from "@mui/icons-material/NewspaperRounded";
+import LinkRounded from "@mui/icons-material/LinkRounded";
+import DocumentScannerRounded from "@mui/icons-material/DocumentScannerRounded";
+import AccountTreeRounded from "@mui/icons-material/AccountTreeRounded";
+import AttachmentRounded from "@mui/icons-material/AttachmentRounded";
+import PaymentsRounded from "@mui/icons-material/PaymentsRounded";
+import CalendarTodayRounded from "@mui/icons-material/CalendarTodayRounded";
+import ScheduleRounded from "@mui/icons-material/ScheduleRounded";
+import PinRounded from "@mui/icons-material/PinRounded";
+import TagRounded from "@mui/icons-material/TagRounded";
+import ToggleOnRounded from "@mui/icons-material/ToggleOnRounded";
+import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
+import ColorLensRounded from "@mui/icons-material/ColorLensRounded";
+import FormatListNumberedRounded from "@mui/icons-material/FormatListNumberedRounded";
+import { Markdown, OneToOne } from "@zesty-io/material";
+import { Box } from "@mui/system";
+import { SvgIcon } from "@mui/material";
+
+/**
+ * TODO: Update icons for the ff once Zosh provides the correct icons:
+ * - UUID
+ * - WYSIWYG
+ * - Article Writer
+ */
+type Icons = {
+  [key: string]: {
+    icon: SvgIconComponent;
+    backgroundColor: string;
+    borderColor: string;
+  };
+};
+const icons: Icons = {
+  article_writer: {
+    icon: NewspaperRounded,
+    backgroundColor: "green.50",
+    borderColor: "green.500",
+  },
+  color: {
+    icon: ColorLensRounded,
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
+  },
+  currency: {
+    icon: PaymentsRounded,
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
+  },
+  date: {
+    icon: CalendarTodayRounded,
+    backgroundColor: "deepOrange.50",
+    borderColor: "deepOrange.500",
+  },
+  datetime: {
+    icon: ScheduleRounded,
+    backgroundColor: "deepOrange.50",
+    borderColor: "deepOrange.500",
+  },
+  dropdown: {
+    icon: KeyboardArrowDownRounded,
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
+  },
+  images: {
+    icon: AttachmentRounded,
+    backgroundColor: "blue.50",
+    borderColor: "blue.500",
+  },
+  internal_link: {
+    icon: DocumentScannerRounded,
+    backgroundColor: "pink.50",
+    borderColor: "pink.600",
+  },
+  link: {
+    icon: LinkRounded,
+    backgroundColor: "pink.50",
+    borderColor: "pink.600",
+  },
+  markdown: {
+    icon: Markdown as SvgIconComponent,
+    backgroundColor: "green.50",
+    borderColor: "green.500",
+  },
+  number: {
+    icon: PinRounded,
+    backgroundColor: "red.50",
+    borderColor: "red.600",
+  },
+  one_to_many: {
+    icon: AccountTreeRounded,
+    backgroundColor: "pink.50",
+    borderColor: "pink.600",
+  },
+  one_to_one: {
+    icon: OneToOne as SvgIconComponent,
+    backgroundColor: "pink.50",
+    borderColor: "pink.600",
+  },
+  sort: {
+    icon: FormatListNumberedRounded,
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
+  },
+  text: {
+    icon: TitleRounded,
+    backgroundColor: "green.50",
+    borderColor: "green.600",
+  },
+  textarea: {
+    icon: SubjectRounded,
+    backgroundColor: "green.50",
+    borderColor: "green.600",
+  },
+  uuid: {
+    icon: PublicRoundedIcon,
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
+  },
+  wysiwyg_basic: {
+    icon: NewspaperRounded,
+    backgroundColor: "green.50",
+    borderColor: "green.500",
+  },
+  yes_no: {
+    icon: ToggleOnRounded,
+    backgroundColor: "purple.50",
+    borderColor: "purple.700",
+  },
+};
+
+interface Props {
+  type: string;
+}
+export const FieldIcon = ({ type }: Props) => {
+  const icon = icons[type].icon;
+  const borderColor = icons[type].borderColor;
+  const bgcolor = icons[type].backgroundColor;
+  const transform =
+    type === "files" || type === "images" ? "rotate(-45deg)" : "";
+
+  return (
+    <Box
+      border="1px solid red"
+      borderColor={borderColor}
+      borderRadius={1}
+      bgcolor={bgcolor}
+      color={borderColor}
+      width="24px"
+      height="24px"
+      fontSize="12px"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <SvgIcon
+        component={icon}
+        fontSize="inherit"
+        sx={{
+          verticalAlign: "middle",
+          transform,
+          textAlign: "center",
+        }}
+      />
+    </Box>
+  );
+};
diff --git a/src/apps/schema/src/appRevamp/components/Field/index.tsx b/src/apps/schema/src/appRevamp/components/Field/index.tsx
new file mode 100644
index 0000000000..bfff30804a
--- /dev/null
+++ b/src/apps/schema/src/appRevamp/components/Field/index.tsx
@@ -0,0 +1,123 @@
+import { useRef, useState } from "react";
+import { useDrag, useDrop } from "react-dnd";
+import {
+  Box,
+  IconButton,
+  ListItem,
+  ListItemText,
+  ListItemIcon,
+} from "@mui/material";
+
+import { ContentModelField } from "../../../../../../shell/services/types";
+import DragIndicatorRoundedIcon from "@mui/icons-material/DragIndicatorRounded";
+
+import { FieldIcon } from "./FieldIcon";
+
+interface Props {
+  field: ContentModelField;
+  index: number;
+  onReorder: () => void;
+  setDraggedIndex: (index: number) => void;
+  setHoveredIndex: (index: number) => void;
+  hasDragIcon: boolean;
+  secondaryText?: string;
+}
+
+export const Field = ({
+  field,
+  onReorder,
+  index,
+  setDraggedIndex,
+  setHoveredIndex,
+  hasDragIcon,
+  secondaryText,
+}: Props) => {
+  const ref = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isDraggable, setIsDraggable] = useState(false);
+  const handleDragStart = (e: React.DragEvent) => {
+    // console.log('testing', e, e.target, e.currentTarget);
+    // e.preventDefault();
+    // return;
+    // firefox requires this event, it does nothing
+    //event.dataTransfer.setData("text", "");
+    setIsDragging(true);
+    setDraggedIndex(index);
+  };
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+    onReorder();
+  };
+
+  const handleDragEnter = (e: React.DragEvent) => {
+    setHoveredIndex(index);
+  };
+
+  const style = {
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const _secondaryText =
+    secondaryText ||
+    `${field.datatype} • ${field.required ? "Required" : "Not Required"} •  ${
+      field.name
+    }`;
+
+  return (
+    <Box
+      minHeight="62px"
+      border="1px solid"
+      borderColor="border"
+      borderRadius={1}
+      ref={ref}
+      sx={style}
+      draggable={isDraggable}
+      onDragStart={handleDragStart}
+      onDrag={handleDrag}
+      onDragEnter={handleDragEnter}
+      onDragEnd={handleDragEnd}
+      bgcolor="common.white"
+      display="flex"
+      alignItems="center"
+    >
+      {hasDragIcon && (
+        <IconButton
+          size="small"
+          disableRipple
+          onMouseEnter={() => setIsDraggable(true)}
+          onMouseLeave={() => setIsDraggable(false)}
+          sx={{ cursor: "grab" }}
+        >
+          <DragIndicatorRoundedIcon />
+        </IconButton>
+      )}
+      <ListItem
+        sx={{
+          py: 1,
+          px: 0,
+        }}
+      >
+        <ListItemIcon sx={{ minWidth: "36px" }}>
+          <FieldIcon type={field.datatype} />
+        </ListItemIcon>
+        <ListItemText
+          primary={field.label}
+          secondary={_secondaryText}
+          primaryTypographyProps={{
+            fontSize: 14,
+            fontWeight: 700,
+          }}
+          secondaryTypographyProps={{
+            // @ts-expect-error missing body3 module augmentation
+            variant: "body3",
+          }}
+        />
+      </ListItem>
+    </Box>
+  );
+};

From d0abaa47f7d8f0d270f371bfd439e9bc5d0db188 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 5 Jan 2023 12:35:13 +0800
Subject: [PATCH 06/10] task: removed unused files

---
 .../schema/src/appRevamp/components/Field.tsx | 124 -------------
 .../schema/src/appRevamp/components/utils.tsx | 166 ------------------
 2 files changed, 290 deletions(-)
 delete mode 100644 src/apps/schema/src/appRevamp/components/Field.tsx
 delete mode 100644 src/apps/schema/src/appRevamp/components/utils.tsx

diff --git a/src/apps/schema/src/appRevamp/components/Field.tsx b/src/apps/schema/src/appRevamp/components/Field.tsx
deleted file mode 100644
index b02553b75a..0000000000
--- a/src/apps/schema/src/appRevamp/components/Field.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { useRef, useState } from "react";
-import { useDrag, useDrop } from "react-dnd";
-import {
-  Box,
-  IconButton,
-  ListItem,
-  ListItemText,
-  ListItemIcon,
-} from "@mui/material";
-
-import { ContentModelField } from "../../../../../shell/services/types";
-import DragIndicatorRoundedIcon from "@mui/icons-material/DragIndicatorRounded";
-
-import { generateIcon } from "./utils";
-
-interface Props {
-  field: ContentModelField;
-  index: number;
-  onReorder: () => void;
-  setDraggedIndex: (index: number) => void;
-  setHoveredIndex: (index: number) => void;
-  hasDragIcon: boolean;
-  customSecondaryText?: string;
-}
-
-export const Field = ({
-  field,
-  onReorder,
-  index,
-  setDraggedIndex,
-  setHoveredIndex,
-  hasDragIcon,
-  customSecondaryText,
-}: Props) => {
-  const ref = useRef(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [isDraggable, setIsDraggable] = useState(false);
-  const handleDragStart = (e: React.DragEvent) => {
-    // console.log('testing', e, e.target, e.currentTarget);
-    // e.preventDefault();
-    // return;
-    // firefox requires this event, it does nothing
-    //event.dataTransfer.setData("text", "");
-    setIsDragging(true);
-    setDraggedIndex(index);
-  };
-
-  const handleDrag = (e: React.DragEvent) => {
-    e.preventDefault();
-  };
-
-  const handleDragEnd = () => {
-    setIsDragging(false);
-    onReorder();
-  };
-
-  const handleDragEnter = (e: React.DragEvent) => {
-    setHoveredIndex(index);
-  };
-
-  const style = {
-    opacity: isDragging ? 0.5 : 1,
-  };
-
-  const secondaryText = customSecondaryText
-    ? customSecondaryText
-    : `${field.datatype} • ${field.required ? "Required" : "Not Required"} •  ${
-        field.name
-      }`;
-
-  return (
-    <Box
-      minHeight="62px"
-      border="1px solid"
-      borderColor="border"
-      borderRadius={1}
-      ref={ref}
-      sx={style}
-      draggable={isDraggable}
-      onDragStart={handleDragStart}
-      onDrag={handleDrag}
-      onDragEnter={handleDragEnter}
-      onDragEnd={handleDragEnd}
-      width="600px"
-      bgcolor="common.white"
-      display="flex"
-      alignItems="center"
-    >
-      {hasDragIcon && (
-        <IconButton
-          size="small"
-          disableRipple
-          onMouseEnter={() => setIsDraggable(true)}
-          onMouseLeave={() => setIsDraggable(false)}
-          sx={{ cursor: "grab" }}
-        >
-          <DragIndicatorRoundedIcon />
-        </IconButton>
-      )}
-      <ListItem
-        sx={{
-          py: 1,
-          px: 0,
-        }}
-      >
-        <ListItemIcon sx={{ minWidth: "36px" }}>
-          {generateIcon(field.datatype)}
-        </ListItemIcon>
-        <ListItemText
-          primary={field.label}
-          secondary={secondaryText}
-          primaryTypographyProps={{
-            fontSize: 14,
-            fontWeight: 700,
-          }}
-          secondaryTypographyProps={{
-            // @ts-expect-error missing body3 module augmentation
-            variant: "body3",
-          }}
-        />
-      </ListItem>
-    </Box>
-  );
-};
diff --git a/src/apps/schema/src/appRevamp/components/utils.tsx b/src/apps/schema/src/appRevamp/components/utils.tsx
deleted file mode 100644
index df7cbc142e..0000000000
--- a/src/apps/schema/src/appRevamp/components/utils.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { SvgIconComponent } from "@mui/icons-material";
-import PublicRoundedIcon from "@mui/icons-material/PublicRounded";
-import TitleRounded from "@mui/icons-material/TitleRounded";
-import SubjectRounded from "@mui/icons-material/SubjectRounded";
-import NewspaperRounded from "@mui/icons-material/NewspaperRounded";
-import LinkRounded from "@mui/icons-material/LinkRounded";
-import DocumentScannerRounded from "@mui/icons-material/DocumentScannerRounded";
-import AccountTreeRounded from "@mui/icons-material/AccountTreeRounded";
-import AttachmentRounded from "@mui/icons-material/AttachmentRounded";
-import PaymentsRounded from "@mui/icons-material/PaymentsRounded";
-import CalendarTodayRounded from "@mui/icons-material/CalendarTodayRounded";
-import ScheduleRounded from "@mui/icons-material/ScheduleRounded";
-import PinRounded from "@mui/icons-material/PinRounded";
-import TagRounded from "@mui/icons-material/TagRounded";
-import ToggleOnRounded from "@mui/icons-material/ToggleOnRounded";
-import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
-import ColorLensRounded from "@mui/icons-material/ColorLensRounded";
-import FormatListNumberedRounded from "@mui/icons-material/FormatListNumberedRounded";
-import { Markdown, OneToOne } from "@zesty-io/material";
-import { Box } from "@mui/system";
-import { SvgIcon } from "@mui/material";
-
-/**
- * TODO: Update icons for the ff once Zosh provides the correct icons:
- * - UUID
- * - WYSIWYG
- * - Article Writer
- */
-type Icons = {
-  [key: string]: {
-    icon: SvgIconComponent;
-    backgroundColor: string;
-    borderColor: string;
-  };
-};
-const icons: Icons = {
-  article_writer: {
-    icon: NewspaperRounded,
-    backgroundColor: "green.50",
-    borderColor: "green.500",
-  },
-  color: {
-    icon: ColorLensRounded,
-    backgroundColor: "purple.50",
-    borderColor: "purple.700",
-  },
-  currency: {
-    icon: PaymentsRounded,
-    backgroundColor: "purple.50",
-    borderColor: "purple.700",
-  },
-  date: {
-    icon: CalendarTodayRounded,
-    backgroundColor: "deepOrange.50",
-    borderColor: "deepOrange.500",
-  },
-  datetime: {
-    icon: ScheduleRounded,
-    backgroundColor: "deepOrange.50",
-    borderColor: "deepOrange.500",
-  },
-  dropdown: {
-    icon: KeyboardArrowDownRounded,
-    backgroundColor: "purple.50",
-    borderColor: "purple.700",
-  },
-  images: {
-    icon: AttachmentRounded,
-    backgroundColor: "blue.50",
-    borderColor: "blue.500",
-  },
-  internal_link: {
-    icon: DocumentScannerRounded,
-    backgroundColor: "pink.50",
-    borderColor: "pink.600",
-  },
-  link: {
-    icon: LinkRounded,
-    backgroundColor: "pink.50",
-    borderColor: "pink.600",
-  },
-  markdown: {
-    icon: Markdown as SvgIconComponent,
-    backgroundColor: "green.50",
-    borderColor: "green.500",
-  },
-  number: {
-    icon: PinRounded,
-    backgroundColor: "red.50",
-    borderColor: "red.600",
-  },
-  one_to_many: {
-    icon: AccountTreeRounded,
-    backgroundColor: "pink.50",
-    borderColor: "pink.600",
-  },
-  one_to_one: {
-    icon: OneToOne as SvgIconComponent,
-    backgroundColor: "pink.50",
-    borderColor: "pink.600",
-  },
-  sort: {
-    icon: FormatListNumberedRounded,
-    backgroundColor: "purple.50",
-    borderColor: "purple.700",
-  },
-  text: {
-    icon: TitleRounded,
-    backgroundColor: "green.50",
-    borderColor: "green.600",
-  },
-  textarea: {
-    icon: SubjectRounded,
-    backgroundColor: "green.50",
-    borderColor: "green.600",
-  },
-  uuid: {
-    icon: PublicRoundedIcon,
-    backgroundColor: "purple.50",
-    borderColor: "purple.700",
-  },
-  wysiwyg_basic: {
-    icon: NewspaperRounded,
-    backgroundColor: "green.50",
-    borderColor: "green.500",
-  },
-  yes_no: {
-    icon: ToggleOnRounded,
-    backgroundColor: "purple.50",
-    borderColor: "purple.700",
-  },
-};
-
-export const generateIcon = (type: string) => {
-  const icon = icons[type].icon;
-  const borderColor = icons[type].borderColor;
-  const bgcolor = icons[type].backgroundColor;
-  const transform =
-    type === "files" || type === "images" ? "rotate(-45deg)" : "";
-
-  return (
-    <Box
-      border="1px solid red"
-      borderColor={borderColor}
-      borderRadius={1}
-      bgcolor={bgcolor}
-      color={borderColor}
-      width="24px"
-      height="24px"
-      fontSize="12px"
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-    >
-      <SvgIcon
-        component={icon}
-        fontSize="inherit"
-        sx={{
-          verticalAlign: "middle",
-          transform,
-          textAlign: "center",
-        }}
-      />
-    </Box>
-  );
-};

From 317135987d51278bee07e77eba8f8557358b70f4 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 5 Jan 2023 14:28:43 +0800
Subject: [PATCH 07/10] task: added copy zuid button

---
 .../src/appRevamp/components/Field/index.tsx  | 97 +++++++++++++------
 1 file changed, 67 insertions(+), 30 deletions(-)

diff --git a/src/apps/schema/src/appRevamp/components/Field/index.tsx b/src/apps/schema/src/appRevamp/components/Field/index.tsx
index bfff30804a..75d80e7ece 100644
--- a/src/apps/schema/src/appRevamp/components/Field/index.tsx
+++ b/src/apps/schema/src/appRevamp/components/Field/index.tsx
@@ -6,10 +6,13 @@ import {
   ListItem,
   ListItemText,
   ListItemIcon,
+  Button,
 } from "@mui/material";
+import ButtonUnstyled from "@mui/base/ButtonUnstyled";
 
 import { ContentModelField } from "../../../../../../shell/services/types";
 import DragIndicatorRoundedIcon from "@mui/icons-material/DragIndicatorRounded";
+import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
 
 import { FieldIcon } from "./FieldIcon";
 
@@ -68,6 +71,7 @@ export const Field = ({
       field.name
     }`;
 
+  // TODO: Icon colors on hover needs to be verified with Zosh
   return (
     <Box
       minHeight="62px"
@@ -75,7 +79,16 @@ export const Field = ({
       borderColor="border"
       borderRadius={1}
       ref={ref}
-      sx={style}
+      sx={{
+        ...style,
+        "&:hover": {
+          backgroundColor: "action.hover",
+
+          "& button.copy-zuid": {
+            display: "inline-flex",
+          },
+        },
+      }}
       draggable={isDraggable}
       onDragStart={handleDragStart}
       onDrag={handleDrag}
@@ -84,40 +97,64 @@ export const Field = ({
       bgcolor="common.white"
       display="flex"
       alignItems="center"
+      justifyContent="space-between"
     >
-      {hasDragIcon && (
-        <IconButton
-          size="small"
-          disableRipple
-          onMouseEnter={() => setIsDraggable(true)}
-          onMouseLeave={() => setIsDraggable(false)}
-          sx={{ cursor: "grab" }}
+      <Box display="flex">
+        {hasDragIcon && (
+          <IconButton
+            className="drag-handle"
+            size="small"
+            disableRipple
+            onMouseEnter={() => setIsDraggable(true)}
+            onMouseLeave={() => setIsDraggable(false)}
+            sx={{ cursor: "grab" }}
+          >
+            <DragIndicatorRoundedIcon />
+          </IconButton>
+        )}
+        <ListItem
+          sx={{
+            flexShrink: "3",
+            py: 1,
+            px: 0,
+          }}
         >
-          <DragIndicatorRoundedIcon />
-        </IconButton>
-      )}
-      <ListItem
+          <ListItemIcon sx={{ minWidth: "36px" }}>
+            <FieldIcon type={field.datatype} />
+          </ListItemIcon>
+          <ListItemText
+            primary={field.label}
+            secondary={_secondaryText}
+            primaryTypographyProps={{
+              fontSize: 14,
+              fontWeight: 700,
+            }}
+            secondaryTypographyProps={{
+              // @ts-expect-error missing body3 module augmentation
+              variant: "body3",
+            }}
+          />
+        </ListItem>
+      </Box>
+      <Button
+        className="copy-zuid"
+        size="small"
+        variant="outlined"
+        startIcon={<ContentCopyRoundedIcon />}
         sx={{
-          py: 1,
-          px: 0,
+          display: "none",
+          mr: 1,
+          border: "1px solid",
+          borderColor: "border",
+          color: "text.secondary",
+          "&:hover": {
+            borderColor: "border",
+            backgroundColor: "inherit",
+          },
         }}
       >
-        <ListItemIcon sx={{ minWidth: "36px" }}>
-          <FieldIcon type={field.datatype} />
-        </ListItemIcon>
-        <ListItemText
-          primary={field.label}
-          secondary={_secondaryText}
-          primaryTypographyProps={{
-            fontSize: 14,
-            fontWeight: 700,
-          }}
-          secondaryTypographyProps={{
-            // @ts-expect-error missing body3 module augmentation
-            variant: "body3",
-          }}
-        />
-      </ListItem>
+        Copy ZUID
+      </Button>
     </Box>
   );
 };

From 20f6b18b51fe34c3b4356c043e44b407c67c39ef Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Thu, 5 Jan 2023 14:55:19 +0800
Subject: [PATCH 08/10] task: added copy zuid functionality

---
 .../src/appRevamp/components/Field/index.tsx       | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/apps/schema/src/appRevamp/components/Field/index.tsx b/src/apps/schema/src/appRevamp/components/Field/index.tsx
index 75d80e7ece..ae94d3c93a 100644
--- a/src/apps/schema/src/appRevamp/components/Field/index.tsx
+++ b/src/apps/schema/src/appRevamp/components/Field/index.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
 import {
   Box,
@@ -8,7 +8,6 @@ import {
   ListItemIcon,
   Button,
 } from "@mui/material";
-import ButtonUnstyled from "@mui/base/ButtonUnstyled";
 
 import { ContentModelField } from "../../../../../../shell/services/types";
 import DragIndicatorRoundedIcon from "@mui/icons-material/DragIndicatorRounded";
@@ -61,6 +60,16 @@ export const Field = ({
     setHoveredIndex(index);
   };
 
+  const handleCopyZuid = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    try {
+      await navigator.clipboard.writeText(field?.ZUID);
+    } catch (error) {
+      console.error("Failed to copy ZUID", error);
+    }
+  };
+
   const style = {
     opacity: isDragging ? 0.5 : 1,
   };
@@ -141,6 +150,7 @@ export const Field = ({
         size="small"
         variant="outlined"
         startIcon={<ContentCopyRoundedIcon />}
+        onClick={handleCopyZuid}
         sx={{
           display: "none",
           mr: 1,

From 237c779ffe9e1c6279a660b528919fc3580ea2f0 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Fri, 6 Jan 2023 09:06:58 +0800
Subject: [PATCH 09/10] task: updated field styles and added roboto mono font

---
 public/offline.html                           |   5 +
 .../appRevamp/components/Field/FieldIcon.tsx  |  16 +--
 .../src/appRevamp/components/Field/index.tsx  | 125 +++++++++---------
 src/index.html                                |   5 +
 4 files changed, 78 insertions(+), 73 deletions(-)

diff --git a/public/offline.html b/public/offline.html
index e437992747..0c7c26a980 100644
--- a/public/offline.html
+++ b/public/offline.html
@@ -38,6 +38,11 @@
       href="https://fonts.googleapis.com/css?family=Mulish"
     />
 
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono"
+    />
+
     <style type="text/css">
       * {
         margin: 0;
diff --git a/src/apps/schema/src/appRevamp/components/Field/FieldIcon.tsx b/src/apps/schema/src/appRevamp/components/Field/FieldIcon.tsx
index 8ce1695adf..1bec86bc0f 100644
--- a/src/apps/schema/src/appRevamp/components/Field/FieldIcon.tsx
+++ b/src/apps/schema/src/appRevamp/components/Field/FieldIcon.tsx
@@ -16,16 +16,10 @@ import ToggleOnRounded from "@mui/icons-material/ToggleOnRounded";
 import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
 import ColorLensRounded from "@mui/icons-material/ColorLensRounded";
 import FormatListNumberedRounded from "@mui/icons-material/FormatListNumberedRounded";
-import { Markdown, OneToOne } from "@zesty-io/material";
+import { Markdown, OneToOne, EditNote } from "@zesty-io/material";
 import { Box } from "@mui/system";
 import { SvgIcon } from "@mui/material";
 
-/**
- * TODO: Update icons for the ff once Zosh provides the correct icons:
- * - UUID
- * - WYSIWYG
- * - Article Writer
- */
 type Icons = {
   [key: string]: {
     icon: SvgIconComponent;
@@ -35,7 +29,7 @@ type Icons = {
 };
 const icons: Icons = {
   article_writer: {
-    icon: NewspaperRounded,
+    icon: EditNote as SvgIconComponent,
     backgroundColor: "green.50",
     borderColor: "green.500",
   },
@@ -115,9 +109,9 @@ const icons: Icons = {
     borderColor: "green.600",
   },
   uuid: {
-    icon: PublicRoundedIcon,
-    backgroundColor: "purple.50",
-    borderColor: "purple.700",
+    icon: TagRounded,
+    backgroundColor: "red.50",
+    borderColor: "red.600",
   },
   wysiwyg_basic: {
     icon: NewspaperRounded,
diff --git a/src/apps/schema/src/appRevamp/components/Field/index.tsx b/src/apps/schema/src/appRevamp/components/Field/index.tsx
index ae94d3c93a..006d5f7149 100644
--- a/src/apps/schema/src/appRevamp/components/Field/index.tsx
+++ b/src/apps/schema/src/appRevamp/components/Field/index.tsx
@@ -1,20 +1,35 @@
 import React, { useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
-import {
-  Box,
-  IconButton,
-  ListItem,
-  ListItemText,
-  ListItemIcon,
-  Button,
-} from "@mui/material";
+import { Box, IconButton, Typography } from "@mui/material";
 
 import { ContentModelField } from "../../../../../../shell/services/types";
 import DragIndicatorRoundedIcon from "@mui/icons-material/DragIndicatorRounded";
-import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
+import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
 
 import { FieldIcon } from "./FieldIcon";
 
+const typeText: { [key: string]: string } = {
+  article_writer: "Article Writer",
+  color: "Color",
+  currency: "Currency",
+  date: "Date",
+  datetime: "Date and Time",
+  dropdown: "Dropdown",
+  images: "Media",
+  internal_link: "Internal Link",
+  link: "External URL",
+  markdown: "Markdown",
+  number: "Number",
+  one_to_many: "One to Many",
+  one_to_one: "One to One",
+  sort: "Sort",
+  text: "Single Line Text",
+  textarea: "Multi Line Text",
+  uuid: "UUID",
+  wysiwyg_basic: "WYSIWYG",
+  yes_no: "Toggle",
+};
+
 interface Props {
   field: ContentModelField;
   index: number;
@@ -22,7 +37,6 @@ interface Props {
   setDraggedIndex: (index: number) => void;
   setHoveredIndex: (index: number) => void;
   hasDragIcon: boolean;
-  secondaryText?: string;
 }
 
 export const Field = ({
@@ -32,7 +46,6 @@ export const Field = ({
   setDraggedIndex,
   setHoveredIndex,
   hasDragIcon,
-  secondaryText,
 }: Props) => {
   const ref = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
@@ -74,16 +87,9 @@ export const Field = ({
     opacity: isDragging ? 0.5 : 1,
   };
 
-  const _secondaryText =
-    secondaryText ||
-    `${field.datatype} • ${field.required ? "Required" : "Not Required"} •  ${
-      field.name
-    }`;
-
-  // TODO: Icon colors on hover needs to be verified with Zosh
   return (
     <Box
-      minHeight="62px"
+      minHeight="40px"
       border="1px solid"
       borderColor="border"
       borderRadius={1}
@@ -107,8 +113,10 @@ export const Field = ({
       display="flex"
       alignItems="center"
       justifyContent="space-between"
+      pr={1}
+      pl={0.5}
     >
-      <Box display="flex">
+      <Box display="flex" alignItems="center">
         {hasDragIcon && (
           <IconButton
             className="drag-handle"
@@ -121,50 +129,43 @@ export const Field = ({
             <DragIndicatorRoundedIcon />
           </IconButton>
         )}
-        <ListItem
-          sx={{
-            flexShrink: "3",
-            py: 1,
-            px: 0,
-          }}
+        <FieldIcon type={field.datatype} />
+        <Typography px={1.5} variant="body2" fontWeight="700">
+          {field.label}
+        </Typography>
+        <Typography
+          // @ts-expect-error missing body3 module augmentation
+          variant="body3"
+          color="text.secondary"
         >
-          <ListItemIcon sx={{ minWidth: "36px" }}>
-            <FieldIcon type={field.datatype} />
-          </ListItemIcon>
-          <ListItemText
-            primary={field.label}
-            secondary={_secondaryText}
-            primaryTypographyProps={{
-              fontSize: 14,
-              fontWeight: 700,
-            }}
-            secondaryTypographyProps={{
-              // @ts-expect-error missing body3 module augmentation
-              variant: "body3",
-            }}
-          />
-        </ListItem>
+          {typeText[field.datatype]}
+        </Typography>
+      </Box>
+      <Box display="flex" alignItems="center">
+        <Typography
+          component="span"
+          bgcolor="grey.100"
+          border="1px solid"
+          borderColor="grey.100"
+          boxSizing="border-box"
+          borderRadius={1}
+          px={1.25}
+          py={0.5}
+          mr={1}
+          fontFamily="Roboto Mono"
+          fontWeight="400"
+          fontSize="12px"
+          lineHeight="20px"
+          letterSpacing="0.46px"
+          color="text.secondary"
+        >
+          {field.name}
+        </Typography>
+        {/* TODO: More button click action handler, still pending confirmation from zosh on what will happen */}
+        <IconButton>
+          <MoreHorizRoundedIcon />
+        </IconButton>
       </Box>
-      <Button
-        className="copy-zuid"
-        size="small"
-        variant="outlined"
-        startIcon={<ContentCopyRoundedIcon />}
-        onClick={handleCopyZuid}
-        sx={{
-          display: "none",
-          mr: 1,
-          border: "1px solid",
-          borderColor: "border",
-          color: "text.secondary",
-          "&:hover": {
-            borderColor: "border",
-            backgroundColor: "inherit",
-          },
-        }}
-      >
-        Copy ZUID
-      </Button>
     </Box>
   );
 };
diff --git a/src/index.html b/src/index.html
index 7501e6a820..f7f98bfaa4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -66,6 +66,11 @@
       href="https://fonts.googleapis.com/css?family=Mulish"
     />
 
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono"
+    />
+
     <style type="text/css">
       * {
         margin: 0;

From 877c259604ca201987c09aa4c8cf0bac8bb674d0 Mon Sep 17 00:00:00 2001
From: Nar Cuenca <narc.ph@gmail.com>
Date: Fri, 6 Jan 2023 09:07:40 +0800
Subject: [PATCH 10/10] task: removed unused css

---
 src/apps/schema/src/appRevamp/components/Field/index.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/apps/schema/src/appRevamp/components/Field/index.tsx b/src/apps/schema/src/appRevamp/components/Field/index.tsx
index 006d5f7149..a928eb3417 100644
--- a/src/apps/schema/src/appRevamp/components/Field/index.tsx
+++ b/src/apps/schema/src/appRevamp/components/Field/index.tsx
@@ -98,10 +98,6 @@ export const Field = ({
         ...style,
         "&:hover": {
           backgroundColor: "action.hover",
-
-          "& button.copy-zuid": {
-            display: "inline-flex",
-          },
         },
       }}
       draggable={isDraggable}