mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-07 03:13:30 +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');
|
const [fileScanInputVal, setFileScanInputVal] = useState('/Users/jamie/Downloads');
|
||||||
|
|
||||||
return (
|
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
|
<div
|
||||||
data-tauri-drag-region
|
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>
|
||||||
<div className="p-4 ">
|
<div className="p-4 ">
|
||||||
<div className="flex space-x-2">
|
<div className="flex space-x-2">
|
||||||
|
|
|
@ -5,16 +5,17 @@ import clsx from 'clsx';
|
||||||
|
|
||||||
const variants = {
|
const variants = {
|
||||||
default: `
|
default: `
|
||||||
bg-gray-100
|
bg-gray-50
|
||||||
hover:bg-gray-200
|
shadow-sm
|
||||||
active:bg-gray-200
|
hover:bg-gray-100
|
||||||
|
active:bg-gray-50
|
||||||
dark:bg-gray-800
|
dark:bg-gray-800
|
||||||
dark:hover:bg-gray-700
|
dark:hover:bg-gray-700
|
||||||
dark:active:bg-gray-600
|
dark:active:bg-gray-600
|
||||||
|
|
||||||
border-gray-200
|
border-gray-100
|
||||||
hover:border-gray-300
|
hover:border-gray-200
|
||||||
active:border-gray-200
|
active:border-gray-100
|
||||||
dark:border-gray-700
|
dark:border-gray-700
|
||||||
dark:hover:border-gray-600
|
dark:hover:border-gray-600
|
||||||
|
|
||||||
|
@ -27,7 +28,7 @@ const variants = {
|
||||||
|
|
||||||
`,
|
`,
|
||||||
primary:
|
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> {
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
|
|
|
@ -2,8 +2,30 @@ import clsx from 'clsx';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
const variants = {
|
const variants = {
|
||||||
default:
|
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',
|
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: ''
|
primary: ''
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -11,7 +11,7 @@ export const Toggle = (props: { initialState: boolean }) => {
|
||||||
checked={enabled}
|
checked={enabled}
|
||||||
onChange={setEnabled}
|
onChange={setEnabled}
|
||||||
className={clsx(
|
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
|
'bg-primary-600': enabled
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,7 +31,7 @@ module.exports = {
|
||||||
},
|
},
|
||||||
gray: {
|
gray: {
|
||||||
DEFAULT: '#505468',
|
DEFAULT: '#505468',
|
||||||
50: '#FFFFFF',
|
50: '#F1F1F4',
|
||||||
100: '#E8E9ED',
|
100: '#E8E9ED',
|
||||||
200: '#C0C2CE',
|
200: '#C0C2CE',
|
||||||
300: '#979CAF',
|
300: '#979CAF',
|
||||||
|
|
Loading…
Reference in a new issue