fix: corrected header and accordion container

devhatt · Sep 2, 2024 · 8169b4f · 8169b4f
1 parent a125bc4
commit 8169b4f
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 24 deletions.
diff --git a/mock-api.json b/mock-api.json
@@ -84,55 +84,55 @@
       "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",
       "socialMediaId": "TWITTER_EXAMPLE_ID",
       "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",
       "socialMediaId": "DISCORD_EXAMPLE_ID",
       "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",
       "socialMediaId": "DISCORD_EXAMPLE_ID",
       "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",
       "socialMediaId": "TWITTER_EXAMPLE_ID",
       "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",
       "socialMediaId": "DISCORD_EXAMPLE_ID",
       "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",
       "socialMediaId": "TWITTER_EXAMPLE_ID",
       "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 @@
       ]
     }
   ]
-}
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
       }
     }
-    ul {
+    .containerAccordion {
       width: 100%;
     }
@@ Expand Down @@