Merge remote-tracking branch 'origin/RocketChat#751' into protocols

sibdigital · Oct 28, 2020 · 833f234 · 833f234
2 parents cd65522 + 60355ab
commit 833f234
Show file tree

Hide file tree

Showing 24 changed files with 207 additions and 96 deletions.
diff --git a/app/councils/client/views/Council.js b/app/councils/client/views/Council.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { Box, Button, Field, Label, Table, TextInput } from '@rocket.chat/fuselage';
+import { Box, Button, Field, Icon, Label, Table, TextInput, TextAreaInput } from '@rocket.chat/fuselage';
 
 import Page from '../../../../client/components/basic/Page';
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
@@ -61,7 +61,7 @@ export function CouncilPage() {
 		mediaQuery && <Th key={'createdAt'} style={{ width: '190px' }} color='default'>{t('Joined_at')}</Th>
 	], [mediaQuery]);
 
-	const styleTableRow = { 'word-wrap': 'break-word' };
+	const styleTableRow = { wordWrap: 'break-word' };
 
 	const renderRow = (invitedUser) => {
 		const iu = invitedUser;
@@ -75,21 +75,31 @@ export function CouncilPage() {
 		</Table.Row>;
 	};
 
+	const goBack = () => {
+		window.history.back();
+	};
+
 	return <Page flexDirection='row'>
 		<Page>
-			<Page.Header title={t('Council')}>
+			<Page.Header>
+				<Field width={'100%'} display={'block'} marginBlock={'15px'}>
+					<Button className='go-back-button' onClick={goBack}>
+						<Icon name='back'/>
+					</Button>
+					<Label fontScale='h1'>{t('Council')}</Label>
+				</Field>
 			</Page.Header>
 			<Page.Content>
 				<Field mbe='x8'>
 					<Field.Label>{t('Date')}</Field.Label>
 					<Field.Row>
-						<TextInput readonly is='span' fontScale='p1'>{formatDateAndTime(data.d)}</TextInput>
+						<TextInput readOnly is='span' fontScale='p1'>{formatDateAndTime(data.d)}</TextInput>
 					</Field.Row>
 				</Field>
 				<Field mbe='x8'>
 					<Field.Label>{t('Description')}</Field.Label>
 					<Field.Row>
-						<TextInput readonly is='span' fontScale='p1'>{data.desc}</TextInput>
+						<TextAreaInput row='3' readOnly is='span' fontScale='p1'>{data.desc}</TextAreaInput>
 					</Field.Row>
 				</Field>
 				<Field mbe='x8'>
@@ -101,7 +111,7 @@ export function CouncilPage() {
 				<Field mbe='x8'>
 					<Field.Row>
 						<Field.Label>{t('Council_Invited_Users')}</Field.Label>
-						<Button small color='var(--button-primary-text-color)' backgroundColor='var(--button-primary-background)' className='rc-button rc-button--small' onClick={downloadCouncilParticipants(councilId)} aria-label={t('Download')}>
+						<Button small primary onClick={downloadCouncilParticipants(councilId)} aria-label={t('Download')}>
 							{t('Download_Council_Participant_List')}
 						</Button>
 					</Field.Row>

diff --git a/app/councils/client/views/Councils.js b/app/councils/client/views/Councils.js
@@ -82,7 +82,7 @@ export function Councils({
 
 	const formatDateAndTime = useFormatDateAndTime();
 
-	const styleTr = { 'border-bottom-width': '10px', 'border-bottom-color': 'white' };
+	const styleTr = { borderBottomWidth: '10px', borderBottomColor: 'var(--color-white)' };
 
 	const renderRow = (council) => {
 		const { _id, d: date, desc, ts } = council;

diff --git a/app/councils/client/views/index.js b/app/councils/client/views/index.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Button, Icon } from '@rocket.chat/fuselage';
+import { Button, Field, Icon, Label } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 
 import Page from '../../../../client/components/basic/Page';
@@ -75,12 +75,20 @@ export function CouncilsPage() {
 		setCache(new Date());
 	}, []);
 
-	const styleButton = { 'font-size': '1.3rem', 'background-color': 'var(--button-primary-background)', color: 'var(--button-primary-text-color)' };
+	const goBack = () => {
+		window.history.back();
+	};
 
 	return <Page flexDirection='row'>
 		<Page>
-			<Page.Header title={t('Councils')}>
-				<Button style={styleButton} small onClick={handleHeaderButtonClick('new')} aria-label={t('New')}>
+			<Page.Header>
+				<Field width={'100%'} display={'block'} marginBlock={'15px'}>
+					<Button className='go-back-button' onClick={goBack}>
+						<Icon name='back'/>
+					</Button>
+					<Label fontScale='h1'>{t('Councils')}</Label>
+				</Field>
+				<Button fontSize={'1.3rem'} primary small onClick={handleHeaderButtonClick('new')} aria-label={t('New')}>
 					<Icon name='plus'/>
 				</Button>
 			</Page.Header>

diff --git a/app/discussion/client/public/stylesheets/discussion.css b/app/discussion/client/public/stylesheets/discussion.css
@@ -27,7 +27,7 @@
 
 .reply-counter {
 	font-weight: 600;
-	margin-inline-start: 8px;
+	margin-inline-start: 4px;
 }
 
 .discussion-reply-lm {

diff --git a/app/errand/client/views/errandsPage/index.js b/app/errand/client/views/errandsPage/index.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Box, Icon, Table, TextInput, Modal } from '@rocket.chat/fuselage';
+import { Box, Icon, Table, TextInput, Modal, Button, Label, Field } from '@rocket.chat/fuselage';
 import { useMediaQuery, useSafely } from '@rocket.chat/fuselage-hooks';
 
 import Page from '../../../../../client/components/basic/Page';
@@ -142,9 +142,20 @@ export function ErrandPage() {
 
 	const onClick = useCallback((errand) => () => setModal(() => renderEditModal({ onCancel: cancelModal, erid: errand._id, onChange: onChange, key: 'modal-errand' })), []);
 
+	const goBack = () => {
+		window.history.back();
+	};
+
 	return <Page flexDirection='row'>
 		<Page>
-			<Page.Header title={t(title)} />
+			<Page.Header>
+				<Field width={'100%'} display={'block'} marginBlock={'15px'}>
+					<Button className='go-back-button' onClick={goBack}>
+						<Icon name='back'/>
+					</Button>
+					<Label fontScale='h1'>{t(title)}</Label>
+				</Field>
+			</Page.Header>
 			<Page.Content>
 				<Errands type={type} setParam={setParams} params={params} onHeaderClick={onHeaderClick} data={data} onClick={onClick} sort={sort}/>;
 			</Page.Content>

diff --git a/app/manual-mail-sender/client/views/index.js b/app/manual-mail-sender/client/views/index.js
@@ -1,10 +1,11 @@
-import React, {useMemo, useState, useEffect} from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import '../../public/stylesheets/mail-sender.css';
 import Page from '../../../../client/components/basic/Page';
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useEndpointData } from '../../../../client/hooks/useEndpointData';
 import MailForm from './MailForm';
+import { Button, Field, Label, Icon } from '@rocket.chat/fuselage';
 
 const sortDir = (sortDir) => (sortDir === 'asc' ? 1 : -1);
 
@@ -62,10 +63,20 @@ export function MailSenderPage() {
 		assignObjectPaths(recipients);
 
 		setRecipients(recipients);
-	}, [data])
+	}, [data]);
+
+	const goBack = () => {
+		window.history.back();
+	};
 
 	return <Page>
