ISSUE #5194 - improve global styles

3drepo · Oct 9, 2024 · 42b5e92 · 42b5e92
1 parent 4c86684
commit 42b5e92
Show file tree

Hide file tree

Showing 27 changed files with 59 additions and 51 deletions.
diff --git a/...tes/components/messagesList/components/message/components/userAvatar/userAvatar.styles.ts b/...tes/components/messagesList/components/message/components/userAvatar/userAvatar.styles.ts
@@ -21,8 +21,8 @@ import { AuthAvatarMui } from '@components/authenticatedResource/authAvatarMui.c
 import { COLOR } from '../../../../../../../styles';
 
 const jobBorderStyles = (color) => css`
-	height: 30px;
-	width: 30px;
+	height: 34px;
+	width: 34px;
 	border-style: solid;
 	border-color: ${color};
 	border-width: 2px;

diff --git a/frontend/src/v5/ui/components/authTemplate/authTemplate.styles.ts b/frontend/src/v5/ui/components/authTemplate/authTemplate.styles.ts
@@ -29,7 +29,7 @@ const customLogoPath = clientConfigService.getCustomLogoPath();
 export const customBackgroundPath = clientConfigService.getCustomBackgroundImagePath();
 
 export const AuthForm = styled.form`
-	min-width: 408px;
+	min-width: 536px;
 	border-radius: 20px;
 	background-color: ${({ theme }) => theme.palette.tertiary.lightest};
 	padding: 56px 64px 38px;

diff --git a/frontend/src/v5/ui/components/dashboard/dashboardList/dashboardList.styles.ts b/frontend/src/v5/ui/components/dashboard/dashboardList/dashboardList.styles.ts
@@ -33,7 +33,7 @@ export const ListContainer = styled.ul`
 export const DashboardListEmptyContainer = styled(DashedContainer)`
 	display: flex;
 	align-items: center;
