upload file styles added

This commit is contained in:
Daniel Shleifman
2021-06-08 23:38:05 +03:00
parent ad32f45fb1
commit 44b2f7f1bd
3 changed files with 198 additions and 56 deletions

View File

@@ -8,11 +8,13 @@ import DialogTitle from '@material-ui/core/DialogTitle'
import { torrentsHost, torrentUploadHost } from 'utils/Hosts'
import axios from 'axios'
import { useTranslation } from 'react-i18next'
import { Input } from '@material-ui/core'
import { Input, ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
import styled, { css } from 'styled-components'
import { NoImageIcon, AddItemIcon } from 'icons'
import { NoImageIcon, AddItemIcon, TorrentIcon } from 'icons'
import debounce from 'lodash/debounce'
import { v4 as uuidv4 } from 'uuid'
import useChangeLanguage from 'utils/useChangeLanguage'
import { Cancel as CancelIcon } from '@material-ui/icons'
const AddDialogStyle = styled.div``
const TitleSection = styled.div`
@@ -48,22 +50,53 @@ const RightSide = styled.div`
flex-direction: column;
`
const RightSideBottomSection = styled.div`
const RightSideBottomSectionBasicStyles = css`
transition: all 0.3s;
padding: 20px;
flex: 1;
height: 100%;
display: grid;
grid-template-rows: 100px 1fr;
`
const RightSideBottomSectionNoFile = styled.div`
${RightSideBottomSectionBasicStyles}
justify-items: center;
grid-template-rows: 100px 1fr;
cursor: pointer;
:hover {
background-color: rgba(0, 0, 0, 0.04);
svg {
transform: translateY(-4%);
}
}
`
const RightSideBottomSectionFileSelected = styled.div`
${RightSideBottomSectionBasicStyles}
place-items: center;
`
const TorrentIconWrapper = styled.div`
position: relative;
`
const CancelIconWrapper = styled.div`
position: absolute;
top: -9px;
left: 10px;
cursor: pointer;
> svg {
transition: all 0.3s;
fill: rgba(0, 0, 0, 0.7);
:hover {
fill: rgba(0, 0, 0, 0.6);
}
}
`
const IconWrapper = styled.div`
display: grid;
justify-items: center;
@@ -75,6 +108,10 @@ const IconWrapper = styled.div`
}
`
const FileUploadLabel = styled.label`
transition: all 0.3s;
`
const RightSideTopSection = styled.div`
background: #fff;
padding: 0 20px 20px 20px;
@@ -82,7 +119,7 @@ const RightSideTopSection = styled.div`
${({ active }) =>
active &&
css`
+ ${RightSideBottomSection} {
+ ${FileUploadLabel} {
box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
}
`};
@@ -90,8 +127,6 @@ const RightSideTopSection = styled.div`
const PosterWrapper = styled.div`
margin-top: 20px;
/* height: 300px;
display: flex; */
display: grid;
grid-template-columns: max-content 1fr;
grid-template-rows: 300px max-content;
@@ -103,7 +138,6 @@ const PosterSuggestions = styled.div`
grid-template-rows: repeat(4, calc(25% - 4px));
grid-auto-flow: column;
gap: 5px;
/* margin-left: 5px; */
`
const PosterSuggestionsItem = styled.div`
cursor: pointer;
@@ -164,17 +198,6 @@ export const Poster = styled.div`
`}
`
const getMoviePosters = movieName => {
const request = `${`http://api.themoviedb.org/3/search/multi?api_key=${process.env.REACT_APP_TMDB_API_KEY}`}&query=${movieName}`
return axios
.get(request)
.then(({ data: { results } }) =>
results.filter(el => el.poster_path).map(el => `https://image.tmdb.org/t/p/w300${el.poster_path}`),
)
.catch(() => null)
}
const ButtonWrapper = styled.div`
padding: 20px;
display: flex;
@@ -185,10 +208,19 @@ const ButtonWrapper = styled.div`
}
`
const checkImageURL = async url => {
if (!url) return false
const getMoviePosters = (movieName, language = 'en') => {
const request = `${`http://api.themoviedb.org/3/search/multi?api_key=${process.env.REACT_APP_TMDB_API_KEY}`}&language=${language}&include_image_language=${language},null&query=${movieName}`
if (!url.match(/.(jpg|jpeg|png|gif)$/i)) return false
return axios
.get(request)
.then(({ data: { results } }) =>
results.filter(el => el.poster_path).map(el => `https://image.tmdb.org/t/p/w300${el.poster_path}`),
)
.catch(() => null)
}
const checkImageURL = async url => {
if (!url || !url.match(/.(jpg|jpeg|png|gif)$/i)) return false
try {
await fetch(url)
@@ -207,6 +239,8 @@ export default function AddDialog({ handleClose }) {
const [isPosterUrlCorrect, setIsPosterUrlCorrect] = useState(false)
const [posterList, setPosterList] = useState()
const [isUserInteractedWithPoster, setIsUserInteractedWithPoster] = useState(false)
const [currentLang] = useChangeLanguage()
const [selectedFile, setSelectedFile] = useState()
const removePoster = () => {
setIsPosterUrlCorrect(false)
@@ -216,7 +250,7 @@ export default function AddDialog({ handleClose }) {
const delayedPosterSearch = useMemo(
() =>
debounce(movieName => {
getMoviePosters(movieName).then(urlList => {
getMoviePosters(movieName, currentLang === 'ru' ? 'ru' : 'en').then(urlList => {
if (urlList) {
setPosterList(urlList)
if (isUserInteractedWithPoster) return
@@ -236,7 +270,7 @@ export default function AddDialog({ handleClose }) {
}
})
}, 700),
[isUserInteractedWithPoster],
[isUserInteractedWithPoster, currentLang],
)
const handleTorrentSourceChange = ({ target: { value } }) => setTorrentSource(value)
@@ -252,18 +286,31 @@ export default function AddDialog({ handleClose }) {
}
const handleSave = () => {
axios
.post(torrentsHost(), { action: 'add', link: torrentSource, title, poster: posterUrl, save_to_db: true })
.finally(() => handleClose())
if (selectedFile) {
const data = new FormData()
data.append('save', 'true')
data.append('file', selectedFile)
posterUrl && data.append('poster', posterUrl)
axios.post(torrentUploadHost(), data).finally(() => handleClose())
} else {
axios
.post(torrentsHost(), { action: 'add', link: torrentSource, title, poster: posterUrl, save_to_db: true })
.finally(() => handleClose())
}
}
const handleCapture = ({ target: { files } }) => {
console.log(files)
const [file] = files
const data = new FormData()
data.append('save', 'true')
data.append('file', file)
axios.post(torrentUploadHost(), data)
if (!file) return
setSelectedFile(file)
setTorrentSource(file.name)
}
const clearSelectedFile = e => {
e.stopPropagation()
setSelectedFile()
setTorrentSource('')
}
const userChangesPosterUrl = url => {
@@ -333,22 +380,46 @@ export default function AddDialog({ handleClose }) {
value={torrentSource}
margin='dense'
label={t('TorrentSourceLink')}
helperText='magnet / hash / torrent'
helperText='magnet / hash / .torrent file link'
type='text'
fullWidth
onFocus={() => setTorrentSourceSelected(true)}
onBlur={() => setTorrentSourceSelected(false)}
inputProps={{ autoComplete: 'off' }}
disabled={selectedFile}
/>
</RightSideTopSection>
<RightSideBottomSection>
<div>OR</div>
<IconWrapper>
<AddItemIcon color='primary' />
<div>CLICK / DRAG & DROP</div>
</IconWrapper>
</RightSideBottomSection>
{selectedFile ? (
<RightSideBottomSectionFileSelected>
<TorrentIconWrapper>
<TorrentIcon />
<CancelIconWrapper onClick={clearSelectedFile}>
<CancelIcon />
</CancelIconWrapper>
</TorrentIconWrapper>
</RightSideBottomSectionFileSelected>
) : (
<FileUploadLabel htmlFor='upload-file' style={{ flex: 1 }}>
<input
onChange={handleCapture}
accept='.torrent'
type='file'
style={{ display: 'none' }}
id='upload-file'
/>
<RightSideBottomSectionNoFile selectedFile={selectedFile} type='submit'>
<div>OR</div>
<IconWrapper>
<AddItemIcon color='primary' />
<div>CLICK / DRAG & DROP</div>
</IconWrapper>
</RightSideBottomSectionNoFile>
</FileUploadLabel>
)}
</RightSide>
</MainSectionContentWrapper>
<ButtonWrapper>
@@ -381,19 +452,19 @@ export default function AddDialog({ handleClose }) {
{t('UploadFile')}
<input onChange={handleCapture} type='file' accept='.torrent' hidden />
</Button> */}
{/* <label htmlFor='upload-file'> */}
{/* <Input onChange={handleCapture} accept='.torrent' type='file' id='upload-file' /> */}
{/* <Button htmlFor='upload-file' type='submit' color='primary' variant='outlined'>
{t('UploadFile')}
</Button> */}
{/* <ListItem button variant='raised' type='submit' component='span' key={t('UploadFile')}>
<ListItemIcon>
<PublishIcon />
</ListItemIcon>
<ListItemText primary={t('UploadFile')} />
</ListItem> */}
{/* </label> */}
{/* <label htmlFor='upload-file'>
<Input onChange={handleCapture} accept='.torrent' type='file' id='upload-file' />
<Button htmlFor='upload-file' type='submit' color='primary' variant='outlined'>
{t('UploadFile')}
</Button>
<ListItem button variant='raised' type='submit' component='span' key={t('UploadFile')}>
<ListItemIcon>
<PublishIcon />
</ListItemIcon>
<ListItemText primary={t('UploadFile')} />
</ListItem>
</label> */}
{/* </DialogContent>
<DialogActions>

View File

@@ -17,7 +17,7 @@ export default function UploadDialog() {
}
return (
<div>
<label htmlFor='upload-file'>
{/* <label htmlFor='upload-file'>
<input onChange={handleCapture} accept='.torrent' type='file' style={{ display: 'none' }} id='upload-file' />
<ListItem button variant='raised' type='submit' component='span' key={t('UploadFile')}>
@@ -27,7 +27,7 @@ export default function UploadDialog() {
<ListItemText primary={t('UploadFile')} />
</ListItem>
</label>
</label> */}
</div>
)
}

View File

@@ -41,3 +41,74 @@ export const AddItemIcon = () => (
</g>
</svg>
)
export const TorrentIcon = () => (
<svg width='150px' height='150px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<g id='#248a57ff'>
<path
fill='#248a57'
opacity='1.00'
d=' M 102.41 0.00 L 319.87 0.00 C 320.21 29.68 319.87 59.37 320.04 89.05 C 320.29 97.32 323.88 105.47 329.94 111.12 C 336.01 117.07 344.56 120.18 353.01 120.01 C 382.02 119.87 411.04 120.22 440.05 119.83 C 439.94 236.88 440.04 353.93 440.00 470.98 C 440.01 478.16 440.50 485.68 437.47 492.41 C 432.79 503.85 421.05 511.80 408.71 512.00 L 103.28 512.00 C 90.95 511.79 79.20 503.84 74.53 492.42 C 72.06 486.96 71.87 480.87 71.99 474.97 C 72.01 327.63 71.99 180.30 72.00 32.96 C 71.95 27.61 73.03 22.22 75.52 17.46 C 80.55 7.39 91.19 0.57 102.41 0.00 M 360.00 382.07 C 358.69 383.73 359.01 385.99 358.90 387.97 C 358.95 396.36 358.91 404.75 358.93 413.14 C 352.50 403.51 346.13 393.83 339.77 384.16 C 338.65 382.47 337.13 380.65 334.92 380.63 C 331.97 380.41 329.13 382.87 329.22 385.89 C 328.94 396.58 329.24 407.28 329.08 417.98 C 329.14 420.43 328.85 422.98 329.54 425.38 C 330.75 429.14 337.11 428.63 337.54 424.63 C 338.19 415.09 337.55 405.51 337.83 395.95 C 343.71 404.78 349.41 413.73 355.26 422.58 C 356.92 424.93 358.74 427.96 362.00 428.00 C 365.02 428.51 367.54 425.83 367.40 422.90 C 367.55 411.27 367.39 399.62 367.48 387.99 C 367.40 386.11 367.63 384.06 366.61 382.38 C 365.24 380.16 361.58 380.00 360.00 382.07 M 100.79 382.81 C 98.94 384.82 100.19 388.63 103.01 388.89 C 106.91 389.29 110.85 388.97 114.77 389.07 C 114.77 399.73 114.78 410.39 114.75 421.05 C 114.76 423.37 114.89 426.34 117.28 427.52 C 119.95 429.02 123.67 427.14 123.86 424.04 C 124.22 412.40 123.84 400.72 124.04 389.07 C 128.25 388.87 132.57 389.54 136.71 388.62 C 140.15 387.40 139.25 381.72 135.61 381.56 C 126.10 381.14 116.55 381.57 107.03 381.37 C 104.95 381.53 102.34 381.06 100.79 382.81 M 156.46 381.58 C 150.26 383.15 145.11 388.05 143.12 394.11 C 140.49 401.86 140.79 410.83 144.81 418.06 C 151.07 429.05 167.20 430.79 177.27 424.26 C 183.48 420.06 186.24 412.28 186.28 405.03 C 186.43 398.11 184.59 390.56 179.19 385.85 C 173.03 380.52 164.12 379.62 156.46 381.58 M 197.74 381.67 C 195.24 381.99 194.12 384.61 194.23 386.87 C 194.06 397.92 194.27 408.97 194.15 420.02 C 194.24 422.43 193.92 425.36 195.97 427.11 C 198.62 429.25 203.28 427.47 203.31 423.89 C 203.66 418.45 203.32 412.99 203.49 407.54 C 206.76 407.72 210.68 407.24 213.15 409.89 C 217.60 414.61 220.01 420.80 223.85 425.97 C 225.63 428.66 230.20 428.72 231.83 425.86 C 232.87 424.27 231.80 422.43 231.24 420.89 C 228.63 415.38 225.17 409.99 220.02 406.56 C 223.42 405.53 227.11 404.31 229.29 401.31 C 233.14 395.94 231.83 387.34 226.14 383.76 C 221.99 381.01 216.77 381.52 212.04 381.39 C 207.28 381.52 202.48 381.08 197.74 381.67 M 240.23 386.91 C 240.19 398.28 240.20 409.66 240.22 421.03 C 240.25 423.12 240.14 425.65 241.97 427.09 C 244.58 429.23 249.25 427.52 249.33 423.98 C 249.76 418.50 249.34 413.00 249.49 407.51 C 252.77 407.64 256.62 407.29 259.13 409.85 C 263.88 414.69 266.10 421.38 270.41 426.55 C 272.74 429.20 278.48 428.00 278.28 424.04 C 276.28 417.09 271.87 410.81 266.09 406.46 C 269.75 405.55 273.64 404.05 275.74 400.71 C 278.91 395.49 277.81 387.82 272.73 384.18 C 268.85 381.14 263.64 381.44 259.00 381.41 C 254.02 381.52 249.02 381.13 244.05 381.58 C 241.41 381.77 240.05 384.51 240.23 386.91 M 286.38 386.01 C 286.17 397.35 286.39 408.70 286.27 420.04 C 286.31 422.30 286.17 425.31 288.52 426.53 C 291.20 427.60 294.20 427.07 297.03 427.21 C 304.36 427.04 311.73 427.52 319.04 426.95 C 322.44 426.37 322.43 420.75 319.05 420.15 C 311.25 419.44 303.38 420.13 295.56 419.82 C 295.59 415.47 295.58 411.12 295.58 406.78 C 302.60 406.71 309.65 407.09 316.66 406.54 C 320.07 405.84 319.57 399.91 315.98 399.96 C 309.20 399.54 302.39 399.95 295.59 399.80 C 295.57 396.05 295.57 392.30 295.58 388.55 C 303.03 388.43 310.50 388.74 317.94 388.37 C 321.67 388.25 321.80 381.95 318.11 381.66 C 309.41 381.03 300.65 381.57 291.93 381.42 C 289.16 381.15 286.27 383.00 286.38 386.01 M 375.06 381.95 C 372.19 383.34 372.77 388.27 375.95 388.84 C 379.96 389.33 384.02 388.96 388.05 389.08 C 387.92 400.08 388.05 411.07 387.99 422.07 C 387.75 424.61 389.07 427.71 391.95 427.92 C 394.85 428.51 397.33 425.86 397.14 423.05 C 397.37 411.73 397.16 400.40 397.23 389.08 C 401.42 388.89 405.69 389.52 409.82 388.64 C 413.41 387.46 412.48 381.48 408.64 381.52 C 400.79 381.23 392.93 381.50 385.08 381.39 C 381.74 381.50 378.31 381.05 375.06 381.95 Z'
/>
<path
fill='#248a57'
opacity='1.00'
d=' M 160.39 388.45 C 164.79 387.33 170.01 388.38 173.03 391.97 C 176.12 395.52 177.00 400.46 176.87 405.04 C 176.76 409.47 175.56 414.16 172.29 417.34 C 167.50 421.98 158.82 421.68 154.58 416.43 C 150.59 411.44 150.26 404.45 151.51 398.43 C 152.46 393.85 155.68 389.57 160.39 388.45 Z'
/>
<path
fill='#248a57'
opacity='1.00'
d=' M 203.47 388.42 C 208.28 388.55 213.18 387.93 217.93 388.93 C 222.82 390.10 223.71 398.14 218.81 399.89 C 213.88 401.57 208.52 400.89 203.40 400.90 C 203.44 396.73 203.45 392.57 203.47 388.42 Z'
/>
<path
fill='#248a57'
opacity='1.00'
d=' M 249.45 388.38 C 254.29 388.56 259.22 387.96 264.00 388.94 C 268.52 390.07 269.67 397.04 265.66 399.44 C 260.63 401.83 254.85 400.80 249.47 400.94 C 249.51 396.75 249.48 392.57 249.45 388.38 Z'
/>
</g>
<g id='#74c39cff'>
<path
fill='#74c39c'
opacity='1.00'
d=' M 319.87 0.00 L 320.20 0.00 C 360.20 39.89 400.19 79.79 440.05 119.83 C 411.04 120.22 382.02 119.87 353.01 120.01 C 344.56 120.18 336.01 117.07 329.94 111.12 C 323.88 105.47 320.29 97.32 320.04 89.05 C 319.87 59.37 320.21 29.68 319.87 0.00 Z'
/>
</g>
<g id='#fdfdfdff'>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 360.00 382.07 C 361.58 380.00 365.24 380.16 366.61 382.38 C 367.63 384.06 367.40 386.11 367.48 387.99 C 367.39 399.62 367.55 411.27 367.40 422.90 C 367.54 425.83 365.02 428.51 362.00 428.00 C 358.74 427.96 356.92 424.93 355.26 422.58 C 349.41 413.73 343.71 404.78 337.83 395.95 C 337.55 405.51 338.19 415.09 337.54 424.63 C 337.11 428.63 330.75 429.14 329.54 425.38 C 328.85 422.98 329.14 420.43 329.08 417.98 C 329.24 407.28 328.94 396.58 329.22 385.89 C 329.13 382.87 331.97 380.41 334.92 380.63 C 337.13 380.65 338.65 382.47 339.77 384.16 C 346.13 393.83 352.50 403.51 358.93 413.14 C 358.91 404.75 358.95 396.36 358.90 387.97 C 359.01 385.99 358.69 383.73 360.00 382.07 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 100.79 382.81 C 102.34 381.06 104.95 381.53 107.03 381.37 C 116.55 381.57 126.10 381.14 135.61 381.56 C 139.25 381.72 140.15 387.40 136.71 388.62 C 132.57 389.54 128.25 388.87 124.04 389.07 C 123.84 400.72 124.22 412.40 123.86 424.04 C 123.67 427.14 119.95 429.02 117.28 427.52 C 114.89 426.34 114.76 423.37 114.75 421.05 C 114.78 410.39 114.77 399.73 114.77 389.07 C 110.85 388.97 106.91 389.29 103.01 388.89 C 100.19 388.63 98.94 384.82 100.79 382.81 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 156.46 381.58 C 164.12 379.62 173.03 380.52 179.19 385.85 C 184.59 390.56 186.43 398.11 186.28 405.03 C 186.24 412.28 183.48 420.06 177.27 424.26 C 167.20 430.79 151.07 429.05 144.81 418.06 C 140.79 410.83 140.49 401.86 143.12 394.11 C 145.11 388.05 150.26 383.15 156.46 381.58 M 160.39 388.45 C 155.68 389.57 152.46 393.85 151.51 398.43 C 150.26 404.45 150.59 411.44 154.58 416.43 C 158.82 421.68 167.50 421.98 172.29 417.34 C 175.56 414.16 176.76 409.47 176.87 405.04 C 177.00 400.46 176.12 395.52 173.03 391.97 C 170.01 388.38 164.79 387.33 160.39 388.45 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 197.74 381.67 C 202.48 381.08 207.28 381.52 212.04 381.39 C 216.77 381.52 221.99 381.01 226.14 383.76 C 231.83 387.34 233.14 395.94 229.29 401.31 C 227.11 404.31 223.42 405.53 220.02 406.56 C 225.17 409.99 228.63 415.38 231.24 420.89 C 231.80 422.43 232.87 424.27 231.83 425.86 C 230.20 428.72 225.63 428.66 223.85 425.97 C 220.01 420.80 217.60 414.61 213.15 409.89 C 210.68 407.24 206.76 407.72 203.49 407.54 C 203.32 412.99 203.66 418.45 203.31 423.89 C 203.28 427.47 198.62 429.25 195.97 427.11 C 193.92 425.36 194.24 422.43 194.15 420.02 C 194.27 408.97 194.06 397.92 194.23 386.87 C 194.12 384.61 195.24 381.99 197.74 381.67 M 203.47 388.42 C 203.45 392.57 203.44 396.73 203.40 400.90 C 208.52 400.89 213.88 401.57 218.81 399.89 C 223.71 398.14 222.82 390.10 217.93 388.93 C 213.18 387.93 208.28 388.55 203.47 388.42 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 240.23 386.91 C 240.05 384.51 241.41 381.77 244.05 381.58 C 249.02 381.13 254.02 381.52 259.00 381.41 C 263.64 381.44 268.85 381.14 272.73 384.18 C 277.81 387.82 278.91 395.49 275.74 400.71 C 273.64 404.05 269.75 405.55 266.09 406.46 C 271.87 410.81 276.28 417.09 278.28 424.04 C 278.48 428.00 272.74 429.20 270.41 426.55 C 266.10 421.38 263.88 414.69 259.13 409.85 C 256.62 407.29 252.77 407.64 249.49 407.51 C 249.34 413.00 249.76 418.50 249.33 423.98 C 249.25 427.52 244.58 429.23 241.97 427.09 C 240.14 425.65 240.25 423.12 240.22 421.03 C 240.20 409.66 240.19 398.28 240.23 386.91 M 249.45 388.38 C 249.48 392.57 249.51 396.75 249.47 400.94 C 254.85 400.80 260.63 401.83 265.66 399.44 C 269.67 397.04 268.52 390.07 264.00 388.94 C 259.22 387.96 254.29 388.56 249.45 388.38 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 286.38 386.01 C 286.27 383.00 289.16 381.15 291.93 381.42 C 300.65 381.57 309.41 381.03 318.11 381.66 C 321.80 381.95 321.67 388.25 317.94 388.37 C 310.50 388.74 303.03 388.43 295.58 388.55 C 295.57 392.30 295.57 396.05 295.59 399.80 C 302.39 399.95 309.20 399.54 315.98 399.96 C 319.57 399.91 320.07 405.84 316.66 406.54 C 309.65 407.09 302.60 406.71 295.58 406.78 C 295.58 411.12 295.59 415.47 295.56 419.82 C 303.38 420.13 311.25 419.44 319.05 420.15 C 322.43 420.75 322.44 426.37 319.04 426.95 C 311.73 427.52 304.36 427.04 297.03 427.21 C 294.20 427.07 291.20 427.60 288.52 426.53 C 286.17 425.31 286.31 422.30 286.27 420.04 C 286.39 408.70 286.17 397.35 286.38 386.01 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 375.06 381.95 C 378.31 381.05 381.74 381.50 385.08 381.39 C 392.93 381.50 400.79 381.23 408.64 381.52 C 412.48 381.48 413.41 387.46 409.82 388.64 C 405.69 389.52 401.42 388.89 397.23 389.08 C 397.16 400.40 397.37 411.73 397.14 423.05 C 397.33 425.86 394.85 428.51 391.95 427.92 C 389.07 427.71 387.75 424.61 387.99 422.07 C 388.05 411.07 387.92 400.08 388.05 389.08 C 384.02 388.96 379.96 389.33 375.95 388.84 C 372.77 388.27 372.19 383.34 375.06 381.95 Z'
/>
</g>
</svg>
)