Layout CreateCandidate (#177)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2025-01-23 20:13:20 +00:00 · 2021-09-10 09:41:22 +03:00 · 2021-09-10 09:41:22 +03:00 · f3f4013fab
commit f3f4013fab
parent 7a196cbd7f
13 changed files with 358 additions and 31 deletions
--- a/packages/presentation/src/components/Card.svelte
+++ b/packages/presentation/src/components/Card.svelte
@ -22,9 +22,10 @@

  // import Close from './internal/icons/Close.svelte'
  // import ScrollBox from './ScrollBox.svelte'
-  import Button from '@anticrm/ui/src/components/Button.svelte'
-  import Label from '@anticrm/ui/src/components/Label.svelte'
+  import { Button, Label, CircleButton } from '@anticrm/ui'
  import SpaceSelect from './SpaceSelect.svelte'
+  import Edit from './icons/Edit.svelte'
+  import Mail from './icons/Mail.svelte'

  export let spaceClass: Ref<Class<Space>>
  export let space: Ref<Space>
@ -32,6 +33,7 @@
  export let okLabel: IntlString
  export let okAction: () => void
  export let canSave: boolean = false
+  export let contacts: boolean = true

  const dispatch = createEventDispatcher()
 </script>
@ -43,10 +45,19 @@
    <div class="tool"><Button disabled={!canSave} label={okLabel} size={'small'} transparent on:click={() => { okAction(); dispatch('close') }} /></div>
  </div>
  <div class="content"><slot /></div>
-  <div class="flex-col pool">
+  <div class="flex-col pool" class:shrink={contacts}>
    <div class="separator" />
    <SpaceSelect _class={spaceClass} label={'Title'} placeholder={'Select Project'} bind:value={space} />
  </div>
+  {#if contacts}
+    <div class="flex-between contacts">
+      <div class="flex-row-center">
+        <CircleButton icon={Mail} />
+        <CircleButton icon={Edit} />
+      </div>
+      <CircleButton icon={Edit} />
+    </div>
+  {/if}
 </form>

 <style lang="scss">
@ -56,8 +67,6 @@
    flex-direction: column;
    min-width: 20rem;
    border-radius: 1.25rem;
-    backdrop-filter: blur(30px);
-    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .6));

    .header {
      flex-shrink: 0;
@ -83,9 +92,15 @@
      .separator {
        margin: 1rem 0;
        height: 1px;
-        background-color: #fff;
-        opacity: .1;
+        background-color: var(--theme-card-divider);
      }
+      &.shrink { margin: 0 1.75rem 1rem; }
+    }
+
+    .contacts {
+      padding: 1.25rem 1.75rem;
+      background-color: var(--theme-card-bg-accent);
+      border-radius: 0 0 1.25rem 1.25rem;
    }

    .card-bg {
@ -96,7 +111,8 @@
      right: 0;
      background-color: var(--theme-card-bg);
      border-radius: 1.25rem;
-      opacity: .2;
+      backdrop-filter: blur(24px);
+      box-shadow: var(--theme-card-shadow);
      z-index: -1;
    }
  }
--- a/packages/presentation/src/components/UserBox.svelte
+++ b/packages/presentation/src/components/UserBox.svelte
@ -20,8 +20,7 @@
  import { Label, showPopup } from '@anticrm/ui'
  import Avatar from './Avatar.svelte'
  import UsersPopup from './UsersPopup.svelte'
-  import Add from './icons/Add.svelte'
-  import Close from './icons/Close.svelte'
+  import IconAvatar from './icons/Avatar.svelte'

  import type { Ref, Class } from '@anticrm/core'
  import type { Person } from '@anticrm/contact'
@ -54,7 +53,7 @@
 <div class="flex-row-center">
  <button
    class="focused-button btn"