-		<Page.Header title={t('Send_email')}>
+		<Page.Header>
+			<Field width={'100%'} display={'block'} marginBlock={'15px'}>
+				<Button className='go-back-button' onClick={goBack}>
+					<Icon name='back'/>
+				</Button>
+				<Label fontScale='h1'>{t('Send_email')}</Label>
+			</Field>
 		</Page.Header>
 		<Page.Content>
 			<MailForm recipients={recipients}/>

diff --git a/app/reactions/client/init.js b/app/reactions/client/init.js
@@ -95,6 +95,6 @@ Meteor.startup(function() {
 			return true;
 		},
 		order: 3,
-		group: ['message', 'menu'],
+		group: ['menu'],
 	});
 });
diff --git a/app/reactions/client/stylesheets/reaction.css b/app/reactions/client/stylesheets/reaction.css
@@ -1,6 +1,6 @@
 .message {
 	& .reactions {
-		margin-top: 4px;
+		margin-top: 10px;
 		padding: 0;
 	    display: inline-block;
 
@@ -9,7 +9,7 @@
 
 			display: inline-block;
 
-			height: 22px;
+			height: 32px;
 			padding: 0 4px 0 2px;
 
 			cursor: pointer;
@@ -19,6 +19,7 @@
 			border-radius: 5px;
 			background-color: #fcfcfc;
 
+			font-size: 20px;
 			line-height: 20px;
 
 			& .reaction-emoji {
@@ -44,7 +45,7 @@
 
 				margin-left: -3px;
 
-				font-size: 0.65rem;
+				font-size: 0.9rem;
 			}
 
 			&.add-reaction {

diff --git a/app/tags/client/init.js b/app/tags/client/init.js
@@ -83,7 +83,7 @@ Meteor.startup(function() {
 				return true;
 			},
 			order: 2,
-			group: ['message', 'menu'],
+			group: ['menu'],
 		});
 	});
 });
