Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-05 09:13:28 +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) && (
<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
})}
>

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 ',
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}

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

@ -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" />

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

@ -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>

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

@ -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" />

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

@ -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>

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

@ -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(() => {

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

@ -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>

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

@ -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">

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

@ -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: ''
}
}

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">
<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}

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.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>

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

@ -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>

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

@ -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>

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

@ -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: ''
}
},

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

@ -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
}}