12 - Change the button padding

Author: csouchet

src/theme/components/Post.tsx

@@ -93,8 +93,8 @@ export const PostContainer = ({
         </DownFade>
       </CardContainer>
       {pageId && (
-        <Flex justifyContent="center" mt="4" mb="2" fontSize={[2, 3]}>
-          <DownFade>
+        <DownFade>
+          <Flex justifyContent="center" mt="4" mb="2" fontSize={[2, 3]}>
             <Button variant="more">
               <RebassLink
                 href={`/${pageId}`}
@@ -104,8 +104,8 @@ export const PostContainer = ({
                 More
               </RebassLink>
             </Button>
-          </DownFade>
-        </Flex>
+          </Flex>
+        </DownFade>
       )}
     </>
   );

src/theme/rebass-preset.d.ts

@@ -141,7 +141,7 @@ declare module '@rebass/preset' {
   }
 
   interface Button {
-    p?: number;
+    p?: number | string;
     m?: number;
     variant?: string;
     color?: string;

src/theme/theme.ts

@@ -45,6 +45,7 @@ export const theme: Theme = {
       fontWeight: '600',
       border: `3px solid ${colors.secondary}`,
       boxShadow: `inset 0 0 2px ${colors.muted}`,
+      p: '8px 10%',
     },
   },
   fonts: {