Merge pull request #6182 from StoDevX/hawken/remove-linear-gradient

StoDevX · Jan 21, 2023 · 98de45b · 98de45b
2 parents 1c5e1c6 + de0325f
commit 98de45b
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 140 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1,7 +1,5 @@
 PODS:
   - boost (1.76.0)
-  - BVLinearGradient (2.6.2):
-    - React-Core
   - CocoaAsyncSocket (7.6.5)
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.68.5)
@@ -430,7 +428,6 @@ PODS:
 
 DEPENDENCIES:
   - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`)
-  - BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
   - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`)
@@ -529,8 +526,6 @@ SPEC REPOS:
 EXTERNAL SOURCES:
   boost:
     :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec"
-  BVLinearGradient:
-    :path: "../node_modules/react-native-linear-gradient"
   DoubleConversion:
     :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
   FBLazyVector:
@@ -636,7 +631,6 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
-  BVLinearGradient: 34a999fda29036898a09c6a6b728b0b4189e1a44
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
   FBLazyVector: 2b47ff52037bd9ae07cc9b051c9975797814b736

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -89,7 +89,6 @@
     "react-native-inappbrowser-reborn": "3.7.0",
     "react-native-ios-context-menu": "1.15.3",
     "react-native-keychain": "8.1.1",
-    "react-native-linear-gradient": "2.6.2",
     "react-native-paper": "4.12.4",
     "react-native-popover-view": "4.1.0",
     "react-native-reanimated": "2.14.4",

diff --git a/source/views/home/button.tsx b/source/views/home/button.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import {View, Text, StyleSheet, Platform} from 'react-native'
 import Icon from 'react-native-vector-icons/Entypo'
 import type {ViewType} from '../views'
-import LinearGradient from 'react-native-linear-gradient'
 import {Touchable} from '@frogpond/touchable'
 import {transparent} from '@frogpond/colors'
 import {homescreenForegroundDark, homescreenForegroundLight} from './colors'
@@ -17,95 +16,23 @@ export function HomeScreenButton({view, onPress}: Props): JSX.Element {
 	let foreground =
 		view.foreground === 'light' ? styles.lightForeground : styles.darkForeground
 
-	return (
-		<TouchableButton
-			gradient={view.gradient}
-			label={view.title}
-			onPress={onPress}
-			tint={view.tint}
-		>
-			<View style={styles.contents}>
-				<Icon name={view.icon} size={32} style={[foreground, styles.icon]} />
-				<Text style={[foreground, styles.text]}>{view.title}</Text>
-			</View>
-		</TouchableButton>
-	)
-}
-
-type TouchableButtonProps = {
-	onPress: () => void
-	label: string
-	children: React.ReactChildren | JSX.Element
-	tint: string
-	gradient?: [string, string]
-}
-
-function TouchableButton(props: TouchableButtonProps) {
-	let {onPress, label, children, tint, gradient} = props
-
-	if (Platform.OS === 'android') {
-		return (
-			<Tint gradient={gradient} tint={tint}>
-				<TouchableWrapper label={label} onPress={onPress}>
-					{children}
-				</TouchableWrapper>
-			</Tint>
-		)
-	} else {
-		return (
-			<TouchableWrapper label={label} onPress={onPress}>
-				<Tint gradient={gradient} tint={tint}>
-					{children}
-				</Tint>
-			</TouchableWrapper>
-		)
-	}
-}
-
-type TouchableWrapperProps = {
-	onPress: () => void
-	label: string
-	children: React.ReactChildren | JSX.Element
-}
-
-function TouchableWrapper({onPress, children, label}: TouchableWrapperProps) {
 	return (
 		<Touchable
-			accessibilityLabel={label}
+			accessibilityLabel={view.title}
 			accessibilityRole="button"
 			accessible={true}
 			highlight={false}
 			onPress={onPress}
+			style={[styles.button, {backgroundColor: view.tint}]}
 		>
-			{children}
+			<View style={styles.contents}>
+				<Icon name={view.icon} size={32} style={[foreground, styles.icon]} />
+				<Text style={[foreground, styles.text]}>{view.title}</Text>
+			</View>
 		</Touchable>
 	)
 }
 
-type TintProps = {
-	children: React.ReactChildren | JSX.Element
-	tint: string
-	gradient?: [string, string]
-}
-
-function Tint({tint = 'black', gradient, children}: TintProps) {
-	if (!gradient) {
-		let bg = {backgroundColor: tint}
-		return <View style={[styles.button, bg]}>{children}</View>
-	}
-
-	return (
-		<LinearGradient
-			colors={gradient}
-			end={{x: 0, y: 0.85}}
-			start={{x: 0, y: 0.05}}
-			style={styles.button}
-		>
-			{children}
-		</LinearGradient>
-	)
-}
-
 export const CELL_MARGIN = 10
 const cellVerticalPadding = 8
 const cellHorizontalPadding = 4

diff --git a/source/views/streaming/webcams/thumbnail.tsx b/source/views/streaming/webcams/thumbnail.tsx
@@ -4,7 +4,6 @@ import {Touchable} from '@frogpond/touchable'
 import * as c from '@frogpond/colors'
 import {images as webcamImages} from '../../../../images/webcams'
 import {trackedOpenUrl} from '@frogpond/open-url'
-import LinearGradient from 'react-native-linear-gradient'
 import type {Webcam} from './types'
 
 import transparentPixel from '../../../../images/transparent.png'
