From 6b9b0e962427987265cd33fe55d82c6ecdf3639b Mon Sep 17 00:00:00 2001
From: wendesongomes <wendeson.gomes@live.com>
Date: Thu, 22 Aug 2024 10:13:06 -0300
Subject: [PATCH 1/6] refactor: refactor style in sideBar

---
 .../AccountCard/AccountCard.module.scss       | 19 ++++++++++++++++---
 src/components/AccountCard/AccountCard.tsx    | 19 ++++++++++++-------
 src/components/Avatar/Avatar.tsx              |  2 +-
 .../components/Sidebar/Sidebar.module.scss    |  3 +++
 .../SocialAccordion.module.scss               |  8 ++++++--
 .../SocialAccordion/SocialAccordion.tsx       |  2 +-
 6 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/components/AccountCard/AccountCard.module.scss b/src/components/AccountCard/AccountCard.module.scss
index f7b8760fd..38da3d656 100644
--- a/src/components/AccountCard/AccountCard.module.scss
+++ b/src/components/AccountCard/AccountCard.module.scss
@@ -1,5 +1,9 @@
 @use '~styles/global.scss' as *;
 
+p {
+  margin: 0;
+}
+
 .container {
   display: flex;
   flex-flow: row nowrap;
@@ -9,7 +13,7 @@
   align-items: center;
   justify-content: space-between;
 
-  padding: 0.8rem 0.8rem 0.8rem 1.6rem;
+  padding: 0.8rem;
 
   border-bottom: 0.1rem solid $primaryGray;
 
@@ -22,9 +26,8 @@
 
 .username {
   width: 100%;
-  overflow: hidden;
 
-  display: flex;
+  overflow: hidden;
 
   font-size: 1.4rem;
   text-overflow: ellipsis;
@@ -40,13 +43,23 @@
   font-size: 1.4rem;
 }
 
+.containerButton {
+  display: flex;
+  gap: 0.7rem;
+}
+
 .avatar {
   width: 40px;
   height: 40px;
 
+  display: flex;
+
   flex-shrink: 0;
 
   align-items: center;
 
   justify-content: center;
+
+  background-color: $primaryPurple;
+  border-radius: 50%;
 }
diff --git a/src/components/AccountCard/AccountCard.tsx b/src/components/AccountCard/AccountCard.tsx
index 86e1c956d..825605785 100644
--- a/src/components/AccountCard/AccountCard.tsx
+++ b/src/components/AccountCard/AccountCard.tsx
@@ -3,6 +3,7 @@ import { ReactNode, useState } from 'react';
 import classNames from 'classnames';
 
 import { Avatar } from '~components/Avatar/Avatar';
+import Icon from '~components/Icon/Icon';
 import { Switch } from '~components/Switch/Switch';
 
 import scss from './AccountCard.module.scss';
@@ -42,13 +43,17 @@ export function AccountCard({
     <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'}
-      />
+      <div className={scss.containerButton}>
+        <button className={scss.star} onClick={handleFavoriteChange}>
+          <Icon icon="star" size={20} />
+        </button>
+        <Switch
+          checked={enabled}
+          invalid={invalid}
+          onChange={handleEnableChange}
+          variant={hasError ? 'error' : 'default'}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 6173d0e47..be08cb62d 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -9,7 +9,7 @@ import { AvatarProps } from './Avatar.types';
 export function Avatar(props: AvatarProps): ReactNode {
   const [firstLetter] = props.username.split('');
 
-  if (props.image !== undefined) {
+  if (props.image === undefined) {
     return (
       <img
         {...props}
diff --git a/src/pages/home/components/Sidebar/Sidebar.module.scss b/src/pages/home/components/Sidebar/Sidebar.module.scss
index 4195d11b7..959f52e91 100644
--- a/src/pages/home/components/Sidebar/Sidebar.module.scss
+++ b/src/pages/home/components/Sidebar/Sidebar.module.scss
@@ -65,8 +65,11 @@
 }
 
 .content {
+  width: 100%;
   height: 100%;
 
+  overflow: auto;
+
   flex-direction: column;
 }
 
diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss
index 68609a6f8..aa499a9c5 100644
--- a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss
+++ b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss
@@ -9,13 +9,17 @@
   }
 }
 
+ul {
+  width: 100%;
+}
+
 .header {
   display: flex;
 
   align-items: center;
   justify-content: space-between;
 
-  padding: 1.5rem 0.6rem;
+  padding: 1.6rem;
 
   border: 1px solid $primaryGray;
 
@@ -33,7 +37,7 @@
 
   display: flex;
 
-  gap: 1rem;
+  gap: 1.6rem;
 
   align-items: center;
 }
diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
index 9378bd643..f1cbb6672 100644
--- a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
+++ b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
@@ -85,7 +85,7 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
                 }
                 className={isOpen ? scss.rotateIconUp : scss.rotateIconDown}
                 icon={isOpen ? 'triangle-drop-arrow' : 'triangle-left-arrow'}
-                size={16}
+                size={10}
               />
             </div>
           </div>

From 184fbcf5bc45eed6b2b1ffa76e655e2579030cb1 Mon Sep 17 00:00:00 2001
From: wendesongomes <wendeson.gomes@live.com>
Date: Thu, 22 Aug 2024 10:34:01 -0300
Subject: [PATCH 2/6] refactor: refactor img in avatar

---
 src/components/Avatar/Avatar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index be08cb62d..6173d0e47 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -9,7 +9,7 @@ import { AvatarProps } from './Avatar.types';
 export function Avatar(props: AvatarProps): ReactNode {
   const [firstLetter] = props.username.split('');
 
-  if (props.image === undefined) {
+  if (props.image !== undefined) {
     return (
       <img
         {...props}

From a125bc41705765d3d3c15ebe70115df80e72d5bc Mon Sep 17 00:00:00 2001
From: wendesongomes <wendeson.gomes@live.com>
Date: Thu, 22 Aug 2024 14:01:52 -0300
Subject: [PATCH 3/6] refactor: adjust header padding

---
 src/components/AccordionTab/AccordionTab.module.scss | 2 +-
 src/components/AccountCard/AccountCard.module.scss   | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/AccordionTab/AccordionTab.module.scss b/src/components/AccordionTab/AccordionTab.module.scss
index d1804fc21..24dff9715 100644
--- a/src/components/AccordionTab/AccordionTab.module.scss
+++ b/src/components/AccordionTab/AccordionTab.module.scss
@@ -55,7 +55,7 @@
     font-size: 1.6rem;
     line-height: 1;
 
-    padding: 1.3rem 2.2rem;
+    padding: 2.2rem;
 
     position: relative;
 
diff --git a/src/components/AccountCard/AccountCard.module.scss b/src/components/AccountCard/AccountCard.module.scss
index 38da3d656..b4ff41739 100644
--- a/src/components/AccountCard/AccountCard.module.scss
+++ b/src/components/AccountCard/AccountCard.module.scss
@@ -35,6 +35,10 @@ p {
   white-space: nowrap;
 }
 
+.star {
+  color: $tertiaryGray;
+}
+
 .favorite {
   padding: 0.6rem;
 }

From 8169b4f501204bc6280e1dc3c4196c09189bab08 Mon Sep 17 00:00:00 2001
From: wendesongomes <wendeson.gomes@live.com>
Date: Mon, 2 Sep 2024 11:20:40 -0300
Subject: [PATCH 4/6] fix: corrected header and accordion container

---
 mock-api.json                                 | 36 ++++++++++++-------
 .../AccordionTab/AccordionTab.module.scss     |  2 ++
 .../AccountCard/AccountCard.module.scss       |  8 ++---
 src/components/AccountCard/AccountCard.tsx    |  9 +++--
 .../SocialAccordion.module.scss               |  2 +-
 .../SocialAccordion/SocialAccordion.tsx       |  4 ++-
 6 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/mock-api.json b/mock-api.json
index 84f7797df..a9dd36d47 100644
--- a/mock-api.json
+++ b/mock-api.json
@@ -84,7 +84,7 @@
       "userName": "Discord User 1",
       "token": "DISCORD_EXAMPLE_TOKEN_1",
       "valid": true,
-      "avatar": "https://example.com/image1.jpg"
+      "avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
     },
     {
       "id": "14",
@@ -92,7 +92,7 @@
       "userName": "Twitter User 14",
       "token": "TWITTER_EXAMPLE_TOKEN_14",
       "valid": true,
-      "avatar": "https://example.com/image2.jpg"
+      "avatar": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-256.png"
     },
     {
       "id": "2",
@@ -100,7 +100,7 @@
       "userName": "Discord User 2",
       "token": "DISCORD_EXAMPLE_TOKEN_2",
       "valid": false,
-      "avatar": "https://example.com/image3.jpg"
+      "avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
     },
     {
       "id": "3",
@@ -108,7 +108,7 @@
       "userName": "Discord User 3",
       "token": "DISCORD_EXAMPLE_TOKEN_3",
       "valid": true,
-      "avatar": "https://example.com/image4.jpg"
+      "avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
     },
     {
       "id": "4",
@@ -116,7 +116,7 @@
       "userName": "Twitter User 4",
       "token": "TWITTER_EXAMPLE_TOKEN_4",
       "valid": false,
-      "avatar": "https://example.com/image2.jpg"
+      "avatar": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-256.png"
     },
     {
       "id": "5",
@@ -124,7 +124,7 @@
       "userName": "Discord User 5",
       "token": "DISCORD_EXAMPLE_TOKEN_5",
       "valid": false,
-      "avatar": "https://example.com/image6.jpg"
+      "avatar": "https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-256.png"
     },
     {
       "id": "6",
@@ -132,7 +132,7 @@
       "userName": "Twitter User 6",
       "token": "TWITTER_EXAMPLE_TOKEN_6",
       "valid": true,
-      "avatar": "https://example.com/image2.jpg"
+      "avatar": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-256.png"
     }
   ],
   "social-medias": [
@@ -153,7 +153,9 @@
               "maxFileSize": 20000000,
               "maxWidth": 700,
               "maxHeight": 600,
-              "ar": ["4:3"],
+              "ar": [
+                "4:3"
+              ],
               "maxDuration": 1000
             }
           },
@@ -177,7 +179,9 @@
               "maxSize": 10000,
               "maxWidth": 900,
               "maxHeight": 700,
-              "ar": ["16:9"],
+              "ar": [
+                "16:9"
+              ],
               "maxDuration": 1100
             }
           },
@@ -201,7 +205,9 @@
               "maxSize": 30000,
               "maxWidth": 1920,
               "maxHeight": 1080,
-              "ar": ["5:3"],
+              "ar": [
+                "5:3"
+              ],
               "maxDuration": 5000
             }
           },
