fix: use styled-components pull-out style

opensquare-network · Apr 7, 2024 · 63a01a9 · 63a01a9
1 parent 36acbfc
commit 63a01a9
Showing 1 changed file with 19 additions and 16 deletions.
diff --git a/packages/next-common/components/layout/DetailLayout/ScrollToTopButton.jsx b/packages/next-common/components/layout/DetailLayout/ScrollToTopButton.jsx
@@ -1,6 +1,23 @@
 import React, { useState, useEffect } from 'react';
 import { animateScroll as scroll } from 'react-scroll';
 import SystemTop from "next-common/assets/imgs/icons/systemTop.svg";
+import styled from "styled-components";
+
+const ScrollToTopDiv = styled.div`
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  position: fixed;
+  cursor:pointer;
+  bottom: 96px;
+  right: 24px;
+  z-index:1000;
+  border-radius: 8px;
+  border: 1px solid var(--color-neutral400, #E0E4EB);
+  background: var(--color-neutral100, #FFF);
+  box-shadow: 0px 6px 7px 0px rgba(30, 33, 52, 0.02), 0px 1.34px 1.564px 0px rgba(30, 33, 52, 0.01), 0px 0.399px 0.466px 0px rgba(30, 33, 52, 0.01)
+`;
+
 export default function ScrollToTopButton({scrollYShowPX = 800}){
     const [showButton, setShowButton] = useState(false);
 
@@ -18,23 +35,9 @@ export default function ScrollToTopButton({scrollYShowPX = 800}){
 
     return (
         showButton && (
-            <div className={'w-10 h-10'} style={{
-                display:"flex",
-                justifyContent:'center',
-                alignItems:'center',
-                position: 'fixed',
-                cursor:'pointer',
-                bottom: '96px',
-                right: '24px',
-                zIndex:1000,
-                borderRadius: '8px',
-                border: '1px solid var(--color-neutral400, #E0E4EB)',
-                background: 'var(--color-neutral100, #FFF)',
-                /* shadow100 */
-                boxShadow: '0px 6px 7px 0px rgba(30, 33, 52, 0.02), 0px 1.34px 1.564px 0px rgba(30, 33, 52, 0.01), 0px 0.399px 0.466px 0px rgba(30, 33, 52, 0.01)'
-            }} onClick={handleClick}>
+            <ScrollToTopDiv className={'w-10 h-10'} onClick={handleClick}>
                 <SystemTop />
-            </div>
+            </ScrollToTopDiv>
         )
     );
 };