refactor(toolbox): responsiveness and cleanup

src/pages/create/index.tsx

@@ -132,109 +132,109 @@ export const CreatePage = () => {
   const [toolbox] = useState<DrawTool[]>([
     {
       identifier: MarkType.TEXT,
-      icon: <FontAwesomeIcon icon={faT} />,
+      icon: faT,
       label: 'Text',
       active: true
     },
     {
       identifier: MarkType.SIGNATURE,
-      icon: <FontAwesomeIcon icon={faSignature} />,
+      icon: faSignature,
       label: 'Signature',
       active: false
     },
     {
       identifier: MarkType.JOBTITLE,
-      icon: <FontAwesomeIcon icon={faBriefcase} />,
+      icon: faBriefcase,
       label: 'Job Title',
       active: false
     },
     {
       identifier: MarkType.FULLNAME,
-      icon: <FontAwesomeIcon icon={faIdCard} />,
+      icon: faIdCard,
       label: 'Full Name',
       active: false
     },
     {
       identifier: MarkType.INITIALS,
-      icon: <FontAwesomeIcon icon={faHeading} />,
+      icon: faHeading,
       label: 'Initials',
       active: false
     },
     {
       identifier: MarkType.DATETIME,
-      icon: <FontAwesomeIcon icon={faClock} />,
+      icon: faClock,
       label: 'Date Time',
       active: false
     },
     {
       identifier: MarkType.DATE,
-      icon: <FontAwesomeIcon icon={faCalendarDays} />,
+      icon: faCalendarDays,
       label: 'Date',
       active: false
     },
     {
       identifier: MarkType.NUMBER,
-      icon: <FontAwesomeIcon icon={fa1} />,
+      icon: fa1,
       label: 'Number',
       active: false
     },
     {
       identifier: MarkType.IMAGES,
-      icon: <FontAwesomeIcon icon={faImage} />,
+      icon: faImage,
       label: 'Images',
       active: false
     },
     {
       identifier: MarkType.CHECKBOX,
-      icon: <FontAwesomeIcon icon={faSquareCheck} />,
+      icon: faSquareCheck,
       label: 'Checkbox',
       active: false
     },
     {
       identifier: MarkType.MULTIPLE,
-      icon: <FontAwesomeIcon icon={faCheckDouble} />,
+      icon: faCheckDouble,
       label: 'Multiple',
       active: false
     },
     {
       identifier: MarkType.FILE,
-      icon: <FontAwesomeIcon icon={faPaperclip} />,
+      icon: faPaperclip,
       label: 'File',
       active: false
     },
     {
       identifier: MarkType.RADIO,
-      icon: <FontAwesomeIcon icon={faCircleDot} />,
+      icon: faCircleDot,
       label: 'Radio',
       active: false
     },
     {
       identifier: MarkType.SELECT,
-      icon: <FontAwesomeIcon icon={faSquareCaretDown} />,
+      icon: faSquareCaretDown,
       label: 'Select',
       active: false
     },
     {
       identifier: MarkType.CELLS,
-      icon: <FontAwesomeIcon icon={faTableCellsLarge} />,
+      icon: faTableCellsLarge,
       label: 'Cells',
       active: false
     },
     {
       identifier: MarkType.STAMP,
-      icon: <FontAwesomeIcon icon={faStamp} />,
+      icon: faStamp,
       label: 'Stamp',
       active: false
     },
     {
       identifier: MarkType.PAYMENT,
-      icon: <FontAwesomeIcon icon={faCreditCard} />,
+      icon: faCreditCard,
       label: 'Payment',
       active: false
     },
     {
       identifier: MarkType.PHONE,
-      icon: <FontAwesomeIcon icon={faPhone} />,
+      icon: faPhone,
       label: 'Phone',
       active: false
     }
@@ -1020,20 +1020,16 @@ export const CreatePage = () => {
                   return (
                     <div
                       key={index}
-                      onClick={
-                        drawTool.active
-                          ? () => {
-                              handleToolSelect(drawTool)
-                            }
-                          : () => null
-                      }
+                      {...(drawTool.active && {
+                        onClick: () => handleToolSelect(drawTool)
+                      })}
                       className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
                       `}
                     >
-                      {drawTool.icon}
+                      <FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
                       {drawTool.label}
                       {drawTool.active ? (
-                        <FontAwesomeIcon icon={faEllipsis} />
+                        <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
                       ) : (
                         <span
                           style={{

src/pages/create/style.module.scss

@@ -4,6 +4,8 @@
   display: flex;
   flex-direction: column;
   gap: 15px;
+
+  container-type: inline-size;
 }
 
 .orderedFilesList {
@@ -130,26 +132,36 @@
 
 .toolbox {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr;
+
+  @container (min-width: 204px) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @container (min-width: 309px) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
   gap: 15px;
 
   max-height: 450px;
   overflow-x: hidden;
   overflow-y: auto;
+
+  container-type: inline-size;
 }
 
 .toolItem {
-  width: 90px;
-  height: 90px;
-
   transition: ease 0.2s;
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
   gap: 5px;
   border-radius: 4px;
   padding: 10px 5px 5px 5px;
   background: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.5);
+
+  text-align: center;
   align-items: center;
   justify-content: center;
   font-size: 14px;
@@ -162,7 +174,7 @@
     color: white;
   }
 
-  &:not(.selected) {
+  &:not(.selected, .comingSoon) {
     &:hover {
       background: $primary-light;
       color: white;

src/types/drawing.ts

@@ -1,3 +1,4 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { MarkRect } from './mark'
 
 export interface MouseState {
@@ -27,7 +28,7 @@ export interface DrawnField extends MarkRect {
 export interface DrawTool {
   identifier: MarkType
   label: string
-  icon: JSX.Element
+  icon: IconDefinition
   defaultValue?: string
   selected?: boolean
   active?: boolean