Merge branch 'styling/patch-colors-for-groups-updates' into 'groups-updates'

Updates for the Groups styling

See merge request gab/social/gab-social!14

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

@@ -82,7 +82,6 @@ class Create extends React.PureComponent {
 						placeholder={intl.formatMessage(messages.title)}
 					/>
 				</div>
-					
 				<div>
 					<input
 						className='group-form__input'
@@ -92,12 +91,10 @@ class Create extends React.PureComponent {
 						placeholder={intl.formatMessage(messages.description)}
 					/>
 				</div>
-
 				<div>
 					<label htmlFor='group_cover_image' className={classNames('group-form__file-label', { 'group-form__file-label--selected': coverImage !== null })}>
 						<Icon id='camera' /> {intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
 					</label>
-					
 					<input
 						type='file'
 						className='group-form__file'
@@ -105,8 +102,7 @@ class Create extends React.PureComponent {
 						disabled={disabled}
 						onChange={this.handleCoverImageChange}
 					/>
-
+					<button className='standard-small'>{intl.formatMessage(messages.create)}</button>
-					<button>{intl.formatMessage(messages.create)}</button>
 				</div>
 			</form>
 		);

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

@@ -50,7 +50,7 @@ class Groups extends ImmutablePureComponent {
 
 		return (
 			<div className="group-column-header">
-				<div className="group-column-header__cta"><Link to="/groups/create">{intl.formatMessage(messages.create)}</Link></div>
+				<div className="group-column-header__cta"><Link to="/groups/create" className="button standard-small">{intl.formatMessage(messages.create)}</Link></div>
 				<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
 				
 				<div className="column-header__wrapper">

app/javascript/styles/application.scss

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

app/javascript/styles/gabsocial/_mixins.scss

@@ -1,3 +1,23 @@
+// NEW GAB SPECIFIC MIXINS
+
+// THEME MIXINS
+
+// standard container drop shadow
+@mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);}
+
+// common properties for all standard containers
+@mixin gab-container-standards() {
+	border-radius: 10px;
+	background: $gab-background-container;
+	body.theme-gabsocial-light & {
+		@include light-theme-shadow();
+		background: $gab-background-container-light;
+	}
+}
+
+
+
+// OLDER MIXINS
 @mixin avatar-radius() {
   border-radius: 50%;
   background: transparent no-repeat;

app/javascript/styles/gabsocial/components.scss

@@ -1303,7 +1303,7 @@ a.account__display-name {
 	flex: 1 1 auto;
 	flex-direction: row;
 	justify-content: flex-start;
-	overflow-x: auto;
+	//overflow-x: auto;
 	position: relative;
 
 	&__panels {
@@ -1321,14 +1321,14 @@ a.account__display-name {
 			pointer-events: none;
 			display: flex;
 			justify-content: flex-end;
-			padding-top: 10px;
+			padding-top: 15px;
 
 			&--start {
 				justify-content: flex-start;
 			}
 
 			&__inner {
-				width: 285px;
+				width: 265px;
 				pointer-events: auto;
 				height: 100%;
 			}
@@ -1342,7 +1342,8 @@ a.account__display-name {
 			flex-direction: column;
 
 			@media screen and (min-width: 360px) {
-				padding: 0 10px;
+				margin: 0 20px;
+				padding: 0;
 			}
 		}
 	}
@@ -1476,7 +1477,7 @@ a.account__display-name {
 	flex-direction: column;
 	width: 100%;
 	margin: 0 auto;
-	overflow: hidden;
+	//overflow: hidden;
 	
 	.column,
 	.drawer {
@@ -1501,7 +1502,7 @@ a.account__display-name {
 	}
 
 	@media screen and (min-width: 360px) {
-		padding: 10px 0;
+		padding: 15px 0;
 	}
 
 	@media screen and (min-width: 630px) {

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

@@ -0,0 +1,23 @@
+button,
+a.button {
+	&.standard {
+
+		// NOTE - will define the larger standard buttons here and apply class where used.
+
+		&-small {
+			height: 20px;
+			padding: 5px 15px;
+			border: none;
+			border-radius: 4px;
+			@include font-size(11);
+			@include line-height(11);
+			@include font-weight(bold);
+			text-transform: uppercase;
+			color: white;
+			background: $gab-small-cta-primary;
+		}
+	}
+}
+
+
+

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

@@ -1,47 +1,38 @@
-$height: 80px; 
-
 .group-column-header {
-    border-radius: 10px;
-    background: $gab-background-container;
     overflow: hidden;
-
+    @include gab-container-standards();
     .group-column-header__title {
         padding: 15px;
         font-size: 20px;
         font-weight: bold;
     }
-
     .group-column-header__cta {
         float: right;
         padding: 15px;
         font-size: 17px;
-
+        a {color: #fff;}
-        a {
-            color: $primary-text-color;
-        }
     }
 }
 
 .group-card-list {
     display: flex;
     flex-direction: row;
+    align-items: flex-start;
     flex-wrap: wrap;
     justify-content: space-between;
     width: 100%;
-    margin-top: 15px;
+    margin-top: 20px;
 }
 
 .group-card {
     display: block;
-    flex: 0 0 calc(50% - 15px/2);
+    flex: 0 0 calc(50% - 20px/2);
+    @include gab-container-standards();
     margin-bottom: 15px;
-    background: $gab-background-container;
     text-decoration: none;
-    border-radius: 10px;
     overflow: hidden;
 
     .group-card__header {
-        height: $height;
         overflow: hidden;
         
         img {

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

@@ -49,18 +49,5 @@
         position: absolute;
         pointer-events: none;
     }
-
+    button {float: right;}
-    button {
-        background: $gab-blue;
-        color: white;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        font-size: 14px;
-        border: none;
-        border-radius: 4px;
-        height: 25px;
-        padding: 1px 12px;
-        font-weight: bold;
-        float: right;
-    }
 }

app/javascript/styles/gabsocial/components/user-panel.scss

@@ -1,15 +1,9 @@
 .user-panel {
 	display: flex;
-	width: 285px;
+	width: 265px;
 	flex-direction: column;
 	overflow-y: hidden;
-	border-radius: 10px;
+	@include gab-container-standards();
-	background: $gab-background-container;
-	body.theme-gabsocial-light & {
-		@include light-theme-shadow();
-		background: $gab-background-container-light;
-	}
-
 	&__header {
 		display: block;
 		height: 112px;

app/javascript/styles/gabsocial/variables.scss

@@ -12,7 +12,7 @@ $gab-brand-default: #21cf7a;
 $gab-alert-red: #cc6643;
 $gab-secondary-text: #999;
 $gab-text-highlight: $gab-brand-default;
-$gab-blue: #627ff2;
+$gab-small-cta-primary: #607CF5;
 
 
 // THEME COLORS
@@ -29,8 +29,7 @@ $gab-background-container-light: #fff;
 $gab-default-text-light: #6c6c6c;
 
 
-// theme mixins
+
-@mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);}
 
 
 // BREAKPOINT SETS