UI fixes (#1513)

Author: KZ

src/cloud/components/Application.tsx

@@ -63,6 +63,7 @@ import Sidebar, {
 import SidebarHeader from '../../design/components/organisms/Sidebar/atoms/SidebarHeader'
 import SidebarButtonList from '../../design/components/organisms/Sidebar/molecules/SidebarButtonList'
 import { getTeamLinkHref } from './Link/TeamLink'
+import WithPastille from '../../design/components/atoms/WithPastille'
 import SidebarButton from '../../design/components/organisms/Sidebar/atoms/SidebarButton'
 import CloudGlobalSearch from './CloudGlobalSearch'
 import { useCloudSidebarSpaces } from '../lib/hooks/sidebar/useCloudSidebarSpaces'
@@ -76,6 +77,7 @@ import SidebarToggleButton from './SidebarToggleButton'
 import SidebarSubscriptionCTA from './Subscription/SidebarSubscriptionCTA'
 import { isEmpty } from 'lodash'
 import LoaderTopbar from '../../design/components/atoms/loaders/LoaderTopbar'
+import Icon from '../../design/components/atoms/Icon'
 
 interface ApplicationProps {
   className?: string
@@ -452,7 +454,11 @@ const Application = ({
           {isTimeEligibleForDiscount(team) && subscription == null ? (
             <SidebarButton
               variant='subtle'
-              icon={mdiGiftOutline}
+              icon={
+                <WithPastille>
+                  <Icon size={16} path={mdiGiftOutline} />
+                </WithPastille>
+              }
               id='sidebar__button__promo'
               label={translate(lngKeys.SidebarNewUserDiscount)}
               labelClick={() => {

src/cloud/components/Comments/CommentInput.tsx

@@ -231,6 +231,7 @@ const InputContainer = styled.div`
   .comment__input__container {
     display: flex;
     position: relative;
+    margin-top: ${({ theme }) => theme.sizes.spaces.df}px;
     margin-bottom: ${({ theme }) => theme.sizes.spaces.md}px;
 
     .comment__input__send_button {

src/cloud/components/Onboarding/FolderPageInviteSection.tsx

@@ -178,10 +178,12 @@ const FolderPageInviteSectionContainer = styled.div`
       color: ${({ theme }) => theme.colors.text.subtle};
     }
     h5 {
+      color: ${({ theme }) => theme.colors.text.primary};
       margin: ${({ theme }) => theme.sizes.spaces.sm}px 0;
       font-size: ${({ theme }) => theme.sizes.fonts.l}px;
     }
     p {
+      color: ${({ theme }) => theme.colors.text.primary};
       font-size: ${({ theme }) => theme.sizes.fonts.df}px;
       margin-bottom: ${({ theme }) => theme.sizes.spaces.sm}px;
     }

src/cloud/components/Props/Pickers/UrlSelect.tsx

@@ -127,8 +127,7 @@ const UrlSelectContainer = styled.div`
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    line-height: 18px;
-    min-height: 25px;
+    line-height: 25px;
     width: 100%;
 
     &.url-select__label--incorrect {

src/cloud/components/ViewerDisclaimer.tsx

@@ -106,7 +106,8 @@ const Container = styled.div`
   border-radius: ${({ theme }) => theme.borders.radius}px;
 
   min-height: 36px;
-  margin: ${({ theme }) => theme.sizes.spaces.md}px 0;
+  margin: ${({ theme }) => theme.sizes.spaces.md}px
+    ${({ theme }) => theme.sizes.spaces.df}px;
 
   .viewer__disclaimer__text--padding {
     padding: ${({ theme }) => theme.sizes.spaces.sm}px;

src/cloud/components/Views/EditableDocItemContainer.tsx

@@ -89,19 +89,19 @@ const EditableDocItemContainer = ({ doc, children }: ItemProps) => {
       doc: SerializedDocWithSupplemental
     ) => {
       const editTitleAction: MenuItem = {
-        icon: <Icon path={mdiPencilOutline} />,
+        icon: <Icon size={16} path={mdiPencilOutline} />,
         type: MenuTypes.Normal,
         label: translate(lngKeys.GeneralEditTitle),
         onClick: () => setEditingItemTitle(true),
       }
       const duplicateAction: MenuItem = {
-        icon: <Icon path={mdiContentDuplicate} />,
+        icon: <Icon size={16} path={mdiContentDuplicate} />,
         type: MenuTypes.Normal,
         label: translate(lngKeys.GeneralDuplicate),
         onClick: () => onDocDuplicate(doc),
       }
       const deleteDocAction: MenuItem = {
-        icon: <Icon path={mdiTrashCanOutline} />,
+        icon: <Icon size={16} path={mdiTrashCanOutline} />,
         type: MenuTypes.Normal,
         label: translate(lngKeys.GeneralDelete),
         onClick: () => deleteDocApi({ id: doc.id, teamId: doc.teamId }),

src/cloud/lib/i18n/enUS.ts

@@ -482,7 +482,8 @@ const enTranslation: TranslationSource = {
 
   [lngKeys.ViewerDisclaimerIntro]: 'Please ask your admin to give you a ',
   [lngKeys.ViewerDisclaimerOutro]: 'so that you can edit this document',
-  [lngKeys.ViewerDisclaimerFolderOutro]: 'so that you can edit this folder',
+  [lngKeys.ViewerDisclaimerFolderOutro]:
+    'so that you can create a document and folder, add properties, add views and edit folder',
   [lngKeys.MemberRole]: 'Member role',
 
   [lngKeys.DiscountModalTitle]: 'Subscribe now to receive a discount',

src/cloud/lib/i18n/ja.ts

@@ -480,12 +480,12 @@ const jpTranslation: TranslationSource = {
   [lngKeys.PlanDashboardPerUser]: '{{size}} dashboards',
   [lngKeys.PlanSmartviewPerDashboard]: '{{size}} smart views per dashboard',
   [lngKeys.SeeRoleDetails]: '各権限を確認する。',
-  [lngKeys.ViewerDisclaimerIntro]: 'このドキュメントを編集できるように',
+  [lngKeys.ViewerDisclaimerIntro]: 'Admin権限の方があなたの権限を',
   [lngKeys.ViewerDisclaimerOutro]:
-    'Admin権限の方があなたの権限をMemberに変更すると、ドキュメント編集等を行うことができるようになります。',
+    'に変更すると、ドキュメント編集やプロパティの追加を行うことができるようになります。',
   [lngKeys.ViewerDisclaimerFolderOutro]:
-    'Admin権限の方があなたの権限をMemberに変更すると、フォルダー編集等を行うことができるようになります。',
-  [lngKeys.MemberRole]: 'メンバーの役割',
+    'に変更すると、ドキュメントやFolderの作成やプロパティの追加を行うことができるようになります。',
+  [lngKeys.MemberRole]: 'Member',
 
   [lngKeys.DiscountModalTitle]: '有料プランを購読し、割引を受け取りましょう！',
   [lngKeys.DiscountModalAlreadySubscribed]:
@@ -499,7 +499,7 @@ const jpTranslation: TranslationSource = {
 
   [lngKeys.GeneralDocuments]: 'ドキュメント',
   [lngKeys.RequestSent]: 'リクエストが送信されました',
-  [lngKeys.RequestAskMemberRole]: 'メンバーの役割を尋ねる',
+  [lngKeys.RequestAskMemberRole]: 'Adminに申請を送る',
   [lngKeys.UploadLimit]: 'アップロード可能な最大容量は{{sizeInMb}}MBです。',
 
   [lngKeys.OnboardingFolderSectionTitle]: 'Boost Noteへようこそ！',

src/design/components/atoms/WithPastille.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import styled from '../../lib/styled'
+
+export const WithPastille = ({ children }: React.PropsWithChildren<{}>) => (
+  <Container>{children}</Container>
+)
+
+export default WithPastille
+
+const Container = styled.div`
+  position: relative;
+  &:after {
+    position: absolute;
+    content: '';
+    width: 12px;
+    height: 12px;
+    background-color: #cd4400;
+    top: 1px;
+    right: -2px;
+    border-radius: 50%;
+    transform: translate3d(25%, -25%, 0);
+  }
+`