fix(canvas): update storybook preview layout

JayMeDotDot · Apr 20, 2022 · 849e928 · 849e928
1 parent f4e9f00
commit 849e928
Showing 1 changed file with 36 additions and 50 deletions.
diff --git a/.storybook/components/Canvas.vue b/.storybook/components/Canvas.vue
@@ -6,34 +6,41 @@
         :bg="colorMode === 'light' ? 'white' : 'gray.800'"
         :color="colorMode === 'light' ? 'gray.800' : 'gray.50'"
         class="root"
+        width="100vw"
+        height="100vh"
+        transition="all 0.2s ease-in-out"
       >
-        <CHeading mb="50px" pos="absolute" top="3" left="50%" transform="translateX(-50%)" as="h4">@chakra-ui/vue</CHeading>
-        <CReset />
-        <CButton
-          as="a"
-          target="_blank"
-          href="https://github.com/chakra-ui/chakra-ui-vue"
-          position="fixed"
-          top="3"
-          left="3"
-          shadow="sm"
-          left-icon="github"
+        <CFlex justify-content="space-between" padding="4">
+          <CHeading mb="50px" as="h4">@chakra-ui/vue</CHeading>
+          <CReset />
+          <CButton
+            as="a"
+            target="_blank"
+            href="https://github.com/chakra-ui/chakra-ui-vue"
+            shadow="sm"
+            left-icon="github"
+            order="-1"
+          >
+            Github
+          </CButton>
+          <CIconButton
+            :aria-label="
+              `Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`
+            "
+            variant="solid"
+            :icon="colorMode === 'light' ? 'sun' : 'moon'"
+            @click="toggleColorMode"
+          >
+          </CIconButton>
+        </CFlex>
+        <CFlex
+          class="wrapper"
+          flex-direction="column"
+          justify-content="center"
+          align-items="center"
         >
-          Github
-        </CButton>
-        <CIconButton
-          position="fixed"
-          top="3"
-          right="3"
-          :aria-label="`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`"
-          variant="ghost"
-          :icon="colorMode === 'light' ? 'sun' : 'moon'"
-          @click="toggleColorMode"
-        >
-        </CIconButton>
-        <div class="wrapper">
           <slot />
-        </div>
+        </CFlex>
       </CBox>
     </CColorModeProvider>
   </CThemeProvider>
@@ -46,8 +53,10 @@ import {
   CReset,
   CButton,
   CBox,
+  CFlex,
   CIconButton,
-  CColorModeProvider } from '../../packages/chakra-ui-core/src'
+  CColorModeProvider
+} from '../../packages/chakra-ui-core/src'
 
 export default {
   name: 'Canvas',
@@ -57,32 +66,9 @@ export default {
     CReset,
     CButton,
     CBox,
+    CFlex,
     CIconButton,
     CColorModeProvider
   }
 }
 </script>
-
-<style lang="scss" scoped>
-html,
-body {
-  margin: 0
-}
-.root {
-  height: 100vh;
-  width: 100vw;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.2s ease-in-out;
-  .wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%
-  }
-}
-</style>