WIP

Author: microbit-matt-hillsdon

src/components/DataSamplesTableHints.tsx

@@ -11,6 +11,7 @@ import ActionDataSamplesCard from "./ActionDataSamplesCard";
 import GreetingEmojiWithArrow from "./GreetingEmojiWithArrow";
 import { RecordingOptions } from "./RecordingDialog";
 import UpCurveArrow from "./UpCurveArrow";
+import Emoji from "./Emoji";
 
 interface DataSamplesTableHintsProps {
   action: ActionData;
@@ -27,6 +28,7 @@ const DataSamplesTableHints = ({
       {action.name.length === 0 ? (
         <GridItem h="120px">
           <VStack m={0} p={2} w={200} transform="translate(-30px, 40px)">
+            <Emoji boxSize={16} color="blue.500" transform="rotate(-8deg)" />
             <GreetingEmojiWithArrow w="120px" h="103px" color="brand.500" />
             <Text textAlign="center">
               <FormattedMessage id="name-action-hint" />

src/components/Emoji.tsx

@@ -0,0 +1,29 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+
+const Emoji = (props: IconProps) => {
+  return (
+    <Icon {...props} viewBox="0 0 124 101">
+      <path
+        d="M34.3787 28.5268C30.3355 28.5268 27.0609 31.9787 27.0609 36.2347C27.0609 40.488 30.3355 43.9414 34.3787 43.9414C38.4136 43.9414 41.6875 40.488 41.6875 36.2347C41.6875 31.9787 38.4136 28.5268 34.3787 28.5268Z"
+        fill="currentColor"
+      />
+      {/* Left eye */}
+      <path
+        d="M88.874 0.0159531V0.00657654H34.1453V0.0159531C14.6584 0.173286 0 15.7146 0 36.3026C0 56.6373 14.4073 72.0239 33.6396 72.4399V72.46H88.5953C108.233 72.46 123.041 56.9173 123.041 36.3026C123.041 15.7093 108.371 0.162621 88.874 0.0159531ZM88.5953 57.0106L34.1084 56.9999C23.3745 56.8133 14.726 47.5906 14.726 36.2346C14.726 24.7599 23.5516 15.4586 34.4396 15.4586H88.5953C99.4792 15.4586 108.307 24.7599 108.307 36.2346C108.307 47.7092 99.4792 57.0106 88.5953 57.0106Z"
+        fill="currentColor"
+      />
+      {/* Right eye */}
+      <path
+        d="M88.5651 43.9426C92.6084 43.9426 95.8792 40.4906 95.8792 36.2346C95.8792 31.98 92.6084 28.5267 88.5651 28.5267C84.526 28.5267 81.2521 31.98 81.2521 36.2346C81.2521 40.4906 84.526 43.9426 88.5651 43.9426Z"
+        fill="currentColor"
+      />
+      {/* Smile */}
+      <path
+        d="M61.8344 93.8294C57.7797 93.8294 54.4271 90.7241 53.7677 86.6548H47.5807C48.2287 94.4961 54.1355 100.248 61.8344 100.248C69.5251 100.248 75.4317 94.4961 76.0803 86.6548H69.8969C69.2355 90.7241 65.8812 93.8294 61.8344 93.8294Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+};
+
+export default Emoji;