diff --git a/app/tags/client/stylesheets/tags.css b/app/tags/client/stylesheets/tags.css
@@ -1,6 +1,6 @@
 .message {
 	& .tags {
-		margin-top: 4px;
+		margin-top: 10px;
 		padding: 0;
 		display: inline-block;
 
@@ -9,7 +9,7 @@
 
 			display: inline-block;
 
-			height: 22px;
+			height: 32px;
 			padding: 0 4px 0 2px;
 
 			cursor: pointer;
@@ -19,6 +19,7 @@
 			border-radius: 5px;
 			background-color: #fcfcfc;
 
+			font-size: 20px;
 			line-height: 20px;
 
 			& .tag-name {

diff --git a/app/theme/client/imports/components/goBackButton.css b/app/theme/client/imports/components/goBackButton.css
@@ -0,0 +1,7 @@
+.go-back-button {
+	border-color: transparent !important;
+	background-color: transparent !important;
+
+	font-size: 24px !important;
+	margin-inline-end: 10px !important;
+}
diff --git a/app/theme/client/imports/components/messages.css b/app/theme/client/imports/components/messages.css
@@ -18,28 +18,23 @@
 
 	color: var(--color-darkest);
 
-	border: 2px solid #f2f3f7;
-	border-radius: 4px;
+	background: var(rcx-surface, transparent);
 
-	background: var(rcx-surface, #ffffff);
-
-	font-size: 1.7rem;
+	font-size: 0.85rem;
 
 	&__buttons {
 		display: flex;
 	}
 
 	&__button,
 	&__menu {
-		padding: 2px;
-
 		cursor: pointer;
 
 	 	margin-right: 1.1rem;
 
 		&:hover {
-			border-radius: 2px;
-			background: #eeeff1;
+			border-radius: 1px;
+			color: #4fb0fc;
 		}
 
 		&-icon {
@@ -211,29 +206,25 @@
 }
 
 .reply-buttons-group {
-	display: -webkit-box;
-	display: -ms-flexbox;
 	display: flex;
 	margin-bottom: 0.3rem;
-	margin-top: 0.3rem;
 }
 
 .reply-button {
-	margin: 0.25rem;
 	padding: 0.1em 0.3em;
 	text-align: center;
 	text-decoration: none;
 	color: var(--color-black) !important;
-	border: 2px solid var(--button-reply-primary-background);
+	border: 1px solid var(--button-reply-primary-background);
 	display: inline-block;
-	border-radius: 0.3em;
+	border-radius: 0.6em;
 	transition: all 0.5s ease-in-out;
 	position: relative;
 	overflow: hidden;
 	&:hover {
-		 background-color: var(--color-dark-20);
+		 border-color: #4fb0fc;
 		 color: var(--color-black) !important;
-		 opacity: 0.6;
+		 opacity: 1 !important;
 	}
 }
 

diff --git a/app/theme/client/imports/general/base_old.css b/app/theme/client/imports/general/base_old.css
@@ -2216,6 +2216,18 @@
 		cursor: pointer;
 	}
 
+	& .errand-tag {
+		margin: 0 1px;
+		padding: 1px 4px;
+
+		color: #ffffff;
+
+		border-radius: 5px;
+		background: #1d74f5;
+
+		line-height: initial;
+	}
+
 	&:hover:not(.system) .message-action {
 		display: block;
 	}
@@ -2287,18 +2299,6 @@
 
 			line-height: initial;
 		}
-
-		& .errand-tag {
-			  margin: 0 3px;
-			  padding: 1px 4px;
-
-			  border-width: 1px;
-
-			  border-radius: 5px;
-			  background: #1d74f5;
-				color: #fff;
-			  line-height: initial;
-		}
 	}
 
 	& .private {

diff --git a/app/theme/client/main.css b/app/theme/client/main.css
@@ -49,6 +49,7 @@
 @import 'imports/components/tabs.css';
 @import "imports/components/tagPicker.css";
 @import "imports/components/gridOfIcons.css";
+@import "imports/components/goBackButton.css";
 
 /* Modal */
 @import 'imports/components/modal/full-modal.css';