[revise]: revise scrollbar & Link

8-weeks-later · Dec 25, 2023 · 9b9eac2 · 9b9eac2
1 parent 9430e5b
commit 9b9eac2
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 14 deletions.
diff --git a/apps/pwrcode-frontend/app/design/atoms/Link/Link.stories.tsx b/apps/pwrcode-frontend/app/design/atoms/Link/Link.stories.tsx
@@ -28,9 +28,13 @@ export const MainLink: Story = {
     afterIcon: '->',
     fontStyle: 'normal',
     fontWeight: '400',
+    fontSize: '1.5vmin',
     whiteSpace: 'nowrap',
     textDecorationLine: 'none',
     color: 'black',
+    padding: '1vh 2vw',
+    border: '3px solid #c2d1d9',
+    borderRadius: '10px',
   },
 };
 

diff --git a/apps/pwrcode-frontend/app/design/atoms/Link/Link.tsx b/apps/pwrcode-frontend/app/design/atoms/Link/Link.tsx
@@ -18,6 +18,9 @@ export interface LinkProps {
   whiteSpace?: string;
   textDecorationLine?: string;
   color?: string;
+  padding?: string;
+  borderRadius?: string;
+  border?: string;
 }
 
 export function CustomLink(props: LinkProps) {
@@ -32,6 +35,9 @@ export function CustomLink(props: LinkProps) {
       whiteSpace={props.whiteSpace}
       textDecorationLine={props.textDecorationLine}
       color={props.color}
+      padding={props.padding}
+      borderRadius={props.borderRadius}
+      border={props.border}
     >
       <Link href={`/${props.href}`}>{props.text}</Link>
     </Component>
@@ -47,6 +53,9 @@ const Component = styled.div<LinkProps>`
   white-space: ${(props) => props.whiteSpace};
   text-decoration-line: ${(props) => props.textDecorationLine};
   color: ${(props) => props.color};
+  padding: ${(props) => props.padding};
+  border: ${(props) => props.border};
+  border-radius: ${(props) => props.borderRadius};
   &::after {
     content: ' ${(props) => props.afterIcon}';
     color: black;

diff --git a/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.stories.tsx b/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.stories.tsx
@@ -31,7 +31,7 @@ export const MainTextArea: Story = {
     textAlign: 'center',
     flexShrink: '0',
     flex: '1 1 100%',
-    overflow: 'scroll',
+    overflow: 'auto',
     color: '#505D68',
   },
 };
@@ -48,7 +48,7 @@ export const SearchTextArea: Story = {
     flexShrink: '0',
     flex: '1 1 100%',
     color: '#505D68',
-    overflow: 'scroll',
+    overflow: 'auto',
     alignSelf: 'stretch',
   },
 };
diff --git a/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.tsx b/apps/pwrcode-frontend/app/design/atoms/TextArea/TextArea.tsx
@@ -57,9 +57,22 @@ export function TextArea(props: TextAreaProps) {
             const { src, ...rest } = props;
             return <img src={src} width={'100vw'} {...rest} />;
           },
+          //           <code class="language-javascript">
           code(props) {
             const { children, className, node, ...rest } = props;
-            return <Editor defaultValue={String(children)} />;
+            const language = className?.match(/language-(\w+)/)?.at(1);
+            return (
+              <Editor
+                defaultValue={String(children)}
+                defaultLanguage={language}
+                options={{
+                  // domReadOnly: 'false'
+                  codeLens: 'false',
+                  fontSize: 20,
+                }}
+                theme="vs-dark"
+              />
+            );
           },
         }}
         remarkPlugins={[remarkMdx, remarkBreaks]}
@@ -89,8 +102,13 @@ const Component = styled.div<TextAreaProps>`
   grid-template-columns: ${(props) => props.gridTemplateColumns};
   gap: ${(props) => props.gap};
   grid-auto-flow: ${(props) => props.gridAutoFlow};
-
+  cursor: pointer;
   &::-webkit-scrollbar {
-    display: none;
+    background: #f2f5f7;
+    border-radius: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #ebe3d5;
+    border-radius: 10px;
   }
 `;
diff --git a/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.stories.tsx b/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.stories.tsx
@@ -55,7 +55,7 @@ export const SearchCardGroupStory: Story = {
     alignItems: 'center',
     gap: '10px',
     padding: '6.03vmax 1.158vmax 10px 1.158vmax',
-    overflow: 'scroll',
+    overflow: 'auto',
     children: <CardGroupSearchDataServerComponent />,
   },
 };

diff --git a/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.tsx b/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroup.tsx
@@ -11,8 +11,6 @@ import {
   CardGroupSearchDataServerComponent,
   ResponseBodyProps,
 } from './CardGroupDataComponent.server';
-import { useAtomValue } from 'jotai';
-import { searchKeywordAtom } from '@/app/state';
 
 export interface CardGroupProps extends PropsWithChildren {
   children?: ReactElement;
@@ -60,6 +58,13 @@ const Component = styled.div<CardGroupProps>`
   align-items: ${(props) => props.alignItems};
 
   &::-webkit-scrollbar {
-    display: none;
+    background: #f2f5f7;
+
+    border-radius: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #ebe3d5;
+    border: 1px solid black;
+    border-radius: 10px;
   }
 `;
diff --git a/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroupDataComponent.server.tsx b/apps/pwrcode-frontend/app/design/organisms/CardGroup/CardGroupDataComponent.server.tsx
@@ -129,7 +129,7 @@ const StyledMainComponent = styled.div`
 const variants = {
   open: { x: 0, y: 0, zIndex: 3 },
   closed: { x: '1vmax', y: '1vmax', zIndex: 2 },
-  boxed: { x: '0vw', y: '70vh', zIndex: 1 },
+  boxed: { x: '0vw', y: '70vh', zIndex: 4 },
 };
 
 export function CardGroupMainDataServerComponent(
@@ -185,8 +185,6 @@ export function CardGroupMainDataServerComponent(
   );
 }
 
-// const reusedAtom = atom((get) => get(searchKeywordAtom);
-
 export function CardGroupSearchDataServerComponent(
   props: CardDataServerComponentProps,
 ) {
@@ -220,5 +218,3 @@ export function CardGroupSearchDataServerComponent(
     </>
   );
 }
-
-// const Component = styled.div<CardDataServerComponentProps>``;