Merge branch 'styling/groups-styling-updates' of https://code.gab.com/gab/social/gab-social into develop

app/javascript/gabsocial/features/groups/create/index.js

@@ -75,7 +75,8 @@ class Create extends React.PureComponent {
 			<form className='group-form' onSubmit={this.handleSubmit}>
 				<div>
 					<input
-						className='group-form__input'
+						className='standard'
+						type='text'
 						value={title}
 						disabled={disabled}
 						onChange={this.handleTitleChange}
@@ -83,8 +84,9 @@ class Create extends React.PureComponent {
 					/>
 				</div>
 				<div>
-					<input
+					<textarea
-						className='group-form__input'
+						className='standard'
+						type='text'
 						value={description}
 						disabled={disabled}
 						onChange={this.handleDescriptionChange}

app/javascript/gabsocial/features/groups/edit/index.js

@@ -106,7 +106,8 @@ class Edit extends React.PureComponent {
 			<form className='group-form' onSubmit={this.handleSubmit}>
 				<div>
 					<input
-						className='group-form__input'
+						className='standard'
+						type='text'
 						value={title}
 						disabled={disabled}
 						onChange={this.handleTitleChange}
@@ -115,8 +116,9 @@ class Edit extends React.PureComponent {
 				</div>
 					
 				<div>
-					<input
+					<textarea
-						className='group-form__input'
+						className='standard'
+						type='text'
 						value={description}
 						disabled={disabled}
 						onChange={this.handleDescriptionChange}

app/javascript/styles/application.scss

@@ -19,6 +19,7 @@
 
 // COMPONENTS
 @import 'gabsocial/components/buttons';
+@import 'gabsocial/components/inputs';
 @import 'gabsocial/components/tabs-bar';
 @import 'gabsocial/components/dropdown-menu';
 @import 'gabsocial/components/modal';

app/javascript/styles/gabsocial/_mixins.scss

@@ -15,7 +15,13 @@
 	}
 }
 
-
+// SHORTCUTS
+@mixin input-placeholder($color) {
+	&::-webkit-input-placeholder {color: $color;}
+	&::-moz-placeholder {color: $color;}
+	&:-ms-input-placeholder {color: $color;}
+	&:-moz-placeholder {color: $color;}
+}
 
 // OLDER MIXINS
 @mixin avatar-radius() {

app/javascript/styles/gabsocial/components.scss

@@ -235,23 +235,14 @@
 	}
 }
 
-.ellipsis {
+.ellipsis::after {content: "…";}
-	&::after {
-		content: "…";
-	}
-}
 
 .timeline-compose-block {
 	display: flex;
 	align-items: flex-start;
 	padding: 20px;
-	border-radius: 10px;
+	margin-bottom: 20px;
-	margin-bottom: 10px;
+	@include gab-container-standards();
-	background: $gab-background-container;
-	body.theme-gabsocial-light & {
-		@include light-theme-shadow();
-		background: $gab-background-container-light;
-	}
 	.emoji-picker-wrapper {
 		.emoji-picker-dropdown {top: 10px;}
 	}
@@ -1294,16 +1285,11 @@ a.account__display-name {
 	text-decoration: none;
 }
 
-
-//////////////////////////////////
-
-
 .columns-area {
 	display: flex;
 	flex: 1 1 auto;
 	flex-direction: row;
 	justify-content: flex-start;
-	//overflow-x: auto;
 	position: relative;
 
 	&__panels {
@@ -1314,10 +1300,6 @@ a.account__display-name {
 
 		&__pane {
 			height: 100%;
-
-			// NOTE: regression-watch -- watch for regressions on this before deleting permanently
-			//overflow: hidden;
-
 			pointer-events: none;
 			display: flex;
 			justify-content: flex-end;
@@ -1477,57 +1459,33 @@ a.account__display-name {
 	flex-direction: column;
 	width: 100%;
 	margin: 0 auto;
-	overflow: hidden;
-
 	.column,
 	.drawer {
 		width: 100%;
 		height: 100%;
 		padding: 0;
 	}
-
+	.autosuggest-textarea__textarea {font-size: 16px;}
-	.autosuggest-textarea__textarea {
-		font-size: 16px;
-	}
-
 	.search__input {
 		line-height: 18px;
 		font-size: 16px;
 		padding: 15px;
 		padding-right: 30px;
 	}
-
+	.search__icon .fa {top: 15px;}
-	.search__icon .fa {
+	@media screen and (min-width: 360px) {padding: 15px 0;}
-		top: 15px;
-	}
-
-	@media screen and (min-width: 360px) {
-		padding: 15px 0;
-	}
-
 	@media screen and (min-width: 630px) {
 		.detailed-status {
 			padding: 15px;
-
 			.media-gallery,
 			.video-player {
 				margin-top: 15px;
 			}
 		}
-
+		.account__header__bar {padding: 5px 10px;}
-		.account__header__bar {
-			padding: 5px 10px;
-		}
-
 		.navigation-bar,
-		.compose-form {
+		.compose-form {padding: 15px;}
-			padding: 15px;
+		.compose-form .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;}
-		}
-
-		.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
-			padding-top: 15px;
-		}
-
 		.status {
 			padding: 15px 15px 15px (48px + 15px * 2);
 			min-height: 48px + 2px;
@@ -2445,12 +2403,11 @@ a.status-card.compact:hover {
 	}
 }
 
+.columns-area--mobile .column {@include gab-container-standards();}
 .column-header__wrapper {
 	position: relative;
 	flex: 0 0 auto;
-	border-top-right-radius: 10px;
+	overflow: hidden;
-  border-top-left-radius: 10px;
-  overflow: hidden;
 
 	&.active {
 		&::before {

app/javascript/styles/gabsocial/components/group-card.scss

@@ -27,7 +27,7 @@
     display: block;
     flex: 0 0 calc(50% - 20px/2);
     @include gab-container-standards();
-    margin-bottom: 15px;
+    margin-bottom: 20px;
     text-decoration: none;
     overflow: hidden;
 

app/javascript/styles/gabsocial/components/group-form.scss

@@ -1,56 +1,33 @@
 .group-form {
-    background: $gab-background-container;
+	padding: 20px;
-    body.theme-gabsocial-light & {
+	@include gab-container-standards();
-      background: $gab-background-container-light;
+	input[type=text],
-    }
+	textarea {
-    padding: 15px;
+		&.standard {
-    border-radius: 10px;
+			width: 100%;
-
+			margin: 0 0 10px;
-    .group-form__input {
+		}
-        height: 40px;
+	}
-        padding: 0 15px;
+	textarea {height: 88px;}
-        display: block;
+	.group-form__file-label {
-        color: $primary-text-color;
+		font-size: 13px;
-        background: none;
+		color: $secondary-text-color;
-        border: 1px solid $secondary-text-color;
+		cursor: pointer;
-        border-radius: 4px;
+		&:hover {color: $primary-text-color;}
-        margin-bottom: 10px;
+		.fa {
-        width: 100%;
+			font-size: 18px;
-        box-sizing: border-box;
+			margin-right: 5px;
-
+			transform: translatey(2px);
-        &:focus {
+		}
-            outline: none;
+		&.group-form__file-label--selected {color: $primary-text-color;}
-            border-color:  $primary-text-color;
+	}
-        }
+	.group-form__file {
-    }
+		width: 1px;
-
+		height: 1px;
-    .group-form__file-label {
+		overflow: hidden;
-        font-size: 13px;
+		opacity: 0;
-        color: $secondary-text-color;
+		position: absolute;
-        cursor: pointer;
+		pointer-events: none;
-
+	}
-        &:hover {
+	button {float: right;}
-            color: $primary-text-color;
-        }
-
-        .fa {
-            font-size: 18px;
-            margin-right: 5px;
-            transform: translatey(2px);
-        }
-
-        &.group-form__file-label--selected {
-            color: $primary-text-color;
-        }
-    }
-
-    .group-form__file {
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        opacity: 0;
-        position: absolute;
-        pointer-events: none;
-    }
-    button {float: right;}
 }

app/javascript/styles/gabsocial/components/inputs.scss

@@ -0,0 +1,23 @@
+input[type='text'],
+textarea {
+	&.standard {
+		box-sizing: border-box;
+		padding: 7px 10px;
+		border: 1px solid;
+		border-radius: 4px;
+		@include font-size(16);
+		@include line-height(18);
+		color: $gab-brand-default;
+		border-color: $gab-placeholder-accent;
+		background: $gab-background-container;
+		@include input-placeholder($gab-placeholder-accent);
+		body.theme-gabsocial-light & {
+			color: $gab-placeholder-accent;
+			border-color: $gab-secondary-text;
+			background: $gab-background-base-light;	
+			@include input-placeholder($gab-secondary-text);
+		}
+		&:focus {outline: none;}
+	}
+}
+textarea.standard {resize: vertical;}