From 72e68b2b5adb99fd1ac7f63d715d5a6b470cda42 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 30 Mar 2022 09:45:07 -0700 Subject: [PATCH 01/48] Update the font and background colour on label chips --- packages/web/components/elements/LabelChip.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx index ee39b1497..c24b54e55 100644 --- a/packages/web/components/elements/LabelChip.tsx +++ b/packages/web/components/elements/LabelChip.tsx @@ -21,9 +21,11 @@ export function LabelChip(props: LabelChipProps): JSX.Element { margin: '4px', borderRadius: '32px', color: props.color, + fontSize: '12px', + fontWeight: 'bold', padding: '4px 8px 4px 8px', border: `1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.40)`, - backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.20)`, + backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.08)`, }} > {props.text} From e478b01a1795e5964fe7d3e15cbefd038c03fbd8 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 30 Mar 2022 09:45:59 -0700 Subject: [PATCH 02/48] Update label import, use LabelChip instead of styled text to display labels --- packages/web/pages/settings/labels.tsx | 31 +++++--------------------- 1 file changed, 5 insertions(+), 26 deletions(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index bdcdd7f78..4d161f65b 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react' import { PrimaryLayout } from '../../components/templates/PrimaryLayout' import { Button } from '../../components/elements/Button' import { PlusIcon } from '../../components/elements/images/PlusIcon' @@ -13,11 +14,9 @@ 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 { Label } from '../../lib/networking/queries/useGetLabelsQuery' import { isDarkTheme } from '../../lib/themeUpdater' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' - -import { useEffect, useState } from 'react' +import { Label } from '../../lib/networking/fragments/labelFragment' import { StyledText } from '../../components/elements/StyledText' import { ArrowClockwise, @@ -41,16 +40,17 @@ import { Dropdown, DropdownOption, } from '../../components/elements/DropdownElements' +import { LabelChip } from '../../components/elements/LabelChip' const HeaderWrapper = styled(Box, { width: '100%', }) const TableCard = styled(Box, { + padding: '0px', backgroundColor: '$grayBg', display: 'flex', alignItems: 'center', - padding: '8px 12px', border: '0.3px solid $grayBgActive', width: '100%', @@ -549,7 +549,6 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean '@mdDown': { borderTopLeftRadius: isFirstChild ? '5px' : '', borderTopRightRadius: isFirstChild ? '5px' : '', - }, borderBottomLeftRadius: isLastChild ? '5px' : '', borderBottomRightRadius: isLastChild ? '5px' : '', @@ -589,27 +588,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean - - - {labelName} - - + )} {(showInput && !label) ? ( From f4a037677f27dcd7bf847b177f0f3337b33e2662 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 30 Mar 2022 10:26:47 -0700 Subject: [PATCH 03/48] Consistent font sizes for headlines --- packages/web/components/elements/StyledText.tsx | 2 +- packages/web/pages/settings/emails.tsx | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx index af008f21c..0df5f3b3b 100644 --- a/packages/web/components/elements/StyledText.tsx +++ b/packages/web/components/elements/StyledText.tsx @@ -29,7 +29,7 @@ const textVariants = { }, }, fixedHeadline: { - fontSize: '$6', + fontSize: '24px', fontWeight: '500', }, subHeadline: { diff --git a/packages/web/pages/settings/emails.tsx b/packages/web/pages/settings/emails.tsx index 7b26da7b7..2e804b1a4 100644 --- a/packages/web/pages/settings/emails.tsx +++ b/packages/web/pages/settings/emails.tsx @@ -224,10 +224,6 @@ export default function EmailsPage(): JSX.Element { Email Addresses{' '} From 2c15516d9648001e2ab307e4b1021d63be75de4f Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 30 Mar 2022 13:28:37 -0700 Subject: [PATCH 04/48] Order labels by createdAt so they maintain a consistent order --- packages/api/src/resolvers/labels/index.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/api/src/resolvers/labels/index.ts b/packages/api/src/resolvers/labels/index.ts index fd779086e..249105f78 100644 --- a/packages/api/src/resolvers/labels/index.ts +++ b/packages/api/src/resolvers/labels/index.ts @@ -42,9 +42,16 @@ export const labelsResolver = authorized( }) try { - const user = await User.findOne(uid, { - relations: ['labels'], - }) + const user = await getRepository(User) + .createQueryBuilder("user") + .innerJoinAndSelect( + "user.labels", + "labels", + ) + .where("user.id = :uid", { uid }) + .orderBy("labels.createdAt", "DESC") + .getOne() + if (!user) { return { errorCodes: [LabelsErrorCode.Unauthorized], @@ -52,7 +59,7 @@ export const labelsResolver = authorized( } return { - labels: user.labels || [], + labels: user.labels?.sort((a,b) => a.createdAt.getTime() - b.createdAt.getTime()) || [], } } catch (error) { log.error(error) From edc5d6ad97d5749def0816c4373cd84a6a592bc5 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 30 Mar 2022 13:55:04 -0700 Subject: [PATCH 05/48] Fix label import for old location, apply the theme on the page --- packages/web/pages/settings/labels.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index 4d161f65b..a72532f6d 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -14,9 +14,9 @@ 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 { isDarkTheme } from '../../lib/themeUpdater' +import { applyStoredTheme, isDarkTheme } from '../../lib/themeUpdater' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' -import { Label } from '../../lib/networking/fragments/labelFragment' +import { Label } from '../../lib/networking/queries/useGetLabelsQuery' import { StyledText } from '../../components/elements/StyledText' import { ArrowClockwise, @@ -162,6 +162,8 @@ export default function LabelsPage(): JSX.Element { const [windowWidth, setWindowWidth] = useState(0) const breakpoint = 768 + applyStoredTheme(false) + useEffect(() => { const handleResizeWindow = () => setWindowWidth(window.innerWidth) if (windowWidth === 0) { From a8faaf835cfbddd95a11311f1b2b07225afe8794 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 30 Mar 2022 14:13:26 -0700 Subject: [PATCH 06/48] Remove debug sort on labels --- packages/api/src/resolvers/labels/index.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/api/src/resolvers/labels/index.ts b/packages/api/src/resolvers/labels/index.ts index 249105f78..d0b86b189 100644 --- a/packages/api/src/resolvers/labels/index.ts +++ b/packages/api/src/resolvers/labels/index.ts @@ -43,14 +43,11 @@ export const labelsResolver = authorized( 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 { @@ -59,7 +56,7 @@ export const labelsResolver = authorized( } return { - labels: user.labels?.sort((a,b) => a.createdAt.getTime() - b.createdAt.getTime()) || [], + labels: user.labels || [], } } catch (error) { log.error(error) From 88c96c824f5058ea56116ac9349bff801de38478 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 30 Mar 2022 14:23:09 -0700 Subject: [PATCH 07/48] Remove the DotsSix since we dont support re-ordering these items --- packages/web/pages/settings/labels.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index a72532f6d..5b88c860e 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -585,12 +585,9 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean padding: '0 5px', }} > - {(showInput && !label) ? null : ( - - - + {(showInput || !label) ? null : ( + + )} {(showInput && !label) ? ( From a0ef2fd40a1a5826b15f0319ae88ac634070cfd4 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Wed, 30 Mar 2022 20:31:50 -0700 Subject: [PATCH 08/48] Dont use isDarkMode, use themed color for setting icon colors --- packages/web/components/elements/Avatar.tsx | 2 +- .../components/elements/LabelColorDropdown.tsx | 7 +++---- .../web/components/tokens/stitches.config.ts | 4 ++-- packages/web/pages/settings/labels.tsx | 18 +++++++----------- 4 files changed, 13 insertions(+), 18 deletions(-) diff --git a/packages/web/components/elements/Avatar.tsx b/packages/web/components/elements/Avatar.tsx index bce69524c..30718498e 100644 --- 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: '$avatarFont', + color: '$toolColor', }) diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx index ece04e6ee..0468fba42 100644 --- 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 } from '../tokens/stitches.config' +import { styled, theme } from '../tokens/stitches.config' import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' import { HexColorPicker } from 'react-colorful' import { Button } from './Button' @@ -17,6 +17,7 @@ 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, @@ -77,8 +78,6 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => { setLabelColorHex, } = props - const isDarkMode = isDarkTheme() - const iconColor = isDarkMode ? '#FFFFFF': '#0A0806' const [open, setOpen] = useState(false); const handleCustomColorChange = (color: string) => { @@ -147,7 +146,7 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => { )} - + diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 3a09eff08..99b852118 100644 --- 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', - avatarFont: '#0A0806', + toolColor: '#0A0806', labelButtonsBg: '#F5F5F4', tooltipIcons: '#FDFAEC' @@ -212,7 +212,7 @@ const darkThemeSpec = { readerTableHeader: '#FFFFFF', tooltipIcons: '#5F5E58', avatarBg: '#000000', - avatarFont: 'rgba(255, 255, 255, 0.8)', + toolColor: 'rgba(255, 255, 255, 0.8)', labelButtonsBg: '#5F5E58', }, diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index 5b88c860e..64b797857 100644 --- 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 } from '../../components/tokens/stitches.config' +import { styled, theme } from '../../components/tokens/stitches.config' import { Box, SpanBox, @@ -14,7 +14,7 @@ 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, isDarkTheme } from '../../lib/themeUpdater' +import { applyStoredTheme } from '../../lib/themeUpdater' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { Label } from '../../lib/networking/queries/useGetLabelsQuery' import { StyledText } from '../../components/elements/StyledText' @@ -24,7 +24,6 @@ import { PencilSimple, Trash, Plus, - DotsSixVertical, } from 'phosphor-react' import { LabelColor, @@ -470,9 +469,6 @@ 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) @@ -492,7 +488,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean disabled={isCreateMode} > } + triggerElement={} > null}> + + @@ -173,14 +199,14 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => { ))} - null}> + null}> - + = ({ active, tooltipContent, tooltipSide, + arrowStyles, ...props }) => { return ( @@ -74,7 +75,7 @@ export const TooltipWrapped: FC = ({ {children} {tooltipContent} - + ) diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 99b852118..3a09eff08 100644 --- 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', }, diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index 64b797857..c6610aeb2 100644 --- 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', }, }} > - + + + Create New Label Name - + Description - {/* + - Uses - - */} - - 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 ( - + ) } @@ -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 : ( - + )} {(showInput && !label) ? ( @@ -628,22 +634,6 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean )} - {/* - - {isCreateMode && !label ? '-' : 536} - - */} - handleGenerateRandomColor(label?.id)} disabled={!(isCreateMode && !label) && !(editingLabelId === label?.id)} > - + @@ -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 ) : ( onEditPress(label)} disabled={isCreateMode} > - + deleteLabel(label.id)} disabled={isCreateMode} > - + {moreActionsButton()} )} - {/* - - {label?.description} - - - {536} Uses - - */} ) From 92925b6808ed4acb350f94e77958be609a8368c6 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Sun, 3 Apr 2022 10:21:16 -0700 Subject: [PATCH 10/48] Prettier fixes --- packages/api/src/resolvers/labels/index.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/api/src/resolvers/labels/index.ts b/packages/api/src/resolvers/labels/index.ts index 249105f78..e74454313 100644 --- a/packages/api/src/resolvers/labels/index.ts +++ b/packages/api/src/resolvers/labels/index.ts @@ -43,14 +43,11 @@ export const labelsResolver = authorized( 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 { @@ -59,7 +56,10 @@ export const labelsResolver = authorized( } return { - labels: user.labels?.sort((a,b) => a.createdAt.getTime() - b.createdAt.getTime()) || [], + labels: + user.labels?.sort( + (a, b) => a.createdAt.getTime() - b.createdAt.getTime() + ) || [], } } catch (error) { log.error(error) From 85b247321e6ef0fb0a22b231ac15b8179e6a97a5 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Sun, 3 Apr 2022 10:22:19 -0700 Subject: [PATCH 11/48] Upgrade yarn.lock --- yarn.lock | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/yarn.lock b/yarn.lock index f53b5f2ca..e39ad366d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16594,6 +16594,11 @@ react-apple-login@^1.1.3: resolved "https://registry.yarnpkg.com/react-apple-login/-/react-apple-login-1.1.3.tgz#5cb047a52a251fc52d920c7b4d9151d411994997" integrity sha512-I6/2WQEfum9QGowHs9Maea5JhzsOjl8dMCqFP5got+jnnNZRimLE6wGambAvDXdiOuLr+gwMQx5W4JeBGKJHTA== +react-colorful@^5.5.1: + version "5.5.1" + resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784" + integrity sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg== + react-dom@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" From a99ab365b81c8634fbef3ae4be1978f07246a77e Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 4 Apr 2022 09:22:18 -0700 Subject: [PATCH 12/48] Remove unused import --- packages/web/lib/networking/queries/useGetLabelsQuery.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx index 6cab8ef62..c625b592e 100644 --- a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx @@ -1,7 +1,7 @@ import { gql } from 'graphql-request' import useSWR from 'swr' import { LabelColor } from '../../../utils/settings-page/labels/types'; -import { Label, labelFragment } from '../fragments/labelFragment' +import { labelFragment } from '../fragments/labelFragment' import { publicGqlFetcher } from '../networkHelpers' type LabelsQueryResponse = { From 927044fabcef016a394dc1c9e76d06667524882c Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 4 Apr 2022 21:42:06 -0700 Subject: [PATCH 13/48] Update Label import --- packages/web/components/templates/article/EditLabelsModal.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/web/components/templates/article/EditLabelsModal.tsx b/packages/web/components/templates/article/EditLabelsModal.tsx index c2ebe7786..6b3e043d5 100644 --- a/packages/web/components/templates/article/EditLabelsModal.tsx +++ b/packages/web/components/templates/article/EditLabelsModal.tsx @@ -8,11 +8,10 @@ import { Button } from '../../elements/Button' import { StyledText } from '../../elements/StyledText' import { CrossIcon } from '../../elements/images/CrossIcon' import { theme } from '../../tokens/stitches.config' -import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery' +import { Label, useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery' import { ChangeEvent, useCallback, useState } from 'react' import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation' import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery' -import { Label } from '../../../lib/networking/fragments/labelFragment' import { LabelChip } from '../../elements/LabelChip' type EditLabelsModalProps = { From 287b20813bb35ffc00acd13ed994dc9a8c5f773f Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 4 Apr 2022 21:42:28 -0700 Subject: [PATCH 14/48] Comment out EditLabelsModal while we merge --- packages/web/pages/[username]/[slug]/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx index f06475756..a341789af 100644 --- a/packages/web/pages/[username]/[slug]/index.tsx +++ b/packages/web/pages/[username]/[slug]/index.tsx @@ -124,7 +124,7 @@ export default function Home(): JSX.Element { articleReadingProgressMutation, }} /> - {showLabelsModal && ( + {/* {showLabelsModal && ( - )} + )} */} )} From b322add96ea0657ae499c62f4fa5577ec5f323a8 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 4 Apr 2022 22:03:04 -0700 Subject: [PATCH 15/48] Use a single Plus icon --- .../components/elements/images/PlusIcon.tsx | 21 ---------- packages/web/pages/settings/labels.tsx | 42 +++++++++---------- 2 files changed, 20 insertions(+), 43 deletions(-) delete mode 100644 packages/web/components/elements/images/PlusIcon.tsx diff --git a/packages/web/components/elements/images/PlusIcon.tsx b/packages/web/components/elements/images/PlusIcon.tsx deleted file mode 100644 index fac451e8c..000000000 --- a/packages/web/components/elements/images/PlusIcon.tsx +++ /dev/null @@ -1,21 +0,0 @@ -type PlusIconProps = { - size: number - strokeColor: string -} - -export function PlusIcon(props: PlusIconProps): JSX.Element { - return ( - - - - ) -} diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index c6610aeb2..34bf8cb00 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/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(null) const [nameInputText, setNameInputText] = useState('') const [descriptionInputText, setDescriptionInputText] = useState('') @@ -291,38 +298,29 @@ export default function LabelsPage(): JSX.Element { }} style="ctaDarkYellow" css={{ - alignItems: 'center', display: 'none', + alignItems: 'center', '@md': { display: 'flex', }, }} > - - - - Create New Label + + Add Label - + - + )} From f765303164dc1683bd4aee896c70360e5873ac3f Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 4 Apr 2022 22:17:35 -0700 Subject: [PATCH 16/48] Dont use action buttons on desktop --- packages/web/pages/settings/labels.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index 34bf8cb00..c7a6e6ab2 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -706,8 +706,8 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean ) : ( - {moreActionsButton()} )} From 099cf570515f326a8c74d265b82c2cf60e9dca57 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 5 Apr 2022 10:21:03 -0700 Subject: [PATCH 17/48] Have a distinct edit/view mode for the colour buttons --- packages/web/pages/settings/labels.tsx | 90 +++++--------------------- 1 file changed, 17 insertions(+), 73 deletions(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index c7a6e6ab2..9604ddca0 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -88,21 +88,6 @@ const TableCardBox = styled(Box, { }, }) -const TableHeading = styled(Box, { - backgroundColor: '$grayBgActive', - // gridTemplateColumns: '20% 30% 1fr 230px 1fr', - gridTemplateColumns: '20% 30% 1fr 1fr', - alignItems: 'center', - padding: '12px 0px', - borderRadius: '5px 5px 0px 0px', - width: '100%', - textTransform: 'uppercase', - display: 'none', - '@md': { - display: 'grid', - }, -}) - const inputStyles = { backgroundColor: 'transparent', color: '$grayTextContrast', @@ -325,52 +310,6 @@ export default function LabelsPage(): JSX.Element { )} - - - - Name - - - - - Description - - - - - Color - - - - - Actions - - - <> {isCreateMode ? ( @@ -560,6 +499,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean display: 'grid', width: '100%', gridGap: '$1', + height: '56px', gridTemplateColumns: '3fr 1fr', '.showHidden': { display: 'none', @@ -640,15 +580,18 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean alignItems: 'center', }} > - + {showInput && ( + + )} + {showInput && ( + )} {moreActionsButton()} {editingLabelId === label?.id || !label ? ( <> - + + + + + - )} - + ) })} - - - ) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index de3bbd0e8..fa1af619e 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -147,16 +147,6 @@ 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 }) @@ -273,7 +263,7 @@ export default function LabelsPage(): JSX.Element { Labels - + {isCreateMode ? null : ( <> - - - + + )} @@ -497,8 +486,8 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean display: 'grid', width: '100%', gridGap: '$1', - height: '56px', gridTemplateColumns: '3fr 1fr', + height: editingLabelId === label?.id ? '280px' : '56px', '.showHidden': { display: 'none', }, @@ -511,7 +500,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean }, }, '@md': { - // gridTemplateColumns: '20% 15% 1fr 1fr 1fr', + height: '56px', gridTemplateColumns: '20% 28% 1fr 1fr', }, }} From 6d5159bc803e793a287093debc9adae8832a8a41 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 5 Apr 2022 13:52:17 -0700 Subject: [PATCH 23/48] Smaller padding on mobile action buttons --- packages/web/pages/settings/labels.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index fa1af619e..c8ae53a52 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -438,7 +438,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean Edit @@ -459,7 +459,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean > Delete From cdc7d625814aa12604517d8d34fe653b8308f908 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 5 Apr 2022 14:07:10 -0700 Subject: [PATCH 24/48] Update colours when changing values --- packages/web/pages/settings/labels.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index c8ae53a52..d14f0e03e 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -406,6 +406,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean const showInput = editingLabelId === label?.id || (isCreateMode && !label) const labelName = label?.name || nameInputText + const labelColor = editingLabelId === label?.id ? labelColorHex.value : label?.color const isDarkMode = isDarkTheme() const iconColor = isDarkMode ? '#D8D7D5': '#5F5E58' @@ -514,7 +515,7 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean > {(showInput && !label) ? null : ( - + )} {(showInput && !label) ? ( From 3bb72629af10200bd94586adf7b744c1813d7723 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 5 Apr 2022 14:11:12 -0700 Subject: [PATCH 25/48] Remove extra vars --- packages/web/pages/settings/labels.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index d14f0e03e..d2d6c6c73 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -402,14 +402,10 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean } = props const colorObject = labelColorObjects[label?.color || ''] || labelColorObjects['custom color'] - const { text, border, background } = colorObject const showInput = editingLabelId === label?.id || (isCreateMode && !label) - const labelName = label?.name || nameInputText const labelColor = editingLabelId === label?.id ? labelColorHex.value : label?.color - - const isDarkMode = isDarkTheme() - const iconColor = isDarkMode ? '#D8D7D5': '#5F5E58' + const iconColor = isDarkTheme() ? '#D8D7D5': '#5F5E58' const handleEdit = () => { editingLabelId && updateLabel(editingLabelId) From 8da027aaa1b321d36117ea0634e5b39da7185a03 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 5 Apr 2022 14:11:44 -0700 Subject: [PATCH 26/48] Remove unused --- packages/web/pages/settings/labels.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index d2d6c6c73..4ad7d27db 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -400,8 +400,6 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean onEditPress, resetState, } = props - const colorObject = - labelColorObjects[label?.color || ''] || labelColorObjects['custom color'] const showInput = editingLabelId === label?.id || (isCreateMode && !label) const labelColor = editingLabelId === label?.id ? labelColorHex.value : label?.color From 07bc512ff35dede8dd48b683c42271eed390548a Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 5 Apr 2022 14:15:25 -0700 Subject: [PATCH 27/48] Hide the menu button when in edit mode --- packages/web/pages/settings/labels.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index 4ad7d27db..dc770004d 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -597,9 +597,11 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean )} - - {moreActionsButton()} - + {!showInput && ( + + {moreActionsButton()} + + )} Date: Tue, 5 Apr 2022 15:03:42 -0700 Subject: [PATCH 28/48] edit mode for labels on mobile --- packages/web/pages/settings/labels.tsx | 78 +++++++++++++++++--------- 1 file changed, 53 insertions(+), 25 deletions(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index dc770004d..ce605feec 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -481,8 +481,8 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean display: 'grid', width: '100%', gridGap: '$1', - gridTemplateColumns: '3fr 1fr', - height: editingLabelId === label?.id ? '280px' : '56px', + gridTemplateColumns: '3fr 2fr', + height: editingLabelId == label?.id ? '120px' : '56px', '.showHidden': { display: 'none', }, @@ -513,13 +513,19 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean )} {(showInput && !label) ? ( - setNameInputText(event.target.value)} - required - autoFocus - /> + + setNameInputText(event.target.value)} + required + autoFocus + /> + ) : null} @@ -604,6 +610,28 @@ function GenericTableCard(props: GenericTableCardProps & { isLastChild?: boolean )} + + {showInput && ( + setDescriptionInputText(event.target.value)} + autoFocus={!!label} + /> + )} + + {editingLabelId === label?.id || !label ? ( <> - + ) : ( + - From 239a283ca8557141bbbb813c70af5475975b0814 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 5 Apr 2022 15:17:02 -0700 Subject: [PATCH 29/48] Darken the border on label chips --- packages/web/components/elements/LabelChip.tsx | 2 +- packages/web/pages/settings/labels.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx index c24b54e55..b368825e9 100644 --- a/packages/web/components/elements/LabelChip.tsx +++ b/packages/web/components/elements/LabelChip.tsx @@ -24,7 +24,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element { fontSize: '12px', fontWeight: 'bold', padding: '4px 8px 4px 8px', - border: `1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.40)`, + border: `1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.7)`, backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.08)`, }} > diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index ce605feec..dff2acf28 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -95,7 +95,7 @@ const inputStyles = { margin: '$2 0', border: '1px solid $grayBorder', borderRadius: '6px', - fontSize: '13px', + fontSize: '16px', FontFamily: '$fontFamily', width: '100%', '@md': { From 0ffc06454b66fdea9423d13cea9a7d59c40dd2f0 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 5 Apr 2022 15:56:42 -0700 Subject: [PATCH 30/48] Use the MobileEdit layout for editing labels --- packages/web/pages/settings/labels.tsx | 108 ++++++++++++++++--------- 1 file changed, 71 insertions(+), 37 deletions(-) diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx index dff2acf28..aeb0877e3 100644 --- a/packages/web/pages/settings/labels.tsx +++ b/packages/web/pages/settings/labels.tsx @@ -339,6 +339,7 @@ export default function LabelsPage(): JSX.Element { setIsCreateMode={setIsCreateMode} createLabel={createLabel} resetState={resetLabelState} + updateLabel={updateLabel} /> ) ) : null} @@ -348,32 +349,53 @@ export default function LabelsPage(): JSX.Element { const isLastChild = i === labels.length - 1 const isFirstChild = i === 0 + if (windowWidth <= breakpoint && editingLabelId == label.id) { return ( - - ) - }) - : null} + ) + } + + return ( + + ) + }) : null} ) @@ -709,15 +731,26 @@ function MobileEditCard(props: any) { setNameInputText, setDescriptionInputText, createLabel, - resetState + resetState, + updateLabel } = props + + const handleEdit = () => { + editingLabelId && updateLabel(editingLabelId) + setEditingLabelId(null) + } + return ( - - {editingLabelId ? 'Edit Label' : 'New Label'} + + {nameInputText && ( + + + + )} setNameInputText(event.target.value)} autoFocus /> @@ -731,7 +764,8 @@ function MobileEditCard(props: any) { setLabelColorHex={setLabelColorHex} />