-	height: 80px;
+	height: 83px;
 	background-color: transparent;
 	padding-left: 30px;
 `;

diff --git a/frontend/src/v5/ui/components/shared/uploadFiles/uploadFiles.styles.ts b/frontend/src/v5/ui/components/shared/uploadFiles/uploadFiles.styles.ts
@@ -21,9 +21,6 @@ import { DashboardListHeader } from '@components/dashboard/dashboardList/dashboa
 import { FormModal } from '@controls/formModal/formModal.component';
 import { Typography } from '@controls/typography';
 import { memo } from 'react';
-import { MODAL_BODY_MAX_HEIGHT } from '@controls/formModal/modalBody/modalBody.styles';
-
-const MODAL_PADDING = 35;
 
 export const Modal = memo(styled(FormModal)`
 	.MuiPaper-root {
@@ -46,21 +43,21 @@ export const Modal = memo(styled(FormModal)`
 export const UploadsContainer = styled.div`
 	display: flex;
 	flex-direction: row;
-	max-height: min(calc(100vh - 211px), ${MODAL_BODY_MAX_HEIGHT});
+	max-height: min(calc(100vh - 211px), calc(70vh - 46px));
 	width: 100%;
 	box-sizing: border-box;
 	overflow: hidden;
 `;
 
 export const UploadsListScroll = styled.div`
-	min-height: ${MODAL_BODY_MAX_HEIGHT};
-	max-height: min(calc(100vh - 211px), ${MODAL_BODY_MAX_HEIGHT});
+	min-height: calc(70vh - 46px);
+	max-height: min(calc(100vh - 211px), calc(70vh - 46px));
 	width: 100%;
 	overflow-y: scroll;
 `;
 
 export const Padding = styled.div`
-	margin: ${MODAL_PADDING}px;
+	margin: 35px;
 	padding-bottom: 0;
 	box-sizing: border-box;
 `;

diff --git a/frontend/src/v5/ui/controls/circledIcon/circledIcon.styles.ts b/frontend/src/v5/ui/controls/circledIcon/circledIcon.styles.ts
@@ -18,9 +18,9 @@
 import styled, { css } from 'styled-components';
 
 const SIZE_MAP = {
-	small: 50,
-	medium: 70,
-	large: 90,
+	small: 54,
+	medium: 74,
+	large: 94,
 };
 
 const COLOUR_MAP = {

diff --git a/frontend/src/v5/ui/controls/formModal/modalBody/modalBody.styles.ts b/frontend/src/v5/ui/controls/formModal/modalBody/modalBody.styles.ts
@@ -18,12 +18,9 @@
 import styled from 'styled-components';
 import { DialogContent } from '@mui/material';
 
-export const MODAL_BODY_MAX_HEIGHT = 'calc(70vh - 46px)';
-
-
 export const ModalBody = styled(DialogContent)`
 	padding: 27px 58px 65px;
 	display: block;
 	overflow: overlay;
-	max-height: ${MODAL_BODY_MAX_HEIGHT};
+	max-height: calc(70vh - 17px);
 `;
diff --git a/frontend/src/v5/ui/controls/inputs/textArea/textAreaFixedSize.styles.ts b/frontend/src/v5/ui/controls/inputs/textArea/textAreaFixedSize.styles.ts
@@ -23,6 +23,7 @@ export const Container = styled.div<{ $error?: boolean, $height: number }>`
 	border-color: ${({ theme }) => theme.palette.base.lightest};
 	border-radius: 8px;
 	overflow: hidden overlay;
+	box-sizing: content-box;
 	height: ${({ $height }) => $height}px;
 
 	${({ theme, $error }) => ($error ? css`

diff --git a/frontend/src/v5/ui/controls/shareTextField/shareTextField.component.tsx b/frontend/src/v5/ui/controls/shareTextField/shareTextField.component.tsx
@@ -24,10 +24,10 @@ import {
 	LinkBar,
 	CopyToClipboardIconContainer,
 	CopyToClipboardIcon,
-	Tick,
 	CopyToClipboardTooltip,
 	CopiedToClipboardTooltip,
 } from './shareTextField.styles';
+import TickIcon from '@assets/icons/outlined/tick-outlined.svg';
 
 type IShareTextField = {
 	/**
@@ -100,7 +100,7 @@ export const ShareTextField = ({ label, value, className, hideValue, disabled =
 												open
 											>
 												<CopyToClipboardIconContainer>
-													<Tick />
+													<TickIcon />
 												</CopyToClipboardIconContainer>
 											</CopiedToClipboardTooltip>
 										)}

diff --git a/frontend/src/v5/ui/controls/shareTextField/shareTextField.styles.tsx b/frontend/src/v5/ui/controls/shareTextField/shareTextField.styles.tsx
@@ -18,22 +18,14 @@ import styled from 'styled-components';
 import { TextField } from '@mui/material';
 import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
 import copyToClipboardIcon from '@assets/icons/outlined/copy_to_clipboard-outlined.svg';
-import tick from '@assets/icons/outlined/tick-outlined.svg';
 
-const SVG_PADDING_IN_PX = 9;
-
-export const CopyToClipboardIcon = styled(copyToClipboardIcon)`
-	padding: ${SVG_PADDING_IN_PX}px;
-`;
-
-export const Tick = styled(tick)`
-	padding: ${SVG_PADDING_IN_PX}px;
-	padding-left: ${SVG_PADDING_IN_PX - 2}px;
-	padding-right: ${SVG_PADDING_IN_PX + 2}px;
-`;
+export const CopyToClipboardIcon = styled(copyToClipboardIcon)``;
 
 export const CopyToClipboardIconContainer = styled.div`
 	display: grid;
+	place-content: center;
+	width: 33px;
+    height: 33px;
 `;
 
 export const LinkBar = styled(TextField)`
@@ -42,13 +34,13 @@ export const LinkBar = styled(TextField)`
 			cursor: pointer;
 		`}
 		margin-top: 0;
-		padding-right: ${9 - SVG_PADDING_IN_PX}px;
+		padding-right: 0;
 
 
 		.MuiOutlinedInput-input {
 			pointer-events: none;
 			user-select: none;
-			padding-right: ${9 - SVG_PADDING_IN_PX}px;
+			padding-right: 0;
 		}
 	}
 

diff --git a/...shboard/projects/containers/uploadContainerRevisionForm/sidebarForm/sidebarForm.styles.ts b/...shboard/projects/containers/uploadContainerRevisionForm/sidebarForm/sidebarForm.styles.ts
@@ -48,7 +48,7 @@ export const Heading = styled(Typography).attrs({
 
 export const AnimationsCheckbox = styled(FormCheckbox)`
 	padding: 15px 0 0;
-	height: 24px;
+	height: 39px;
 `;
 
 export const FlexContainer = styled.div`

diff --git a/...i/routes/dashboard/projects/projectSettings/projectImageInput/projectImageInput.styles.ts b/...i/routes/dashboard/projects/projectSettings/projectImageInput/projectImageInput.styles.ts
@@ -32,7 +32,7 @@ export const ErrorMessage = styled(ErrorMessageBase)`
 `;
 
 export const ImageContainer = styled.div`
-	width: 229px;
+	width: 253px;
 	padding: 12px;
 	border-radius: 9px;
 	background-color: ${({ theme }) => theme.palette.primary.contrast};

diff --git a/frontend/src/v5/ui/routes/dashboard/projects/tickets/tickets.styles.ts b/frontend/src/v5/ui/routes/dashboard/projects/tickets/tickets.styles.ts
@@ -90,7 +90,7 @@ export const SidePanel = styled(Drawer).attrs({
 })``;
 
 export const SlidePanelHeader = styled.div`
-	height: 49px;
+	height: 50px;
 	width: 100%;
 	display: flex;
 	flex-direction: row;

diff --git a/...d/src/v5/ui/routes/dashboard/projects/tickets/ticketsSelection/ticketsSelection.styles.ts b/...d/src/v5/ui/routes/dashboard/projects/tickets/ticketsSelection/ticketsSelection.styles.ts
@@ -19,8 +19,8 @@ import { Typography } from '@controls/typography';
 import styled from 'styled-components';
 
 export const Form = styled.form`
-	width: 398px;
-	height: 402px;
+	width: 430px;
+	height: 434px;
 	display: flex;
 	flex-direction: column;
 	background-color: ${({ theme }) => theme.palette.primary.contrast};

diff --git a/frontend/src/v5/ui/routes/login/login.styles.tsx b/frontend/src/v5/ui/routes/login/login.styles.tsx
@@ -49,7 +49,7 @@ export const UnhandledErrorInterceptor = styled(UnhandledErrorInterceptorBase)`
 
 export const AuthFormLogin = styled(AuthForm)`
 	min-width: 0;
-	width: 361px;
+	width: 489px;
 `;
 
 export const MicrosoftButton = styled(MicrosoftButtonBase)`

diff --git a/frontend/src/v5/ui/routes/userSignup/userSignup.styles.ts b/frontend/src/v5/ui/routes/userSignup/userSignup.styles.ts
@@ -23,7 +23,7 @@ export const Container = styled.div`
 	justify-content: stretch;
 	max-width: 951px;
 	border-radius: 20px;
-	max-height: 627px;
+	max-height: 717px;
 	z-index: 2;
 	background-color: ${({ theme }) => theme.palette.tertiary.lightest};
 	padding: 45px;

diff --git a/...utes/viewer/tickets/ticketsForm/commentsPanel/comment/basicComment/basicComment.styles.ts b/...utes/viewer/tickets/ticketsForm/commentsPanel/comment/basicComment/basicComment.styles.ts
@@ -37,7 +37,7 @@ export const CommentAge = styled(CommentSmallText)`
 `;
 
 export const CommentContainer = styled.div`
-	max-width: 241px;
+	max-width: 236px;
 	width: fit-content;
 	padding: 10px 12px 7px;
 	box-sizing: border-box;

diff --git a/frontend/src/v5/ui/routes/viewer/toolbar/toolbar.styles.ts b/frontend/src/v5/ui/routes/viewer/toolbar/toolbar.styles.ts
@@ -31,7 +31,7 @@ export const ToolbarContainer = styled.div`
 
 	& > * {
 		border: solid 1px ${({ theme }) => theme.palette.secondary.light};
-		height: 48px;
+		height: 50px;
 		border-radius: 24px;
 		padding: 0 10px;
 		display: flex;

diff --git a/frontend/src/v5/ui/themes/global.ts b/frontend/src/v5/ui/themes/global.ts
@@ -103,6 +103,8 @@ export const GlobalStyle = createGlobalStyle`
 
 	// scrollbar
 	* {
+		box-sizing: border-box;
+
 		&::-webkit-scrollbar,
 		&::-webkit-scrollbar-thumb {
 			width: 11px;
@@ -116,4 +118,9 @@ export const GlobalStyle = createGlobalStyle`
 			background-clip: padding-box;
 		}
 	}
+
+	button {
+		cursor: pointer;
+		border: none;
+	}
 `;
diff --git a/frontend/src/v5/ui/v4Adapter/dialogs/attachResourcesDialog.overrides.ts b/frontend/src/v5/ui/v4Adapter/dialogs/attachResourcesDialog.overrides.ts
@@ -61,7 +61,7 @@ const AttachResourcesContainer = css`
 
 	${AttachResourcesMainContainer} {
 		background-color: ${({ theme }) => theme.palette.tertiary.lightest};
-		width: 460px;
+		width: 520px;
 		
 		${Content} {
 			min-height: 160px;

diff --git a/frontend/src/v5/ui/v4Adapter/dialogs/snackbar.overrides.ts b/frontend/src/v5/ui/v4Adapter/dialogs/snackbar.overrides.ts
@@ -32,7 +32,7 @@ export default css`
 			letter-spacing: 0;
 			font-size: 14px;
 			font-weight: 500;
-			width: 310px;
+			width: 344px;
 
 			.MuiSnackbarContent-message {
 				max-width: 270px;

diff --git a/frontend/src/v5/ui/v4Adapter/overrides/cards/compare.overrides.ts b/frontend/src/v5/ui/v4Adapter/overrides/cards/compare.overrides.ts
@@ -21,6 +21,7 @@ import { FilterPanel } from '@/v4/routes/viewerGui/components/compare/components
 import { SelectField } from '@/v4/routes/viewerGui/components/compare/components/revisionsSelect/revisionsSelect.styles';
 import { css } from 'styled-components';
 import { ViewerPanelButton, ViewerPanelFooter } from '@/v4/routes/viewerGui/components/viewerPanel/viewerPanel.styles';
+import { SliderWrapper } from '@/v4/routes/viewerGui/components/compare/compare.styles';
 
 export default css`
 	${Revisions} {
@@ -92,4 +93,8 @@ export default css`
 			background-color: ${({ theme }) => theme.palette.error.dark};
 		}
 	}
+
+	${SliderWrapper} {
+		width: 270px;
+	}
 `;
diff --git a/frontend/src/v5/ui/v4Adapter/overrides/cards/groups.overrides.ts b/frontend/src/v5/ui/v4Adapter/overrides/cards/groups.overrides.ts
@@ -259,6 +259,8 @@ const expandedGroupItem = css`
 
 				${SelectedCriteria} {
 					padding: 5px 15px 12px;
+					box-sizing: content-box;
+
 					${ButtonContainer} {
 						top: -25px;
 						right: 14px;

diff --git a/frontend/src/v5/ui/v4Adapter/overrides/cards/sharedStyles/selectMenus.overrides.ts b/frontend/src/v5/ui/v4Adapter/overrides/cards/sharedStyles/selectMenus.overrides.ts
@@ -82,6 +82,7 @@ export const EditableFieldStyles = css`
 		border-radius: 8px;
 		min-height: 32px;
 		padding: 4px 10px;
+		box-sizing: unset;
 		margin-top: 0px;
 		margin-bottom: 0px;
 		font-size: 0.75rem;

diff --git a/frontend/src/v5/ui/v4Adapter/overrides/colorPicker.overrides.ts b/frontend/src/v5/ui/v4Adapter/overrides/colorPicker.overrides.ts
@@ -16,7 +16,7 @@
  */
 
 import { css } from 'styled-components';
-import { ColorSelect, Dot, StyledIconButton } from '@/v4/routes/components/colorPicker/colorPicker.styles';
+import { Canvas, ColorSelect, Dot, StyledIconButton } from '@/v4/routes/components/colorPicker/colorPicker.styles';
 
 export default css`
 	// color picker button
@@ -39,8 +39,14 @@ export default css`
 			}
 		}
 	}
+
+	${Canvas} {
+		height: 184px;
+	}
 	
 	.color-picker__panel { // Colour picker modal
+		width: 260px;
+
 		.MuiInput-root {
 			border: 1px solid ${({ theme }) => theme.palette.base.lightest};
 			border-Radius: 8px;

diff --git a/frontend/src/v5/ui/v4Adapter/overrides/customTable.overrides.ts b/frontend/src/v5/ui/v4Adapter/overrides/customTable.overrides.ts
@@ -68,7 +68,7 @@ export default css`
 	}
 
 	${Row} {
-		min-height: 80px;
+		min-height: 80.7px;
 		&:last-child {
 			border: none;
 		}

diff --git a/frontend/src/v5/ui/v4Adapter/overrides/leftPanel.overrides.ts b/frontend/src/v5/ui/v4Adapter/overrides/leftPanel.overrides.ts
@@ -36,7 +36,7 @@ export default css`
 			background-color: ${({ theme }) => theme.palette.primary.contrast};
 			${({ theme }) => theme.typography.h3};
 			border-bottom: 1px solid ${({ theme }) => theme.palette.base.lightest};
-			height: 48px;
+			height: 49px;
 			font-size: 17px;
 
 			.panelTitle { 
@@ -92,7 +92,7 @@ export default css`
 				box-shadow: none;
 				border: 0;
 				border-bottom: 1px solid ${({ theme }) => theme.palette.base.lightest};
-				height: 48px;
+				height: 49px;
 				font-size: 17px;
 
 				.panelTitle {

diff --git a/frontend/src/v5/ui/v4Adapter/overrides/userList.overrides.ts b/frontend/src/v5/ui/v4Adapter/overrides/userList.overrides.ts
@@ -49,8 +49,8 @@ const AddUserButton = css`
 				border-radius: 50%;
 				color: ${({ theme }) => theme.palette.primary.main};
 				background-color: ${({ theme }) => theme.palette.primary.contrast};
-				height: 9px;
-				width: 9px;
+				height: 13px;
+				width: 13px;
 				padding: 2px;
 			}
 		}