feat: unpin button in the corner (#374)

* feat: unpin button in corner

* chore: update

web/src/components/Memo.tsx

@@ -184,6 +184,13 @@ const Memo: React.FC<Props> = (props: Props) => {
 
   return (
     <div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned ? "pinned" : ""}`} ref={memoContainerRef}>
+      {memo.pinned && (
+        <div className="corner-container">
+          <span className="tip-text" onClick={handleTogglePinMemoBtnClick}>
+            {t("common.unpin")}
+          </span>
+        </div>
+      )}
       <div className="memo-top-wrapper">
         <div className="status-text-container">
           <span className="time-text" onClick={handleShowMemoStoryDialog}>

web/src/less/memo.less

 @import "./mixin.less";
 
 .memo-wrapper {
-  @apply flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
+  @apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
 
   &.archived-memo {
     @apply border-gray-200;
@@ -11,6 +11,24 @@
     @apply border-gray-200 border-2;
   }
 
+  > .corner-container {
+    @apply absolute top-0 right-0 z-1;
+
+    &:hover > .tip-text {
+      @apply block;
+    }
+
+    &::after {
+      @apply rounded-tr-md absolute top-0 right-0 border-transparent border-t-green-600 border-r-green-600;
+      content: "";
+      border-width: 6px;
+    }
+
+    > .tip-text {
+      @apply hidden absolute top-0 right-0 z-1 whitespace-nowrap p-1 px-2 rounded-md text-xs leading-6 bg-black text-white shadow cursor-pointer hover:opacity-80;
+    }
+  }
+
   > .memo-top-wrapper {
     @apply flex flex-row justify-between items-center w-full h-6 mb-1;