Set frontend's logic to modify the avatar
This commit does not set the logic to modify the avatar in the backend. It does not even set the logic to retrieve the avatar from the backend.
Change-Id: I1a787742a956218d150d69cc5ccc90b59e296b1f
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index ddd99e9..601f855 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -73,6 +73,8 @@
border: `1px solid ${theme.palette.primary.dark}`,
color: theme.palette.primary.dark,
fontSize: '15px',
+ background: 'white',
+ opacity: 1,
'&:hover': {
background: theme.palette.primary.light,
},
@@ -218,7 +220,7 @@
};
export const EditPictureButton = (props: IconButtonProps) => {
- return <RoundButton {...props} aria-label="edit picture" Icon={PenIcon} size="large" />;
+ return <RoundButton {...props} aria-label="edit picture" Icon={PenIcon} size="medium" />;
};
export const UploadPictureButton = (props: IconButtonProps) => {
@@ -465,3 +467,44 @@
</ClickAwayListener>
);
};
+
+const RecordButtonSize = '50px';
+const RecordButtonOutlineWidth = '1px';
+const RecordButtonOutlineOffset = '4px';
+const RecordButtonInnerSize =
+ parseInt(RecordButtonSize) - parseInt(RecordButtonOutlineWidth) * 2 - parseInt(RecordButtonOutlineOffset) * 2 + 'px';
+export const RecordButton = styled((props: IconButtonProps) => (
+ <IconButton {...props} disableRipple={true}>
+ <Box
+ sx={{
+ width: RecordButtonInnerSize,
+ height: RecordButtonInnerSize,
+ borderRadius: '100%',
+ outline: `${RecordButtonOutlineWidth} solid #e57f90`,
+ outlineOffset: RecordButtonOutlineOffset,
+ backgroundColor: '#e57f90',
+ '&:hover': {
+ outlineColor: '#cc0022',
+ backgroundColor: '#cc0022',
+ },
+ }}
+ />
+ </IconButton>
+))({
+ width: RecordButtonSize,
+ height: RecordButtonSize,
+ padding: 0,
+});
+
+export const CornerCloseButton = styled(({ ...props }: IconButtonProps) => (
+ <IconButton {...props}>
+ <SaltireIcon fontSize="inherit" />
+ </IconButton>
+))({
+ position: 'absolute',
+ top: '20px',
+ right: '20px',
+ zIndex: 200,
+ color: 'white',
+ fontSize: '10px',
+});