@@ -25,7 +24,6 @@ export const StreamThumbnail = (props: Props): JSX.Element => {
 
 	let [r, g, b] = accentColor
 	let baseColor = `rgba(${r}, ${g}, ${b}, 1)`
-	let startColor = `rgba(${r}, ${g}, ${b}, 0.1)`
 
 	let width = viewportWidth / 2 - CELL_MARGIN * 1.5
 	let cellRatio = 2.15625
@@ -54,9 +52,7 @@ export const StreamThumbnail = (props: Props): JSX.Element => {
 				/>
 
 				<View style={styles.titleWrapper}>
-					<LinearGradient colors={[startColor, baseColor]} locations={[0, 0.8]}>
-						<Text style={[styles.titleText, {color: textColor}]}>{name}</Text>
-					</LinearGradient>
+					<Text style={[styles.titleText, {color: textColor}]}>{name}</Text>
 				</View>
 			</Touchable>
 		</View>

diff --git a/source/views/views.ts b/source/views/views.ts
@@ -1,5 +1,4 @@
 import * as c from '@frogpond/colors'
-import type {Gradient} from '@frogpond/colors'
 import {RootViewsParamList} from '../navigation/types'
 
 import {NavigationKey as menus} from './menus'
@@ -23,7 +22,6 @@ type CommonView = {
 	icon: string
 	foreground: 'light' | 'dark'
 	tint: string
-	gradient?: Gradient
 }
 
 type NativeView = {
@@ -45,125 +43,111 @@ export const allViews: Array<ViewType> = [
 		title: 'Menus',
 		icon: 'bowl',
 		foreground: 'light',
-		tint: c.emerald,
-		gradient: c.grassToLime,
+		tint: c.grassToLime[0],
 	},
 	{
 		type: 'view',
 		view: sis,
 		title: 'SIS',
 		icon: 'fingerprint',
 		foreground: 'light',
-		tint: c.goldenrod,
-		gradient: c.yellowToGoldDark,
+		tint: c.yellowToGoldDark[0],
 	},
 	{
 		type: 'view',
 		view: hours,
 		title: 'Building Hours',
 		icon: 'clock',
 		foreground: 'light',
-		tint: c.wave,
-		gradient: c.lightBlueToBlueDark,
+		tint: c.lightBlueToBlueDark[0],
 	},
 	{
 		type: 'view',
 		view: calendar,
 		title: 'Calendar',
 		icon: 'calendar',
 		foreground: 'light',
-		tint: c.coolPurple,
-		gradient: c.magentaToPurple,
+		tint: c.magentaToPurple[0],
 	},
 	{
 		type: 'view',
 		view: directory,
 		title: 'Directory',
 		icon: 'v-card',
 		foreground: 'light',
-		tint: c.indianRed,
-		gradient: c.redToPurple,
+		tint: c.redToPurple[0],
 	},
 	{
 		type: 'view',
 		view: streaming,
 		title: 'Streaming Media',
 		icon: 'video',
 		foreground: 'light',
-		tint: c.denim,
-		gradient: c.lightBlueToBlueLight,
+		tint: c.lightBlueToBlueLight[0],
 	},
 	{
 		type: 'view',
 		view: news,
 		title: 'News',
 		icon: 'news',
 		foreground: 'light',
-		tint: c.eggplant,
-		gradient: c.purpleToIndigo,
+		tint: c.purpleToIndigo[0],
 	},
 	{
 		type: 'url',
 		url: 'https://www.myatlascms.com/map/index.php?id=294',
 		title: 'Campus Map',
 		icon: 'map',
 		foreground: 'light',
-		tint: c.coffee,
-		gradient: c.navyToNavy,
+		tint: c.navyToNavy[0],
 	},
 	{
 		type: 'view',
 		view: importantContacts,
 		title: 'Important Contacts',
 		icon: 'phone',
 		foreground: 'light',
-		tint: c.crimson,
-		gradient: c.orangeToRed,
+		tint: c.orangeToRed[0],
 	},
 	{
 		type: 'view',
 		view: transportation,
 		title: 'Transportation',
 		icon: 'address',
 		foreground: 'light',
-		tint: c.cardTable,
-		gradient: c.grayToDarkGray,
+		tint: c.grayToDarkGray[0],
 	},
 	{
 		type: 'view',
 		view: dictionary,
 		title: 'Campus Dictionary',
 		icon: 'open-book',
 		foreground: 'light',
-		tint: c.olive,
-		gradient: c.pinkToHotpink,
+		tint: c.pinkToHotpink[0],
 	},
 	{
 		type: 'view',
 		view: studentOrgs,
 		title: 'Student Orgs',
 		icon: 'globe',
 		foreground: 'light',
-		tint: c.wave,
-		gradient: c.darkBlueToIndigo,
+		tint: c.darkBlueToIndigo[0],
 	},
 	{
 		type: 'view',
 		view: more,
 		title: 'More',
 		icon: 'link',
 		foreground: 'light',
-		tint: c.lavender,
-		gradient: c.seafoamToGrass,
+		tint: c.seafoamToGrass[0],
 	},
 	{
 		type: 'view',
 		view: printJobs,
 		title: 'stoPrint',
 		icon: 'print',
 		foreground: 'light',
-		tint: c.periwinkle,
-		gradient: c.tealToSeafoam,
+		tint: c.tealToSeafoam[0],
 	},
 	{
 		type: 'view',
@@ -172,15 +156,13 @@ export const allViews: Array<ViewType> = [
 		icon: 'graduation-cap',
 		foreground: 'light',
 		tint: c.lavender,
-		gradient: c.seafoamToGrass,
 	},
 	{
 		type: 'url',
 		url: 'https://oleville.com/',
 		title: 'Oleville',
 		icon: 'browser',
 		foreground: 'dark',
-		tint: c.periwinkle,
-		gradient: c.yellowToGoldMid,
+		tint: c.yellowToGoldMid[0],
 	},
 ]