[🎀 : style] 타임라인 스크롤바 스타일링 (#38)

sryung1225 · Jan 31, 2024 · aed6b4d · aed6b4d
1 parent a2afb7e
commit aed6b4d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/styles/profile-form.ts b/src/styles/profile-form.ts
@@ -66,7 +66,7 @@ export const AttachAvatarChange: React.ComponentType<
   svg {
     width: 15px;
     height: 15px;
-    stroke: ${({ theme }) => theme.colors.white};
+    stroke: ${({ theme }) => theme.colors.background};
     stroke-width: 3px;
   }
 `;

diff --git a/src/styles/timeline.ts b/src/styles/timeline.ts
@@ -1,9 +1,22 @@
 import styled from 'styled-components';
+import { rgba } from 'polished';
 
 export const TimelineWrapper = styled.ul`
   display: block;
   margin-top: 10px;
   overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+  &::-webkit-scrollbar-thumb {
+    margin: 1px;
+    background-color: ${({ theme }) => theme.colors.primary};
+    border-radius: 5px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: ${({ theme }) => rgba(theme.colors.gray, 0.3)};
+    border-radius: 5px;
+  }
 `;
 
 export const Text = styled.p`