From 560853fb1d77f696beefb31254ef28f24fd2e2dc Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@rupins-mbp.lan>
Date: Wed, 22 Jun 2022 11:49:35 -0700
Subject: [PATCH 1/2] Issue-835-Part-1

---
 .../elements/images/PenWithColorIcon.tsx      | 55 +++++++++++++++++
 .../web/components/patterns/HighlightBar.tsx  | 59 ++++++++++++++-----
 2 files changed, 100 insertions(+), 14 deletions(-)
 create mode 100644 packages/web/components/elements/images/PenWithColorIcon.tsx

diff --git a/packages/web/components/elements/images/PenWithColorIcon.tsx b/packages/web/components/elements/images/PenWithColorIcon.tsx
new file mode 100644
index 000000000..b3c8a75d1
--- /dev/null
+++ b/packages/web/components/elements/images/PenWithColorIcon.tsx
@@ -0,0 +1,55 @@
+import { config } from '../../tokens/stitches.config'
+
+type PenWithColorProps = {
+  color?: string
+  width?: number
+  height?: number
+}
+
+export function PenWithColorIcon({
+  color,
+  height,
+  width,
+}: PenWithColorProps): JSX.Element {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.5 20.25H8.68934C8.78783 20.25 8.88536 20.2306 8.97635 20.1929C9.06735 20.1552 9.15003 20.1 9.21967 20.0303L18 11.25L12.75 6.00001L3.96967 14.7803C3.90003 14.85 3.84478 14.9327 3.80709 15.0237C3.80379 15.0316 3.80063 15.0396 3.79761 15.0477C3.76615 15.1317 3.75 15.2208 3.75 15.3107V19.5C3.75 19.6989 3.82902 19.8897 3.96967 20.0303C4.11032 20.171 4.30109 20.25 4.5 20.25Z"
+        fill="#FFD234"
+      />
+      <path
+        d="M15.2197 3.53034L12.75 6.00001L18 11.25L20.4697 8.78034C20.6103 8.63969 20.6893 8.44892 20.6893 8.25001C20.6893 8.0511 20.6103 7.86033 20.4697 7.71968L16.2803 3.53034C16.1397 3.38969 15.9489 3.31067 15.75 3.31067C15.5511 3.31067 15.3603 3.38969 15.2197 3.53034Z"
+        fill="#FFD234"
+      />
+      <path
+        d="M8.68934 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V15.3107C3.75 15.2122 3.7694 15.1147 3.80709 15.0237C3.84478 14.9327 3.90003 14.85 3.96967 14.7803L15.2197 3.53034C15.3603 3.38969 15.5511 3.31067 15.75 3.31067C15.9489 3.31067 16.1397 3.38969 16.2803 3.53034L20.4697 7.71968C20.6103 7.86033 20.6893 8.0511 20.6893 8.25001C20.6893 8.44892 20.6103 8.63969 20.4697 8.78034L9.21967 20.0303C9.15003 20.1 9.06735 20.1552 8.97635 20.1929C8.88536 20.2306 8.78783 20.25 8.68934 20.25Z"
+        stroke="#0A0806"
+        strokeOpacity="0.8"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.75 6L18 11.25"
+        stroke="#0A0806"
+        strokeOpacity="0.8"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.95223 20.2021L3.79785 15.0477"
+        stroke="black"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx
index ead951168..43160d46c 100644
--- a/packages/web/components/patterns/HighlightBar.tsx
+++ b/packages/web/components/patterns/HighlightBar.tsx
@@ -1,16 +1,17 @@
-import { Button } from '../elements/Button'
-import { HStack, Box } from '../elements/LayoutPrimitives'
-import { AnchoredPopover } from '../patterns/AnchoredPopover'
-import { StyledText } from '../elements/StyledText'
 import { highlightBarKeyboardCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { styled, theme } from '../tokens/stitches.config'
-import { PenIcon } from '../elements/images/PenIcon'
-import { CommentIcon } from '../elements/images/CommentIcon'
-import { ShareIcon } from '../elements/images/ShareIcon'
-import { TrashIcon } from '../elements/images/TrashIcon'
 import { isAndroid } from '../../lib/deviceType'
 
+import { styled, theme } from '../tokens/stitches.config'
+import { AnchoredPopover } from '../patterns/AnchoredPopover'
+
+import { StyledText } from '../elements/StyledText'
+import { Button } from '../elements/Button'
+import { HStack, Box } from '../elements/LayoutPrimitives'
+import { TrashIcon } from '../elements/images/TrashIcon'
+import { PenWithColorIcon } from '../elements/images/PenWithColorIcon'
+import { Note } from 'phosphor-react'
+
 type PageCoordinates = {
   pageX: number
   pageY: number
@@ -48,7 +49,9 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
           bottom: 'calc(38px + env(safe-area-inset-bottom, 40px))',
           '@smDown': {
             maxWidth: '80%',
-            bottom: `calc(28px + ${isAndroid() ? 30 : 0}px + env(safe-area-inset-bottom, 40px))`,
+            bottom: `calc(28px + ${
+              isAndroid() ? 30 : 0
+            }px + env(safe-area-inset-bottom, 40px))`,
           },
         }}
       >
@@ -62,7 +65,17 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
         yAnchorCoordinate={props.anchorCoordinates.pageY}
         preventAutoFocus={false}
       >
-        <BarContent {...props} />
+        <Box>
+          css=
+          {{
+            width: '350px',
+            background: '$grayBg',
+            borderRadius: '4px',
+            border: '1px solid $grayBorder',
+            boxShadow: theme.shadows.cardBoxShadow.toString(),
+          }}
+          <BarContent {...props} />
+        </Box>
       </AnchoredPopover>
     )
   }
