Front: Apply New Color, Button and Link Style

front/Theme.tsx

@@ -19,62 +19,112 @@ const ThemeProvider = ({ children }: { children: JSX.Element }) => {
 				},
 				colors: {
 					primary: {
-						50: '#e6faea',
-						100: '#c8e7d0',
-						200: '#a7d6b5',
-						300: '#86c498',
-						400: '#65b47c',
-						500: '#4b9a62',
-						600: '#3a784b',
-						700: '#275635',
-						800: '#14341f',
-						900: '#001405',
+						50: '#eff1fe',
+						100: '#e7eafe',
+						200: '#cdd4fd',
+						300: '#5f74f7',
+						400: '#5668de',
+						500: '#4c5dc6',
+						600: '#4757b9',
+						700: '#394694',
+						800: '#2b346f',
+						900: '#212956',
 					},
 					secondary: {
-						50: '#d8ffff',
-						100: '#acffff',
-						200: '#7dffff',
-						300: '#4dffff',
-						400: '#28ffff',
-						500: '#18e5e6',
-						600: '#00b2b3',
-						700: '#007f80',
-						800: '#004d4e',
-						900: '#001b1d',
+						50: '#f7f3ff',
+						100: '#f3edfe',
+						200: '#e6d9fe',
+						300: '#ae84fb',
+						400: '#9d77e2',
+						500: '#8b6ac9',
+						600: '#8363bc',
+						700: '#684f97',
+						800: '#4e3b71',
+						900: '#3d2e58',
 					},
 					error: {
-						50: '#ffe2e9',
-						100: '#ffb1bf',
-						200: '#ff7f97',
-						300: '#ff4d6d',
-						400: '#fe1d43',
-						500: '#e5062b',
-						600: '#b30020',
-						700: '#810017',
-						800: '#4f000c',
-						900: '#200004',
+						50: '#f7f3ff',
+						100: '#f3edfe',
+						200: '#e6d9fe',
+						300: '#ae84fb',
+						400: '#9d77e2',
+						500: '#8b6ac9',
+						600: '#8363bc',
+						700: '#684f97',
+						800: '#4e3b71',
+						900: '#3d2e58',
+					},
+					alert: {
+						50: '#fff2f1',
+						100: '#ffebea',
+						200: '#ffd6d3',
+						300: '#ff7a72',
+						400: '#e66e67',
+						500: '#cc625b',
+						600: '#bf5c56',
+						700: '#994944',
+						800: '#733733',
+						900: '#592b28',
 					},
 					notification: {
-						50: '#ffe1e1',
-						100: '#ffb1b1',
-						200: '#ff7f7f',
-						300: '#ff4c4c',
-						400: '#ff1a1a',
-						500: '#e60000',
-						600: '#b40000',
-						700: '#810000',
-						800: '#500000',
-						900: '#210000',
+						50: '#fdfbec',
+						100: '#fcf9e2',
+						200: '#f8f3c3',
+						300: '#ead93c',
+						400: '#d3c336',
+						500: '#bbae30',
+						600: '#b0a32d',
+						700: '#8c8224',
+						800: '#69621b',
+						900: '#524c15',
 					},
+					black: {
+						50: '#e7e7e8',
+						100: '#dbdbdc',
+						200: '#b5b5b6',
+						300: '#101014',
+						400: '#0e0e12',
+						500: '#0d0d10',
+						600: '#0c0c0f',
+						700: '#0a0a0c',
+						800: '#070709',
+						900: '#060607',
+					},
+					red: {
+						50: '#fdedee',
+						100: '#fce4e5',
+						200: '#f9c7c9',
+						300: '#ed4a51',
+						400: '#d54349',
+						500: '#be3b41',
+						600: '#b2383d',
+						700: '#8e2c31',
+						800: '#6b2124',
+						900: '#531a1c',
+					}
 				},
 				components: {
 					Button: {
-						variants: {
-							solid: () => ({
-								rounded: 'full',
-							}),
-						},
+						baseStyle: () => ({
+							borderRadius: 'md'
+						}),
 					},
+					Link: {
+						defaultProps: {
+							isUnderlined: false
+						},
+						baseStyle: () => ({
+							_text: {
+								color: "secondary.300"
+							},
+							_hover: {
+								isUnderlined: true,
+								_text: {
+									color: "secondary.400"
+								}
+							},
+						})
+					}
 				},
 			})}
 		>

front/views/StartPageView.tsx

@@ -15,7 +15,6 @@ import {
 	Row,
 	Heading,
 	Icon,
-	Button,
 } from 'native-base';
 import { FontAwesome5 } from '@expo/vector-icons';
 import BigActionButton from '../components/BigActionButton';
@@ -177,9 +176,7 @@ const StartPageView = () => {
 							href="https://chroma-case.github.io/"
 							isExternal
 						>
-							<Button>
-								Click here for more info
-							</Button>
+							Click here for more info
 						</Link>
 					</Box>
 				</Box>