ISSUE #5309 - fix styling

3drepo · Mar 4, 2025 · be81d22 · be81d22
1 parent 23bfeb5
commit be81d22
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 9 deletions.
diff --git a/...v5/ui/routes/viewer/tickets/ticketsForm/commentsPanel/commentBox/commentBox.component.tsx b/...v5/ui/routes/viewer/tickets/ticketsForm/commentsPanel/commentBox/commentBox.component.tsx
@@ -50,7 +50,7 @@ import {
 	Image,
 	ImageContainer,
 	ErroredImageMessages,
-	FileIconInput,
+	ActionIcon,
 	EditCommentButtons,
 } from './commentBox.styles';
 import { CommentReply } from '../comment/commentReply/commentReply.component';
@@ -313,7 +313,7 @@ export const CommentBox = ({ commentId, message = '', images = [], view: existin
 				</ErroredImageMessages>
 			)}
 			<Controls>
-				<ActionMenu TriggerButton={<FileIconInput><FileIcon /></FileIconInput>}>
+				<ActionMenu TriggerButton={<ActionIcon><FileIcon /></ActionIcon>}>
 					<ActionMenuItem>
 						{is2DOpen && (
 							<MenuItem onClick={upload2DScreenshot} disabled={!isViewer}>

diff --git a/...src/v5/ui/routes/viewer/tickets/ticketsForm/commentsPanel/commentBox/commentBox.styles.ts b/...src/v5/ui/routes/viewer/tickets/ticketsForm/commentsPanel/commentBox/commentBox.styles.ts
@@ -140,10 +140,10 @@ export const Controls = styled.div`
 	display: flex;
 	align-items: center;
 	justify-content: flex-start;
-	padding-top: 6px;
 	box-sizing: border-box;
 	box-shadow: 0 0 9px 7px ${({ theme }) => theme.palette.primary.contrast};
 	position: relative;
+	padding: 6px 15px 0;
 `;
 
 export const CharsCounter = styled(Typography).attrs({
@@ -154,12 +154,16 @@ export const CharsCounter = styled(Typography).attrs({
 	color: ${({ theme: { palette }, $error }) => ($error ? palette.error.main : palette.base.lighter)};
 `;
 
-export const FileIconInput = styled.div`
+export const ActionIcon = styled.div`
 	cursor: pointer;
 	display: flex;
 	padding: 4px;
 	color: ${({ theme }) => theme.palette.secondary.main};
-	margin-left: 15px;
+	height: 24px;
+	svg {
+		height: 100%;
+		width: 100%;
+	}
 `;
 
 export const SendButton = styled(SubmitButton).attrs({

diff --git a/...icketsForm/commentsPanel/commentBox/viewpointActionMenu/viewpointActionMenu.component.tsx b/...icketsForm/commentsPanel/commentBox/viewpointActionMenu/viewpointActionMenu.component.tsx
@@ -15,7 +15,6 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import ViewpointIcon from '@assets/icons/outlined/camera_side-outlined.svg';
 import AddViewpointIcon from '@assets/icons/outlined/camera_side_with_plus-outlined.svg';
 
 import { formatMessage } from '@/v5/services/intl';
@@ -24,22 +23,26 @@ import { ActionMenu } from '@controls/actionMenu';
 import { EllipsisMenuItem } from '@controls/ellipsisMenu/ellipsisMenuItem';
 import { MenuList, Tooltip } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
+import { ActionIcon } from '../commentBox.styles';
+import { ViewpointIcon } from './viewpointActionMenu.styles';
 
 export const ViewpointActionMenu = ({ viewpoint, setViewpoint }) => {
 	const updateViewpoint = async () => setViewpoint(await ViewerService.getViewpoint());
 	const deleteViewpoint = () => setViewpoint(null);
 
 	if (!viewpoint) return (
 		<Tooltip title={formatMessage({ id: 'customTicket.comments.action.addViewpoint', defaultMessage: 'Add viewpoint' })} arrow>
-			<div>
+			<ActionIcon>
 				<AddViewpointIcon onClick={updateViewpoint} />
-			</div>
+			</ActionIcon>
 		</Tooltip>
 	);
 	return (
 		<ActionMenu
 			TriggerButton={(
-				<ViewpointIcon />
+				<ActionIcon>
+					<ViewpointIcon />
+				</ActionIcon>
 			)}
 		>
 			<MenuList>

diff --git a/...ts/ticketsForm/commentsPanel/commentBox/viewpointActionMenu/viewpointActionMenu.styles.ts b/...ts/ticketsForm/commentsPanel/commentBox/viewpointActionMenu/viewpointActionMenu.styles.ts
@@ -0,0 +1,24 @@
+/**
+ *  Copyright (C) 2025 3D Repo Ltd
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import CameraIcon from '@assets/icons/outlined/camera_side-outlined.svg';
+import styled from 'styled-components';
+
+export const ViewpointIcon = styled(CameraIcon)`
+	margin-top: -1px;
+	color: ${({ theme }) => theme.palette.success.main};
+`;