CHECKPOINT: feat(poc): add gradient color to Textarea

packages/web/src/common/styles/theme.util.ts

@@ -24,4 +24,23 @@ export const hoverColorByPriority = {
   [Priorities.SELF]: c.blue200,
 };
 
-export const linearGradient = `linear-gradient(90deg, ${c.blue100}, ${c.blue500})`;
+export const gradientByPriority = {
+  [Priorities.UNASSIGNED]: `linear-gradient(90deg, ${c.gray100}, ${c.gray200})`,
+  [Priorities.WORK]: `linear-gradient(90deg, ${c.green500}, ${c.green400})`,
+  [Priorities.RELATIONS]: `linear-gradient(90deg, ${c.orange500}, ${c.orange300})`,
+  [Priorities.SELF]: `linear-gradient(90deg, ${c.blue300}, ${c.blue200})`,
+};
+
+export const defaultGradient = `linear-gradient(90deg, ${c.blue100}, ${c.blue500})`;
+
+export const getGradient = (color: string) => {
+  const priority = Object.keys(colorByPriority).find(
+    (key) => colorByPriority[key as Priorities] === color
+  ) as Priorities | undefined;
+
+  return priority ? gradientByPriority[priority] : defaultGradient;
+  // TODO remove
+  //   return priority
+  //     ? gradientByPriority[priority]
+  //     : `linear-gradient(90deg, ${c.gray100}, ${c.gray200})}`;
+};

packages/web/src/common/types/component.types.ts

@@ -3,6 +3,7 @@ export interface ClassNamedComponent {
 }
 
 export interface UnderlinedInput {
+  underlineColor?: string;
   withUnderline?: boolean;
 }
 

packages/web/src/components/Divider/Divider.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, useEffect, useState } from "react";
 
-import { Styled } from "./styled";
+import { StyledDivider } from "./styled";
 import { Props } from "./types";
 
 export const Divider: React.FC<Props & HTMLAttributes<HTMLDivElement>> = (
@@ -12,5 +12,5 @@ export const Divider: React.FC<Props & HTMLAttributes<HTMLDivElement>> = (
     toggle(true);
   }, []);
 
-  return <Styled toggled={toggled} {...props} />;
+  return <StyledDivider toggled={toggled} {...props} />;
 };

packages/web/src/components/Divider/styled.ts

@@ -1,12 +1,10 @@
 import styled from "styled-components";
-import { getColor } from "@core/util/color.utils";
-import { linearGradient } from "@web/common/styles/theme.util";
+import { getGradient } from "@web/common/styles/theme.util";
 
 import { Props } from "./types";
 
-export const Styled = styled.div<Props>`
-  background: ${({ colorName, color }) =>
-    color || (colorName ? getColor(colorName) : linearGradient)};
+export const StyledDivider = styled.div<Props>`
+  background: ${({ color }) => getGradient(color)};
   height: 2px;
   width: ${({ toggled, width }) => (toggled ? width || "100%" : 0)};
   transition: ${({ theme }) => theme.transition.default};

packages/web/src/components/FocusableUnderlinedComponent/FocusableUnderlinedComponent.tsx → packages/web/src/components/Focusable/Focusable.tsx

