feat: update skeleton (#258)

* update skeleton * style tweaks * style(lint): lint action with ESLint Co-authored-by: Lint Action <lint-action@uniswap.org>
Uniswap · Oct 11, 2022 · b0ae5c6 · b0ae5c6 · vercel · Oct 11, 2022
1 parent 3acf651
commit b0ae5c6
Showing 1 changed file with 81 additions and 27 deletions.
diff --git a/src/components/Swap/Skeleton.tsx b/src/components/Swap/Skeleton.tsx
@@ -4,7 +4,6 @@ import { Theme, ThemeProvider } from 'theme'
 
 import Column from '../Column'
 import Row from '../Row'
-import Rule from '../Rule'
 import { WidgetWrapper } from '../Widget'
 import ReverseButton from './ReverseButton'
 
@@ -24,42 +23,96 @@ const WideColumn = styled(Column)`
   width: 100%;
 `
 
-function FloatingDetails({ isModule }: { isModule?: boolean }) {
+const TitleColumn = styled(Column)`
+  padding: 0.5em;
+  padding-bottom: 1em;
+  width: 100%;
+`
+
+const InputColumn = styled(Column)`
+  background-color: ${({ theme }) => theme.module};
+  border-radius: ${({ theme }) => theme.borderRadius - 0.25}em;
+  display: flex;
+  gap: 1.875em;
+  margin-bottom: 0.25em;
+  padding: 0.75em;
+  padding-bottom: 3.25em;
+  padding-top: 1.25em;
+`
+
+const OutputColumn = styled(Column)`
+  background-color: ${({ theme }) => theme.module};
+  border-radius: ${({ theme }) => theme.borderRadius - 0.25}em;
+  display: flex;
+`
+
+const OutputInnerTopColumn = styled(Column)`
+  border-bottom: 1px solid ${({ theme }) => theme.container};
+  padding-bottom: 2.75em;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
+  padding-top: 1.5em;
+  width: 100%;
+`
+
+const OutputInnerBottomColumn = styled(Column)`
+  padding-bottom: 1em;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
+  padding-top: 0.75em;
+  width: 100%;
+`
+
+const ButtonColumn = styled(Column)`
+  padding-bottom: 0em;
+  padding-top: 0.75em;
+  width: 100%;
+`
+
+function FloatingTitle() {
   return (
-    <WideColumn gap={0.75}>
+    <TitleColumn gap={0.75}>
       <Row>
-        <Blob height="1em" width="2.5em" isModule={isModule} />
+        <Blob height="1em" width="2.5em" isModule={false} />
       </Row>
+    </TitleColumn>
+  )
+}
+
+function FloatingInput() {
+  return (
+    <WideColumn gap={0.75}>
       <Row>
-        <Blob height="2em" width="3.75em" isModule={isModule} />
-        <Blob height="2em" width="7.25em" isModule={isModule} />
+        <Blob height="2em" width="3.75em" isModule={true} />
+        <Blob height="2em" width="7.25em" isModule={true} />
       </Row>
     </WideColumn>
   )
 }
 
-function FloatingButton() {
+function FloatingOutput({ isModule }: { isModule?: boolean }) {
   return (
-    <WideColumn gap={0.875}>
-      <Rule />
-      <Blob height="1em" width="7.5em" isModule />
-      <Blob height="3.5em" width="100%" radius={0.75} isModule />
-    </WideColumn>
+    <>
+      <OutputInnerTopColumn>
+        <Row>
+          <Blob height="2em" width="3.75em" isModule={isModule} />
+          <Blob height="2em" width="7.25em" isModule={isModule} />
+        </Row>
+      </OutputInnerTopColumn>
+      <OutputInnerBottomColumn>
+        <Blob height="1em" width="7.5em" isModule />
+      </OutputInnerBottomColumn>
+    </>
   )
 }
 
-export const OutputColumn = styled(Column)`
-  background-color: ${({ theme }) => theme.module};
-  border-radius: ${({ theme }) => theme.borderRadius - 0.25}em;
-  display: flex;
-  gap: 1.875em;
-  padding: 0.75em;
-  padding-bottom: 2em;
-`
-
-export const InputColumn = styled(Column)`
-  margin: 0.75em;
-`
+function FloatingButton() {
+  return (
+    <ButtonColumn gap={0.875}>
+      <Blob height="3.375em" width="100%" radius={0.75} isModule />
+    </ButtonColumn>
+  )
+}
 
 export interface SwapWidgetSkeletonProps {
   theme?: Theme
@@ -72,15 +125,16 @@ export function SwapWidgetSkeleton({ theme, width }: SwapWidgetSkeletonProps) {
       <ThemeProvider theme={theme}>
         <WidgetWrapper width={width}>
           <LoadingWrapper>
+            <FloatingTitle />
             <InputColumn>
-              <FloatingDetails />
+              <FloatingInput />
             </InputColumn>
             <div>
               <ReverseButton />
               <OutputColumn>
-                <FloatingDetails isModule />
-                <FloatingButton />
+                <FloatingOutput isModule />
               </OutputColumn>
+              <FloatingButton />
             </div>
           </LoadingWrapper>
         </WidgetWrapper>