Add files via upload

src/componants/shared/mytools/whatdoidobutton/HideButtonIcon.jsx

@@ -0,0 +1,34 @@
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { updateStorageState } from "src/Features/storageSlice";
+import { hideWhatDoIDoButtonToolTipPos } from "src/Functions/componentsFunctions";
+import SvgIcon from "../../../../MiniComponents/SvgIcon";
+import ToolTip from "../../../../MiniComponents/ToolTip";
+import s from "./HideButtonIcon.module.scss";
+
+const HideButtonIcon = () => {
+  const { t, i18n } = useTranslation();
+  const dispatch = useDispatch();
+  const hideButtonToolTipPos = hideWhatDoIDoButtonToolTipPos(i18n.language);
+
+  function neverShowMenu() {
+    dispatch(updateStorageState({ key: "showWhatDoIDoIcon", value: false }));
+  }
+
+  return (
+    <div
+      className={s.hideIcon}
+      data-is-tooltip="true"
+      onClick={neverShowMenu}
+      aria-haspopup="true"
+    >
+      <SvgIcon name="xMark" />
+      <ToolTip
+        top={"-17px"}
+        left={hideButtonToolTipPos}
+        content={t("tooltips.hidePermanent")}
+      />
+    </div>
+  );
+};
+export default HideButtonIcon;

src/componants/shared/mytools/whatdoidobutton/HideButtonIcon.module.scss

@@ -0,0 +1,36 @@
+@import "src/Styles/mixins";
+
+
+.hideIcon {
+  -webkit-tap-highlight-color: transparent;
+  border: none;
+  outline: none;
+  background-color: var(--tomato);
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: -6px;
+  top: -6px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity .2s, left .2s, top .2s;
+
+  &:focus-visible [data-is-tooltip=true] {
+    opacity: 1;
+  }
+}
+
+.hideIcon>svg {
+  width: 12px;
+  height: 12px;
+  fill: var(--white)
+}
+
+// Arabic styles
+[lang=ar] .hideIcon {
+  right: 28px;
+}