player and share

www/app/styles/icons/pause.tsx

@@ -0,0 +1,14 @@
+import { Icon } from "@chakra-ui/react";
+
+export default function PauseIcon(props) {
+  return (
+    <Icon viewBox="0 0 30 30" {...props}>
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.514 5.5C11.514 4.11929 10.3947 3 9.01404 3C7.63333 3 6.51404 4.11929 6.51404 5.5V24.5C6.51404 25.8807 7.63333 27 9.01404 27C10.3947 27 11.514 25.8807 11.514 24.5L11.514 5.5ZM23.486 5.5C23.486 4.11929 22.3667 3 20.986 3C19.6053 3 18.486 4.11929 18.486 5.5L18.486 24.5C18.486 25.8807 19.6053 27 20.986 27C22.3667 27 23.486 25.8807 23.486 24.5V5.5Z"
+      />
+    </Icon>
+  );
+}

www/app/styles/icons/play.tsx

@@ -0,0 +1,12 @@
+import { Icon } from "@chakra-ui/react";
+
+export default function PlayIcon(props) {
+  return (
+    <Icon viewBox="0 0 30 30" {...props}>
+      <path
+        fill="currentColor"
+        d="M27 13.2679C28.3333 14.0377 28.3333 15.9622 27 16.732L10.5 26.2583C9.16666 27.0281 7.5 26.0659 7.5 24.5263L7.5 5.47372C7.5 3.93412 9.16667 2.97187 10.5 3.74167L27 13.2679Z"
+      />
+    </Icon>
+  );
+}

www/app/styles/recorder.js

@@ -1,20 +1,26 @@
+import { theme } from "@chakra-ui/react";
+
 export const waveSurferStyles = {
   playerSettings: {
-    waveColor: "#777",
-    progressColor: "#222",
-    cursorColor: "OrangeRed",
+    waveColor: theme.colors.blue[500],
+    progressColor: theme.colors.blue[700],
+    cursorColor: theme.colors.red[500],
+    hideScrollbar: true,
+    autoScroll: false,
+    autoCenter: false,
+    barWidth: 3,
+    barGap: 2,
+    cursorWidth: 2,
   },
   playerStyle: {
     cursor: "pointer",
-    backgroundColor: "RGB(240 240 240)",
-    borderRadius: "15px",
   },
   marker: `
     border-left: solid 1px orange;
     padding: 0 2px 0 5px;
     font-size: 0.7rem;
     border-radius: 0 3px 3px 0;
-
+    top: 0;
     width: 100px;
     max-width: fit-content;
     cursor: pointer;
@@ -25,5 +31,5 @@ export const waveSurferStyles = {
     transition: width 100ms linear;
     z-index: 0;
   `,
-  markerHover: { backgroundColor: "orange" },
+  markerHover: { backgroundColor: theme.colors.gray[200] },
 };

www/app/styles/theme.ts

@@ -0,0 +1,66 @@
+// 1. Import `extendTheme`
+import { extendTheme } from "@chakra-ui/react";
+
+import { accordionAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react";
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(accordionAnatomy.keys);
+
+const custom = definePartsStyle({
+  container: {
+    border: "0",
+    borderRadius: "8px",
+    backgroundColor: "white",
+    mb: 2,
+    mr: 2,
+  },
+  panel: {
+    pl: 8,
+    pb: 0,
+  },
+  button: {
+    justifyContent: "flex-start",
+    pl: 2,
+  },
+});
+
+const accordionTheme = defineMultiStyleConfig({
+  variants: { custom },
+});
+
+export const colors = {
+  blue: {
+    primary: "#3158E2",
+    500: "#3158E2",
+    light: "#B1CBFF",
+    200: "#B1CBFF",
+    dark: "#0E1B48",
+    900: "#0E1B48",
+  },
+  red: {
+    primary: "#DF7070",
+    500: "#DF7070",
+    light: "#FBD5D5",
+    200: "#FBD5D5",
+  },
+  gray: {
+    bg: "#F4F4F4",
+    100: "#F4F4F4",
+    light: "#D5D5D5",
+    200: "#D5D5D5",
+    primary: "#838383",
+    500: "#838383",
+  },
+  light: "#FFFFFF",
+  dark: "#0C0D0E",
+};
+
+const theme = extendTheme({
+  colors,
+  components: {
+    Accordion: accordionTheme,
+  },
+});
+
+export default theme;