Merge branch 'staging' of github.com:GeekyAnts/nativebase-docs into staging

Author: Vidhi Kataria

docs/3.0.x/customizing-components.md

@@ -12,27 +12,27 @@ Let's customise a Button component to include rounded borders and red colorSchem
 ## Basic
 
 ```tsx
-import React from 'react';
-import { NativeBaseProvider, extendTheme } from 'native-base';
+import React from "react";
+import { NativeBaseProvider, extendTheme } from "native-base";
 
 export default function () {
   const theme = extendTheme({
     components: {
       Button: {
         // Can simply pass default props to change default behaviour of components.
         baseStyle: {
-          rounded: 'md',
+          rounded: "md",
         },
         defaultProps: {
-          colorScheme: 'red',
+          colorScheme: "red",
         },
       },
       Heading: {
         // Can pass also function, giving you access theming tools
         baseStyle: ({ colorMode }) => {
           return {
-            color: colorMode === 'dark' ? 'red.300' : 'blue.300',
-            fontWeight: 'normal',
+            color: colorMode === "dark" ? "red.300" : "blue.300",
+            fontWeight: "normal",
           };
         },
       },
@@ -78,22 +78,22 @@ When variant in defaultProps is `solid` the above button will use solid variant.
 You can specify the base style of the component and use it across project.
 
 ```jsx isLive=true
-import React from 'react';
-import { Text, NativeBaseProvider, Center, extendTheme } from 'native-base';
+import React from "react";
+import { Text, NativeBaseProvider, Center, extendTheme } from "native-base";
 
 export function Example() {
   const theme = extendTheme({
     components: {
       Text: {
         baseStyle: {
-          color: 'emerald.400'
+          color: "emerald.400",
         },
-        defaultProps: { size: 'lg' },
+        defaultProps: { size: "lg" },
         sizes: {
-          xl: { fontSize: '64px' },
-          lg: { fontSize: '32px' },
-          md: { fontSize: '16px' },
-          sm: { fontSize: '12px' },
+          xl: { fontSize: "64px" },
+          lg: { fontSize: "32px" },
+          md: { fontSize: "16px" },
+          sm: { fontSize: "12px" },
         },
       },
     },
@@ -106,32 +106,31 @@ export function Example() {
     </NativeBaseProvider>
   );
 }
-
 ```
 
 ## Adding Variants
 
 You can also add the variants to the components and use it across project.
 
 ```jsx isLive=true
-import React from 'react';
+import React from "react";
 import {
   NativeBaseProvider,
   Button,
   extendTheme,
   Center,
   VStack,
-} from 'native-base';
+} from "native-base";
 
 export function Example() {
   const theme = extendTheme({
     components: {
       Button: {
         variants: {
-          rounded: ({ colorScheme }: any) => {
+          rounded: ({ colorScheme }) => {
             return {
               bg: `${colorScheme}.500`,
-              rounded: 'full',
+              rounded: "full",
             };
           },
         },
@@ -152,7 +151,6 @@ export function Example() {
     </NativeBaseProvider>
   );
 }
-
 ```
 
 <br />

docs/3.1.x/customizing-components.md

@@ -12,27 +12,27 @@ Let's customise a Button component to include rounded borders and red colorSchem
 ## Basic
 
 ```tsx
-import React from 'react';
-import { NativeBaseProvider, extendTheme } from 'native-base';
+import React from "react";
+import { NativeBaseProvider, extendTheme } from "native-base";
 
 export default function () {
   const theme = extendTheme({
     components: {
       Button: {
         // Can simply pass default props to change default behaviour of components.
         baseStyle: {
-          rounded: 'md',
+          rounded: "md",
         },
         defaultProps: {
-          colorScheme: 'red',
+          colorScheme: "red",
         },
       },
       Heading: {
         // Can pass also function, giving you access theming tools
         baseStyle: ({ colorMode }) => {
           return {
-            color: colorMode === 'dark' ? 'red.300' : 'blue.300',
-            fontWeight: 'normal',
+            color: colorMode === "dark" ? "red.300" : "blue.300",
+            fontWeight: "normal",
           };
         },
       },
@@ -78,22 +78,22 @@ When variant in defaultProps is `solid` the above button will use solid variant.
 You can specify the base style of the component and use it across project.
 
 ```jsx isLive=true
-import React from 'react';
-import { Text, NativeBaseProvider, Center, extendTheme } from 'native-base';
+import React from "react";
+import { Text, NativeBaseProvider, Center, extendTheme } from "native-base";
 
 export function Example() {
   const theme = extendTheme({
     components: {
       Text: {
         baseStyle: {
-          color: 'emerald.400'
+          color: "emerald.400",
         },
-        defaultProps: { size: 'lg' },
+        defaultProps: { size: "lg" },
         sizes: {
-          xl: { fontSize: '64px' },
-          lg: { fontSize: '32px' },
-          md: { fontSize: '16px' },
-          sm: { fontSize: '12px' },
+          xl: { fontSize: "64px" },
+          lg: { fontSize: "32px" },
+          md: { fontSize: "16px" },
+          sm: { fontSize: "12px" },
         },
       },
     },
@@ -106,32 +106,31 @@ export function Example() {
     </NativeBaseProvider>
   );
 }
-
 ```
 
 ## Adding Variants
 
 You can also add the variants to the components and use it across project.
 
 ```jsx isLive=true
-import React from 'react';
+import React from "react";
 import {
   NativeBaseProvider,
   Button,
   extendTheme,
   Center,
   VStack,
-} from 'native-base';
+} from "native-base";
 
 export function Example() {
   const theme = extendTheme({
     components: {
       Button: {
         variants: {
-          rounded: ({ colorScheme }: any) => {
+          rounded: ({ colorScheme }) => {
             return {
               bg: `${colorScheme}.500`,
-              rounded: 'full',
+              rounded: "full",
             };
           },
         },
@@ -152,7 +151,6 @@ export function Example() {
     </NativeBaseProvider>
   );
 }
-
 ```
 
 <br />

layouts/index.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useContext } from "react";
 import {
   Box,
   HStack,
+  Link,
   ScrollView,
   Text,
   useBreakpointValue,
@@ -246,15 +247,24 @@ function Layout({
             <NativebaseIconLogo width="125" height="130" />
           </Box>
 
-          <Text
+          <Link
             pl="6"
-            _light={{ color: "black" }}
-            _dark={{ color: "coolGray.50" }}
+            _text={{
+              _light: {
+                color: "black",
+              },
+              _dark: {
+                color: "coolGray.50",
+              },
+              fontSize: "sm",
+            }}
             m="auto"
-            fontSize="sm"
+            isUnderlined={false}
+            href="https://madewithnativebase.com/"
+            isExternal
           >
             MadeWithNativeBase
-          </Text>
+          </Link>
         </Box>
       </Box>
     </>