@@ -232,7 +238,9 @@
               "maxSize": 10000,
               "maxWidth": 700,
               "maxHeight": 600,
-              "ar": ["16:9"],
+              "ar": [
+                "16:9"
+              ],
               "maxDuration": 500
             }
           },
@@ -256,7 +264,9 @@
               "maxSize": 20000,
               "maxWidth": 700,
               "maxHeight": 600,
-              "ar": ["4:3"],
+              "ar": [
+                "4:3"
+              ],
               "maxDuration": 1000
             }
           },
@@ -436,4 +446,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/src/components/AccordionTab/AccordionTab.module.scss b/src/components/AccordionTab/AccordionTab.module.scss
index 24dff9715..1622ddd93 100644
--- a/src/components/AccordionTab/AccordionTab.module.scss
+++ b/src/components/AccordionTab/AccordionTab.module.scss
@@ -7,6 +7,8 @@
 
 .headerTitle {
   flex-grow: 1;
+
+  margin: 0;
 }
 
 .headerIcon {
diff --git a/src/components/AccountCard/AccountCard.module.scss b/src/components/AccountCard/AccountCard.module.scss
index b4ff41739..463c6c534 100644
--- a/src/components/AccountCard/AccountCard.module.scss
+++ b/src/components/AccountCard/AccountCard.module.scss
@@ -1,6 +1,6 @@
 @use '~styles/global.scss' as *;
 
-p {
+.username {
   margin: 0;
 }
 
@@ -35,10 +35,6 @@ p {
   white-space: nowrap;
 }
 
-.star {
-  color: $tertiaryGray;
-}
-
 .favorite {
   padding: 0.6rem;
 }
@@ -49,7 +45,7 @@ p {
 
 .containerButton {
   display: flex;
-  gap: 0.7rem;
+  gap: 0.9rem;
 }
 
 .avatar {
diff --git a/src/components/AccountCard/AccountCard.tsx b/src/components/AccountCard/AccountCard.tsx
index 825605785..416aa6bdf 100644
--- a/src/components/AccountCard/AccountCard.tsx
+++ b/src/components/AccountCard/AccountCard.tsx
@@ -3,6 +3,7 @@ import { ReactNode, useState } from 'react';
 import classNames from 'classnames';
 
 import { Avatar } from '~components/Avatar/Avatar';
+import Button from '~components/Button/Button';
 import Icon from '~components/Icon/Icon';
 import { Switch } from '~components/Switch/Switch';
 
@@ -44,9 +45,11 @@ export function AccountCard({
       <Avatar className={scss.avatar} image={avatarURL} username={username} />
       <p className={scss.username}>{username}</p>
       <div className={scss.containerButton}>
-        <button className={scss.star} onClick={handleFavoriteChange}>
-          <Icon icon="star" size={20} />
-        </button>
+        <Button
+          circle
+          icon={<Icon icon="star" size={20} />}
+          onClick={handleFavoriteChange}
+        />
         <Switch
           checked={enabled}
           invalid={invalid}
diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss
index aa499a9c5..bf462050f 100644
--- a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss
+++ b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.module.scss
@@ -9,7 +9,7 @@
   }
 }
 
-ul {
+.containerAccordion {
   width: 100%;
 }
 
diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
index f1cbb6672..566da21af 100644
--- a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
+++ b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
@@ -45,7 +45,9 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
     ));
 
   const renderAccordionContent = (): ReactNode => (
-    <ul role="listitem">{renderAccordionMap()}</ul>
+    <ul className={scss.containerAccordion} role="listitem">
+      {renderAccordionMap()}
+    </ul>
   );
 
   const hasInvalidAccount = props.accounts.some(({ valid }) => !valid);

From 41cf70597be5b73890649e8ac8226107033689c3 Mon Sep 17 00:00:00 2001
From: wendesongomes <wendeson.gomes@live.com>
Date: Mon, 2 Sep 2024 13:07:21 -0300
Subject: [PATCH 5/6] fix: prettier error

---
 mock-api.json | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/mock-api.json b/mock-api.json
index a9dd36d47..39e44e794 100644
--- a/mock-api.json
+++ b/mock-api.json
@@ -153,9 +153,7 @@
               "maxFileSize": 20000000,
               "maxWidth": 700,
               "maxHeight": 600,
-              "ar": [
-                "4:3"
-              ],
+              "ar": ["4:3"],
               "maxDuration": 1000
             }
           },
@@ -179,9 +177,7 @@
               "maxSize": 10000,
               "maxWidth": 900,
               "maxHeight": 700,
-              "ar": [
-                "16:9"
-              ],
+              "ar": ["16:9"],
               "maxDuration": 1100
             }
           },
