docs: get started buttons adjustments, fix lint warnings

Author: lukewalczak

docs/src/components/GetStartedButtons.tsx

@@ -22,16 +22,23 @@ const styles = StyleSheet.create({
   },
 });
 
+const noTextDecoration = {
+  textDecoration: 'none',
+};
+
+// Needed for ripple effect when pressing `Button`, however navigation is handled by `Link`
+const noop = () => {};
+
 const GetStartedButton = () => {
   return (
     <View style={styles.container}>
-      <Link to="docs/guides/getting-started" style={{ textDecoration: 'none' }}>
-        <Button mode="elevated" style={styles.button}>
+      <Link to="docs/guides/getting-started" style={noTextDecoration}>
+        <Button mode="contained" style={styles.button} onPress={noop}>
           Get started
         </Button>
       </Link>
       <Button
-        mode="elevated"
+        mode="outlined"
         onPress={() =>
           window.open(
             'https://snack.expo.dev/@react-native-paper/react-native-paper-example_v5'

docs/src/components/Showcase.tsx

@@ -161,6 +161,8 @@ const data: Data[] = [
   },
 ];
 
+const getOpacity = (item?: string) => (item ? 1 : 0.4);
+
 export default function Showcase() {
   return (
     <div className="showcase-gallery">
@@ -187,7 +189,7 @@ export default function Showcase() {
                     href={item.android}
                     target="_blank"
                     rel="noopener noreferrer"
-                    style={{ opacity: item.android ? 1 : 0.4 }}
+                    style={{ opacity: getOpacity(item.android) }}
                   >
                     <GooglePlayIcon color={tintColor} />
                   </a>
@@ -196,7 +198,7 @@ export default function Showcase() {
                     href={item.ios}
                     target="_blank"
                     rel="noopener noreferrer"
-                    style={{ opacity: item.ios ? 1 : 0.4 }}
+                    style={{ opacity: getOpacity(item.ios) }}
                   >
                     <AppStoreIcon color={tintColor} />
                   </a>
@@ -205,7 +207,7 @@ export default function Showcase() {
                     href={item.github}
                     target="_blank"
                     rel="noopener noreferrer"
-                    style={{ opacity: item.github ? 1 : 0.4 }}
+                    style={{ opacity: getOpacity(item.github) }}
                   >
                     <GithubIcon color={tintColor} />
                   </a>

docs/src/components/Switch.tsx

@@ -7,6 +7,7 @@ interface SwitchProps {
 }
 
 const Switch = ({ value, onValueChange, color }: SwitchProps) => {
+  const background = value ? color : 'none';
   return (
     <>
       <input
@@ -17,7 +18,7 @@ const Switch = ({ value, onValueChange, color }: SwitchProps) => {
         type="checkbox"
       />
       <label
-        style={{ background: value ? color : 'none' }}
+        style={{ background }}
         className="react-switch-label"
         htmlFor={`react-switch-new`}
       >