@@ -7,12 +7,19 @@ import {
 
 export type Props<T extends ClassNamedComponent> = T &
   UnderlinedInput & {
-    Component: React.ComponentType<T>;
     autoFocus?: boolean;
+    Component: React.ComponentType<T>;
+    underlineColor?: string;
   };
 
-export const Focusable = <T,>(
-  { Component, autoFocus = false, withUnderline, ...props }: Props<T>,
+const _Focusable = <T,>(
+  {
+    autoFocus = false,
+    Component,
+    underlineColor,
+    withUnderline,
+    ...props
+  }: Props<T>,
   ref: Ref<HTMLDivElement>
 ) => {
   const [isFocused, toggleFocused] = useState(autoFocus);
@@ -27,12 +34,12 @@ export const Focusable = <T,>(
         onBlur={() => toggleFocused(false)}
         autoFocus={autoFocus}
       />
-      {!!withUnderline && isFocused && <Divider />}
+      {!!withUnderline && isFocused && <Divider color={underlineColor} />}
     </>
   );
 };
 
-export const FocusableUnderlineLayout = forwardRef(Focusable) as <
+export const Focusable = forwardRef(_Focusable) as <
   T extends ClassNamedComponent
 >(
   p: Props<T> & { ref?: Ref<HTMLDivElement | HTMLTextAreaElement> }

packages/web/src/components/Input/Input.tsx

@@ -8,9 +8,9 @@ import {
   ClassNamedComponent,
   UnderlinedInput,
 } from "@web/common/types/component.types";
-import { FocusableUnderlineLayout } from "@web/components/FocusableUnderlinedComponent";
 
 import { StyledInput, Props as StyledProps } from "./styled";
+import { Focusable } from "../Focusable/Focusable";
 
 export interface Props
   extends ClassNamedComponent,
@@ -25,7 +25,7 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   { withUnderline = true, ...props }: Props,
   ref: Ref<HTMLInputElement>
 ) => (
-  <FocusableUnderlineLayout
+  <Focusable
     Component={StyledInput}
     ref={ref}
     withUnderline={withUnderline}

packages/web/src/components/Text/styled.ts

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { linearGradient } from "@web/common/styles/theme.util";
+import { getGradient, defaultGradient } from "@web/common/styles/theme.util";
 
 export interface Props {
   bgColor?: string;
@@ -26,19 +26,19 @@ export const StyledText = styled.span<Props>`
     withGradient &&
     `
   color: transparent;
-  background: ${linearGradient};
+  background: ${defaultGradient};
   background-clip: text;
   -webkit-background-clip: text; 
   `}
 
-  ${({ withUnderline = false, cursor }) =>
+  ${({ color, cursor, withUnderline = false }) =>
     withUnderline &&
     `
     cursor: ${cursor || "pointer"};
     &:hover {
       &::after {
         content: ' ';
-        background: ${linearGradient};
+        background: ${getGradient(color)};
         position: absolute;
         width: 100%;
         height: 2px;

packages/web/src/components/Textarea/Textarea.tsx

@@ -5,26 +5,32 @@ import React, {
   RefObject,
   useRef,
 } from "react";
-import { FocusableUnderlineLayout } from "@web/components/FocusableUnderlinedComponent";
+import { Focusable } from "@web/components/Focusable/Focusable";
 
-import { Styled } from "./styled";
-import { Props } from "./types";
+import { StyledTextarea } from "./styled";
+import { TextareaProps } from "./types";
 
-const Component: ForwardRefRenderFunction<HTMLTextAreaElement, Props> = (
-  { withUnderline = true, ...props }: Props,
+const _Textarea: ForwardRefRenderFunction<
+  HTMLTextAreaElement,
+  TextareaProps
+> = (
+  { withUnderline = true, underlineColor, ...props }: TextareaProps,
   parentRef: ForwardedRef<HTMLTextAreaElement>
 ) => {
+  console.log(props.color, underlineColor);
   const newRef = useRef<HTMLTextAreaElement>(null);
   const ref = (parentRef || newRef) as RefObject<HTMLTextAreaElement>;
 
   return (
-    <FocusableUnderlineLayout
-      Component={Styled}
+    <Focusable
+      Component={StyledTextarea}
       ref={ref}
+      // underlineColor="hsl(25 100 63)"
+      underlineColor={underlineColor}
       withUnderline={withUnderline}
       {...props}
     />
   );
 };
 
-export const Textarea = forwardRef(Component);
+export const Textarea = forwardRef(_Textarea);

packages/web/src/components/Textarea/styled.ts

@@ -1,9 +1,9 @@
 import styled from "styled-components";
 import TextareaAutoSize from "react-textarea-autosize";
 
-import { Props } from "./types";
+import { TextareaProps } from "./types";
 
-export const Styled = styled(TextareaAutoSize)<Props>`
+export const StyledTextarea = styled(TextareaAutoSize)<TextareaProps>`
   border: none;
   outline: none;
   font-weight: 600;

packages/web/src/components/Textarea/types.ts

@@ -5,7 +5,7 @@ import {
   UnderlinedInput,
 } from "@web/common/types/component.types";
 
-export interface Props
+export interface TextareaProps
   extends UnderlinedInput,
     ClassNamedComponent,
     TextareaAutosizeProps {

packages/web/src/views/Calendar/components/Header/DayLabels.tsx

@@ -2,7 +2,6 @@ import React, { FC } from "react";
 import { Dayjs } from "dayjs";
 import { Text } from "@web/components/Text";
 import { theme } from "@web/common/styles/theme";
-import { linearGradient } from "@web/common/styles/theme.util";
 import { getWeekDayLabel } from "@web/common/utils/event.util";
 import { JustifyContent, AlignItems } from "@web/components/Flex/styled";
 import { SpaceCharacter } from "@web/components/SpaceCharacter";

packages/web/src/views/Calendar/components/NowLine/styled.ts

@@ -1,14 +1,14 @@
 import styled from "styled-components";
 import { ZIndex } from "@web/common/constants/web.constants";
-import { linearGradient } from "@web/common/styles/theme.util";
+import { defaultGradient } from "@web/common/styles/theme.util";
 
 interface StyledNowLineProps {
   width: number;
   top: number;
 }
 
 export const StyledNowLine = styled.div<StyledNowLineProps>`
-  background: ${linearGradient};
+  background: ${defaultGradient};
   height: 1px;
   position: absolute;
   top: ${({ top }) => top}%;

packages/web/src/views/Forms/EventForm/EventForm.tsx

@@ -19,17 +19,21 @@ import {
 } from "@web/common/utils/web.date.util";
 import { StyledMigrateArrowInForm } from "@web/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled";
 import { ID_EVENT_FORM } from "@web/common/constants/web.constants";
-import { hoverColorByPriority } from "@web/common/styles/theme.util";
+import {
+  colorByPriority,
+  gradientByPriority,
+  hoverColorByPriority,
+} from "@web/common/styles/theme.util";
 
 import { FormProps, SetEventFormField } from "./types";
 import { DateTimeSection } from "./DateTimeSection";
 import { PrioritySection } from "./PrioritySection";
 import { SaveSection } from "./SaveSection";
 import {
   StyledEventForm,
-  StyledDescriptionField,
+  StyledDescription,
   StyledIconRow,
-  StyledTitleField,
+  StyledTitle,
 } from "./styled";
 
 export const EventForm: React.FC<FormProps> = ({
@@ -269,13 +273,14 @@ export const EventForm: React.FC<FormProps> = ({
           <DeleteIcon onDelete={onDeleteForm} title="Delete Event" />
         </StyledIconRow>
 
-        <StyledTitleField
+        <StyledTitle
           autoFocus
           onChange={onChangeEventTextField("title")}
           onKeyDown={ignoreDelete}
           placeholder="Title"
           role="textarea"
           name="Event Title"
+          underlineColor="hsl(25 100 63)"
           value={title}
         />
 
@@ -303,7 +308,9 @@ export const EventForm: React.FC<FormProps> = ({
           setEvent={setEvent}
         />
 
-        <StyledDescriptionField
+        <StyledDescription
+          // underlineColor={gradientByPriority[priority]}
+          underlineColor="hsl(25 100 63)"
           onChange={onChangeEventTextField("description")}
           onKeyDown={ignoreDelete}
           placeholder="Description"

packages/web/src/views/Forms/EventForm/styled.ts

@@ -26,7 +26,7 @@ export const StyledEventForm = styled.form<SomedayFormProps>`
   z-index: ${ZIndex.LAYER_1};
 `;
 
-export const StyledDescriptionField = styled(Textarea)`
+export const StyledDescription = styled(Textarea)`
   background: transparent;
   border: hidden;
   font-size: 20px;
@@ -57,7 +57,7 @@ export const StyledSubmitRow = styled(Flex)`
   padding-top: 18px;
 `;
 
-export const StyledTitleField = styled(Textarea)`
+export const StyledTitle = styled(Textarea)`
   background: transparent;
   height: 40px;
   font-size: 35px;

packages/web/src/views/Forms/SomedayEventForm/SomedayEventForm.tsx

@@ -9,10 +9,10 @@ import { PrioritySection } from "@web/views/Forms/EventForm/PrioritySection";
 import { SaveSection } from "@web/views/Forms/EventForm/SaveSection";
 import { FormProps, SetEventFormField } from "@web/views/Forms/EventForm/types";
 import {
-  StyledDescriptionField,
+  StyledDescription,
   StyledEventForm,
   StyledIconRow,
-  StyledTitleField,
+  StyledTitle,
 } from "@web/views/Forms/EventForm/styled";
 import { ID_SOMEDAY_EVENT_FORM } from "@web/common/constants/web.constants";
 import { colorByPriority } from "@web/common/styles/theme.util";
@@ -119,7 +119,7 @@ export const SomedayEventForm: React.FC<FormProps> = ({
         <DeleteIcon onDelete={onDelete} title="Delete Someday Event" />
       </StyledIconRow>
 
-      <StyledTitleField
+      <StyledTitle
         autoFocus
         onChange={onChangeEventTextField("title")}
         placeholder="Title"
@@ -136,7 +136,7 @@ export const SomedayEventForm: React.FC<FormProps> = ({
         recurrence={event.recurrence}
       />
 
-      <StyledDescriptionField
+      <StyledDescription
         onChange={onChangeEventTextField("description")}
         placeholder="Description"
         value={event.description || ""}