Skip to content

Commit 764e9b2

Browse files
akash3gtmakash3gtm
committed
chore: update layout for release
1 parent bc2a48f commit 764e9b2

File tree

4 files changed

+102
-175
lines changed

4 files changed

+102
-175
lines changed

‎layouts/icons.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1+
import { useToken } from "native-base";
12
import React from "react";
23

3-
export function AlertIcon() {
4+
export function AlertIcon({...props}) {
5+
const color = useToken('colors', 'yellow.600');
46
return (
57
<svg
68
width={20}
79
height={20}
810
viewBox="0 0 20 20"
911
fill="none"
10-
xmlns="http://www.w3.org/2000/svg"
12+
{...props}
1113
>
1214
<path
1315
fillRule="evenodd"
1416
clipRule="evenodd"
1517
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"
16-
fill="#FED219"
18+
fill={color}
1719
/>
1820
</svg>
1921
);

‎layouts/index.tsx

+82-169
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ import Head from "next/head";
22
import React, { useEffect, useContext, useState } from "react";
33
import {
44
Box,
5+
Divider,
56
HStack,
7+
Heading,
8+
Icon,
69
Link,
710
Modal,
811
Pressable,
@@ -27,6 +30,7 @@ import NativebaseIconLogo from "../src/new-components/NativebaseIconLogo";
2730
import Script from "next/script";
2831
import { isLatestVersionSlug } from "../src/utils";
2932
import { AlertIcon, RightArrow } from "./icons";
33+
import Svg, { Path } from "react-native-svg";
3034

3135
function Layout({
3236
children: content,
@@ -169,7 +173,8 @@ function Layout({
169173
<Script
170174
async
171175
src="https://www.googletagmanager.com/gtag/js?id=G-DBP9QMTGR1"
172-
></Script>
176+
>
177+
</Script>
173178
<Script id="gTagScript">
174179
{`
175180
window.dataLayer = window.dataLayer || [];
@@ -190,90 +195,65 @@ function Layout({
190195
>
191196
<Modal.CloseButton />
192197
<Modal.Body p="9">
193-
<HStack mb="4" alignItems="center" justifyContent="center">
194-
<Text fontSize="md" fontWeight="bold" textAlign="center" mr="1">
198+
<HStack mb="6" alignItems="center" justifyContent="flex">
199+
<AlertIcon/>
200+
<Heading fontSize='xl' textAlign="left" ml="1.5">
195201
IMPORTANT MESSAGE
196-
</Text>
197-
<AlertIcon />
202+
</Heading>
198203
</HStack>
199-
<Text
200-
fontSize="lg"
201-
lineHeight={27}
202-
textAlign="center"
203-
color="muted.800"
204-
_dark={{
205-
color: "muted.200",
206-
}}
207-
>
208-
If you are starting a new project with NativeBase, we recommend
209-
using <Text fontWeight="bold">gluestack</Text> instead.
210-
</Text>
211-
212-
<HStack justifyContent="center">
213-
<a href="https://gluestack.io/">
214-
<Pressable
215-
my="6"
216-
borderWidth={1}
217-
rounded="sm"
218-
px="3"
219-
py="2"
220-
_light={{
221-
borderColor: "muted.900",
222-
}}
223-
_dark={{
224-
borderColor: "muted.50",
225-
}}
226-
_hover={{
227-
bg: "primary.200",
228-
borderColor: "primary.200",
229-
_dark: {
230-
bg: "primary.700",
231-
borderColor: "primary.700",
232-
},
233-
}}
234-
_focus={{
235-
bg: "primary.300",
236-
borderColor: "primary.300",
237-
_dark: {
238-
bg: "primary.800",
239-
borderColor: "primary.800",
240-
},
241-
}}
242-
>
204+
{/* @ts-ignore*/}
205+
<Box gap={5}>
206+
<Box flexDirection='row'>
207+
<Icon size={18} color='black'>
208+
<Svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
209+
<Path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/>
210+
<Path d="m21 3-9 9"/>
211+
<Path d="M15 3h6v6"/>
212+
</Svg>
213+
</Icon>
214+
<Box w='92%' maxW='100%' ml="2">
215+
<Heading fontSize='md'>Upgrade to gluestack-ui</Heading>
243216
<Text
244-
fontSize="md"
245-
fontWeight="medium"
246-
_light={{
247-
color: "muted.900",
248-
}}
217+
fontSize="sm"
218+
textAlign="left"
219+
color="muted.800"
249220
_dark={{
250-
color: "muted.50",
221+
color: "muted.200",
251222
}}
252223
>
253-
Explore gluestack
224+
If you are starting a new project with NativeBase, we recommend
225+
using <Link href="https://gluestack.io/" fontWeight="bold">gluestack-ui</Link>
254226
</Text>
255-
</Pressable>
256-
</a>
257-
</HStack>
227+
</Box>
228+
</Box>
258229

259-
<HStack justifyContent="center">
260-
<Link
261-
href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui"
262-
flexDir="row"
263-
alignItems="center"
264-
isUnderlined
265-
_text={{
266-
color: "#52B3D0",
267-
fontSize: "md",
268-
fontWeight: "bold",
269-
}}
270-
>
271-
Read Updated Blog
272-
<Box ml="1">
273-
<RightArrow />
230+
<Divider thickness={1}/>
231+
232+
<Box flexDirection='row'>
233+
<Icon size={18} color='black'>
234+
<Svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
235+
<Path d="m21 16-4 4-4-4"/>
236+
<Path d="M17 20V4"/>
237+
<Path d="m3 8 4-4 4 4"/>
238+
<Path d="M7 4v16"/>
239+
</Svg>
240+
</Icon>
241+
<Box w='93%' maxW='100%' ml="2">
242+
<Heading fontSize='md'>Migrate to gluestack-ui</Heading>
243+
<Text
244+
fontSize="sm"
245+
textAlign="left"
246+
color="muted.800"
247+
_dark={{
248+
color: "muted.200",
249+
}}
250+
>
251+
If you are working on a project with NativeBase, we recommend
252+
using <Link href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" fontWeight="bold">@gluestack-ui/themed-native-base</Link>
253+
</Text>
274254
</Box>
275-
</Link>
276-
</HStack>
255+
</Box>
256+
</Box>
277257
</Modal.Body>
278258
</Modal.Content>
279259
</Modal>
@@ -339,8 +319,6 @@ function Layout({
339319
overflow="hidden"
340320
px="4"
341321
py="5"
342-
fontSize="sm"
343-
fontWeight="medium"
344322
borderWidth={1}
345323
_light={{
346324
bg: "#F1F1F1",
@@ -352,101 +330,36 @@ function Layout({
352330
bg: "#171E2E",
353331
borderColor: "muted.800",
354332
}}
355-
width="100%"
356-
direction={{ md: "row" }}
357333
>
358-
<AlertIcon />
359-
<Text ml="1">
360-
IMPORTANT MESSAGE — If you are starting a new project with
361-
NativeBase, we recommend using{" "}
362-
<a href="https://gluestack.io/">gluestack</a> instead.{" "}
363-
</Text>
364-
<HStack
365-
alignItems="center"
366-
mt={{ base: "4", md: 0 }}
367-
ml={{ md: "2" }}
334+
<Box
335+
// maxW='1056'
336+
fontSize="sm"
337+
fontWeight="medium"
338+
alignSelf='flex'
339+
flexDirection='row'
340+
alignItems={{ md: "center" }}
341+
justifyContent={{ md: "center" }}
342+
width="100%"
368343
>
369-
<a href="https://gluestack.io/">
370-
<Pressable
371-
borderWidth={1}
372-
rounded="sm"
373-
px="3"
374-
py="2"
375-
_light={{
376-
borderColor: "muted.900",
377-
}}
378-
_dark={{
379-
borderColor: "muted.50",
380-
}}
381-
_hover={{
382-
bg: "primary.200",
383-
borderColor: "primary.200",
384-
385-
_dark: {
386-
bg: "primary.700",
387-
borderColor: "primary.700",
388-
},
389-
}}
390-
_focus={{
391-
bg: "primary.300",
392-
borderColor: "primary.300",
393-
394-
_dark: {
395-
bg: "primary.800",
396-
borderColor: "primary.800",
397-
},
398-
}}
399-
_hover={{
400-
bg: "primary.200",
401-
borderColor: "primary.200",
402-
403-
_dark: {
404-
bg: "primary.700",
405-
borderColor: "primary.700",
406-
},
407-
}}
408-
_focus={{
409-
bg: "primary.300",
410-
borderColor: "primary.300",
411-
412-
_dark: {
413-
bg: "primary.800",
414-
borderColor: "primary.800",
415-
},
416-
}}
417-
pointerEvents="none"
418-
>
419-
<Text
420-
fontSize="sm"
421-
fontWeight="medium"
422-
_light={{
423-
color: "muted.900",
424-
}}
425-
_dark={{
426-
color: "muted.50",
427-
}}
428-
>
429-
Explore gluestack
430-
</Text>
431-
</Pressable>
344+
<AlertIcon height={18} width={18}/>
345+
<Text ml="1">
346+
If you are starting a new project, we recommend using {" "}
347+
<a href="https://ui.gluestack.io/" target="_blank">
348+
<Text fontWeight="semibold" textDecorationLine="underline">
349+
gluestack-ui
350+
</Text>
351+
</a>
352+
{". "}
353+
For your existing projects, you can utilize{" "}
354+
<a href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" target="_blank">
355+
<Text fontWeight="semibold" textDecorationLine="underline">
356+
@gluestack-ui/themed-native-base
357+
</Text>
432358
</a>
433-
<Text
434-
fontSize="sm"
435-
fontWeight="medium"
436-
_light={{
437-
color: "muted.900",
438-
}}
439-
_dark={{
440-
color: "muted.50",
441-
}}
442-
underline
443-
ml="4"
444-
>
445-
<a href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui">
446-
Know More
447-
</a>
359+
{" "}
360+
(beta).
448361
</Text>
449-
</HStack>
362+
</Box>
450363
</Stack>
451364
{/* </a> */}
452365
<Box flexDirection="row" flex={1}>

‎src/components/GettingStartedHero.tsx

+14-2
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,26 @@ export function GettingStartedHero() {
3030
NativeBase is a component library that enables devs to build
3131
universal design systems. It is built on top of React Native,
3232
allowing you to develop apps for Android, iOS and the Web.
33+
<br/>
34+
<br/>
3335
IMPORTANT MESSAGE — If you are starting a new project with
3436
NativeBase, we recommend using{" "}
3537
<a href="https://ui.gluestack.io/" target="_blank">
3638
<Text fontWeight="semibold" textDecorationLine="underline">
3739
gluestack-ui
3840
</Text>
39-
</a>{" "}
40-
instead.{" "}
41+
</a>
42+
{" "}
43+
instead. However, if you are already working on a NativeBase project, we recommend using{" "}
44+
<a href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" target="_blank">
45+
<Text fontWeight="semibold" textDecorationLine="underline">
46+
@gluestack-ui/themed-native-base
47+
</Text>
48+
</a>
49+
{" "}
50+
instead.
51+
{" "}
52+
4153
<a
4254
href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui"
4355
target="_blank"

‎src/components/NBHistory/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ export default function NBHistory() {
193193
performance and maintainability issues of NativeBase v3. By
194194
splitting the library into three parts and focusing on a universal,
195195
headless, and independent set of components, gluestack-ui now offers
196-
better performance and easier maintenance. v3.
196+
better performance and easier maintenance.
197197
</Text>
198198
</Li>
199199
</VStack>

0 commit comments

Comments
 (0)