doc props feedback

src/cloud/components/Application.tsx

@@ -1306,43 +1306,33 @@ function mapTree(
     })
   }
 
-  if (!team.personal) {
-    tree.push({
-      label: 'Smart Folders',
-      rows: smartFolders.map((smartFolder) => {
-        const href = `${process.env.BOOST_HUB_BASE_URL}${getSmartFolderHref(
-          smartFolder,
-          team,
-          'index'
-        )}`
-        return {
-          id: smartFolder.id,
-          label: smartFolder.name,
-          depth: 0,
-          active: href === currentPathWithDomain,
-          navigateTo: () => push(href),
-        }
-      }),
-      footer: (
-        <div
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            padding: '0 13px',
-          }}
-        >
-          <Button
-            onClick={() => {
-              openModal(<CreateSmartFolderModal />)
-            }}
-          >
-            Add Smart Folder
-          </Button>
-        </div>
-      ),
-    })
-  }
+  tree.push({
+    label: 'Smart Folders',
+    rows: smartFolders.map((smartFolder) => {
+      const href = `${process.env.BOOST_HUB_BASE_URL}${getSmartFolderHref(
+        smartFolder,
+        team,
+        'index'
+      )}`
+      return {
+        id: smartFolder.id,
+        label: smartFolder.name,
+        depth: 0,
+        active: href === currentPathWithDomain,
+        navigateTo: () => push(href),
+      }
+    }),
+    controls: [
+      {
+        icon: mdiPlus,
+        onClick: () => {
+          openModal(<CreateSmartFolderModal />)
+        },
+        tooltip: 'Add smart folder',
+      },
+    ],
+  })
+
   tree.push({
     label: 'Workspaces',
     rows: navTree,

src/cloud/components/molecules/DocShare.tsx

@@ -12,11 +12,11 @@ import Switch from 'react-switch'
 import {
   mdiChevronDown,
   mdiChevronRight,
-  mdiLinkPlus,
   mdiOpenInNew,
   mdiClipboardTextOutline,
   mdiLinkVariant,
   mdiClipboardCheckOutline,
+  mdiWeb,
 } from '@mdi/js'
 import Icon from '../atoms/Icon'
 import copy from 'copy-to-clipboard'
@@ -179,7 +179,6 @@ const DocShare = ({ currentDoc, team }: DocShareProps) => {
           const updatedDoc = { ...currentDoc, shareLink: link }
           updateDocsMap([currentDoc.id, updatedDoc])
           setPartialPageData({ pageDoc: updatedDoc })
-          setShowPasswordForm(false)
         } catch {
           pushMessage({
             title: 'Error',
@@ -188,6 +187,7 @@ const DocShare = ({ currentDoc, team }: DocShareProps) => {
         }
         setSending('idle')
       }
+      setShowPasswordForm(false)
     },
     [currentDoc, pushMessage, updateDocsMap, setPartialPageData]
   )
@@ -212,7 +212,6 @@ const DocShare = ({ currentDoc, team }: DocShareProps) => {
           const updatedDoc = { ...currentDoc, shareLink: link }
           updateDocsMap([currentDoc.id, updatedDoc])
           setPartialPageData({ pageDoc: updatedDoc })
-          setShowExpireForm(false)
         } catch {
           pushMessage({
             title: 'Error',
@@ -221,6 +220,7 @@ const DocShare = ({ currentDoc, team }: DocShareProps) => {
         }
         setSending('idle')
       }
+      setShowExpireForm(false)
     },
     [currentDoc, pushMessage, updateDocsMap, setPartialPageData]
   )
@@ -380,11 +380,26 @@ const DocShare = ({ currentDoc, team }: DocShareProps) => {
         </>
       )}
       <Container className='context__column'>
-        <Flexbox className='share__row'>
-          <label className='share__row__label'>
-            <IconMdi path={mdiLinkPlus} size={18} className='context__icon' />
-            Public Sharing
-          </label>
+        <Flexbox
+          className='share__row'
+          justifyContent='space-between'
+          alignItems='center'
+        >
+          <Flexbox
+            direction='column'
+            flex='0 1 auto'
+            justifyContent='flex-start'
+            alignItems='flex-start'
+            className='content__row__label__column'
+          >
+            <label className='context__label'>
+              <IconMdi path={mdiWeb} size={18} className='context__icon' />
+              Public Sharing
+            </label>
+            <span className='context__label__description'>
+              Anyone with this link can access
+            </span>
+          </Flexbox>
           <div className='share__row__switch'>
             <Switch
               disabled={sending !== 'idle'}
@@ -457,7 +472,8 @@ const DocShare = ({ currentDoc, team }: DocShareProps) => {
                   <Flexbox
                     flex='1 1 auto'
                     wrap='wrap'
-                    className='share__row__label'
+                    className='share__row'
+                    justifyContent='space-between'
                   >
                     <span>Password Protect</span>
                     {(subscription == null ||
@@ -502,6 +518,7 @@ const DocShare = ({ currentDoc, team }: DocShareProps) => {
                       id='share__link__password'
                       value={passwordText}
                       onChange={updatePasswordText}
+                      autoComplete={'off'}
                       readOnly={sending === 'password'}
                       placeholder='Password...'
                     />
@@ -518,7 +535,8 @@ const DocShare = ({ currentDoc, team }: DocShareProps) => {
                   <Flexbox
                     flex='1 1 auto'
                     wrap='wrap'
-                    className='share__row__label'
+                    className='share__row'
+                    justifyContent='space-between'
                   >
                     <span>Expiration Date</span>
                     {!havingPro && (

src/cloud/components/molecules/DocTagsList/TagsAutoCompleteInput.tsx

@@ -6,11 +6,13 @@ import { createTag } from '../../../api/teams/tags'
 import { SerializedTeam } from '../../../interfaces/db/team'
 import { SerializedDocWithBookmark } from '../../../interfaces/db/doc'
 import { Spinner } from '../../atoms/Spinner'
-import styled from '../../../lib/styled'
-import { inputStyle } from '../../../lib/styled/styleFunctions'
 import { useUpDownNavigationListener } from '../../../lib/keyboard'
 import { isChildNode } from '../../../lib/dom'
 import { useToast } from '../../../../shared/lib/stores/toast'
+import { contextMenuFormItem } from '../../../../shared/lib/styled/styleFunctions'
+import styled from '../../../../shared/lib/styled'
+import FormInput from '../../../../shared/components/molecules/Form/atoms/FormInput'
+import cc from 'classcat'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface TagsAutoCompleteInputProps {
@@ -147,15 +149,25 @@ const TagsAutoCompleteInput = ({ team, doc }: TagsAutoCompleteInputProps) => {
   })
 
   return (
-    <Container>
+    <Container className={cc([(doc.tags || []).length === 0 && 'empty'])}>
       {!showInput ? (
-        <button
-          className='tag__add'
-          id='tag__add__btn'
-          onClick={activateAndFocus}
-        >
-          <IconMdi path={mdiPlus} size={16} />
-        </button>
+        (doc.tags || []).length === 0 ? (
+          <button
+            className='tag__add--empty'
+            id='tag__add__btn'
+            onClick={activateAndFocus}
+          >
+            Add a label
+          </button>
+        ) : (
+          <button
+            className='tag__add'
+            id='tag__add__btn'
+            onClick={activateAndFocus}
+          >
+            <IconMdi path={mdiPlus} size={16} />
+          </button>
+        )
       ) : (
         <div
           className='tag__add__input__container'
@@ -169,7 +181,7 @@ const TagsAutoCompleteInput = ({ team, doc }: TagsAutoCompleteInputProps) => {
               style={{ marginTop: '-6px' }}
             />
           )}
-          <input
+          <FormInput
             id='autocomplete-tags'
             ref={inputRef}
             className='autocomplete__input'
@@ -203,23 +215,44 @@ const TagsAutoCompleteInput = ({ team, doc }: TagsAutoCompleteInputProps) => {
 const Container = styled.div`
   margin-top: 6px;
 
+  &.empty {
+    width: 100%;
+    margin: 0 !important;
+  }
+
+  .tag__add--empty {
+    font-size: ${({ theme }) => theme.sizes.fonts.df}px;
+    background: transparent;
+    outline: 0;
+    width: 100%;
+    display: block;
+    color: ${({ theme }) => theme.colors.text.subtle};
+    height: 32px;
+    border-radius: 4px;
+    &:hover {
+      color: ${({ theme }) => theme.colors.text.primary};
+    }
+    ${({ theme }) => contextMenuFormItem({ theme }, ':focus')};
+    text-align: left;
+  }
+
   .tag__add {
-    font-size: ${({ theme }) => theme.fontSizes.default}px;
+    font-size: ${({ theme }) => theme.sizes.fonts.df}px;
     border-radius: 100%;
     width: 25px;
     height: 25px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: none;
-    border: 1px solid ${({ theme }) => theme.subtleBorderColor};
-    color: ${({ theme }) => theme.subtleTextColor};
+    border: 1px solid ${({ theme }) => theme.colors.border.main};
+    color: ${({ theme }) => theme.colors.text.subtle};
     margin: 0 4px;
     padding: 0;
 
     &:hover,
     &:focus {
-      color: ${({ theme }) => theme.emphasizedTextColor} !important;
+      color: ${({ theme }) => theme.colors.text.primary} !important;
     }
   }
 
@@ -229,19 +262,16 @@ const Container = styled.div`
   }
 
   .autocomplete__input {
-    ${inputStyle};
     line-height: inherit !important;
     height: 28px !important;
     width: 100%;
     margin-top: 4px;
-    padding: ${({ theme }) => theme.space.xxsmall}px
-      ${({ theme }) => theme.space.xsmall}px;
   }
 
   .autocomplete__container {
     z-index: 9000;
     position: absolute;
-    padding: ${({ theme }) => theme.space.xsmall}px 0;
+    padding: ${({ theme }) => theme.sizes.spaces.xsm}px 0;
     width: 100%;
     height: auto;
     max-width: auto;
@@ -254,23 +284,23 @@ const Container = styled.div`
     border: none;
     left: 0;
     top: 100%;
-    background-color: ${({ theme }) => theme.baseBackgroundColor};
-    box-shadow: ${({ theme }) => theme.baseShadowColor};
+    background-color: ${({ theme }) => theme.colors.background.primary};
+    box-shadow: ${({ theme }) => theme.colors.shadow};
   }
 
   .autocomplete__option {
     width: 100%;
-    padding: 0 ${({ theme }) => theme.space.xsmall}px;
+    padding: 0 ${({ theme }) => theme.sizes.spaces.xsm}px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: ${({ theme }) => theme.subtleTextColor};
+    color: ${({ theme }) => theme.colors.text.subtle};
     text-decoration: none;
 
     &:hover,
     &:focus {
-      background: ${({ theme }) => theme.transparentPrimaryBackgroundColor};
-      color: ${({ theme }) => theme.primaryTextColor};
+      background: ${({ theme }) => theme.colors.background.quaternary};
+      color: ${({ theme }) => theme.colors.text.primary};
     }
   }
 `

src/cloud/components/molecules/DocTagsList/index.tsx

@@ -14,6 +14,7 @@ import { SerializedTag } from '../../../interfaces/db/tag'
 import IconMdi from '../../atoms/IconMdi'
 import { mdiChevronRight, mdiChevronDown } from '@mdi/js'
 import { useToast } from '../../../../shared/lib/stores/toast'
+import cc from 'classcat'
 
 interface DocTagsListProps {
   doc: SerializedDocWithBookmark
@@ -80,7 +81,9 @@ const DocTagsList = ({ doc, team }: DocTagsListProps) => {
 
   return (
     <StyledDocTagsListContainer>
-      <StyledDocTagsList>
+      <StyledDocTagsList
+        className={cc([(doc.tags || []).length === 0 && 'list--empty'])}
+      >
         {listContent}{' '}
         {tags.length > maxTagsDisplayed && (
           <StyledToolbarExpandTag

src/cloud/components/molecules/DocTagsList/styled.ts

@@ -27,10 +27,14 @@ export const StyledDocTagsList = styled.div`
   box-sizing: content-box;
   padding-bottom: 6px;
 
-  > div + div,
-  > div:first-child {
+  &:not(.list--empty) > div + div,
+  &:not(.list--empty) > div:first-child {
     margin-top: 6px !important;
   }
+
+  &.list--empty {
+    width: 100%;
+  }
 `
 
 export const StyledDocTagsListIcon = styled.div`

src/cloud/components/organisms/DocPage/index.tsx

@@ -120,9 +120,7 @@ const DocPage = ({
     )
   }
 
-  return docIsEditable &&
-    currentDoc.archivedAt == null &&
-    currentUser != null ? (
+  return docIsEditable && currentUser != null ? (
     <EditPage
       team={team}
       doc={currentDoc}