Effected review corrections

2022-03-31 13:03:50 +00:00
parent d07f8c6c76
commit 1978a92a1b
7 changed files with 114 additions and 112 deletions
--- a/packages/api/src/resolvers/labels/index.ts
+++ b/packages/api/src/resolvers/labels/index.ts
@ -43,11 +43,14 @@ export const labelsResolver = authorized<LabelsSuccess, LabelsError>(

    try {
      const user = await getRepository(User)
-        .createQueryBuilder('user')
-        .innerJoinAndSelect('user.labels', 'labels')
-        .where('user.id = :uid', { uid })
-        .orderBy('labels.createdAt', 'DESC')
-        .getOne()
+              .createQueryBuilder("user")
+              .innerJoinAndSelect(
+                "user.labels",
+                "labels",
+              )
+              .where("user.id = :uid", { uid })
+              .orderBy("labels.createdAt", "DESC")
+              .getOne()

      if (!user) {
        return {
@ -56,7 +59,7 @@ export const labelsResolver = authorized<LabelsSuccess, LabelsError>(
      }

      return {
-        labels: user.labels || [],
+        labels: user.labels?.sort((a,b) => a.createdAt.getTime() - b.createdAt.getTime()) || [],
      }
    } catch (error) {
      log.error(error)
--- a/packages/web/components/elements/Avatar.tsx
+++ b/packages/web/components/elements/Avatar.tsx
@ -52,5 +52,5 @@ const StyledFallback = styled(Fallback, {
  fontSize: '$2',
  fontWeight: 700,
  backgroundColor: '$avatarBg',
-  color: '$toolColor',
+  color: '$avatarFont',
 })
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/packages/web/components/elements/DropdownElements.tsx
@ -70,9 +70,10 @@ type DropdownProps = {
  labelText?: string
  showArrow?: boolean
  triggerElement: React.ReactNode
-  children: React.ReactNode,
+  children: React.ReactNode
  styledArrow?: boolean
-  align?: DropdownAlignment 
+  align?: DropdownAlignment
+  disabled?: boolean
  css?: CSS
 }

@ -106,11 +107,12 @@ export function Dropdown({
  triggerElement,
  labelText,
  showArrow = true,
+  disabled = false,
  css
 }: DropdownProps): JSX.Element {
  return (
    <Root modal={false}>
-      <DropdownTrigger>{triggerElement}</DropdownTrigger>
+      <DropdownTrigger disabled={disabled}>{triggerElement}</DropdownTrigger>
      <DropdownContent
        css={css}
        onInteractOutside={(event) => {
--- a/packages/web/components/elements/LabelColorDropdown.tsx
+++ b/packages/web/components/elements/LabelColorDropdown.tsx
@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { styled, theme } from '../tokens/stitches.config'
+import { styled } from '../tokens/stitches.config'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { HexColorPicker } from 'react-colorful'
 import { Button } from './Button'
@ -17,7 +17,6 @@ import {
 import { labelColorObjects } from '../../utils/settings-page/labels/labelColorObjects'
 import { DropdownOption } from './DropdownElements'
 import { isDarkTheme } from '../../lib/themeUpdater'
-import { useDarkModeListener } from '../../lib/hooks/useDarkModeListener'

 const DropdownMenuContent = styled(DropdownMenuPrimitive.Content, {
  maxWidth: 190,
@ -67,6 +66,42 @@ const DropdownMenuTrigger = styled(DropdownMenuPrimitive.Trigger, {
 })
 const Box = styled('div', {})

+const MainContainer = styled(Box, {
+  fontFamily: 'inter',
+  fontSize: '$2',
+  lineHeight: '1.25',
+  color: '$grayText',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  backgroundColor: '$grayBg',
+  border: '1px solid $grayBorder',
+  width: '180px',
+  borderRadius: '$3',
+  px: '$3',
+  py: '$2',
+  cursor: 'pointer',
+  '&:hover': {
+    border: '1px solid $grayBorderHover',
+  },
+  '@mdDown': {
+    width: '100%'
+  }
+})
+
+const CustomLabelWrapper = styled(Box, {
+  fontSize: 13,
+  padding: '$2',
+  borderRadius: 3,
+  cursor: 'default',
+  color: '$grayText',
+
+  '&:focus': {
+    outline: 'none',
+    backgroundColor: '$grayBgHover',
+  },
+})
+
 export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
  const {
    isCreateMode,
@ -78,6 +113,8 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
    setLabelColorHex,
  } = props

+  const isDarkMode = isDarkTheme()
+  const iconColor = isDarkMode ? '#FFFFFF': '#0A0806'
  const [open, setOpen] = useState<boolean | undefined>(false);

  const handleCustomColorChange = (color: string) => {
@ -105,18 +142,7 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
          },
        }}
      >
-        <Button
-          style="ctaWhite"
-          css={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            backgroundColor: '$grayBg',
-            borderColor: '$grayBorder',
-            borderWidth: '1px',
-            width: '100%',
-          }}
-        >
+        <MainContainer>
          <SpanBox css={{ paddingRight: '$3' }}>
            {labelId !== '' && labelId === labelColorHexRowId ? (
              <LabelOption
@ -146,8 +172,8 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
            )}
          </SpanBox>

-          <CaretDown size={16} color={theme.colors.toolColor.toString()} weight="bold" />
-        </Button>
+          <CaretDown size={16} color={iconColor} weight="bold" />
+        </MainContainer>
      </DropdownMenuTrigger>

      <DropdownMenuContent sideOffset={5}>
@ -173,14 +199,14 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
          ))}
        <DropdownMenu>
          <DropdownMenuTriggerItem>
-            <DropdownOption onSelect={() => null}>
+            <CustomLabelWrapper onSelect={() => null}>
              <LabelOption
                isCreateMode={isCreateMode}
                labelId={labelId}
                color="custom color"
                isDropdownOption
              />
-            </DropdownOption>
+            </CustomLabelWrapper>
          </DropdownMenuTriggerItem>
          <DropdownMenuContent
            sideOffset={-25}
--- a/packages/web/components/elements/Tooltip.tsx
+++ b/packages/web/components/elements/Tooltip.tsx
@ -67,6 +67,7 @@ export const TooltipWrapped: FC<TooltipWrappedProps> = ({
  active,
  tooltipContent,
  tooltipSide,
+  arrowStyles,
  ...props
 }) => {
  return (
@ -74,7 +75,7 @@ export const TooltipWrapped: FC<TooltipWrappedProps> = ({
      <TooltipTrigger asChild>{children}</TooltipTrigger>
      <TooltipContent sideOffset={5} side={tooltipSide} {...props}>
        {tooltipContent}
-        <TooltipArrow style={props.arrowStyles} />
+        <TooltipArrow style={arrowStyles} />
      </TooltipContent>
    </Tooltip>
  )
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@ -160,7 +160,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =

        // Avatar Fallback color
        avatarBg: '#FFFFFF',
-        toolColor: '#0A0806',
+        avatarFont: '#0A0806',

        labelButtonsBg: '#F5F5F4',
        tooltipIcons: '#FDFAEC'
@ -212,7 +212,7 @@ const darkThemeSpec = {
    readerTableHeader: '#FFFFFF',
    tooltipIcons: '#5F5E58',
    avatarBg: '#000000',
-    toolColor: 'rgba(255, 255, 255, 0.8)',
+    avatarFont: 'rgba(255, 255, 255, 0.8)',

    labelButtonsBg: '#5F5E58',
  },
--- a/packages/web/pages/settings/labels.tsx
+++ b/packages/web/pages/settings/labels.tsx
@ -2,7 +2,7 @@ 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, theme } from '../../components/tokens/stitches.config'
+import { styled } from '../../components/tokens/stitches.config'
 import {
  Box,
  SpanBox,
@ -14,9 +14,10 @@ import { useGetLabelsQuery } from '../../lib/networking/queries/useGetLabelsQuer
 import { createLabelMutation } from '../../lib/networking/mutations/createLabelMutation'
 import { updateLabelMutation } from '../../lib/networking/mutations/updateLabelMutation'
 import { deleteLabelMutation } from '../../lib/networking/mutations/deleteLabelMutation'
-import { applyStoredTheme } from '../../lib/themeUpdater'
+import { applyStoredTheme, isDarkTheme } from '../../lib/themeUpdater'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { Label } from '../../lib/networking/queries/useGetLabelsQuery'
+
 import { StyledText } from '../../components/elements/StyledText'
 import {
  ArrowClockwise,
@ -24,6 +25,7 @@ import {
  PencilSimple,
  Trash,
  Plus,
+  DotsSixVertical,
 } from 'phosphor-react'
 import {
  LabelColor,
@ -126,18 +128,37 @@ const inputStyles = {
  },
 }

+const ActionsWrapper = styled(Box, {
+  mr: '$1',
+  display: 'flex',
+  width: 40,
+  height: 40,
+  alignItems: 'center',
+  bg: 'transparent',
+  cursor: 'pointer',
+  fontFamily: 'inter',
+  fontSize: '$2',
+  lineHeight: '1.25',
+  color: '$grayText',
+  '&:hover': {
+    opacity: 0.8,
+  },
+})
+
 const IconButton = styled(Button, {
  variants: {
    style: {
      ctaWhite: {
        color: 'red',
-        padding: '14px',
+        padding: '10px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        border: '1px solid $grayBorder',
        boxSizing: 'border-box',
        borderRadius: 6,
+        width: 40,
+        height: 40,
      },
    },
  },
@ -270,13 +291,16 @@ export default function LabelsPage(): JSX.Element {
                    }}
                    style="ctaDarkYellow"
                    css={{
+                      alignItems: 'center',
                      display: 'none',
                      '@md': {
                        display: 'flex',
                      },
                    }}
                  >
-                    <PlusIcon size={20} strokeColor={'#0A0806'} />
+                    <Box style={{ display: 'flex', marginTop: 4, }}>
+                      <PlusIcon size={20} strokeColor={'#0A0806'} />
+                    </Box>
                    <SpanBox>Create New Label</SpanBox>
                  </Button>
                  <Box
@ -309,40 +333,28 @@ export default function LabelsPage(): JSX.Element {
                style="highlightTitle"
                css={{
                  color: '$grayTextContrast',
-                  padding: '0 5px 0 60px',
+                  padding: '0 5px 0 30px',
                }}
              >
                Name
              </StyledText>
            </Box>
-            <Box style={{ flex: '35%' }}>
+            <Box>
              <StyledText
                style="highlightTitle"
                css={{
                  color: '$grayTextContrast',
+                  ml: 5,
                }}
              >
                Description
              </StyledText>
            </Box>
-            {/* <Box>
+            <Box>
              <StyledText
                style="highlightTitle"
                css={{
                  color: '$grayTextContrast',
-                  textAlign: 'right',
-                  paddingRight: '40px',
-                }}
-              >
-                Uses
-              </StyledText>
-            </Box> */}
-            <Box style={{ flex: '30%' }}>
-              <StyledText
-                style="highlightTitle"
-                css={{
-                  color: '$grayTextContrast',
-                  paddingLeft: '15px',
                }}
              >
                Color
@ -354,7 +366,7 @@ export default function LabelsPage(): JSX.Element {
                css={{
                  color: '$grayTextContrast',
                  display: 'flex',
-                  justifyContent: 'center',
+                  ml: 5,
                }}
              >
                Actions
@ -469,6 +481,9 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
    editingLabelId === label?.id || (isCreateMode && !label)
  const labelName = label?.name || nameInputText

+  const isDarkMode = isDarkTheme()
+  const iconColor = isDarkMode ? '#D8D7D5': '#5F5E58'
+
  const handleEdit = () => {
    editingLabelId && updateLabel(editingLabelId)
    setEditingLabelId(null)
@ -476,19 +491,10 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean

  const moreActionsButton = () => {
    return (
-      <Button
-        style="plainIcon"
-        css={{
-          mr: '$1',
-          display: 'flex',
-          background: 'transparent',
-          border: 'none',
-        }}
-        onClick={() => true}
-        disabled={isCreateMode}
-      >
+      <ActionsWrapper>
        <Dropdown
-          triggerElement={<DotsThree size={24} color={theme.colors.toolColor.toString()} />}
+          disabled={isCreateMode}
+          triggerElement={<DotsThree size={24} color={iconColor} />}
        >
          <DropdownOption onSelect={() => null}>
            <Button
@ -503,7 +509,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
              onClick={() => onEditPress(label)}
              disabled={isCreateMode}
            >
-              <PencilSimple size={24} color={theme.colors.toolColor.toString()} />
+              <PencilSimple size={24} color={iconColor} />
              <StyledText
                color="$grayText"
                css={{ fontSize: '$5', marginLeft: '$2' }}
@ -534,7 +540,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
            </Button>
          </DropdownOption>
        </Dropdown>
-      </Button>
+      </ActionsWrapper>
    )
  }

@ -570,7 +576,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
          },
          '@md': {
            // gridTemplateColumns: '20% 15% 1fr 1fr 1fr',
-            gridTemplateColumns: '20% 30% 1fr 1fr',
+            gridTemplateColumns: '20% 28% 1fr 1fr',
          },
        }}
      >
@ -581,9 +587,9 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
            padding: '0 5px',
          }}
        >
-          {(showInput || !label) ? null : (
+          {(showInput && !label) ? null : (
            <HStack alignment="center" css={{ ml: '16px' }}>
-              <LabelChip color={label.color} text={label.name} />
+              <LabelChip color={label?.color || ''} text={label?.name || ''} />
            </HStack>
          )}
          {(showInput && !label) ? (
@ -628,22 +634,6 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
          )}
        </HStack>

-        {/* <HStack
-          distribution="end"
-          alignment="center"
-          css={{
-            display: 'none',
-            '@md': {
-              display: 'flex',
-              paddingRight: '30px',
-            },
-          }}
-        >
-          <StyledText css={{ fontSize: '$2' }}>
-            {isCreateMode && !label ? '-' : 536}
-          </StyledText>
-        </HStack> */}
-
        <HStack
          distribution="start"
          css={{
@ -672,14 +662,14 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
                style="ctaWhite"
                css={{
                  mr: '$1',
-                  width: 46,
-                  height: 46,
+                  width: 40,
+                  height: 40,
                  background: '$labelButtonsBg',
                }}
                onClick={() => handleGenerateRandomColor(label?.id)}
                disabled={!(isCreateMode && !label) && !(editingLabelId === label?.id)}
              >
-                <ArrowClockwise size={16} color={theme.colors.toolColor.toString()} />
+                <ArrowClockwise size={16} color={iconColor} />
              </IconButton>
            </Box>
          </TooltipWrapped>
@ -693,9 +683,6 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
          alignment="center"
          css={{
            padding: '4px 8px',
-            '@md': {
-              justifyContent: 'center',
-            },
          }}
        >
            {editingLabelId === label?.id || !label ? (
@ -721,8 +708,8 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
              </>
            ) : (
              <HStack
-                distribution="end"
-                alignment="center"
+                distribution="start"
+                alignment="start"
                css={{
                  display: 'none',
                  '@md': {
@ -737,7 +724,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
                  onClick={() => onEditPress(label)}
                  disabled={isCreateMode}
                >
-                  <PencilSimple size={16} color={theme.colors.toolColor.toString()} />
+                  <PencilSimple size={16} color={iconColor} />
                </IconButton>
                <IconButton
                  style="ctaWhite"
@ -745,29 +732,12 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean
                  onClick={() => deleteLabel(label.id)}
                  disabled={isCreateMode}
                >
-                  <Trash size={16} color={theme.colors.toolColor.toString()} />
+                  <Trash size={16} color={iconColor} />
                </IconButton>
                {moreActionsButton()}
              </HStack>
            )}
        </HStack>
-        {/* <Box className="showHidden">
-          <StyledText
-            style="body"
-            css={{
-              color: '$grayTextContrast',
-              fontSize: '14px',
-              marginBottom: '$2',
-            }}
-          >
-            {label?.description}
-          </StyledText>
-          <StyledText
-            css={{ fontSize: '$2', textAlign: 'right', color: '$grayText' }}
-          >
-            {536} Uses
-          </StyledText>
-        </Box> */}
      </TableCardBox>
    </TableCard>
  )