mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 12:13:27 +00:00
sexy input
This commit is contained in:
parent
3c673a38ed
commit
1332eb0791
|
@ -11,10 +11,10 @@ export default function App() {
|
|||
const [fileScanInputVal, setFileScanInputVal] = useState('/Users/jamie/Downloads');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen rounded-xl bg-gray-100 dark:bg-gray-900 overflow-hidden ">
|
||||
<div className="flex flex-col h-screen rounded-xl bg-white dark:bg-gray-900 overflow-hidden ">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="max-w bg-gray-200 dark:bg-gray-800 h-10 border-b-1 border-gray-400"
|
||||
className="max-w bg-gray-100 dark:bg-gray-800 h-10 border-b-1 border-gray-400"
|
||||
></div>
|
||||
<div className="p-4 ">
|
||||
<div className="flex space-x-2">
|
||||
|
|
|
@ -5,16 +5,17 @@ import clsx from 'clsx';
|
|||
|
||||
const variants = {
|
||||
default: `
|
||||
bg-gray-100
|
||||
hover:bg-gray-200
|
||||
active:bg-gray-200
|
||||
bg-gray-50
|
||||
shadow-sm
|
||||
hover:bg-gray-100
|
||||
active:bg-gray-50
|
||||
dark:bg-gray-800
|
||||
dark:hover:bg-gray-700
|
||||
dark:active:bg-gray-600
|
||||
|
||||
border-gray-200
|
||||
hover:border-gray-300
|
||||
active:border-gray-200
|
||||
border-gray-100
|
||||
hover:border-gray-200
|
||||
active:border-gray-100
|
||||
dark:border-gray-700
|
||||
dark:hover:border-gray-600
|
||||
|
||||
|
@ -27,7 +28,7 @@ const variants = {
|
|||
|
||||
`,
|
||||
primary:
|
||||
'bg-primary border-primary-600 dark:border-primary-400 active:bg-primary-600 active:border-primary-700 hover:bg-primary-400 hover:border-primary-500'
|
||||
'bg-primary shadow-sm border-primary-600 dark:border-primary-400 active:bg-primary-600 active:border-primary-700 hover:bg-primary-400 hover:border-primary-500'
|
||||
};
|
||||
|
||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
|
|
|
@ -2,8 +2,30 @@ import clsx from 'clsx';
|
|||
import React from 'react';
|
||||
|
||||
const variants = {
|
||||
default:
|
||||
'border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white dark:focus:hover:bg-gray-800 focus:border-gray-300 placeholder-gray-300 focus:ring-gray-200 dark:focus:border-gray-900 dark:focus:ring-gray-600',
|
||||
default: `
|
||||
shadow-sm
|
||||
bg-white
|
||||
hover:bg-white
|
||||
focus:hover:bg-white
|
||||
focus:bg-white
|
||||
dark:bg-gray-800
|
||||
dark:hover:bg-gray-700
|
||||
dark:focus:bg-gray-800
|
||||
dark:focus:hover:bg-gray-800
|
||||
|
||||
border-gray-100
|
||||
hover:border-gray-200
|
||||
focus:border-white
|
||||
dark:border-gray-700
|
||||
dark:hover:border-gray-700
|
||||
dark:focus:border-gray-900
|
||||
|
||||
focus:ring-gray-100
|
||||
dark:focus:ring-gray-600
|
||||
|
||||
dark:text-white
|
||||
placeholder-gray-300
|
||||
`,
|
||||
primary: ''
|
||||
};
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@ export const Toggle = (props: { initialState: boolean }) => {
|
|||
checked={enabled}
|
||||
onChange={setEnabled}
|
||||
className={clsx(
|
||||
'relative inline-flex items-center h-6 rounded-full w-11 bg-gray-300 dark:bg-gray-700',
|
||||
'relative inline-flex items-center h-6 rounded-full w-11 bg-gray-200 dark:bg-gray-700',
|
||||
{
|
||||
'bg-primary-600': enabled
|
||||
}
|
||||
|
|
|
@ -31,7 +31,7 @@ module.exports = {
|
|||
},
|
||||
gray: {
|
||||
DEFAULT: '#505468',
|
||||
50: '#FFFFFF',
|
||||
50: '#F1F1F4',
|
||||
100: '#E8E9ED',
|
||||
200: '#C0C2CE',
|
||||
300: '#979CAF',
|
||||
|
|
Loading…
Reference in a new issue