@@ -116,7 +129,7 @@ function BarContent(props: HighlightBarProps): JSX.Element {
           }}
         >
           <HStack css={{ height: '100%', alignItems: 'center' }}>
-            <PenIcon size={28} strokeColor={theme.colors.readerFont.toString()} />
+            <PenWithColorIcon />
             <StyledText
               style="body"
               css={{
@@ -139,7 +152,10 @@ function BarContent(props: HighlightBarProps): JSX.Element {
           onClick={() => props.handleButtonClick('delete')}
           css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px' }}
         >
-          <TrashIcon size={28} strokeColor={theme.colors.readerFont.toString()} />
+          <TrashIcon
+            size={28}
+            strokeColor={theme.colors.readerFont.toString()}
+          />
         </Button>
       )}
       <Separator />
@@ -149,7 +165,22 @@ function BarContent(props: HighlightBarProps): JSX.Element {
         onClick={() => props.handleButtonClick('comment')}
         css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px' }}
       >
-        <CommentIcon size={28} strokeColor={theme.colors.readerFont.toString()} />
+        <HStack css={{ height: '100%', alignItems: 'center' }}>
+          <Note size={24} color={theme.colors.readerFont.toString()} />
+          <StyledText
+            style="body"
+            css={{
+              pb: '4px',
+              pl: '12px',
+              m: '0px',
+              color: '$readerFont',
+              fontWeight: '400',
+              fontSize: '16px',
+            }}
+          >
+            Note
+          </StyledText>
+        </HStack>
       </Button>
       {/* <Separator />
       <Button

From 3761893aa370e9a2be01cd040253b0b57d945b90 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@rupins-mbp.lan>
Date: Thu, 23 Jun 2022 09:48:16 -0700
Subject: [PATCH 2/2] fixed icon and text position to be centered inside
 highlight bar

---
 packages/web/components/patterns/HighlightBar.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/patterns/HighlightBar.tsx b/packages/web/components/patterns/HighlightBar.tsx
index 43160d46c..f8efb3ccc 100644
--- a/packages/web/components/patterns/HighlightBar.tsx
+++ b/packages/web/components/patterns/HighlightBar.tsx
@@ -72,7 +72,7 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
             background: '$grayBg',
             borderRadius: '4px',
             border: '1px solid $grayBorder',
-            boxShadow: theme.shadows.cardBoxShadow.toString(),
+            boxShadow: '$cardBoxShadow',
           }}
           <BarContent {...props} />
         </Box>
@@ -124,7 +124,6 @@ function BarContent(props: HighlightBarProps): JSX.Element {
             height: '100%',
             m: 0,
             p: 0,
-            pt: '6px',
             alignItems: 'baseline',
           }}
         >
@@ -133,7 +132,6 @@ function BarContent(props: HighlightBarProps): JSX.Element {
             <StyledText
               style="body"
               css={{
-                pb: '4px',
                 pl: '12px',
                 m: '0px',
                 color: '$readerFont',
@@ -150,7 +148,7 @@ function BarContent(props: HighlightBarProps): JSX.Element {
           style="plainIcon"
           title="Remove Highlight"
           onClick={() => props.handleButtonClick('delete')}
-          css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px' }}
+          css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px'}}
         >
           <TrashIcon
             size={28}
@@ -163,14 +161,13 @@ function BarContent(props: HighlightBarProps): JSX.Element {
         style="plainIcon"
         title="Add Note to Highlight"
         onClick={() => props.handleButtonClick('comment')}
-        css={{ color: '$readerFont', height: '100%', m: 0, p: 0, pt: '6px' }}
+        css={{ color: '$readerFont', height: '100%', m: 0, p: 0}}
       >
         <HStack css={{ height: '100%', alignItems: 'center' }}>
           <Note size={24} color={theme.colors.readerFont.toString()} />
           <StyledText
             style="body"
             css={{
-              pb: '4px',
               pl: '12px',
               m: '0px',
               color: '$readerFont',