l-min-components 1.7.1512 → 1.7.1514

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.7.1512",
+  "version": "1.7.1514",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/messageAddon/messages/messages.jsx

@@ -272,6 +272,8 @@ const Messages = ({
       }
       console.log("websocket data", data);
     };
+
+    
     return () => {
       socket.current.close();
 

package/src/components/reportsComponents/fullAnalysis/api/sampleApi.jsx

@@ -0,0 +1,57 @@
+import useAxios from "axios-hooks";
+
+const useSampleApi = () => {
+  const [{ ...getStudentsTestResultData }, getStudentsTestResult] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleGetStudentsTestResult = async (activity_id, enterprise_id) => {
+    try {
+      const url = enterprise_id
+        ? `/learn/v1/instructor/${enterprise_id}/tests/${activity_id}/submission_test_questions/`
+        : `/learn/v1/instructor/tests/${activity_id}/submission_test_questions/`;
+      await getStudentsTestResult({
+        url,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  const [{ ...getStudentsTestAnswerData }, getStudentsAnser] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleGetStudentsAnswer = async (
+    question_activity_id,
+    enterprise_id
+  ) => {
+    try {
+      const url = `/learn/v2/instructor/${enterprise_id}/tests/question_activity/${question_activity_id}/`;
+      await getStudentsAnser({
+        url,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return {
+    handleGetStudentsTestResult,
+    getStudentsTestResultData,
+    handleGetStudentsAnswer,
+    getStudentsTestAnswerData,
+  };
+};
+
+export default useSampleApi;

package/src/components/reportsComponents/fullAnalysis/icons/info.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const InfoIcon2 = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="21"
+      height="20"
+      viewBox="0 0 21 20"
+      fill="none"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.8281 10C18.8281 14.4183 15.2464 18 10.8281 18C6.40985 18 2.82812 14.4183 2.82812 10C2.82812 5.58172 6.40985 2 10.8281 2C15.2464 2 18.8281 5.58172 18.8281 10ZM10.8281 7C10.4593 7 10.1357 7.19922 9.96131 7.50073C9.68477 7.97879 9.07304 8.14215 8.59498 7.86561C8.11692 7.58906 7.95355 6.97733 8.2301 6.49927C8.7473 5.60518 9.71646 5 10.8281 5C12.485 5 13.8281 6.34315 13.8281 8C13.8281 9.30622 12.9933 10.4175 11.8281 10.8293V11C11.8281 11.5523 11.3804 12 10.8281 12C10.2759 12 9.82814 11.5523 9.82814 11V10C9.82814 9.44772 10.2759 9 10.8281 9C11.3804 9 11.8281 8.55228 11.8281 8C11.8281 7.44772 11.3804 7 10.8281 7ZM10.8281 15C11.3804 15 11.8281 14.5523 11.8281 14C11.8281 13.4477 11.3804 13 10.8281 13C10.2758 13 9.82812 13.4477 9.82812 14C9.82812 14.5523 10.2758 15 10.8281 15Z"
+        fill="#949999"
+      />
+    </svg>
+  );
+};
+
+export default InfoIcon2;

package/src/components/reportsComponents/fullAnalysis/icons/navArrow.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+const NavBack = ({ disabled }) => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_55110_349655)">
+        <path
+          d="M20.5 11H8.33L13.92 5.41L12.5 4L4.5 12L12.5 20L13.91 18.59L8.33 13H20.5V11Z"
+          fill={disabled ? "#C6CCCC" : "#00C2C2"}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_55110_349655">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            transform="translate(0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+const NavForword = ({ disabled }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_55110_349659)">
+        <path
+          d="M12.5 4L11.09 5.41L16.67 11H4.5V13H16.67L11.09 18.59L12.5 20L20.5 12L12.5 4Z"
+          fill={disabled ? "#C6CCCC" : "#00C2C2"}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_55110_349659">
+          <rect
+            width="24"
+            height="24"
+            fill="white"
+            transform="translate(0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export { NavBack, NavForword };

package/src/components/reportsComponents/hooks/useRreportUtils.jsx

@@ -26,6 +26,8 @@ const choiceListAndAnswer = ({
     options,
     answer,
     isCorrect: !!(answer && correct && answer.id === correct.id),
+    correctIndex: options?.findIndex((option) => option?.id === correct.id),
+    correctText: correct?.text,
   };
 };
 

package/src/components/reportsComponents/reportQuestions/components/comment.jsx

@@ -25,10 +25,11 @@ import {
 import { CloseIcon } from "../../../header/assets/svg/close";
 import classNames from "classnames";
 import { useRecorder } from "react-microphone-recorder";
-import PlayIcon from "../../../../assets/svg/playIcon";
 import styled from "styled-components";
 import { FaPause } from "react-icons/fa";
 import useApi from "../api";
+import formatDuration from "../../../../utils/formatDuration.";
+import ResponseAudioV2 from "./responseAudio.v2";
 /**
  * @param {Object} props
  * @param {boolean} props.editMode
@@ -38,9 +39,9 @@ const Comment = ({
   editMode = false,
   data,
   testId,
-  questionData,
   setData,
   disabledAdd,
+  questionActivityID,
 }) => {
   const { affiliateAccount } = useContext(OutletContext);
   const [toggleDelete, setToggleDelete] = useState(false);
@@ -63,6 +64,7 @@ const Comment = ({
     audioURL,
     resetRecording,
     recordingState,
+    timeElapsed,
   } = useRecorder();
 
   if (!editMode && !data) return;
@@ -73,12 +75,12 @@ const Comment = ({
   ];
 
   const handleComment = async () => {
-    if (!enterpriseId || !testId || !questionData?.question_activity_id) return;
+    if (!enterpriseId || !testId || !questionActivityID) return;
 
     if (showForm === "Text") {
       const data = { data: { data: { type: "text", text: value } } };
       const res = await handleAddComment(
-        questionData?.question_activity_id,
+        questionActivityID,
         testId,
         data,
         enterpriseId
@@ -97,7 +99,7 @@ const Comment = ({
       if (media) {
         const data = { data: { data: { type: "audio", audio: media } } };
         const res = await handleAddComment(
-          questionData?.question_activity_id,
+          questionActivityID,
           testId,
           data,
           enterpriseId
@@ -115,10 +117,10 @@ const Comment = ({
   const disabled = showForm === "Text" ? !value : !audioFile;
 
   const handleDelete = async () => {
-    if (!enterpriseId || !testId || !questionData?.question_activity_id) return;
+    if (!enterpriseId || !testId || !questionActivityID) return;
 
     const res = await handleDeleteComment(
-      questionData?.question_activity_id,
+      questionActivityID,
       testId,
       0,
       enterpriseId
@@ -159,44 +161,54 @@ const Comment = ({
         )}
       </CommentHeader>
       {data && (
-        <CommentContent>
-          <div className="image">
-            {data?.profile_picture && (
-              <img src={data?.profile_picture?.url} alt="profile picture" />
-            )}
-          </div>
-          <CommenttBody>
-            <CommentContentHeader>
-              <p className="name">{data?.author_name}</p>
-              <p className="date">
-                {moment(data?.created_at).format("MMM DD, YYYY, HH:MM A")}
-              </p>
-            </CommentContentHeader>
-
-            <CommentContentBody>
-              {data?.type === "audio" && data?.audio && (
-                <ResponseAudio
-                  url={data?.audio?.uploaded_media_url}
-                  streamUrl={data?.audio?.url}
-                />
+        <>
+          <CommentContent>
+            <div className="image">
+              {data?.profile_picture && (
+                <img src={data?.profile_picture?.url} alt="profile picture" />
               )}
-              {data?.type === "text" && data?.text && (
-                <p className="text">{data?.text}</p>
+            </div>
+            <CommenttBody>
+              <CommentContentHeader>
+                <p className="name">{data?.author_name}</p>
+                <p className="date">
+                  {moment(data?.created_at).format("MMM DD, YYYY, HH:MM A")}
+                </p>
+              </CommentContentHeader>
+              <CommentContentBody>
+                {data?.type === "audio" && data?.audio && (
+                  <div className="comment_audio">
+                    <ResponseAudioV2
+                      url={data?.audio?.uploaded_media_url}
+                      streamUrl={data?.audio?.url}
+                      onDelete={
+                        !editMode
+                          ? null
+                          : () => {
+                              setToggleDelete(true);
+                            }
+                      }
+                    />
+                  </div>
+                )}
+                {data?.type === "text" && data?.text && (
+                  <p className="text">{data?.text}</p>
+                )}
+              </CommentContentBody>
+              {editMode && data?.type !== "audio" && (
+                <CommentContentBodyFooter>
+                  <button
+                    onClick={() => {
+                      setToggleDelete(true);
+                    }}
+                  >
+                    <TrashIcon />
+                  </button>
+                </CommentContentBodyFooter>
               )}
-            </CommentContentBody>
-            {editMode && (
-              <CommentContentBodyFooter>
-                <button
-                  onClick={() => {
-                    setToggleDelete(true);
-                  }}
-                >
-                  <DeleteIcon />
-                </button>
-              </CommentContentBodyFooter>
-            )}
-          </CommenttBody>
-        </CommentContent>
+            </CommenttBody>
+          </CommentContent>
+        </>
       )}
       {!data && (
         <>
@@ -232,6 +244,7 @@ const Comment = ({
                       start={startRecording}
                       stopRecord={stopRecording}
                       reset={resetRecording}
+                      seconds={timeElapsed}
                     />
                   )}
                 </CommentContentForm>
@@ -277,7 +290,14 @@ const Comment = ({
 
 export default Comment;
 
-const AudioRecordPlayer = ({ start, url, isRecording, reset, stopRecord }) => {
+const AudioRecordPlayer = ({
+  start,
+  url,
+  isRecording,
+  reset,
+  stopRecord,
+  seconds,
+}) => {
   const { isPlaying, stop, isReady, play } = useAudioPlayer({
     src: url,
   });
@@ -290,56 +310,88 @@ const AudioRecordPlayer = ({ start, url, isRecording, reset, stopRecord }) => {
   return (
     <CommentRecorder>
       <div className="audioWrapper">
-        {(playWave || url) && (
+        {playWave || url ? (
           <div className="audioContent">
-            <button
-              className="icon-btn"
+            <TrashIcon
+              className={classNames("trash-icon", {
+                disabled: isRecording || !isReady,
+              })}
               onClick={resetHandler}
               disabled={playWave}
-            >
-              <AudioDelete />
-            </button>
+            />
 
             <AudioWaveComponent
               type="extra-small"
               color="#FDBA00"
-              count={30}
+              count={16}
               playState={playWave ? "play" : "stop"}
             />
 
-            {isPlaying ? (
-              <button
-                className="icon-btn"
+            {isRecording ? (
+              <StopIcon onClick={stopRecord} />
+            ) : isPlaying ? (
+              <PauseIcon
                 onClick={stop}
+                className={classNames({ disabled: isRecording || !isReady })}
                 disabled={isRecording || !isReady}
-              >
-                <FaPause color="#febf10" size={16} />
-              </button>
+              />
             ) : (
-              <button
-                className="icon-btn play"
+              <PlayIcon
                 onClick={play}
+                className={classNames({ disabled: isRecording || !isReady })}
                 disabled={isRecording || !isReady}
-              >
-                <PlayIcon />
-              </button>
+              />
             )}
           </div>
+        ) : (
+          <p>Click to begin recording</p>
         )}
       </div>
-      {!isRecording ? (
-        <button className="icon-btn" onClick={start}>
+
+      {!isRecording && !url && (
+        <button className="icon-btn action-btn" onClick={start}>
           <RecordIcon />
         </button>
-      ) : (
-        <button className="icon-btn" onClick={stopRecord}>
-          <StopIcon />
-        </button>
       )}
+      {(playWave || url) && <p>{formatDuration(seconds || 0)}</p>}
     </CommentRecorder>
   );
 };
 
+export const PauseIcon = ({ onClick, className, disabled }) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    onClick={onClick}
+    className={className}
+  >
+    <path
+      d="M13.3333 15.8337C12.875 15.8337 12.4828 15.6706 12.1567 15.3445C11.8306 15.0184 11.6672 14.6259 11.6667 14.167V5.83366C11.6667 5.37533 11.83 4.9831 12.1567 4.65699C12.4833 4.33088 12.8756 4.16755 13.3333 4.16699C13.7911 4.16644 14.1836 4.32977 14.5108 4.65699C14.8381 4.98422 15.0011 5.37644 15 5.83366V14.167C15 14.6253 14.8369 15.0178 14.5108 15.3445C14.1847 15.6712 13.7922 15.8342 13.3333 15.8337ZM6.66667 15.8337C6.20833 15.8337 5.81611 15.6706 5.49 15.3445C5.16389 15.0184 5.00056 14.6259 5 14.167V5.83366C5 5.37533 5.16333 4.9831 5.49 4.65699C5.81667 4.33088 6.20889 4.16755 6.66667 4.16699C7.12444 4.16644 7.51694 4.32977 7.84417 4.65699C8.17139 4.98422 8.33444 5.37644 8.33333 5.83366V14.167C8.33333 14.6253 8.17028 15.0178 7.84417 15.3445C7.51806 15.6712 7.12556 15.8342 6.66667 15.8337Z"
+      fill={disabled ? "#C6CCCC" : "#FEBF10"}
+    />
+  </svg>
+);
+
+export const PlayIcon = ({ onClick, className, disabled }) => (
+  <svg
+    onClick={onClick}
+    width="17"
+    height="18"
+    viewBox="0 0 17 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M3 9V6.49379C3 3.38216 5.1502 2.10793 7.78127 3.66375L9.90398 4.91686L12.0267 6.16996C14.6578 7.72578 14.6578 10.2742 12.0267 11.83L9.90398 13.0831L7.78127 14.3362C5.1502 15.8921 3 14.6178 3 11.5062V9Z"
+      fill={disabled ? "#C6CCCC" : "#FEBF10"}
+    />
+  </svg>
+);
+
 const TextIcon = ({ color }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -355,6 +407,54 @@ const TextIcon = ({ color }) => (
   </svg>
 );
 
+export const TrashIcon = ({ className, disabled, onClick }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    className={className}
+    onClick={onClick}
+  >
+    <path
+      d="M17.5 4.98307C14.725 4.70807 11.9333 4.56641 9.15 4.56641C7.5 4.56641 5.85 4.64974 4.2 4.81641L2.5 4.98307"
+      stroke={disabled ? "#C6CCCC" : "#F95454"}
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7.08594 4.14297L7.26927 3.0513C7.4026 2.25964 7.5026 1.66797 8.91094 1.66797H11.0943C12.5026 1.66797 12.6109 2.29297 12.7359 3.05964L12.9193 4.14297"
+      stroke={disabled ? "#C6CCCC" : "#F95454"}
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.7057 7.61719L15.1641 16.0089C15.0724 17.3172 14.9974 18.3339 12.6724 18.3339H7.3224C4.9974 18.3339 4.9224 17.3172 4.83073 16.0089L4.28906 7.61719"
+      stroke={disabled ? "#C6CCCC" : "#F95454"}
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.60938 13.749H11.3844"
+      stroke={disabled ? "#C6CCCC" : "#F95454"}
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7.91406 10.416H12.0807"
+      stroke={disabled ? "#C6CCCC" : "#F95454"}
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
+
 const AudioIcon = ({ color }) => {
   return (
     <svg
@@ -374,68 +474,67 @@ const AudioIcon = ({ color }) => {
 
 const RecordIcon = () => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="38"
-    height="36"
-    viewBox="0 0 38 36"
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
     fill="none"
+    xmlns="http://www.w3.org/2000/svg"
   >
+    <circle cx="15" cy="15" r="15" fill="url(#paint0_linear_56564_131877)" />
     <path
-      d="M30.0153 14.1552C29.4192 14.1552 28.9453 14.6073 28.9453 15.176V17.4802C28.9453 22.6427 24.5433 26.8427 19.1325 26.8427C13.7216 26.8427 9.31957 22.6427 9.31957 17.4802V15.1615C9.31957 14.5927 8.84574 14.1406 8.24963 14.1406C7.65352 14.1406 7.17969 14.5927 7.17969 15.1615V17.4656C7.17969 23.401 11.9639 28.2865 18.0625 28.8115V31.9177C18.0625 32.4865 18.5363 32.9385 19.1325 32.9385C19.7286 32.9385 20.2024 32.4865 20.2024 31.9177V28.8115C26.2858 28.301 31.0852 23.401 31.0852 17.4656V15.1615C31.0699 14.6073 30.5961 14.1552 30.0153 14.1552Z"
-      fill="#00C2C2"
+      d="M20.1659 13.2367C19.883 13.2367 19.6581 13.4616 19.6581 13.7445V14.8907C19.6581 17.4587 17.5689 19.5479 15.0009 19.5479C12.4329 19.5479 10.3437 17.4587 10.3437 14.8907V13.7373C10.3437 13.4544 10.1188 13.2295 9.83592 13.2295C9.553 13.2295 9.32812 13.4544 9.32812 13.7373V14.8834C9.32812 17.8359 11.5987 20.2661 14.4931 20.5272V22.0723C14.4931 22.3553 14.718 22.5801 15.0009 22.5801C15.2838 22.5801 15.5087 22.3553 15.5087 22.0723V20.5272C18.3959 20.2733 20.6737 17.8359 20.6737 14.8834V13.7373C20.6664 13.4616 20.4415 13.2367 20.1659 13.2367Z"
+      fill="white"
     />
     <path
-      d="M19.1309 3.77148C15.4014 3.77148 12.375 6.65898 12.375 10.2173V17.684C12.375 21.2423 15.4014 24.1298 19.1309 24.1298C22.8604 24.1298 25.8868 21.2423 25.8868 17.684V10.2173C25.8868 6.65898 22.8604 3.77148 19.1309 3.77148ZM21.1332 13.9069C21.0262 14.2861 20.6747 14.534 20.2773 14.534C20.2009 14.534 20.1244 14.5194 20.048 14.5048C19.4519 14.3444 18.8252 14.3444 18.2291 14.5048C17.74 14.6361 17.2662 14.359 17.1439 13.9069C17.0063 13.4548 17.2967 12.9882 17.7706 12.8715C18.6724 12.6382 19.62 12.6382 20.5218 12.8715C20.9804 12.9882 21.2555 13.4548 21.1332 13.9069ZM21.9433 11.0777C21.8058 11.4277 21.4695 11.6319 21.1027 11.6319C20.9957 11.6319 20.904 11.6173 20.797 11.5882C19.727 11.209 18.5348 11.209 17.4649 11.5882C17.0063 11.7486 16.4866 11.5152 16.3185 11.0777C16.1504 10.6402 16.3949 10.1444 16.8535 9.99857C18.3208 9.48815 19.941 9.48815 21.4084 9.99857C21.8669 10.159 22.1115 10.6402 21.9433 11.0777Z"
-      fill="#00C2C2"
+      d="M15.0032 8.07227C13.2332 8.07227 11.7969 9.50859 11.7969 11.2786V14.9928C11.7969 16.7628 13.2332 18.1991 15.0032 18.1991C16.7732 18.1991 18.2096 16.7628 18.2096 14.9928V11.2786C18.2096 9.50859 16.7732 8.07227 15.0032 8.07227ZM15.9535 13.1139C15.9027 13.3025 15.7359 13.4259 15.5473 13.4259C15.511 13.4259 15.4747 13.4186 15.4385 13.4113C15.1556 13.3315 14.8581 13.3315 14.5752 13.4113C14.3431 13.4766 14.1182 13.3388 14.0602 13.1139C13.9949 12.889 14.1327 12.6569 14.3576 12.5989C14.7856 12.4828 15.2354 12.4828 15.6634 12.5989C15.881 12.6569 16.0116 12.889 15.9535 13.1139ZM16.338 11.7066C16.2727 11.8807 16.1131 11.9823 15.939 11.9823C15.8882 11.9823 15.8447 11.975 15.7939 11.9605C15.2861 11.7719 14.7203 11.7719 14.2125 11.9605C13.9949 12.0403 13.7483 11.9242 13.6685 11.7066C13.5887 11.489 13.7047 11.2423 13.9224 11.1698C14.6188 10.9159 15.3877 10.9159 16.0841 11.1698C16.3017 11.2496 16.4178 11.489 16.338 11.7066Z"
+      fill="white"
     />
+    <defs>
+      <linearGradient
+        id="paint0_linear_56564_131877"
+        x1="15"
+        y1="0"
+        x2="15"
+        y2="30"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#FEBF10" />
+        <stop offset="1" stop-color="#FFA113" />
+      </linearGradient>
+    </defs>
   </svg>
 );
 
-const AudioDelete = () => (
+const StopIcon = ({ onClick }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="12"
-    height="16"
-    viewBox="0 0 12 16"
+    width="25"
+    height="26"
+    viewBox="0 0 25 26"
     fill="none"
-  >
-    <path
-      d="M11.6667 1.1888H8.75L7.91667 0.355469H3.75L2.91667 1.1888H0V2.85547H11.6667V1.1888ZM0.833333 13.6888C0.833333 14.1308 1.00893 14.5548 1.32149 14.8673C1.63405 15.1799 2.05797 15.3555 2.5 15.3555H9.16667C9.6087 15.3555 10.0326 15.1799 10.3452 14.8673C10.6577 14.5548 10.8333 14.1308 10.8333 13.6888V3.6888H0.833333V13.6888Z"
-      fill="#FEBF10"
-    />
-  </svg>
-);
-
-const StopIcon = () => (
-  <svg
-    width="43"
-    height="42"
-    viewBox="0 0 43 42"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={{ width: "38px", height: "36px" }}
+    onClick={onClick}
   >
     <circle
-      cx="21.9713"
-      cy="20.9987"
-      r="21.0026"
-      fill="url(#paint0_linear_42380_459524)"
+      cx="12.5"
+      cy="13"
+      r="12.5"
+      fill="url(#paint0_linear_56564_131925)"
     />
     <path
-      d="M29.9422 25.3481C29.9422 27.3482 28.3209 28.9696 26.3208 28.9696H17.6293C15.6292 28.9696 14.0078 27.3482 14.0078 25.3481V16.6566C14.0078 14.6565 15.6292 13.0352 17.6293 13.0352H26.3208C28.3209 13.0352 29.9422 14.6565 29.9422 16.6566V25.3481Z"
+      d="M17.2414 14.1229C17.2414 16.123 15.62 17.7443 13.62 17.7443H11.3793C9.37919 17.7443 7.75781 16.123 7.75781 14.1229V11.8822C7.75781 9.88212 9.3792 8.26074 11.3793 8.26074H13.62C15.62 8.26074 17.2414 9.88213 17.2414 11.8822V14.1229Z"
       fill="white"
     />
     <defs>
       <linearGradient
-        id="paint0_linear_42380_459524"
-        x1="21.9713"
-        y1="-0.00390625"
-        x2="21.9713"
-        y2="42.0013"
+        id="paint0_linear_56564_131925"
+        x1="12.5"
+        y1="0.5"
+        x2="12.5"
+        y2="25.5"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#FE6610" />
-        <stop offset="1" stopColor="#FF2113" />
+        <stop stop-color="#FE6610" />
+        <stop offset="1" stop-color="#FF2113" />
       </linearGradient>
     </defs>
   </svg>