Merge branch 'dev' into feature/#498-calculate-bounds-add-some-extra-…

…spacing

src/common/components/icons/caret-down-icon.component.tsx

@@ -0,0 +1,15 @@
+export const CaretDown = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="m213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 48 88h160a8 8 0 0 1 5.66 13.66"
+      />
+    </svg>
+  );
+};

src/common/components/icons/index.ts

@@ -10,3 +10,4 @@ export * from './copy-icon.component';
 export * from './paste-icon.component';
 export * from './delete-icon.component';
 export * from './pencil-icon.component';
+export * from './caret-down-icon.component';

src/pods/thumb-pages/components/thumb-page.module.css

@@ -4,8 +4,28 @@
   border: 3px solid;
   border-color: black;
   border-radius: 5px;
-  position: 'relative';
+  position: relative;
   background-color: white;
   margin-top: 10px;
   padding: 5px;
+  padding-bottom: 0px;
+}
+
+.icon-container > svg {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+}
+
+.icon-container > svg:hover {
+  background-color: var(--primary-100);
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
 }

src/pods/thumb-pages/components/thumb-page.tsx

@@ -8,6 +8,7 @@ import { Layer, Stage } from 'react-konva';
 import { calculateScaleBasedOnBounds } from './thumb-page.business';
 import { ThumbPageContextMenu } from './context-menu';
 import { useContextMenu } from '../use-context-menu-thumb.hook';
+import { CaretDown } from '@/common/components/icons';
 import classes from './thumb-page.module.css';
 
 interface Props {
@@ -57,6 +58,12 @@ export const ThumbPage: React.FunctionComponent<Props> = props => {
             })}
           </Layer>
         </Stage>
+        <span
+          onClick={handleShowContextMenu}
+          className={classes['icon-container']}
+        >
+          <CaretDown />
+        </span>
         {showContextMenu && (
           <ThumbPageContextMenu
             contextMenuRef={contextMenuRef}