reverted OmnivoreNameLogo icon and change icon sizes

2022-04-28 03:07:01 +00:00
parent d1c2721b95
commit 5182a3053a
10 changed files with 253 additions and 53 deletions
--- a/packages/web/.storybook/preview.js
+++ b/packages/web/.storybook/preview.js
@ -33,7 +33,7 @@ export const decorators = [
            __html: getCssText(),
          }}
        />
-        <div className='Gray'>
+        <div>
          <Story {...context} />
        </div>
      </>
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@ -87,6 +87,19 @@ export const Button = styled('button', {
        cursor: 'pointer',
        '&:focus': { outline: 'none' },
      },
+      ctaModal: {
+        height: '32px',
+        verticalAlign: 'middle',
+        color: '$textDefault',
+        backgroundColor: '$grayBase',
+        fontWeight: '600',
+        padding: '0px 12px',
+        fontSize: '16px',
+        border: '1px solid $grayBorder',
+        cursor: 'pointer',
+        borderRadius: '8px',
+        '&:focus': { outline: 'none' },
+      },
      ctaSecondary: {
        color: '$grayText',
        border: 'none',
--- a/packages/web/components/elements/ModalPrimitives.tsx
+++ b/packages/web/components/elements/ModalPrimitives.tsx
@ -10,6 +10,8 @@ const overlayShow = keyframes({

 export const ModalOverlay = styled(Overlay, {
  backgroundColor: '$overlay',
+  width: '100vw',
+  height: '100vh',
  position: 'fixed',
  inset: 0,
  '@media (prefers-reduced-motion: no-preference)': {
@ -37,7 +39,6 @@ export const ModalContent = styled(Modal, {
  width: '90vw',
  maxWidth: '600px',
  maxHeight: '85vh',
-  p: '$1',
  '@media (prefers-reduced-motion: no-preference)': {
    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
    willChange: 'transform',
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@ -50,6 +50,24 @@ const textVariants = {
      color: '$grayText',
      margin: 0,
    },
+    modalTitle: {
+      fontSize: '29px',
+      lineHeight: '37.7px',
+      color: '$textDefault',
+      margin: 0,
+    },
+    boldText: {
+      fontWeight: '600',
+      fontSize: '16px',
+      lineHeight: '1',
+      color: '$textDefault',
+    },
+    shareHighlightModalAnnotation: {
+      fontSize: '18px',
+      lineHeight: '23.4px',
+      color: '$textSubtle',
+      m: 0,
+    },
    footnote: {
      fontSize: '$1',
    },
@ -81,12 +99,13 @@ const textVariants = {
      lineHeight: '1.5',
      cursor: 'pointer',
    },
-    highlightAuthor: {
-      fontSize: '14px',
-      fontWeight: '600',
-      lineHeight: '1.5',
+    highlightTitleAndAuthor: {
+      fontSize: '18px',
+      fontStyle: 'italic',
+      lineHeight: '22.5px',
+      letterSpacing: '0.01em',
      margin: '0px',
-      color: '$omnivoreGray',
+      color: '$textSubtle',
    },
    highlightTitle: {
      fontSize: '14px',
--- a/packages/web/components/elements/images/CloseIcon.tsx
+++ b/packages/web/components/elements/images/CloseIcon.tsx
@ -0,0 +1,19 @@
+type CloseIconProps = {
+  size: number
+  strokeColor: string
+}
+
+export function CloseIcon(props: CloseIconProps): JSX.Element {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox={`0 0 ${props.size} ${props.size}`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+        <path d="M18.75 5.75L5.25 19.25" stroke={props.strokeColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M18.75 19.25L5.25 5.75" stroke={props.strokeColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  )
+}
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@ -15,20 +15,25 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
    () => props.highlight.quote.split('\n'),
    [props.highlight.quote]
  )
+  const annotation = props.highlight.annotation ?? '';

  const StyledQuote = styled(Blockquote, {
-    margin: '0px 0px 24px 0px',
-    fontSize: '14px',
-    lineHeight: '1.5',
-    fontFamily: 'Inter',
-    color: '$omnivoreGray',
+    margin: '0px 24px 16px 24px',
+    fontSize: '18px',
+    lineHeight: '27px',
+    color: '$textDefault',
  })

  return (
-    <VStack css={{ width: '100%', bg: '$omnivoreYellow', p: '20px' }}>
+    <VStack css={{ width: '100%', boxSizing: 'border-box' }}>
+      {annotation && (
+        <Box css={{p:'16px', m:'16px', ml:'24px', mr:'24px', borderRadius: '6px', bg: '$grayBase'}}>
+          <StyledText style='shareHighlightModalAnnotation'>{annotation}</StyledText>
+        </Box>)
+      }
      <StyledQuote>
        {props.highlight.prefix}
-        <SpanBox css={{ bg: '$highlight', p: '1px', borderRadius: '2px' }}>
+        <SpanBox css={{ bg: '$highlightBackground', p: '1px', borderRadius: '2px', }}>
          {lines.map((line: string, index: number) => (
            <Fragment key={index}>
              {line}
@ -43,11 +48,10 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
        </SpanBox>
        {props.highlight.suffix}
      </StyledQuote>
-      <Box css={{}}>
-        {props.author && (
-          <StyledText style="highlightAuthor">{props.author}</StyledText>
+      <Box css={{p: '24px', pt: '0', width: '100%', boxSizing: 'border-box'}}>
+        {props.author && props.title &&(
+          <StyledText style="highlightTitleAndAuthor">{props.title + props.author}</StyledText>
        )}
-        <StyledText style="highlightTitle">{props.title}</StyledText>
      </Box>
    </VStack>
  )
--- a/packages/web/components/templates/article/ShareHighlightModal.tsx
+++ b/packages/web/components/templates/article/ShareHighlightModal.tsx
@ -18,7 +18,7 @@ export function ShareHighlightModal(
    <ShareModalLayout
      url={props.url}
      type='highlight'
-      modalTitle='Share Highlight'
+      modalTitle={`Share Highlight ${props.highlight?.annotation ? '& Note' : ''}`}
      title={props.title}
      description={props.description}
      onOpenChange={props.onOpenChange}
--- a/packages/web/components/templates/article/ShareModal.tsx
+++ b/packages/web/components/templates/article/ShareModal.tsx
@ -6,12 +6,13 @@ import {
 import { Box, HStack, StyledLink, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
-import { CrossIcon } from '../../elements/images/CrossIcon'
-import { FacebookIcon } from '../../elements/images/social/FacebookIcon'
-import { TwitterIcon } from '../../elements/images/social/TwitterIcon'
 import { theme } from '../../tokens/stitches.config'
-import { CopyLinkIcon } from '../../elements/images/CopyLinkIcon'
 import { useCopyLink } from '../../../lib/hooks/useCopyLink'
+import { CloseIcon } from '../../elements/images/CloseIcon'
+import {OmnivoreLogoIcon} from '../../elements/images/OmnivoreNameLogo'
+import { useState } from 'react'
+import { TooltipWrapped } from '../../elements/Tooltip'
+import { TwitterLogo, FacebookLogo } from 'phosphor-react'

 type ShareType = 'link' | 'highlight'

@ -29,7 +30,12 @@ export function ShareModalLayout(
  props: ShareModalLayoutProps
 ): JSX.Element {
  const { copyLink, isLinkCopied } = useCopyLink(props.url, props.type)
-
+  const [switchOn, setSwitchOn] = useState(false);
+  const toggleSwitch = () => {
+    setSwitchOn(!switchOn);
+  }
+  const iconColor = theme.colors.grayText.toString()
+  
  return (
    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
      <ModalOverlay />
@ -37,56 +43,84 @@ export function ShareModalLayout(
        onPointerDownOutside={(event) => {
          event.preventDefault()
        }}
-        css={{ overflow: 'auto', p: '0' }}
+        css={{ overflow: 'auto', p: '0px', border: '1px solid $grayBorder', boxShadow: 'none'}}
      >
        <VStack distribution="start" css={{ p: '0' }}>
          <HStack
            distribution="between"
            alignment="center"
-            css={{ width: '100%' }}
+            css={{ width: '100%', pt: '24px', pl: '24px', pr: '24px', boxSizing: 'border-box', pb: '16px' }}
          >
-            <StyledText style="modalHeadline" css={{ p: '16px' }}>{props.modalTitle}</StyledText>
+            <StyledText style="modalTitle" css={{ p: '0' }}>{props.modalTitle}</StyledText>
            <Button
-              css={{ pt: '16px', pr: '16px' }}
+              css={{ p: '0' }}
              style="ghost"
              onClick={() => {
                props.onOpenChange(false)
              }}
            >
-              <CrossIcon
-                size={20}
-                strokeColor={theme.colors.grayText.toString()}
+              <CloseIcon
+                size={24}
+                strokeColor={iconColor}
              />
            </Button>
          </HStack>
          {props.children}
-          <StyledText style='logoTitle' css={{ pl: '16px', color: '$grayText', fontSize: '11px' }}>SHARE</StyledText>
          <HStack
            alignment='start'
            distribution='start'
-            css={{ p: '16px', width: '100%', gap: '16px', mb: '0px' }}
+            css={{ alignItems: 'center', pt: '16px', pb: '16px', pl: '24px', pr: '24px', height:"64px", width: '100%', boxSizing: 'border-box', gap: '8px', mb: '0px', bg: '$grayBg', borderTop: '1px solid $grayBorder', borderRadius: '0px 0px 6px 6px' }}
          >
-            <StyledLink
-              target='_blank'
-              css={{ height: '100%' }}
-              referrerPolicy='no-referrer'
-              href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}&t=${props.title}&display=page`}
+            <StyledText style="boldText" css={{ m: '0' }}>
+              Secret URL
+            </StyledText>
+            <TooltipWrapped
+              tooltipContent="Link copied!"
+              tooltipSide="top"
+              active={isLinkCopied}
+              style={{background: "linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;"}}
+              arrowStyles={{fill: "linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;"}}
            >
-              <FacebookIcon color={theme.colors.grayText.toString()} />
-            </StyledLink>
-            <StyledLink
-              target='_blank'
-              css={{ height: '100%', pl: '8px', pt: '4px' }}
-              referrerPolicy='no-referrer'
-              href={`https://twitter.com/intent/tweet?text=${props.title}&url=${props.url}`}
-            >
-              <TwitterIcon color={theme.colors.grayText.toString()} />
-            </StyledLink>
-            <Box css={{ marginLeft: 'auto' }}>
-              <Button onClick={copyLink} style='plainIcon' css={{ pl: '16px', color: '$grayText', fontSize: '11px', height: '100%', display: 'flex', alignItems: 'center' }}>
-                <span style={{ paddingTop: '4px', paddingRight: '8px' }}>Copy URL</span>
-                <CopyLinkIcon strokeColor={theme.colors.grayText.toString()} isCompleted={isLinkCopied} />
-              </Button>
+            <button onClick={toggleSwitch} className='track' style={{display:'flex', padding:'2px', flexDirection: `${switchOn ? 'row-reverse' : 'row'}`, alignItems: 'center', width: '40px', height:'24px', background: `${switchOn ? 'rgba(255, 210, 52, 1)' : 'rgba(10, 8, 6, 0.15)'}`, borderRadius: '12px', borderColor: theme.colors.grayBorder.toString(), borderWidth: 1, borderStyle: 'solid',}}>
+              <div className='thumb' style={{width: '20px', height: '20px', borderRadius: '20px', background: 'rgba(255, 255, 255, 1)', border: '2px solid rgba(0, 0, 0, 0.06)',}}>
+                </div>
+            </button>
+            </TooltipWrapped>
+            {switchOn && <Button style='ctaModal' onClick={copyLink}>
+              Copy Link
+            </Button>}
+
+            <Box css={{
+              display:'flex',
+              flexDirection: 'row',
+              marginLeft: 'auto',
+              gap: '24px',
+              alignItems: 'center',
+            }}>
+              <StyledLink
+                target='_blank'
+                css={{ height: '24px' }}
+                referrerPolicy='no-referrer'
+                href={``}
+              >
+                <OmnivoreLogoIcon size={26} strokeColor={theme.colors.textNonEssential.toString()} />
+              </StyledLink>
+              <StyledLink
+                target='_blank'
+                css={{ height: '24px' }}
+                referrerPolicy='no-referrer'
+                href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}&t=${props.title}&display=page`}
+              >
+                <FacebookLogo width={26} height={26} color={iconColor} />
+              </StyledLink>
+              <StyledLink
+                target='_blank'
+                css={{ height: '24px' }}
+                referrerPolicy='no-referrer'
+                href={`https://twitter.com/intent/tweet?text=${props.title}&url=${props.url}`}
+              >
+                <TwitterLogo width={26} height={26} color={iconColor} />
+              </StyledLink>
            </Box>
          </HStack>
        </VStack>
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@ -149,6 +149,12 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =

        labelButtonsBg: '#F5F5F4',
        tooltipIcons: '#FDFAEC',
+
+        //utility
+        textDefault: 'rgba(10, 8, 6, 0.8)',
+        textSubtle: 'rgba(10, 8, 6, 0.65)',
+        textNonEssential: 'rgba(10, 8, 6, 0.4)',
+        overlay: 'rgba(63, 62, 60, 0.2)',
      },
    },
    media: {
@ -195,6 +201,13 @@ const darkThemeSpec = {
    avatarBg: '#000000',
    avatarFont: 'rgba(255, 255, 255, 0.8)',

+
+    //utility
+    textDefault: 'rgba(255, 255, 255, 0.8)',
+    textSubtle: 'rgba(255, 255, 255, 0.65)',
+    textNonEssential: 'rgba(10, 8, 6, 0.4)',
+    overlay: 'rgba(10, 8, 6, 0.65)',
+
    labelButtonsBg: '#5F5E58',
  },
  shadows: {
--- a/packages/web/stories/ShareHighlightModal.stories.tsx
+++ b/packages/web/stories/ShareHighlightModal.stories.tsx
@ -0,0 +1,97 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import {ShareHighlightModal} from '../components/templates/article/ShareHighlightModal'; 
+import { Highlight } from '../lib/networking/fragments/highlightFragment';
+import { updateThemeLocally } from '../lib/themeUpdater';
+import { ThemeId } from '../components/tokens/stitches.config';
+
+export default {
+  title: 'Components/ShareHighlightModal',
+  parameters: {
+    previewTabs: {
+      'storybook/docs/panel': { hidden: true }
+    },
+    viewMode: 'canvas',
+  },
+  component: ShareHighlightModal,
+  argTypes: {
+    author: {control: 'text'},
+    title: {control: 'text'},
+  },
+} as ComponentMeta<typeof ShareHighlightModal>
+
+const Template = (props: {highlight: Highlight, handleOpenChange: () => void, title: string, author: string}) => {
+  return (
+  <ShareHighlightModal
+    url={`https://example.com/${props.highlight.shortId}`}
+    title={props.title}
+    author={props.author}
+    highlight={props.highlight}
+    onOpenChange={() => props.handleOpenChange()}
+  />
+)}
+
+const highlight: Highlight = {
+  id: "nnnnn",
+  shortId: "shortId",
+  quote: "children not only participate in herding work, but are also encouraged to act independently in most other areas of life. They have a say in deciding when to eat, when to sleep, and what to wear, even at temperatures of -30C (-22F).",
+  patch: "patchhhhhhy",
+  createdByMe: true,
+  updatedAt: '123',
+  sharedAt: '123',
+  prefix: "Among the Sami, an indigenous people spread across the northernmost regions of Norway, Sweden, Finland and Russia's Kola Peninsula,",
+  suffix: ' To outsiders, that independence can be surprising. Missionaries who visited the Arctic in the 18th Century and later, wrote in their diaries that it seemed like Sámi children could do whatever they liked, and that they lacked discipline altogether.',
+}
+
+const highlightWithAnnotation: Highlight = {
+  ...highlight,
+  annotation: "Okay… this is wild! I love this independence. Wondering how I can reponsibly instill this type of indepence in my own kids…",
+}
+
+export const LightShareHightlightModal: ComponentStory<typeof ShareHighlightModal> = (args: any) => {
+  updateThemeLocally(ThemeId.Light);
+  highlight.annotation = undefined;
+  return (
+    <Template {...args} handleOpenChange={() => console.log('open changed')} />
+  )
+}
+
+export const DarkShareHightlightModal: ComponentStory<typeof ShareHighlightModal> = (args: any) => {
+  updateThemeLocally(ThemeId.Dark);
+  highlight.annotation = undefined;
+  return (
+    <Template {...args} handleOpenChange={() => console.log('open changed')} />
+  )
+}
+
+export const LightShareHightlightModalWithNote: ComponentStory<typeof ShareHighlightModal> = (args: any) => {
+  updateThemeLocally(ThemeId.Light);
+  return (
+    <Template {...args} handleOpenChange={() => console.log('open changed')} />
+  )
+}
+
+export const DarkShareHightlightModalWithNote: ComponentStory<typeof ShareHighlightModal> = (args: any) => {
+  updateThemeLocally(ThemeId.Dark);
+  return (
+    <Template {...args} handleOpenChange={() => console.log('open changed')} />
+  )
+}
+
+LightShareHightlightModal.args = {
+  highlight: highlight,
+  title: 'The secret of Arctic ‘survival parenting',
+  author: ' by Suvi Pilvi King by bbc.com',
+}
+
+DarkShareHightlightModal.args = {
+  ...LightShareHightlightModal.args
+}
+
+LightShareHightlightModalWithNote.args = {
+  ...LightShareHightlightModal.args,
+  highlight: highlightWithAnnotation,
+}
+
+DarkShareHightlightModalWithNote.args = {
+  ...LightShareHightlightModalWithNote.args,
+}