From 810b5161dc6e29ca83ce6bddff0b4dc83aff2ae0 Mon Sep 17 00:00:00 2001
From: Utku <74243531+utkubakir@users.noreply.github.com>
Date: Tue, 21 Feb 2023 20:57:08 +0300
Subject: [PATCH] Fix Mobile & opacity/x syntax (#576)

* fix mobile

* fix opacity/xx (it doesn't exist)

* Add opacity-60 back to job manager
---
 apps/landing/src/components/HomeCTA.tsx            |  6 +++---
 apps/landing/src/components/NavBar.tsx             |  4 ++--
 apps/landing/src/components/NewBanner.tsx          |  2 +-
 apps/landing/src/pages/careers.page.tsx            |  6 +++---
 apps/landing/src/pages/index.page.tsx              |  2 +-
 .../src/components/drawer/DrawerLocations.tsx      |  2 +-
 packages/client/src/hooks/useCurrentLibrary.tsx    | 13 +++----------
 .../interface/src/components/jobs/JobManager.tsx   |  4 +++-
 packages/interface/src/components/layout/Modal.tsx |  2 +-
 .../interface/src/components/layout/Sidebar.tsx    | 10 +++++++---
 .../interface/src/components/primitive/Listbox.tsx | 14 ++++++--------
 .../interface/src/components/primitive/Slider.tsx  |  2 +-
 .../interface/src/components/primitive/Toasts.tsx  |  6 +++---
 .../src/screens/settings/info/Dependencies.tsx     |  6 +++---
 packages/ui/src/Button.tsx                         |  2 +-
 packages/ui/src/Dialog.tsx                         |  2 +-
 16 files changed, 40 insertions(+), 43 deletions(-)

diff --git a/apps/landing/src/components/HomeCTA.tsx b/apps/landing/src/components/HomeCTA.tsx
index 87191ffb0..d22faa8ee 100644
--- a/apps/landing/src/components/HomeCTA.tsx
+++ b/apps/landing/src/components/HomeCTA.tsx
@@ -107,9 +107,9 @@ export function HomeCTA() {
 							{(waitlistError || waitlistSubmitted) && (
 								<div
 									className={clsx({
-										'bg-opacity/20 my-2 flex flex-row items-center rounded-md border-2 px-2': true,
-										'border-red-900 bg-red-800': waitlistError,
-										'border-green-900 bg-green-800': !waitlistError,
+										'my-2 flex flex-row items-center rounded-md border-2 px-2': true,
+										'border-red-900 bg-red-800/20': waitlistError,
+										'border-green-900 bg-green-800/20': !waitlistError,
 										'-mt-2': waitlistSubmitted
 									})}
 								>
diff --git a/apps/landing/src/components/NavBar.tsx b/apps/landing/src/components/NavBar.tsx
index 28a8e95ff..61753c9cb 100644
--- a/apps/landing/src/components/NavBar.tsx
+++ b/apps/landing/src/components/NavBar.tsx
@@ -55,7 +55,7 @@ export default function NavBar() {
 				'fixed z-[55] h-16 w-full border-b px-2 transition ',
 				isAtTop
 					? 'border-transparent bg-transparent'
-					: 'bg-opacity/80 border-gray-550 bg-gray-700 backdrop-blur'
+					: 'border-gray-550 bg-gray-700/80 backdrop-blur'
 			)}
 		>
 			<div className="relative m-auto flex h-full max-w-[100rem] items-center p-5">
@@ -72,7 +72,7 @@ export default function NavBar() {
 					<div className="relative inline">
 						<NavLink link="/careers">Careers</NavLink>
 						{positions.length > 0 ? (
-							<span className="bg-opacity/80 bg-primary absolute -top-1 -right-2 rounded-md px-[5px] text-xs">
+							<span className="bg-primary/80 absolute -top-1 -right-2 rounded-md px-[5px] text-xs">
 								{` ${positions.length} `}
 							</span>
 						) : null}
diff --git a/apps/landing/src/components/NewBanner.tsx b/apps/landing/src/components/NewBanner.tsx
index 3f18cc345..5e49d278c 100644
--- a/apps/landing/src/components/NewBanner.tsx
+++ b/apps/landing/src/components/NewBanner.tsx
@@ -10,7 +10,7 @@ const NewBanner: React.FC<NewBannerProps> = (props) => {
 	return (
 		<aside
 			onClick={() => (window.location.href = href)}
-			className="fade-in-whats-new bg-opacity/50 hover:border-gray-550 hover:bg-gray-750 z-10 mb-5 flex w-10/12 cursor-pointer flex-row rounded-full border border-gray-600 bg-gray-800 px-5 py-1.5 text-xs transition sm:w-auto sm:text-base"
+			className="fade-in-whats-new hover:border-gray-550 hover:bg-gray-750 z-10 mb-5 flex w-10/12 cursor-pointer flex-row rounded-full border border-gray-600 bg-gray-800/50 px-5 py-1.5 text-xs transition sm:w-auto sm:text-base"
 		>
 			<strong className="text-gray-350 truncate font-semibold">{headline}</strong>
 			<div role="separator" className="h-22 mx-4 w-[1px] bg-gray-500" />
diff --git a/apps/landing/src/pages/careers.page.tsx b/apps/landing/src/pages/careers.page.tsx
index 78e14ff94..d76c1a767 100644
--- a/apps/landing/src/pages/careers.page.tsx
+++ b/apps/landing/src/pages/careers.page.tsx
@@ -121,7 +121,7 @@ function Page() {
 						{values.map((value, index) => (
 							<div
 								key={value.title + index}
-								className="bg-opacity/50 bg-gray-550 flex flex-col rounded-md border border-gray-500 p-10"
+								className="bg-gray-550/50 flex flex-col rounded-md border border-gray-500 p-10"
 							>
 								<value.icon className="m-0 w-8" />
 								<h3 className="mt-4 mb-1 text-2xl font-bold leading-snug">{value.title}</h3>
@@ -139,7 +139,7 @@ function Page() {
 							<div
 								key={value.title + index}
 								style={{ backgroundColor: value.color + '10', borderColor: value.color + '30' }}
-								className="bg-opacity30 bg-gray-550 flex flex-col rounded-md border p-8"
+								className="bg-gray-550/30 flex flex-col rounded-md border p-8"
 							>
 								<value.icon className="m-0 w-8" color={value.color} />
 								<h3 className="mt-4 mb-1">{value.title}</h3>
@@ -161,7 +161,7 @@ function Page() {
 							positions.map((value, index) => (
 								<div
 									key={value.name + index}
-									className="bg-opacity/50 bg-gray-550 flex flex-col rounded-md border border-gray-500 p-10"
+									className="bg-gray-550/50 flex flex-col rounded-md border border-gray-500 p-10"
 								>
 									<div className="flex flex-col sm:flex-row">
 										<h3 className="m-0 text-2xl leading-tight">{value.name}</h3>
diff --git a/apps/landing/src/pages/index.page.tsx b/apps/landing/src/pages/index.page.tsx
index 9ddccda5f..79c232297 100644
--- a/apps/landing/src/pages/index.page.tsx
+++ b/apps/landing/src/pages/index.page.tsx
@@ -108,7 +108,7 @@ function Page() {
 			{unsubscribedFromWaitlist && (
 				<div
 					className={
-						'bg-opacity/20 my-2 -mt-8 flex flex-row items-center rounded-md border-2 border-green-900 bg-green-800 px-2'
+						'my-2 -mt-8 flex flex-row items-center rounded-md border-2 border-green-900 bg-green-800/20 px-2'
 					}
 				>
 					<Info className="mr-1 w-5 fill-green-500" />
diff --git a/apps/mobile/src/components/drawer/DrawerLocations.tsx b/apps/mobile/src/components/drawer/DrawerLocations.tsx
index 2ef76be40..6d25154f6 100644
--- a/apps/mobile/src/components/drawer/DrawerLocations.tsx
+++ b/apps/mobile/src/components/drawer/DrawerLocations.tsx
@@ -63,7 +63,7 @@ const DrawerLocations = ({ stackName }: DrawerLocationsProp) => {
 				</View>
 				{/* Add Location */}
 				<Pressable onPress={() => importModalRef.current.present()}>
-					<View style={tw`border-opacity/80 border-app-line mt-1 rounded border border-dashed`}>
+					<View style={tw`border-app-line/80 mt-1 rounded border border-dashed`}>
 						<Text style={tw`p-2 text-center text-xs font-bold text-gray-400`}>Add Location</Text>
 					</View>
 				</Pressable>
diff --git a/packages/client/src/hooks/useCurrentLibrary.tsx b/packages/client/src/hooks/useCurrentLibrary.tsx
index 907993bb0..065afa57d 100644
--- a/packages/client/src/hooks/useCurrentLibrary.tsx
+++ b/packages/client/src/hooks/useCurrentLibrary.tsx
@@ -1,5 +1,4 @@
 import { PropsWithChildren, createContext, useCallback, useContext, useMemo } from 'react';
-import { useNavigate } from 'react-router';
 import { subscribe, useSnapshot } from 'valtio';
 import { useBridgeQuery } from '../rspc';
 import { valtioPersist } from '../stores';
@@ -35,8 +34,6 @@ export function onLibraryChange(func: (newLibraryId: string | null) => void) {
 
 // this is a hook to get the current library loaded into the UI. It takes care of a bunch of invariants under the hood.
 export const useCurrentLibrary = () => {
-	const navigate = useNavigate();
-
 	const currentLibraryUuid = useSnapshot(currentLibraryUuidStore).id;
 	const ctx = useContext(CringeContext);
 	if (ctx === undefined)
@@ -69,13 +66,9 @@ export const useCurrentLibrary = () => {
 		}
 	});
 
-	const switchLibrary = useCallback(
-		(libraryUuid: string) => {
-			currentLibraryUuidStore.id = libraryUuid;
-			navigate('/');
-		},
-		[navigate]
-	);
+	const switchLibrary = useCallback((libraryUuid: string) => {
+		currentLibraryUuidStore.id = libraryUuid;
+	}, []);
 
 	// memorize library to avoid re-running find function
 	const library = useMemo(() => {
diff --git a/packages/interface/src/components/jobs/JobManager.tsx b/packages/interface/src/components/jobs/JobManager.tsx
index 80fb0f5e9..fe1fd415b 100644
--- a/packages/interface/src/components/jobs/JobManager.tsx
+++ b/packages/interface/src/components/jobs/JobManager.tsx
@@ -149,7 +149,9 @@ function Job({ job }: { job: JobReport }) {
 	};
 	const isRunning = job.status === 'Running';
 	return (
-		<div className="border-app-line/50 bg-opacity/60 flex items-center border-b p-2 pl-4">
+		// Do we actually need bg-opacity-60 here? Where is the bg?
+		// eslint-disable-next-line tailwindcss/migration-from-tailwind-2
+		<div className="border-app-line/50 flex items-center border-b bg-opacity-60 p-2 pl-4">
 			<Tooltip label={job.status}>
 				<niceData.icon className={clsx('mr-3 h-5 w-5')} />
 			</Tooltip>
diff --git a/packages/interface/src/components/layout/Modal.tsx b/packages/interface/src/components/layout/Modal.tsx
index 8f7bd2e85..3ae946ea1 100644
--- a/packages/interface/src/components/layout/Modal.tsx
+++ b/packages/interface/src/components/layout/Modal.tsx
@@ -27,7 +27,7 @@ export function Model(
 				>
 					<div
 						data-tauri-drag-region
-						className="bg-opacity/90 absolute top-0 left-0 -z-50 h-screen w-screen rounded-2xl bg-white dark:bg-gray-800"
+						className="absolute top-0 left-0 -z-50 h-screen w-screen rounded-2xl bg-white/90 dark:bg-gray-800/90"
 					/>
 				</Transition>
 				<ButtonLink to="/" variant="gray" className="absolute top-2 right-2 !px-1.5">
diff --git a/packages/interface/src/components/layout/Sidebar.tsx b/packages/interface/src/components/layout/Sidebar.tsx
index c2c164bea..84d6b86e3 100644
--- a/packages/interface/src/components/layout/Sidebar.tsx
+++ b/packages/interface/src/components/layout/Sidebar.tsx
@@ -11,7 +11,7 @@ import {
 	UsersThree
 } from 'phosphor-react';
 import React, { PropsWithChildren, useEffect } from 'react';
-import { NavLink, NavLinkProps } from 'react-router-dom';
+import { NavLink, NavLinkProps, useNavigate } from 'react-router-dom';
 import {
 	Location,
 	LocationCreateArgs,
@@ -59,6 +59,7 @@ export function Sidebar() {
 	const os = useOperatingSystem();
 	const { library, libraries, isLoading: isLoadingLibraries, switchLibrary } = useCurrentLibrary();
 	const debugState = useDebugState();
+	const navigate = useNavigate();
 
 	useEffect(() => {
 		// Prevent the dropdown button to be auto focused on launch
@@ -100,7 +101,10 @@ export function Sidebar() {
 						<Dropdown.Item
 							selected={lib.uuid === library?.uuid}
 							key={lib.uuid}
-							onClick={() => switchLibrary(lib.uuid)}
+							onClick={() => {
+								switchLibrary(lib.uuid);
+								navigate('/');
+							}}
 						>
 							{lib.config.name}
 						</Dropdown.Item>
@@ -283,7 +287,7 @@ const sidebarItemClass = cva(
 				false: 'text-ink-dull'
 			},
 			isTransparent: {
-				true: 'bg-opacity/90',
+				true: 'bg-opacity-90',
 				false: ''
 			}
 		}
diff --git a/packages/interface/src/components/primitive/Listbox.tsx b/packages/interface/src/components/primitive/Listbox.tsx
index 4cdcc6355..1080db11f 100644
--- a/packages/interface/src/components/primitive/Listbox.tsx
+++ b/packages/interface/src/components/primitive/Listbox.tsx
@@ -24,9 +24,9 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 				<div className="relative w-full">
 					<ListboxPrimitive.Button
 						className={clsx(
-							`focus-visible:ring-opacity/75 relative w-full cursor-default rounded-lg bg-white py-2 pl-3 
-								pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 
-								focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 
+							`relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 
+								text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 
+								focus-visible:ring-white/75 focus-visible:ring-offset-2 
 								focus-visible:ring-offset-orange-300 dark:bg-gray-500 sm:text-sm`,
 							props.className
 						)}
@@ -44,9 +44,9 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 
 					<ListboxPrimitive.Options
 						className={`
-							ring-opacity/5 absolute mt-1 max-h-60 w-full overflow-auto
+							absolute mt-1 max-h-60 w-full overflow-auto
 							rounded-md bg-white text-base shadow-lg ring-1 
-							ring-black focus:outline-none dark:bg-gray-500 sm:text-sm
+							ring-black/5 focus:outline-none dark:bg-gray-500 sm:text-sm
 						`}
 					>
 						{props.options.map((option, index) => (
@@ -54,9 +54,7 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 								key={option.key}
 								className={({ active }) =>
 									`relative m-1 cursor-default select-none rounded py-2 pl-8 pr-4 focus:outline-none dark:text-white  ${
-										active
-											? 'text-accent bg-accent'
-											: 'dark:hover:bg-opacity/20 text-gray-900 dark:hover:bg-gray-600'
+										active ? 'text-accent bg-accent' : 'text-gray-900 dark:hover:bg-gray-600/20'
 									}`
 								}
 								value={option}
diff --git a/packages/interface/src/components/primitive/Slider.tsx b/packages/interface/src/components/primitive/Slider.tsx
index 14c935db5..667fb997d 100644
--- a/packages/interface/src/components/primitive/Slider.tsx
+++ b/packages/interface/src/components/primitive/Slider.tsx
@@ -10,7 +10,7 @@ const Slider = (props: SliderPrimitive.SliderProps) => (
 			<SliderPrimitive.Range className="bg-accent absolute h-full rounded-full outline-none" />
 		</SliderPrimitive.Track>
 		<SliderPrimitive.Thumb
-			className="bg-accent ring-accent ring-opacity/30 z-50 block h-5 w-5 rounded-full font-bold shadow-lg shadow-black/20 outline-none transition focus:ring-4"
+			className="bg-accent ring-accent/30 z-50 block h-5 w-5 rounded-full font-bold shadow-lg shadow-black/20 outline-none transition focus:ring-4"
 			data-tip="1.0"
 		/>
 	</SliderPrimitive.Root>
diff --git a/packages/interface/src/components/primitive/Toasts.tsx b/packages/interface/src/components/primitive/Toasts.tsx
index a7a0cf7b6..1ae59b489 100644
--- a/packages/interface/src/components/primitive/Toasts.tsx
+++ b/packages/interface/src/components/primitive/Toasts.tsx
@@ -22,7 +22,7 @@ export function Toasts() {
 								'radix-swipe-end:animate-toast-swipe-out',
 								'translate-x-radix-toast-swipe-move-x',
 								'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]',
-								'focus-visible:ring-accent focus-visible:ring-opacity/75 border-2 border-white/10 shadow-2xl focus:outline-none focus-visible:ring'
+								'focus-visible:ring-accent/75 border-2 border-white/10 shadow-2xl focus:outline-none focus-visible:ring'
 							)}
 						>
 							<div className="flex">
@@ -44,7 +44,7 @@ export function Toasts() {
 											{toast.actionButton && (
 												<ToastPrimitive.Action
 													altText="view now"
-													className="text-accent focus-visible:ring-accent focus-visible:ring-opacity/75 flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring"
+													className="text-accent focus-visible:ring-accent/75 flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring"
 													onClick={(e) => {
 														e.preventDefault();
 														toast.actionButton?.onClick();
@@ -56,7 +56,7 @@ export function Toasts() {
 											)}
 										</div>
 										<div className="flex h-0 flex-1">
-											<ToastPrimitive.Close className="text-ink-faint focus-visible:ring-accent focus-visible:ring-opacity/75 flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring">
+											<ToastPrimitive.Close className="text-ink-faint focus-visible:ring-accent/75 flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring">
 												Dismiss
 											</ToastPrimitive.Close>
 										</div>
diff --git a/packages/interface/src/screens/settings/info/Dependencies.tsx b/packages/interface/src/screens/settings/info/Dependencies.tsx
index 354b0b7d0..6139f4670 100644
--- a/packages/interface/src/screens/settings/info/Dependencies.tsx
+++ b/packages/interface/src/screens/settings/info/Dependencies.tsx
@@ -8,7 +8,7 @@ export default function DependenciesScreen() {
 	const platform = usePlatform();
 
 	return (
-		<div className="flex flex-col w-full h-screen p-5 custom-scroll page-scroll app-background">
+		<div className="custom-scroll page-scroll app-background flex h-screen w-full flex-col p-5">
 			<ScreenHeading>Dependencies</ScreenHeading>
 
 			{/* item has a LOT more data that we can display, i just went with the basics */}
@@ -19,7 +19,7 @@ export default function DependenciesScreen() {
 					frontEnd.data?.default.map((item) => {
 						return (
 							<a key={item.title} onClick={() => platform.openLink(item.url ?? '')}>
-								<div className="px-4 py-4 text-gray-300 border-2 border-gray-500 rounded">
+								<div className="rounded border-2 border-gray-500 p-4 text-gray-300">
 									<h4 className="text-center">
 										{item.title.trimEnd().substring(0, 24) + (item.title.length > 24 ? '...' : '')}
 									</h4>
@@ -35,7 +35,7 @@ export default function DependenciesScreen() {
 					backEnd.data?.default.map((item) => {
 						return (
 							<a key={item.title} onClick={() => platform.openLink(item.url ?? '')}>
-								<div className="px-4 py-4 text-gray-300 border-2 border-gray-500 rounded">
+								<div className="rounded border-2 border-gray-500 p-4 text-gray-300">
 									<h4 className="text-center">{item.title.trimEnd()}</h4>
 								</div>
 							</a>
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index e7ce47286..13f263870 100644
--- a/packages/ui/src/Button.tsx
+++ b/packages/ui/src/Button.tsx
@@ -55,7 +55,7 @@ const styles = cva(
 				accent: [
 					'bg-accent active:bg-accent hover:bg-accent-faint border-accent-deep hover:border-accent active:border-accent-deep shadow-app-shade/10 text-white shadow-md'
 				],
-				colored: ['hover:bg-opacity/90 active:bg-opacity/100 text-white shadow-sm'],
+				colored: ['text-white shadow-sm hover:bg-opacity-90 active:bg-opacity-100'],
 				bare: ''
 			}
 		},
diff --git a/packages/ui/src/Dialog.tsx b/packages/ui/src/Dialog.tsx
index 7cd06ce3c..71b6a18e4 100644
--- a/packages/ui/src/Dialog.tsx
+++ b/packages/ui/src/Dialog.tsx
@@ -144,7 +144,7 @@ export function Dialog<S extends FieldValues>({
 					<DialogPrimitive.Portal forceMount>
 						<DialogPrimitive.Overlay asChild forceMount>
 							<animated.div
-								className="z-49 bg-app bg-opacity/50 fixed inset-0 m-[1px] grid place-items-center overflow-y-auto rounded-xl"
+								className="z-49 bg-app/50 fixed inset-0 m-[1px] grid place-items-center overflow-y-auto rounded-xl"
 								style={{
 									opacity: styles.opacity
 								}}