Skip to content

Commit

Permalink
chore: update layout for release
Browse files Browse the repository at this point in the history
  • Loading branch information
@akash3gtm
akash3gtm committed Feb 8, 2024
1 parent bc2a48f commit 764e9b2
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 175 deletions.
8 changes: 5 additions & 3 deletions layouts/icons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import { useToken } from "native-base";
import React from "react";

export function AlertIcon() {
export function AlertIcon({...props}) {
const color = useToken('colors', 'yellow.600');
return (
<svg
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.42426 8.9675C6.85593 4.65583 8.07176 2.5 9.9976 2.5C11.9226 2.5 13.1393 4.65583 15.5709 8.9675L15.8743 9.505C17.8951 13.0883 18.9059 14.88 17.9926 16.19C17.0793 17.5 14.8193 17.5 10.3009 17.5H9.69427C5.17593 17.5 2.91593 17.5 2.0026 16.19C1.08926 14.88 2.1001 13.0883 4.12093 9.505L4.42426 8.9675ZM9.9976 6.04167C10.1634 6.04167 10.3223 6.10751 10.4395 6.22472C10.5568 6.34193 10.6226 6.50091 10.6226 6.66667V10.8333C10.6226 10.9991 10.5568 11.1581 10.4395 11.2753C10.3223 11.3925 10.1634 11.4583 9.9976 11.4583C9.83184 11.4583 9.67287 11.3925 9.55566 11.2753C9.43845 11.1581 9.3726 10.9991 9.3726 10.8333V6.66667C9.3726 6.50091 9.43845 6.34193 9.55566 6.22472C9.67287 6.10751 9.83184 6.04167 9.9976 6.04167ZM9.9976 14.1667C10.2186 14.1667 10.4306 14.0789 10.5869 13.9226C10.7431 13.7663 10.8309 13.5543 10.8309 13.3333C10.8309 13.1123 10.7431 12.9004 10.5869 12.7441C10.4306 12.5878 10.2186 12.5 9.9976 12.5C9.77658 12.5 9.56462 12.5878 9.40834 12.7441C9.25206 12.9004 9.16427 13.1123 9.16427 13.3333C9.16427 13.5543 9.25206 13.7663 9.40834 13.9226C9.56462 14.0789 9.77658 14.1667 9.9976 14.1667Z"
fill="#FED219"
fill={color}
/>
</svg>
);
Expand Down
251 changes: 82 additions & 169 deletions layouts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import Head from "next/head";
import React, { useEffect, useContext, useState } from "react";
import {
Box,
Divider,
HStack,
Heading,
Icon,
Link,
Modal,
Pressable,
Expand All @@ -27,6 +30,7 @@ import NativebaseIconLogo from "../src/new-components/NativebaseIconLogo";
import Script from "next/script";
import { isLatestVersionSlug } from "../src/utils";
import { AlertIcon, RightArrow } from "./icons";
import Svg, { Path } from "react-native-svg";

function Layout({
children: content,
Expand Down Expand Up @@ -169,7 +173,8 @@ function Layout({
<Script
async
src="https://www.googletagmanager.com/gtag/js?id=G-DBP9QMTGR1"
></Script>
>
</Script>
<Script id="gTagScript">
{`
window.dataLayer = window.dataLayer || [];
Expand All @@ -190,90 +195,65 @@ function Layout({
>
<Modal.CloseButton />
<Modal.Body p="9">
<HStack mb="4" alignItems="center" justifyContent="center">
<Text fontSize="md" fontWeight="bold" textAlign="center" mr="1">
<HStack mb="6" alignItems="center" justifyContent="flex">
<AlertIcon/>
<Heading fontSize='xl' textAlign="left" ml="1.5">
IMPORTANT MESSAGE
</Text>
<AlertIcon />
</Heading>
</HStack>
<Text
fontSize="lg"
lineHeight={27}
textAlign="center"
color="muted.800"
_dark={{
color: "muted.200",
}}
>
If you are starting a new project with NativeBase, we recommend
using <Text fontWeight="bold">gluestack</Text> instead.
</Text>

<HStack justifyContent="center">
<a href="https://gluestack.io/">
<Pressable
my="6"
borderWidth={1}
rounded="sm"
px="3"
py="2"
_light={{
borderColor: "muted.900",
}}
_dark={{
borderColor: "muted.50",
}}
_hover={{
bg: "primary.200",
borderColor: "primary.200",
_dark: {
bg: "primary.700",
borderColor: "primary.700",
},
}}
_focus={{
bg: "primary.300",
borderColor: "primary.300",
_dark: {
bg: "primary.800",
borderColor: "primary.800",
},
}}
>
{/* @ts-ignore*/}
<Box gap={5}>
<Box flexDirection='row'>
<Icon size={18} color='black'>
<Svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<Path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/>
<Path d="m21 3-9 9"/>
<Path d="M15 3h6v6"/>
</Svg>
</Icon>
<Box w='92%' maxW='100%' ml="2">
<Heading fontSize='md'>Upgrade to gluestack-ui</Heading>
<Text
fontSize="md"
fontWeight="medium"
_light={{
color: "muted.900",
}}
fontSize="sm"
textAlign="left"
color="muted.800"
_dark={{
color: "muted.50",
color: "muted.200",
}}
>
Explore gluestack
If you are starting a new project with NativeBase, we recommend
using <Link href="https://gluestack.io/" fontWeight="bold">gluestack-ui</Link>
</Text>
</Pressable>
</a>
</HStack>
</Box>
</Box>

<HStack justifyContent="center">
<Link
href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui"
flexDir="row"
alignItems="center"
isUnderlined
_text={{
color: "#52B3D0",
fontSize: "md",
fontWeight: "bold",
}}
>
Read Updated Blog
<Box ml="1">
<RightArrow />
<Divider thickness={1}/>

<Box flexDirection='row'>
<Icon size={18} color='black'>
<Svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<Path d="m21 16-4 4-4-4"/>
<Path d="M17 20V4"/>
<Path d="m3 8 4-4 4 4"/>
<Path d="M7 4v16"/>
</Svg>
</Icon>
<Box w='93%' maxW='100%' ml="2">
<Heading fontSize='md'>Migrate to gluestack-ui</Heading>
<Text
fontSize="sm"
textAlign="left"
color="muted.800"
_dark={{
color: "muted.200",
}}
>
If you are working on a project with NativeBase, we recommend
using <Link href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" fontWeight="bold">@gluestack-ui/themed-native-base</Link>
</Text>
</Box>
</Link>
</HStack>
</Box>
</Box>
</Modal.Body>
</Modal.Content>
</Modal>
Expand Down Expand Up @@ -339,8 +319,6 @@ function Layout({
overflow="hidden"
px="4"
py="5"
fontSize="sm"
fontWeight="medium"
borderWidth={1}
_light={{
bg: "#F1F1F1",
Expand All @@ -352,101 +330,36 @@ function Layout({
bg: "#171E2E",
borderColor: "muted.800",
}}
width="100%"
direction={{ md: "row" }}
>
<AlertIcon />
<Text ml="1">
IMPORTANT MESSAGE — If you are starting a new project with
NativeBase, we recommend using{" "}
<a href="https://gluestack.io/">gluestack</a> instead.{" "}
</Text>
<HStack
alignItems="center"
mt={{ base: "4", md: 0 }}
ml={{ md: "2" }}
<Box
// maxW='1056'
fontSize="sm"
fontWeight="medium"
alignSelf='flex'
flexDirection='row'
alignItems={{ md: "center" }}
justifyContent={{ md: "center" }}
width="100%"
>
<a href="https://gluestack.io/">
<Pressable
borderWidth={1}
rounded="sm"
px="3"
py="2"
_light={{
borderColor: "muted.900",
}}
_dark={{
borderColor: "muted.50",
}}
_hover={{
bg: "primary.200",
borderColor: "primary.200",

_dark: {
bg: "primary.700",
borderColor: "primary.700",
},
}}
_focus={{
bg: "primary.300",
borderColor: "primary.300",

_dark: {
bg: "primary.800",
borderColor: "primary.800",
},
}}
_hover={{
bg: "primary.200",
borderColor: "primary.200",

_dark: {
bg: "primary.700",
borderColor: "primary.700",
},
}}
_focus={{
bg: "primary.300",
borderColor: "primary.300",

_dark: {
bg: "primary.800",
borderColor: "primary.800",
},
}}
pointerEvents="none"
>
<Text
fontSize="sm"
fontWeight="medium"
_light={{
color: "muted.900",
}}
_dark={{
color: "muted.50",
}}
>
Explore gluestack
</Text>
</Pressable>
<AlertIcon height={18} width={18}/>
<Text ml="1">
If you are starting a new project, we recommend using {" "}
<a href="https://ui.gluestack.io/" target="_blank">
<Text fontWeight="semibold" textDecorationLine="underline">
gluestack-ui
</Text>
</a>
{". "}
For your existing projects, you can utilize{" "}
<a href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" target="_blank">
<Text fontWeight="semibold" textDecorationLine="underline">
@gluestack-ui/themed-native-base
</Text>
</a>
<Text
fontSize="sm"
fontWeight="medium"
_light={{
color: "muted.900",
}}
_dark={{
color: "muted.50",
}}
underline
ml="4"
>
<a href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui">
Know More
</a>
{" "}
(beta).
</Text>
</HStack>
</Box>
</Stack>
{/* </a> */}
<Box flexDirection="row" flex={1}>
Expand Down
16 changes: 14 additions & 2 deletions src/components/GettingStartedHero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,26 @@ export function GettingStartedHero() {
NativeBase is a component library that enables devs to build
universal design systems. It is built on top of React Native,
allowing you to develop apps for Android, iOS and the Web.
<br/>
<br/>
IMPORTANT MESSAGE — If you are starting a new project with
NativeBase, we recommend using{" "}
<a href="https://ui.gluestack.io/" target="_blank">
<Text fontWeight="semibold" textDecorationLine="underline">
gluestack-ui
</Text>
</a>{" "}
instead.{" "}
</a>
{" "}
instead. However, if you are already working on a NativeBase project, we recommend using{" "}
<a href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" target="_blank">
<Text fontWeight="semibold" textDecorationLine="underline">
@gluestack-ui/themed-native-base
</Text>
</a>
{" "}
instead.
{" "}

<a
href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui"
target="_blank"
Expand Down
2 changes: 1 addition & 1 deletion src/components/NBHistory/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export default function NBHistory() {
performance and maintainability issues of NativeBase v3. By
splitting the library into three parts and focusing on a universal,
headless, and independent set of components, gluestack-ui now offers
better performance and easier maintenance. v3.
better performance and easier maintenance.
</Text>
</Li>
</VStack>
Expand Down

0 comments on commit 764e9b2

Please sign in to comment.