-    class:selected={show}
+    class:selected
    bind:this={btn}
    on:click|preventDefault={(ev) => {
      showPopup(UsersPopup, { _class, title, caption }, ev.target, (result) => {
@ -67,9 +66,7 @@
    {#if selected}
      <Avatar size={'medium'} />
    {:else}
-      <div class="icon">
-        {#if show}<Close size={'small'} />{:else}<Add size={'small'} />{/if}
-      </div>
+      <IconAvatar />
    {/if}
  </button>

@ -85,9 +82,11 @@
  .btn {
    width: 2.25rem;
    height: 2.25rem;
+    background-color: transparent;
+    border: 1px solid var(--theme-card-divider);
    border-radius: 50%;
-    border: none;
  }
+  .selected { border: none; }

  .selectUser {
    margin-left: .75rem;
--- a/packages/presentation/src/components/icons/Avatar.svelte
+++ b/packages/presentation/src/components/icons/Avatar.svelte
@ -0,0 +1,34 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-avatar" {fill} viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+	<circle class="op" cx="20" cy="13.6" r="6.4"/>
+	<path d="M33.1,33.3c-0.8-2.2-2.5-4.2-4.9-5.5c-2.3-1.3-5.2-2.1-8.2-2.1s-5.8,0.7-8.2,2.1c-2.4,1.4-4.1,3.3-4.9,5.5 c-0.1,0.4,0.1,0.8,0.5,1c0.4,0.1,0.8-0.1,1-0.5c0.7-1.9,2.2-3.5,4.2-4.7c2.1-1.2,4.7-1.9,7.4-1.9c2.7,0,5.3,0.7,7.4,1.9 c2.1,1.2,3.6,2.9,4.2,4.7c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.2,0,0.3,0C33,34.1,33.2,33.7,33.1,33.3z"/>
+	<path d="M20,20.8c3.9,0,7.1-3.2,7.1-7.1S23.9,6.5,20,6.5c-3.9,0-7.1,3.2-7.1,7.1S16.1,20.8,20,20.8z M20,8 c3.1,0,5.6,2.5,5.6,5.6s-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6S16.9,8,20,8z"/>
+</svg>
+
+<style lang="scss">
+  .svg-avatar {
+    width: 1.25rem;
+    height: 1.25rem;
+    fill: var(--theme-caption-color);
+    .op { opacity: .05; }
+  }
+</style>
--- a/packages/presentation/src/components/icons/Edit.svelte
+++ b/packages/presentation/src/components/icons/Edit.svelte
@ -0,0 +1,24 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.3,6.5l1.9-1.9c1.1-1.1,1.1-2.8,0-3.8c-1.1-1.1-2.8-1.1-3.8,0L9.5,2.7C10.4,4.3,11.7,5.6,13.3,6.5z M12.3,7.6c-1.6-1-2.9-2.3-3.8-3.8l-6.3,6.3l0,0C1.5,10.7,1.2,11,1,11.4c-0.2,0.4-0.3,0.8-0.5,1.6l-0.4,2c-0.1,0.5-0.1,0.7,0,0.9 c0.1,0.1,0.4,0.1,0.9,0l2-0.4c0.8-0.2,1.3-0.3,1.6-0.5c0.4-0.2,0.7-0.5,1.3-1.1L12.3,7.6z"/>
+</svg>
--- a/packages/presentation/src/components/icons/Mail.svelte
+++ b/packages/presentation/src/components/icons/Mail.svelte
@ -0,0 +1,24 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M12.9,2.7H3.1c-1,0-1.7,0.8-1.7,1.7v7.5c0,1,0.8,1.7,1.7,1.7h9.9c1,0,1.7-0.8,1.7-1.7V4.4C14.7,3.5,13.9,2.7,12.9,2.7z M12.9,3.7c0.1,0,0.2,0,0.3,0.1L8,7.9L2.8,3.8c0.1,0,0.2-0.1,0.3-0.1H12.9z M12.9,12.6H3.1c-0.4,0-0.7-0.3-0.7-0.7V4.7L7.7,9 C7.8,9,7.9,9.1,8,9.1S8.2,9,8.3,9l5.4-4.3v7.2C13.7,12.3,13.3,12.6,12.9,12.6z"/>
+</svg>
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@ -65,11 +65,19 @@
  --theme-menu-divider: rgba(255, 255, 255, .05);
  --theme-scroll-bar: #2C2C34;
  --theme-bg-modal: #2C2B35;
-  --theme-card-bg: #DEDEF0;
  --theme-border-modal: rgba(0, 0, 0, 0.2);
  --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
  --theme-chat-divider: rgb(36, 36, 41);

+  --theme-card-bg: rgba(222, 222, 240, .2);
+  --theme-card-bg-accent: rgba(255, 255, 255, .04);
+  --theme-card-divider: rgba(255, 255, 255, .1);
+  --theme-card-shadow: 0px 34px 74px rgba(0, 0, 0, 0.55);
+  --theme-avatar-bg: #E0DAD5;
+  --theme-avatar-hover: radial-gradient(86.62% 86.62% at 50% 13.38%, rgba(196, 196, 204, 0.4) 0%, rgba(137, 140, 150, 0.4) 100%);
+  --theme-avatar-border: rgba(255, 255, 255, .1);
+  --theme-avatar-shadow: drop-shadow(0px 0px 10px rgba(46, 41, 40, .8)) drop-shadow(0px 10px 54px rgba(125, 112, 105, 1));
+
  --theme-bg-accent-color: rgba(255, 255, 255, .03);
  --theme-bg-accent-hover: rgba(255, 255, 255, .06);
  --theme-bg-accent-press: rgba(255, 255, 255, .07);
@ -121,11 +129,19 @@
  --theme-menu-divider: rgba(255, 255, 255, .05);
  --theme-scroll-bar: #494852;
  --theme-bg-modal: #2C2B35;
-  --theme-card-bg: #DEDEF0;
  --theme-border-modal: rgba(0, 0, 0, 0.2);
  --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
  --theme-chat-divider: rgb(66, 65, 76);

+  --theme-card-bg: rgba(222, 222, 240, .2);
+  --theme-card-bg-accent: rgba(255, 255, 255, .04);
+  --theme-card-divider: rgba(255, 255, 255, .1);
+  --theme-card-shadow: 0px 34px 74px rgba(0, 0, 0, 0.55);
+  --theme-avatar-bg: #E0DAD5;
+  --theme-avatar-hover: radial-gradient(86.62% 86.62% at 50% 13.38%, rgba(196, 196, 204, 0.4) 0%, rgba(137, 140, 150, 0.4) 100%);
+  --theme-avatar-border: rgba(255, 255, 255, .1);
+  --theme-avatar-shadow: drop-shadow(0px 0px 10px rgba(46, 41, 40, .8)) drop-shadow(0px 10px 54px rgba(125, 112, 105, 1));
+
  --theme-bg-accent-color: rgba(255, 255, 255, .03);
  --theme-bg-accent-hover: rgba(255, 255, 255, .06);
  --theme-bg-accent-press: rgba(255, 255, 255, .07);
@ -176,11 +192,19 @@
  --theme-menu-divider: rgba(0, 0, 0, .08);
  --theme-scroll-bar: #CBCBCB;
  --theme-bg-modal: #fff;
-  --theme-card-bg: #DEDEF0;
  --theme-border-modal: rgba(0, 0, 0, 0.2);
  --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%);
  --theme-chat-divider: rgb(233, 233, 233);

+  --theme-card-bg: transparent;
+  --theme-card-bg-accent: rgba(0, 0, 0, .04);
+  --theme-card-divider: rgba(0, 0, 0, .1);
+  --theme-card-shadow: 0px 24px 74px rgba(100, 89, 89, 0.5);
+  --theme-avatar-bg: #C4C4C4;
+  --theme-avatar-hover: #EEEDED;
+  --theme-avatar-border: rgba(255, 255, 255, .7);
+  --theme-avatar-shadow: drop-shadow(0px 0px 10px rgba(46, 41, 40, .4)) drop-shadow(0px 10px 54px rgba(125, 112, 105, 1));
+
  --theme-bg-accent-color: rgba(0, 0, 0, .03);
  --theme-bg-accent-hover: rgba(0, 0, 0, .05);
  --theme-bg-accent-press: rgba(0, 0, 0, .07);
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@ -38,7 +38,7 @@
    align-items: center;
    width: 2rem;
    height: 2rem;
-    background-color: rgba(255, 255, 255, .2);
+    border: 1px solid var(--theme-card-divider);
    border-radius: 50%;
    backdrop-filter: blur(3px);
    cursor: pointer;
@ -48,14 +48,7 @@
      transform: scale(.75);
      pointer-events: none;
    }
-
-    &:hover {
-      background-color: rgba(255, 255, 255, .25);
-      box-shadow: 0 0 .5rem rgba(0, 0, 0, .3);
-    }
-    &:active {
-      background-color: rgba(255, 255, 255, .15);
-      box-shadow: 0 0 .5rem rgba(0, 0, 0, .1);
-    }
+    &:hover { background-color: var(--theme-bg-accent-hover); }
+    &:active { background-color: var(--theme-bg-accent-color); }
  }
 </style>
--- a/plugins/recruit-resources/img/bond.png
+++ b/plugins/recruit-resources/img/bond.png
--- a/plugins/recruit-resources/img/elon.png
+++ b/plugins/recruit-resources/img/elon.png
--- a/plugins/recruit-resources/img/girl.png
+++ b/plugins/recruit-resources/img/girl.png
--- a/plugins/recruit-resources/src/components/CreateCandidate
+++ b/plugins/recruit-resources/src/components/CreateCandidate
@ -0,0 +1,82 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import type { Ref, Space, Doc } from '@anticrm/core'
+  import DialogHeader from './DialogHeader.svelte'
+
+  import { getClient } from '@anticrm/presentation'
+
+  import recruit from '../plugin'
+  import chunter from '@anticrm/chunter'
+  import type { Candidate } from '@anticrm/recruit'
+  import type { Attachment } from '@anticrm/chunter'
+
+  export let space: Ref<Space>
+
+  const object: Candidate = {
+    lastName: '',
+    firstName: '',
+    city: ''
+  } as Candidate
+  const newValue = Object.assign({}, object)
+
+  let resume = {} as {
+    id: Ref<Attachment> | undefined
+    name: string
+    uuid: string
+    size: number
+    type: string
+  }
+
+  const dispatch = createEventDispatcher()
+  const client = getClient()
+
+  async function createCandidate() {
+    console.log(newValue)
+    // create candidate      
+    const candidateId = await client.createDoc(recruit.class.Candidate, space, {
+      firstName: newValue.firstName,
+      lastName: newValue.lastName,
+      city: newValue.city,
+      channels: newValue.channels,
+    })
+
+    console.log('resume name', resume.name)
+
+    if (resume.id !== undefined) {
+      // create attachment
+      console.log('creaing attachment space', space)
+      client.createDoc(chunter.class.Attachment, space, {
+        attachmentTo: candidateId,
+        collection: 'resume',
+        name: resume.name,
+        file: resume.uuid,
+        type: resume.type,
+        size: resume.size,
+      }, resume.id)
+
+      client.updateDoc(recruit.class.Candidate, space, candidateId, {
+        resume: resume.id
+      })
+    }
+
+    dispatch('close')
+  }
+
+</script>
+
+<DialogHeader {space} {object} {newValue} {resume} create={true} on:save={createCandidate}/>
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@ -16,15 +16,22 @@
 <script lang="ts">
  import { createEventDispatcher } from 'svelte'
  import type { Ref, Space, Doc } from '@anticrm/core'
-  import DialogHeader from './DialogHeader.svelte'

-  import { getClient } from '@anticrm/presentation'
+  import { getClient, Card } from '@anticrm/presentation'

  import recruit from '../plugin'
  import chunter from '@anticrm/chunter'
  import type { Candidate } from '@anticrm/recruit'
  import type { Attachment } from '@anticrm/chunter'

+  import { EditBox, Link, showPopup, IconFile as FileIcon } from '@anticrm/ui'
+  import FileUpload from './icons/FileUpload.svelte'
+  import Avatar from './icons/Avatar.svelte'
+  import PDFViewer from './PDFViewer.svelte'
+  import Girl from '../../img/girl.png'
+  import Elon from '../../img/elon.png'
+  import Bond from '../../img/bond.png'
+
  export let space: Ref<Space>

  const object: Candidate = {
@ -77,6 +84,96 @@
    dispatch('close')
  }

+  let inputFile: HTMLInputElement
+  let kl: number = 0
 </script>

-<DialogHeader {space} {object} {newValue} {resume} create={true} on:save={createCandidate}/>
+<!-- <DialogHeader {space} {object} {newValue} {resume} create={true} on:save={createCandidate}/> -->
+
+<Card label={'Create Candidate'} 
+      okLabel={'Save'}
+      okAction={createCandidate}
+      bind:space={space}
+      on:close={() => { dispatch('close') }}>
+
+  <div class="flex">
+    <div class="avatar" on:click={() => { (kl < 3) ? kl++ : kl = 0 }}>
+      <div class="border"/>
+      {#if kl === 0}
+        <Avatar />
+      {:else if kl === 1}
+        <img src={Girl} alt="Avatar" />
+      {:else if kl === 2}
+        <img src={Elon} alt="Avatar" />
+      {:else}
+        <img src={Bond} alt="Avatar" />
+      {/if}
+    </div>
+
+    <div class="flex-col">
+      <div class="name"><EditBox placeholder="Name*" /></div>
+      <div class="name"><EditBox placeholder="Surname*" /></div>
+      <div class="city"><EditBox placeholder="Location" /></div>
+      <div class="flex resume">
+        {#if kl === 0}
+          <a href={'#'} on:click={ () => { showPopup(PDFViewer, { file: resume.uuid }, 'right') } }>Upload resume</a>
+        {:else}
+          <a href={'#'} on:click={ () => { inputFile.click() } }>Resume</a>
+          <input bind:this={inputFile} type="file" name="file" id="file" style="display: none" on:change/>
+        {/if}
+      </div>
+    </div>
+  </div>
+</Card>
+
+<style lang="scss">
+  @import '../../../../packages/theme/styles/mixins.scss';
+
+  .avatar {
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 1rem;
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    filter: var(--theme-avatar-shadow);
+    cursor: pointer;
+
+    &::after {
+      content: '';
+      @include bg-layer(var(--theme-avatar-hover), .5);
+      z-index: -1;
+    }
+    &::before {
+      content: '';
+      @include bg-layer(var(--theme-avatar-bg), .1);
+      backdrop-filter: blur(25px);
+      z-index: -2;
+    }
+    .border {
+      @include bg-fullsize;
+      border: 2px solid var(--theme-avatar-border);
+      border-radius: 50%;
+    }
+  }
+
+  .name {
+    font-weight: 500;
+    font-size: 1.25rem;
+    color: var(--theme-caption-color);
+  }
+  .city {
+    margin: .75rem 0 .125rem;
+    font-weight: 500;
+    font-size: .75rem;
+    color: var(--theme-content-color);
+  }
+  .resume a {
+    font-size: .75rem;
+    color: var(--theme-content-dark-color);
+    &:hover { color: var(--theme-content-color); }
+  }
+</style>
--- a/plugins/recruit-resources/src/components/icons/Avatar.svelte
+++ b/plugins/recruit-resources/src/components/icons/Avatar.svelte
@ -0,0 +1,34 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-avatar" {fill} viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+	<circle class="op" cx="20" cy="13.6" r="6.4"/>
+	<path d="M33.1,33.3c-0.8-2.2-2.5-4.2-4.9-5.5c-2.3-1.3-5.2-2.1-8.2-2.1s-5.8,0.7-8.2,2.1c-2.4,1.4-4.1,3.3-4.9,5.5 c-0.1,0.4,0.1,0.8,0.5,1c0.4,0.1,0.8-0.1,1-0.5c0.7-1.9,2.2-3.5,4.2-4.7c2.1-1.2,4.7-1.9,7.4-1.9c2.7,0,5.3,0.7,7.4,1.9 c2.1,1.2,3.6,2.9,4.2,4.7c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.2,0,0.3,0C33,34.1,33.2,33.7,33.1,33.3z"/>
+	<path d="M20,20.8c3.9,0,7.1-3.2,7.1-7.1S23.9,6.5,20,6.5c-3.9,0-7.1,3.2-7.1,7.1S16.1,20.8,20,20.8z M20,8 c3.1,0,5.6,2.5,5.6,5.6s-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6S16.9,8,20,8z"/>
+</svg>
+
+<style lang="scss">
+  .svg-avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+    fill: var(--theme-caption-color);
+    .op { opacity: .05; }
+  }
+</style>