T360286: Sections style updates (#127)

* Fix footer and add min-height to preview

* Fix header title text overflow

* Update header styling

* Update list item style

* Only one close icon for views

src/link/sections.js

@@ -84,7 +84,9 @@ export const Sections = ( {
 	return (
 		<div className={ `${ sectionsPrefix }` }>
 			<div className={ `${ sectionsPrefix }-header` }>
-				{ titleWithoutSection( activeAttributes.title ) }
+				<div className={ `${ sectionsPrefix }-header-title` }>
+					{ titleWithoutSection( activeAttributes.title ) }
+				</div>
 				<div
 					className={ `${ sectionsPrefix }-header-close` }
 					onClick={ () => setSelectingSection( false ) }

src/link/style.scss

@@ -220,7 +220,7 @@ body {
 				line-height: 19.55px;
 
 				&-close {
-					background-image: url(./images/close-language.svg);
+					background-image: url(./images/close-view.svg);
 					width: 20px;
 					height: 20px;
 					cursor: pointer;
@@ -352,6 +352,7 @@ body {
 
 		.wikipediapreview-edit-preview {
 			width: 350px;
+			min-height: 214px;
 
 			&-container {
 				display: flex;
@@ -420,20 +421,36 @@ body {
 				box-shadow: none;
 
 				.wikipediapreview-footer {
+					position: relative;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					height: 40px;
+					z-index: 5;
 
-					&-cta-readmore {
-						display: none;
-					}
+					&-link {
+						margin-right: 5px;
+
+						&-cta {
+							text-decoration: none;
+							font-size: 14px;
+							color: #36c;
+							margin-right: 4px;
 
-					&-cta-readonwiki {
-						display: block;
+							&:hover {
+								text-decoration: underline;
+							}
+
+							&:visited {
+								color: #6B4BA1;
+								svg path {
+									fill: #6B4BA1;
+								}
+							}
+						}
 					}
 				}
 			}
-
-			.wikipediapreview-body::after {
-				content: none;
-			}
 		}
 
 		&.is-expanded {
@@ -544,14 +561,24 @@ body {
 			min-height: 70px;
 			display: flex;
 			align-items: center;
-			padding: 0 10px 0 10px;
+			padding: 0 16px 0 16px;
 			font-size: 16px;
 			font-weight: bold;
 			border-bottom: 1px solid #c8ccd1;
 			justify-content: space-between;
 
+				&-title {
+					max-width: 90%;
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
+					overflow: hidden;
+					color: #202122
+				}
+
 				&-close {
-					background-image: url(./images/close-language.svg);
+					background-image: url(./images/close-view.svg);
 					width: 20px;
 					height: 20px;
 					cursor: pointer;
@@ -565,8 +592,8 @@ body {
 			&-item {
 				display: flex;
 				align-items: center;
-				padding: 5px;
-				margin: 5px;
+				padding: 4px;
+				margin: 8px;
 
 				&-content {
 					display: flex;