Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-08 07:12:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Mobile & opacity/x syntax (#576)

Browse source 
* fix mobile

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

* Add opacity-60 back to job manager
This commit is contained in:
Utku 2023-02-21 20:57:08 +03:00 committed by GitHub
parent ac2f7a2cd2
commit 810b5161dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 40 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/landing/src/components/HomeCTA.tsx
View file

@ -107,9 +107,9 @@ export function HomeCTA() {
{(waitlistError || waitlistSubmitted) && ( {(waitlistError || waitlistSubmitted) && (
<div <div
className={clsx({ className={clsx({
'bg-opacity/20 my-2 flex flex-row items-center rounded-md border-2 px-2': true, 'my-2 flex flex-row items-center rounded-md border-2 px-2': true,
'border-red-900 bg-red-800': waitlistError, 'border-red-900 bg-red-800/20': waitlistError,
'border-green-900 bg-green-800': !waitlistError, 'border-green-900 bg-green-800/20': !waitlistError,
'-mt-2': waitlistSubmitted '-mt-2': waitlistSubmitted
})} })}
> >

4
apps/landing/src/components/NavBar.tsx
View file

@ -55,7 +55,7 @@ export default function NavBar() {
'fixed z-[55] h-16 w-full border-b px-2 transition ', 'fixed z-[55] h-16 w-full border-b px-2 transition ',
isAtTop isAtTop
? 'border-transparent bg-transparent' ? '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"> <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"> <div className="relative inline">
<NavLink link="/careers">Careers</NavLink> <NavLink link="/careers">Careers</NavLink>
{positions.length > 0 ? ( {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} `} {` ${positions.length} `}
</span> </span>
) : null} ) : null}

2
apps/landing/src/components/NewBanner.tsx
View file

@ -10,7 +10,7 @@ const NewBanner: React.FC<NewBannerProps> = (props) => {
return ( return (
<aside <aside
onClick={() => (window.location.href = href)} 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> <strong className="text-gray-350 truncate font-semibold">{headline}</strong>
<div role="separator" className="h-22 mx-4 w-[1px] bg-gray-500" /> <div role="separator" className="h-22 mx-4 w-[1px] bg-gray-500" />

6
apps/landing/src/pages/careers.page.tsx
View file

@ -121,7 +121,7 @@ function Page() {
{values.map((value, index) => ( {values.map((value, index) => (
<div <div
key={value.title + index} 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" /> <value.icon className="m-0 w-8" />
<h3 className="mt-4 mb-1 text-2xl font-bold leading-snug">{value.title}</h3> <h3 className="mt-4 mb-1 text-2xl font-bold leading-snug">{value.title}</h3>
@ -139,7 +139,7 @@ function Page() {
<div <div
key={value.title + index} key={value.title + index}
style={{ backgroundColor: value.color + '10', borderColor: value.color + '30' }} 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} /> <value.icon className="m-0 w-8" color={value.color} />
<h3 className="mt-4 mb-1">{value.title}</h3> <h3 className="mt-4 mb-1">{value.title}</h3>
@ -161,7 +161,7 @@ function Page() {
positions.map((value, index) => ( positions.map((value, index) => (
<div <div
key={value.name + index} 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"> <div className="flex flex-col sm:flex-row">
<h3 className="m-0 text-2xl leading-tight">{value.name}</h3> <h3 className="m-0 text-2xl leading-tight">{value.name}</h3>

2
apps/landing/src/pages/index.page.tsx
View file

@ -108,7 +108,7 @@ function Page() {
{unsubscribedFromWaitlist && ( {unsubscribedFromWaitlist && (
<div <div
className={ 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" /> <Info className="mr-1 w-5 fill-green-500" />

2
apps/mobile/src/components/drawer/DrawerLocations.tsx
View file

@ -63,7 +63,7 @@ const DrawerLocations = ({ stackName }: DrawerLocationsProp) => {
</View> </View>
{/* Add Location */} {/* Add Location */}
<Pressable onPress={() => importModalRef.current.present()}> <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> <Text style={tw`p-2 text-center text-xs font-bold text-gray-400`}>Add Location</Text>
</View> </View>
</Pressable> </Pressable>

13
packages/client/src/hooks/useCurrentLibrary.tsx
View file

@ -1,5 +1,4 @@
import { PropsWithChildren, createContext, useCallback, useContext, useMemo } from 'react'; import { PropsWithChildren, createContext, useCallback, useContext, useMemo } from 'react';
import { useNavigate } from 'react-router';
import { subscribe, useSnapshot } from 'valtio'; import { subscribe, useSnapshot } from 'valtio';
import { useBridgeQuery } from '../rspc'; import { useBridgeQuery } from '../rspc';
import { valtioPersist } from '../stores'; 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. // 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 = () => { export const useCurrentLibrary = () => {
const navigate = useNavigate();
const currentLibraryUuid = useSnapshot(currentLibraryUuidStore).id; const currentLibraryUuid = useSnapshot(currentLibraryUuidStore).id;
const ctx = useContext(CringeContext); const ctx = useContext(CringeContext);
if (ctx === undefined) if (ctx === undefined)
@ -69,13 +66,9 @@ export const useCurrentLibrary = () => {
} }
}); });
const switchLibrary = useCallback( const switchLibrary = useCallback((libraryUuid: string) => {
(libraryUuid: string) => { currentLibraryUuidStore.id = libraryUuid;
currentLibraryUuidStore.id = libraryUuid; }, []);
navigate('/');
},
[navigate]
);
// memorize library to avoid re-running find function // memorize library to avoid re-running find function
const library = useMemo(() => { const library = useMemo(() => {

4
packages/interface/src/components/jobs/JobManager.tsx
View file

@ -149,7 +149,9 @@ function Job({ job }: { job: JobReport }) {
}; };
const isRunning = job.status === 'Running'; const isRunning = job.status === 'Running';
return ( 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}> <Tooltip label={job.status}>
<niceData.icon className={clsx('mr-3 h-5 w-5')} /> <niceData.icon className={clsx('mr-3 h-5 w-5')} />
</Tooltip> </Tooltip>

2
packages/interface/src/components/layout/Modal.tsx
View file

@ -27,7 +27,7 @@ export function Model(
> >
<div <div
data-tauri-drag-region 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> </Transition>
<ButtonLink to="/" variant="gray" className="absolute top-2 right-2 !px-1.5"> <ButtonLink to="/" variant="gray" className="absolute top-2 right-2 !px-1.5">

10
packages/interface/src/components/layout/Sidebar.tsx
View file

@ -11,7 +11,7 @@ import {
UsersThree UsersThree
} from 'phosphor-react'; } from 'phosphor-react';
import React, { PropsWithChildren, useEffect } from 'react'; import React, { PropsWithChildren, useEffect } from 'react';
import { NavLink, NavLinkProps } from 'react-router-dom'; import { NavLink, NavLinkProps, useNavigate } from 'react-router-dom';
import { import {
Location, Location,
LocationCreateArgs, LocationCreateArgs,
@ -59,6 +59,7 @@ export function Sidebar() {
const os = useOperatingSystem(); const os = useOperatingSystem();
const { library, libraries, isLoading: isLoadingLibraries, switchLibrary } = useCurrentLibrary(); const { library, libraries, isLoading: isLoadingLibraries, switchLibrary } = useCurrentLibrary();
const debugState = useDebugState(); const debugState = useDebugState();
const navigate = useNavigate();
useEffect(() => { useEffect(() => {
// Prevent the dropdown button to be auto focused on launch // Prevent the dropdown button to be auto focused on launch
@ -100,7 +101,10 @@ export function Sidebar() {
<Dropdown.Item <Dropdown.Item
selected={lib.uuid === library?.uuid} selected={lib.uuid === library?.uuid}
key={lib.uuid} key={lib.uuid}
onClick={() => switchLibrary(lib.uuid)} onClick={() => {
switchLibrary(lib.uuid);
navigate('/');
}}
> >
{lib.config.name} {lib.config.name}
</Dropdown.Item> </Dropdown.Item>
@ -283,7 +287,7 @@ const sidebarItemClass = cva(
false: 'text-ink-dull' false: 'text-ink-dull'
}, },
isTransparent: { isTransparent: {
true: 'bg-opacity/90', true: 'bg-opacity-90',
false: '' false: ''
} }
} }

14
packages/interface/src/components/primitive/Listbox.tsx
View file

@ -24,9 +24,9 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
<div className="relative w-full"> <div className="relative w-full">
<ListboxPrimitive.Button <ListboxPrimitive.Button
className={clsx( className={clsx(
`focus-visible:ring-opacity/75 relative w-full cursor-default rounded-lg bg-white py-2 pl-3 `relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10
pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2
focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-white/75 focus-visible:ring-offset-2
focus-visible:ring-offset-orange-300 dark:bg-gray-500 sm:text-sm`, focus-visible:ring-offset-orange-300 dark:bg-gray-500 sm:text-sm`,
props.className props.className
)} )}
@ -44,9 +44,9 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
<ListboxPrimitive.Options <ListboxPrimitive.Options
className={` 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 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) => ( {props.options.map((option, index) => (
@ -54,9 +54,7 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
key={option.key} key={option.key}
className={({ active }) => className={({ active }) =>
`relative m-1 cursor-default select-none rounded py-2 pl-8 pr-4 focus:outline-none dark:text-white ${ `relative m-1 cursor-default select-none rounded py-2 pl-8 pr-4 focus:outline-none dark:text-white ${
active active ? 'text-accent bg-accent' : 'text-gray-900 dark:hover:bg-gray-600/20'
? 'text-accent bg-accent'
: 'dark:hover:bg-opacity/20 text-gray-900 dark:hover:bg-gray-600'
}` }`
} }
value={option} value={option}

2
packages/interface/src/components/primitive/Slider.tsx
View file

@ -10,7 +10,7 @@ const Slider = (props: SliderPrimitive.SliderProps) => (
<SliderPrimitive.Range className="bg-accent absolute h-full rounded-full outline-none" /> <SliderPrimitive.Range className="bg-accent absolute h-full rounded-full outline-none" />
</SliderPrimitive.Track> </SliderPrimitive.Track>
<SliderPrimitive.Thumb <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" data-tip="1.0"
/> />
</SliderPrimitive.Root> </SliderPrimitive.Root>

6
packages/interface/src/components/primitive/Toasts.tsx
View file

@ -22,7 +22,7 @@ export function Toasts() {
'radix-swipe-end:animate-toast-swipe-out', 'radix-swipe-end:animate-toast-swipe-out',
'translate-x-radix-toast-swipe-move-x', 'translate-x-radix-toast-swipe-move-x',
'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]', '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"> <div className="flex">
@ -44,7 +44,7 @@ export function Toasts() {
{toast.actionButton && ( {toast.actionButton && (
<ToastPrimitive.Action <ToastPrimitive.Action
altText="view now" 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) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
toast.actionButton?.onClick(); toast.actionButton?.onClick();
@ -56,7 +56,7 @@ export function Toasts() {
)} )}
</div> </div>
<div className="flex h-0 flex-1"> <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 Dismiss
</ToastPrimitive.Close> </ToastPrimitive.Close>
</div> </div>

6
packages/interface/src/screens/settings/info/Dependencies.tsx
View file

@ -8,7 +8,7 @@ export default function DependenciesScreen() {
const platform = usePlatform(); const platform = usePlatform();
return ( 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> <ScreenHeading>Dependencies</ScreenHeading>
{/* item has a LOT more data that we can display, i just went with the basics */} {/* 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) => { frontEnd.data?.default.map((item) => {
return ( return (
<a key={item.title} onClick={() => platform.openLink(item.url ?? '')}> <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"> <h4 className="text-center">
{item.title.trimEnd().substring(0, 24) + (item.title.length > 24 ? '...' : '')} {item.title.trimEnd().substring(0, 24) + (item.title.length > 24 ? '...' : '')}
</h4> </h4>
@ -35,7 +35,7 @@ export default function DependenciesScreen() {
backEnd.data?.default.map((item) => { backEnd.data?.default.map((item) => {
return ( return (
<a key={item.title} onClick={() => platform.openLink(item.url ?? '')}> <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> <h4 className="text-center">{item.title.trimEnd()}</h4>
</div> </div>
</a> </a>

2
packages/ui/src/Button.tsx
View file

@ -55,7 +55,7 @@ const styles = cva(
accent: [ 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' '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: '' bare: ''
} }
}, },

2
packages/ui/src/Dialog.tsx
View file

@ -144,7 +144,7 @@ export function Dialog<S extends FieldValues>({
<DialogPrimitive.Portal forceMount> <DialogPrimitive.Portal forceMount>
<DialogPrimitive.Overlay asChild forceMount> <DialogPrimitive.Overlay asChild forceMount>
<animated.div <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={{ style={{
opacity: styles.opacity opacity: styles.opacity
}} }}