Use a single Plus icon

packages/web/components/elements/images/PlusIcon.tsx

@@ -1,21 +0,0 @@
-type PlusIconProps = {
-  size: number
-  strokeColor: string
-}
-
-export function PlusIcon(props: PlusIconProps): 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="M2.5 7.25C2.08579 7.25 1.75 7.58579 1.75 8C1.75 8.41421 2.08579 8.75 2.5 8.75V7.25ZM13.5 8.75C13.9142 8.75 14.25 8.41421 14.25 8C14.25 7.58579 13.9142 7.25 13.5 7.25V8.75ZM8.75 2.5C8.75 2.08579 8.41421 1.75 8 1.75C7.58579 1.75 7.25 2.08579 7.25 2.5H8.75ZM7.25 13.5C7.25 13.9142 7.58579 14.25 8 14.25C8.41421 14.25 8.75 13.9142 8.75 13.5H7.25ZM2.5 8.75H13.5V7.25H2.5V8.75ZM7.25 2.5V13.5H8.75V2.5H7.25Z"
-        fill={props.strokeColor}
-        fillOpacity="0.8"/>
-    </svg>
-  )
-}

packages/web/pages/settings/labels.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react'
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
 import { Button } from '../../components/elements/Button'
-import { PlusIcon } from '../../components/elements/images/PlusIcon'
 import { styled } from '../../components/tokens/stitches.config'
 import {
   Box,
@@ -25,7 +24,6 @@ import {
   PencilSimple,
   Trash,
   Plus,
-  DotsSixVertical,
 } from 'phosphor-react'
 import {
   LabelColor,
@@ -164,6 +162,16 @@ const IconButton = styled(Button, {
   },
 })
 
+const MobileBtnWrapper = styled(Box, {
+  display: 'flex',
+  position: 'fixed',
+  bottom: '16px',
+  right: '25px',
+  '@md': {
+    display: 'none',
+  },
+})
+
 const Input = styled('input', { ...inputStyles })
 
 const TextArea = styled('textarea', { ...inputStyles })
@@ -174,7 +182,6 @@ export default function LabelsPage(): JSX.Element {
     rowId: '',
     value: 'custom color',
   })
-  console.log('LabelsPage ~ labelColorHex', labelColorHex)
   const [editingLabelId, setEditingLabelId] = useState<string | null>(null)
   const [nameInputText, setNameInputText] = useState<string>('')
   const [descriptionInputText, setDescriptionInputText] = useState<string>('')
@@ -291,38 +298,29 @@ export default function LabelsPage(): JSX.Element {
                     }}
                     style="ctaDarkYellow"
                     css={{
-                      alignItems: 'center',
                       display: 'none',
+                      alignItems: 'center',
                       '@md': {
                         display: 'flex',
                       },
                     }}
                   >
-                    <Box style={{ display: 'flex', marginTop: 4, }}>
-                      <PlusIcon size={20} strokeColor={'#0A0806'} />
-                    </Box>
-                    <SpanBox>Create New Label</SpanBox>
+                    <Plus size={18} style={{ marginRight: '6.5px' }} />
+                    <SpanBox>Add Label</SpanBox>
                   </Button>
-                  <Box
-                    css={{
-                      position: 'fixed',
-                      bottom: '58px',
-                      right: '16px',
-                      zIndex: '1',
-                      '@md': {
-                        display: 'none',
-                      },
-                    }}
-                  >
+                  <MobileBtnWrapper>
                     <Button
+                      onClick={() => setIsCreateMode(true)}
                       style="ctaDarkYellow"
-                      onClick={() => {
-                        setIsCreateMode(true)
+                      css={{
+                        display: 'flex',
+                        border: '1px solid $grayBorder',
+                        borderRadius: '8px',
                       }}
                     >
                       <Plus size={24} />
                     </Button>
-                  </Box>
+                  </MobileBtnWrapper>
                 </>
               )}
             </Box>