Merge pull request RocketChat#166 from shubhsherl/pref_icon

Add responsive icon in user preference screen
shubhsherl · Feb 24, 2020 · 57bf4eb · 57bf4eb
2 parents 1751caa + d538e09
commit 57bf4eb
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 7 deletions.
diff --git a/app/theme/client/imports/components/table.css b/app/theme/client/imports/components/table.css
@@ -65,7 +65,7 @@
 
 		padding: 0.25rem 0;
 
-		white-space: nowrap;
+		white-space: pre-wrap;
 		text-overflow: ellipsis;
 
 		font-size: 0.9rem;

diff --git a/app/theme/client/imports/forms/button.css b/app/theme/client/imports/forms/button.css
@@ -119,6 +119,11 @@
 		border: 0;
 		border-color: var(--button-cancel-color);
 		background-color: var(--button-cancel-color);
+
+		.rc-button-icon {
+			display: none;
+			visibility: hidden;
+		}
 	}
 
 	&--cancel.rc-button--outline {
@@ -222,4 +227,18 @@
 	.rc-button--full {
 		width: 100%;
 	}
+
+	.rc-button--cancel {
+		padding: 0 1rem;
+
+		.rc-button-icon {
+			display: block;
+			visibility: visible;
+		}
+
+		.rc-button-text {
+			display: none;
+			visibility: hidden;
+		}
+	}
 }
diff --git a/app/theme/client/imports/general/base_old.css b/app/theme/client/imports/general/base_old.css
@@ -358,7 +358,7 @@
 
 		& > div {
 
-			width: 60%;
+			width: 55%;
 			min-height: 2.5rem;
 
 			& label {

diff --git a/app/theme/client/imports/general/forms.css b/app/theme/client/imports/general/forms.css
@@ -259,7 +259,6 @@
 	&__content {
 
 		display: flex;
-		overflow-y: auto;
 		flex-direction: column;
 
 		flex: 1;

diff --git a/app/ui-account/client/accountPreferences.html b/app/ui-account/client/accountPreferences.html
@@ -48,7 +48,12 @@ <h1>{{_ "Privacy"}}</h1>
 									{{/each}}
 								</select>
 							</div>
-							<button class="rc-button rc-button--cancel setting-action js-dont-ask-remove">{{_ "Remove"}}</button>
+							<button text="{{_ 'Remove'}}" class="rc-button rc-button--cancel setting-action js-dont-ask-remove">
+								<!-- will be displayed only if width < 780px -->
+								<i class="rc-button-icon icon-ccw color-error-contrast"></i>
+								<!-- will be displayed if width >= 780px -->
+								<div class="rc-button-text">{{_ "Remove"}}</div>
+							</button>
 						</div>
 					</div>
 				</div>

diff --git a/imports/personal-access-tokens/client/personalAccessTokens.html b/imports/personal-access-tokens/client/personalAccessTokens.html
@@ -23,13 +23,13 @@
 						<th width="30%">
 							<div class="table-fake-th">{{_ "API_Personal_Access_Token_Name"}}</div>
 						</th>
-						<th>
+						<th width="30%">
 							<div class="table-fake-th">{{_ "Created_at"}}</div>
 						</th>
-						<th>
+						<th width="30%">
 							<div class="table-fake-th">{{_ "Last_token_part"}}</div>
 						</th>
-						<th></th>
+						<th width="10%"></th>
 					</tr>
 				</thead>
 				<tbody>