@@ -205,9 +201,7 @@
               "maxSize": 30000,
               "maxWidth": 1920,
               "maxHeight": 1080,
-              "ar": [
-                "5:3"
-              ],
+              "ar": ["5:3"],
               "maxDuration": 5000
             }
           },
@@ -238,9 +232,7 @@
               "maxSize": 10000,
               "maxWidth": 700,
               "maxHeight": 600,
-              "ar": [
-                "16:9"
-              ],
+              "ar": ["16:9"],
               "maxDuration": 500
             }
           },
@@ -264,9 +256,7 @@
               "maxSize": 20000,
               "maxWidth": 700,
               "maxHeight": 600,
-              "ar": [
-                "4:3"
-              ],
+              "ar": ["4:3"],
               "maxDuration": 1000
             }
           },
@@ -446,4 +436,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}

From 2f391bec8c0d5bde5d22c64f97ab66c7e55e68d2 Mon Sep 17 00:00:00 2001
From: wendesongomes <wendeson.gomes@live.com>
Date: Wed, 4 Sep 2024 10:05:33 -0300
Subject: [PATCH 6/6] refactor: icons in socialAccordion dynamics

---
 .../SocialAccordion/SocialAccordion.tsx       | 24 ++++++++++++++-----
 .../SocialAccordion/assets/discord.svg        |  1 +
 2 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/home/components/Sidebar/components/SocialAccordion/assets/discord.svg

diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
index 566da21af..0dfee50e6 100644
--- a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
+++ b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx
@@ -10,7 +10,10 @@ import Icon from '~components/Icon/Icon';
 
 import scss from './SocialAccordion.module.scss';
 
-import iconPlaceholderForIcon from './assets/facebook.svg';
+import discordIcon from './assets/discord.svg';
+import facebookIcon from './assets/facebook.svg';
+import instagramIcon from './assets/instagram.svg';
+import xIcon from './assets/x.svg';
 
 import { AccountQuantity } from './SocialAccordion.components';
 import { SocialAccordionProps } from './SocialAccordion.type';
@@ -52,6 +55,19 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
 
   const hasInvalidAccount = props.accounts.some(({ valid }) => !valid);
 
+  const iconMap = {
+    discord: discordIcon,
+    facebook: facebookIcon,
+    instagram: instagramIcon,
+    twitter: xIcon,
+    x: xIcon,
+  };
+
+  const socialMediaName = socialMedias
+    .get(props.socialMediaId)
+    ?.name.toLowerCase();
+  const iconPath = iconMap[socialMediaName as keyof typeof iconMap];
+
   return (
     <Accordion
       className={scss.wrapper}
@@ -66,11 +82,7 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
         >
           <div className={scss.header}>
             <div className={scss.socialInfo}>
-              <img
-                alt="social media"
-                className={scss.icon}
-                src={iconPlaceholderForIcon}
-              />
+              <img alt="social media" className={scss.icon} src={iconPath} />
               <span>{socialMedias.get(props.socialMediaId)?.name}</span>
             </div>
             {props.error && renderError()}
diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/assets/discord.svg b/src/pages/home/components/Sidebar/components/SocialAccordion/assets/discord.svg
new file mode 100644
index 000000000..4b7477340
--- /dev/null
+++ b/src/pages/home/components/Sidebar/components/SocialAccordion/assets/discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>
\ No newline at end of file