Browse Source

misc: Design touches

style/lint-staged
Dale 3 weeks ago
parent
commit
39e367d557
Signed by: Deiru GPG Key ID: AA250C0277B927E1
  1. 16
      src/client/components/ImageUploader.tsx
  2. 2
      src/client/components/ui/Panel.tsx
  3. 13
      src/pages/settings/profile.tsx
  4. 3
      src/shared/theme/components/input.ts
  5. 2
      src/shared/theme/components/textarea.ts

16
src/client/components/ImageUploader.tsx

@ -20,6 +20,8 @@ import {
import { useField } from "react-final-form";
import { AttachmentIcon, CloseIcon } from "@chakra-ui/icons";
import { getMediaURL } from "miracle-tv-shared/media";
import { transparentize } from "@chakra-ui/theme-tools";
import { useTheme } from "@emotion/react";
gql`
query GetFileForUploader($id: ID!) {
@ -54,6 +56,7 @@ export const ImageUploader = ({
aspectMaxH,
...flexProps
}: Props): JSX.Element => {
const theme = useTheme();
const { input } = useField(name);
const inputRef = useRef<HTMLInputElement>(null);
const { data: { fileInfo } = {}, loading } = useGetFileForUploaderQuery({
@ -84,7 +87,12 @@ export const ImageUploader = ({
}, [inputRef.current]);
const bgColor = useColorModeValue("transparent", "secondary.600");
const color = useColorModeValue("primary.300", "primary.400");
const borderColor = transparentize(
"primary.500",
useColorModeValue(0.3, 0.5)
)(theme);
const color = "primary.500";
return (
<Flex
@ -115,7 +123,7 @@ export const ImageUploader = ({
borderRadius={8}
borderWidth="3px"
borderStyle="dashed"
borderColor={color}
borderColor={borderColor}
bgColor={bgColor}
mb={4}
>
@ -167,7 +175,7 @@ export const ImageUploader = ({
boxSizing="border-box"
borderWidth="3px"
borderStyle="dashed"
borderColor={color}
borderColor={borderColor}
backgroundColor={bgColor}
/>
</AspectRatio>
@ -181,7 +189,7 @@ export const ImageUploader = ({
/>
<IconButton
variant="link"
color={color}
color={borderColor}
aria-label="Upload New"
onClick={openUpload}
icon={<AttachmentIcon />}

2
src/client/components/ui/Panel.tsx

@ -13,7 +13,7 @@ export const Panel = ({ ...boxProps }: Props) => {
const color = useColorModeValue("secondary.500", "white");
const theme = useTheme();
const borderColor = transparentize(
useColorModeValue("primary.400", "primary.600"),
"primary.500",
useColorModeValue(0.3, 0.5)
)(theme);

13
src/pages/settings/profile.tsx

@ -117,7 +117,7 @@ const ProfilePage = () => {
onSubmit={updateProfile}
initialValues={formData}
>
{({ handleSubmit }) => (
{({ handleSubmit, dirty }) => (
<form onSubmit={handleSubmit}>
<Flex>
<Box flex={2} mr={4}>
@ -143,7 +143,8 @@ const ProfilePage = () => {
<FormGroup
name="avatar"
label="Profile Picture"
flex={2}
mr={4}
w="auto"
>
<ImageUploader
id="avatar"
@ -156,7 +157,6 @@ const ProfilePage = () => {
<FormGroup
name="streamThumbnail"
label="Stream Thumbnail"
flex={4}
>
<ImageUploader
id="streamThumbnail"
@ -184,7 +184,12 @@ const ProfilePage = () => {
</Box>
</Flex>
<Flex justify="flex-end">
<Button type="submit" mt={6} isLoading={isUpdating}>
<Button
type="submit"
mt={6}
isLoading={isUpdating}
isDisabled={!dirty}
>
Update profile
</Button>
</Flex>

3
src/shared/theme/components/input.ts

@ -15,7 +15,8 @@ export const inputStyles = {
mode(0.3, 0.5)(props)
)(props.theme);
const borderColor = transparentize(
mode("primary.400", "secondary.200")(props),
// mode("primary.400", "secondary.200")(props),
"primary.500",
mode(0.3, 0.5)(props)
)(props.theme);
return {

2
src/shared/theme/components/textarea.ts

@ -9,7 +9,7 @@ export const textareaStyles = {
mode(0.3, 0.5)(props)
)(props.theme);
const borderColor = transparentize(
mode("primary.400", "secondary.200")(props),
"primary.500",
mode(0.3, 0.5)(props)
)(props.theme);
return {

Loading…
Cancel
Save