[CMSP-992] UI changes

.gitattributes

@@ -19,9 +19,9 @@
 /composer.json export-ignore
 /composer.lock export-ignore
 /CONTRIBUTING.md export-ignore
-/Gruntfile.js export-ignore
+/gulpfile.mjs export-ignore
 /package-lock.json export-ignore
 /package.json export-ignore
 /phpcs.xml.dist export-ignore
 /phpunit.xml.dist export-ignore
-/README.md export-ignore
+/README.md export-ignore

.github/workflows/build-tag-release.yml

@@ -54,3 +54,4 @@ jobs:
         with:
           gh_token: ${{ github.token }}
           readme_md: README.md
+          build_node_assets: true

.gitignore

@@ -3,6 +3,8 @@ Thumbs.db
 wp-cli.local.yml
 node_modules/
 vendor/
+assets/css/styles.css
+assets/css/*.css.map
 
 # wpunit helpers
 bin/helpers.sh

assets/sass/main.scss

@@ -0,0 +1,62 @@
+.pantheon-page-cache {
+	hr {
+		display: none;
+	}
+
+	tr.cache-default-max-age {
+		display: block;
+		padding: $padding;
+		background: $white;
+		color: $charcoal;
+		box-shadow: $shadow;
+
+		td {
+			padding: 0;
+		}
+
+		.pantheon-cache-default-max-age {
+			padding: 0 $padding $padding 0;
+
+			h3 {
+				margin-top: 0.5em;
+			}
+
+			i {
+				margin-right: $padding;
+				line-height: 1.0em;
+			}
+
+			&-info-bar {
+				background: $blue;
+				color: $white;
+				padding: $padding 0 $padding $padding;
+				text-align: left;
+				display: block;
+				width: 100%;
+				margin-bottom: 1em;
+
+				a {
+					color: $white;
+					text-decoration: underline;
+				}
+
+				a:hover, a:active {
+					color: $white;
+					text-decoration: none;
+				}
+			}
+
+			select {
+				background-color: $white;
+				color: $charcoal;
+				border: 1px solid $gray;
+				border-radius: 0;
+			}
+
+			&-description {
+				color: $gray;
+				margin-bottom: 0;
+			}
+		}
+	}
+}

assets/sass/mixins.scss

@@ -0,0 +1,9 @@
+// Colors
+$blue: #1d7afc;
+$white: #ffffff;
+$gray: #757575;
+$charcoal: #1e1e1e;
+
+$shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
+
+$padding: 10px;

assets/sass/styles.scss

@@ -0,0 +1,2 @@
+@import 'mixins';
+@import 'main';

gulpfile.mjs

@@ -0,0 +1,23 @@
+import { deleteAsync } from 'del';
+import gulp from 'gulp';
+import csso from 'gulp-csso';
+import * as sassCompiler from 'sass';
+import gulpSass from 'gulp-sass';
+
+const sass = gulpSass(sassCompiler);
+
+gulp.task('styles', () => {
+  return gulp.src('assets/sass/styles.scss') // Only compile the main file
+    .pipe(sass().on('error', sass.logError)) // Compile SASS to CSS
+    .pipe(csso()) // Minify CSS
+    .pipe(gulp.dest('assets/css')); // Save the CSS file
+});
+
+gulp.task('clean', () => {
+  return deleteAsync('assets/css');
+});
+
+gulp.task('build', gulp.series('clean', 'styles'));
+gulp.task('watch', () => {
+  gulp.watch('assets/sass/**/*.scss', gulp.series('clean', 'styles'));
+});