Add button to download avatar (#255)

#255

* import path fix for importing Screenshot.style

* add download avatar button for avatar generator action

* add patch changeset

* add copy url option for avatars url

* Avatar section UI fixes

Co-authored-by: Dinesh Singh <[email protected]>

Author: manavagr1108

.changeset/selfish-ravens-dance.md

@@ -0,0 +1,5 @@
+---
+'mexit': patch
+---
+
+Added download button for avatar generator action

apps/extension/src/Components/Form/index.tsx

@@ -17,7 +17,7 @@ import { formToBlocks } from '../../Utils/getProfileData'
 import { Title } from '../Action/styled'
 import { Dialog } from '../Floating/Dialog'
 import NoteSelector from '../Floating/NoteSelector'
-import { Controls } from '../Screenshot/Screenshot.style'
+import { Controls } from '../Renderers/Screenshot/Screenshot.style'
 import Field from './Field'
 import { ExcludeFormFieldsContainer, StyledForm, StyledRowItem, UserPreferedFieldsContainer } from './styled'
 

apps/extension/src/Components/Form/styled.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import { TextAreaBlock } from '@mexit/shared'
 
-import { Controls } from '../Screenshot/Screenshot.style'
+import { Controls } from '../Renderers/Screenshot/Screenshot.style'
 
 export const StyledForm = styled.form`
   display: flex;

apps/extension/src/Components/Renderers/AvatarRenderer.tsx

@@ -1,36 +1,79 @@
 import React from 'react'
 
-import { Icon } from '@iconify/react'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 
-import { Button } from '@workduck-io/mex-components'
+import { Button, MexIcon } from '@workduck-io/mex-components'
+
+import { mog } from '@mexit/core'
+import { copyTextToClipboard } from '@mexit/shared'
 
 import { useSputlitStore } from '../../Stores/useSputlitStore'
 import { generateAvatar } from '../../Utils/generateAvatar'
+import { Controls } from './Screenshot/Screenshot.style'
 
 const Container = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
+  gap: ${({ theme }) => theme.spacing.large};
+  margin: ${({ theme }) => theme.spacing.medium} 0;
   justify-content: center;
 `
 
+const AvatarImage = styled.img`
+  border-radius: ${({ theme }) => theme.borderRadius.large};
+  box-shadow: inset 1rem 1.25rem 1.25rem 1.25rem ${({ theme }) => theme.colors.form.button.bg};
+`
+
 const AvatarRenderer = () => {
+  const theme = useTheme()
   const { screenshot, setScreenshot } = useSputlitStore()
 
   const randomizeAvatar = () => {
     const imgData = generateAvatar()
 
     setScreenshot(imgData)
   }
+  const downloadAvatar = () => {
+    chrome.runtime.sendMessage(
+      {
+        type: 'DOWNLOAD_AVATAR',
+        data: {
+          url: screenshot
+        }
+      },
+      (response) => {
+        const { message, error } = response
+        if (error) {
+          mog('Avatar Download error', { error })
+        } else {
+          mog('Avatar Downloaded')
+        }
+      }
+    )
+  }
+
+  const copyAvatarURL = () => {
+    copyTextToClipboard(screenshot)
+  }
 
   return (
     <Container>
-      <img src={screenshot} />
-      <Button onClick={randomizeAvatar}>
-        <Icon icon="pepicons:reload" />
-        Randomize Avatar
-      </Button>
+      <AvatarImage src={screenshot} />
+      <Controls>
+        <Button onClick={randomizeAvatar}>
+          <MexIcon noHover icon="pepicons:reload" color={theme.colors.primary} />
+          Randomize
+        </Button>
+        {/* <Button onClick={copyAvatarURL}>
+          <Icon icon="pepicons:clipboard" />
+          Copy Avatar URL
+        </Button> */}
+        <Button onClick={downloadAvatar}>
+          <MexIcon noHover icon="pepicons:arrow-down" color={theme.colors.primary} />
+          Download
+        </Button>
+      </Controls>
     </Container>
   )
 }

apps/extension/src/background.ts

@@ -101,6 +101,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       })()
       return true
     }
+    case 'DOWNLOAD_AVATAR': {
+      chrome.downloads.download({
+        url: request.data.url,
+        filename: 'avatar.svg'
+      })
+      return true
+    }
 
     case 'PUBLIC_SHARING': {
       ;(async () => {

apps/extension/src/manifest.json

@@ -14,6 +14,6 @@
   "background": { "service_worker": "background.js", "type": "module" },
   "omnibox": { "keyword": "[[" },
   "content_scripts": [{ "matches": ["http://*/*", "https://*/*"], "js": ["content.js"], "css": ["Assets/global.css"] }],
-  "permissions": ["contextMenus", "storage", "tabs", "activeTab", "search", "notifications"],
+  "permissions": ["contextMenus", "storage", "tabs", "activeTab", "search", "notifications" , "downloads"],
   "web_accessible_resources": [{ "resources": ["Assets/*"], "matches": ["http://*/*", "https://*/*"] }]
 }