Merge branch 'devhatt:master' into refactorInputMedia/#542

src/components/AccordionTab/AccordionTab.module.scss

@@ -19,10 +19,8 @@
   display: none;
 
   color: $primaryWhite;
-  font-size: 4rem;
-  font-weight: 900;
 
-  margin-right: 2rem;
+  margin-top: 0.2rem;
 
   cursor: pointer;
 }
@@ -57,19 +55,18 @@
     font-size: 1.6rem;
     line-height: 1;
 
-    padding: 1.2rem;
+    padding: 1.3rem 2.2rem;
 
     position: relative;
 
     background-color: $secondaryPurple;
     border-radius: 17px 17px 0 0;
 
-    &::before {
-      font-size: 1.8rem;
+    .innerHeader {
+      display: flex;
+      gap: 1.5rem;
 
-      margin-right: 1rem;
-
-      content: '⬤';
+      align-items: center;
     }
   }
 

src/components/AccordionTab/AccordionTab.tsx

@@ -17,16 +17,18 @@ function AccordionTab({
   const handleClose = (): void => {
     if (props.onChangeOpen) props.onChangeOpen(!isOpen);
   };
-
   const renderCloseButton = (): ReactNode => (
     <button className={scss.closeButton} onClick={handleClose} type="button">
-      <Icon icon="minus" size={16} />
+      <Icon icon={isOpen ? 'minus' : 'plus'} size={16} />
     </button>
   );
 
   const renderHeader = (): ReactNode => (
     <div className={scss.header}>
-      <p className={scss.headerTitle}>{props.title}</p>
+      <div className={scss.innerHeader}>
+        <Icon icon="circle" size={12} />
+        <p className={scss.headerTitle}>{props.title}</p>
+      </div>
       {hideCloseButton ? null : renderCloseButton()}
     </div>
   );

src/components/AccountCard/AccountCard.module.scss

@@ -14,6 +14,10 @@
   border-bottom: 0.1rem solid $primaryGray;
 
   background-color: $secondaryWhite;
+
+  &.invalid {
+    background-color: $primaryRed;
+  }
 }
 
 .username {

src/components/AccountCard/AccountCard.spec.tsx

@@ -11,7 +11,7 @@ const makeSut = ({
   username = faker.internet.userName(),
   ...props
 }: Partial<AccountCardProps>): RenderResult =>
-  render(<AccountCard username={username} {...props} />);
+  render(<AccountCard invalid={false} username={username} {...props} />);
 
 describe('AccountCard', () => {
   let user = userEvent.setup();

src/components/AccountCard/AccountCard.tsx

@@ -13,6 +13,7 @@ export function AccountCard({
   avatarURL,
   className,
   hasError = false,
+  invalid = false,
   isEnabled = false,
   isFavorited = false,
   onEnableChange,
@@ -31,13 +32,20 @@ export function AccountCard({
     if (onEnableChange) onEnableChange(!enabled);
   };
 
+  const accountCardClassNames = classNames({
+    className,
+    [scss.container]: true,
+    [scss.invalid]: invalid,
+  });
+
   return (
-    <div className={classNames(scss.container, className)} {...props}>
+    <div className={accountCardClassNames} {...props}>
       <Avatar className={scss.avatar} image={avatarURL} username={username} />
       <p className={scss.username}>{username}</p>
       <button className={scss.star} onClick={handleFavoriteChange} />
       <Switch
         checked={enabled}
+        invalid={invalid}
         onChange={handleEnableChange}
         variant={hasError ? 'error' : 'default'}
       />

src/components/AccountCard/AccountCard.types.ts

@@ -6,6 +6,7 @@ export type AccountCardProps = BaseAccountCardProps & {
   avatarURL?: string;
   hasError?: boolean;
   icon?: string;
+  invalid?: boolean;
   isEnabled?: boolean;
   isFavorited?: boolean;
   onEnableChange?: (isEnabled: boolean) => void;

src/components/Icon/data.ts

@@ -1,6 +1,7 @@
 import Alert from './icons/alert.svg?react';
 import ArrowRight from './icons/arrow-right.svg?react';
 import Check from './icons/check.svg?react';
+import Circle from './icons/circle.svg?react';
 import Close from './icons/close.svg?react';
 import TriangleDropArrow from './icons/drop-down.svg?react';
 import Hamburguer from './icons/hamburguer.svg?react';
@@ -18,6 +19,7 @@ export const icons = {
   alert: Alert,
   'arrow-right': ArrowRight,
   check: Check,
+  circle: Circle,
   close: Close,
   hamburguer: Hamburguer,
   'left-arrow': LeftArrow,

src/components/Switch/Switch.module.scss

@@ -44,6 +44,10 @@
     scale: 0.85;
   }
 
+  &.invalid {
+    color: $secondaryRed;
+  }
+
   &:active::before {
     transform: scale(0.8);
   }

src/components/Switch/Switch.tsx

@@ -7,13 +7,14 @@ import scss from './Switch.module.scss';
 import { SwitchProps } from './Switch.types';
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  ({ variant = 'default', ...props }, ref) => {
+  ({ invalid, variant = 'default', ...props }, ref) => {
     const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
       if (props.onChange) props.onChange(event.target.checked);
     };
 
     const classes = classNames(scss.input, {
       [scss.error]: variant === 'error',
+      [scss.invalid]: invalid,
     });
 
     return (

src/components/Switch/Switch.types.ts

@@ -4,6 +4,7 @@ export type BaseSwitchProps = Omit<ComponentPropsWithRef<'input'>, 'onChange'>;
 
 export type SwitchProps = BaseSwitchProps & {
   checked?: boolean;
+  invalid?: boolean;
   onChange?: (checked: boolean) => void;
   variant?: 'default' | 'error';
 };

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.components.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+import scss from './SocialAccordion.module.scss';
+
+import { AccountQuantityProps } from './SocialAccordion.type';
+
+export function AccountQuantity({
+  accountQuantity,
+}: AccountQuantityProps): ReactNode {
+  return <span className={scss.accountQuantity}>{accountQuantity}+</span>;
+}

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss

@@ -20,6 +20,10 @@
   border: 1px solid $primaryGray;
 
   cursor: pointer;
+
+  .alertIcon {
+    color: $secondaryRed;
+  }
 }
 
 .socialInfo {

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.spec.tsx

@@ -159,7 +159,7 @@ describe('SocialAccordion', () => {
 
       render(
         <SocialAccordion
-          accounts={[account]}
+          accounts={[{ ...account, valid: true }]}
           error={false}
           socialMediaId="DISCORD_EXAMPLE_ID"
         />

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx

@@ -12,6 +12,7 @@ import scss from './SocialAccordion.module.scss';
 
 import iconPlaceholderForIcon from './assets/facebook.svg';
 
+import { AccountQuantity } from './SocialAccordion.components';
 import { SocialAccordionProps } from './SocialAccordion.type';
 
 function SocialAccordion(props: SocialAccordionProps): ReactNode {
@@ -35,6 +36,7 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
       <li key={account.id}>
         <AccountCard
           avatarURL={account.avatar}
+          invalid={!account.valid}
           isEnabled={account.valid}
           onEnableChange={(enable) => activateSocialTab(enable, account)}
           username={account.userName}
@@ -46,6 +48,8 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
     <ul role="listitem">{renderAccordionMap()}</ul>
   );
 
+  const hasInvalidAccount = props.accounts.some(({ valid }) => !valid);
+
   return (
     <Accordion
       className={scss.wrapper}
@@ -69,9 +73,12 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
             </div>
             {props.error && renderError()}
             <div className={scss.accordionInfo}>
-              <span className={scss.accountQuantity}>
-                {props.accounts.length}+
-              </span>
+              {hasInvalidAccount ? (
+                <Icon className={scss.alertIcon} icon="alert" size={16} />
+              ) : (
+                <AccountQuantity accountQuantity={props.accounts.length} />
+              )}
+
               <Icon
                 aria-label={
                   isOpen ? 'Accordion is open' : 'Accordion is closed'

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.type.ts

@@ -12,3 +12,7 @@ export type IAccountList = {
   socialMediaName?: string;
   username: string;
 };
+
+export type AccountQuantityProps = {
+  accountQuantity: number;
+};

src/stores/useSocialMediaStore/useSocialMediaStore.spec.ts

@@ -101,7 +101,7 @@ describe('useSocialMediaStore', () => {
           socialMediaId: 'DISCORD_EXAMPLE_ID',
           token: 'DISCORD_EXAMPLE_TOKEN_1',
           userName: 'Discord User 1',
-          valid: false,
+          valid: true,
         },
       ],
       TWITTER_EXAMPLE_ID: [
@@ -115,7 +115,7 @@ describe('useSocialMediaStore', () => {
           socialMediaId: 'TWITTER_EXAMPLE_ID',
           token: 'TWITTER_EXAMPLE_TOKEN_14',
           userName: 'Twitter User 14',
-          valid: false,
+          valid: true,
         },
       ],
     };

src/stores/useSocialMediaStore/useSocialMediaStore.ts

@@ -63,7 +63,7 @@ export const useSocialMediaStore = create<SocialMediaState>((set) => ({
           ...(agg[account.socialMediaId] ?? []),
           {
             ...account,
-            valid: false,
+            valid: true,
           },
         ],
       }),