Fix/styles feedback fix (#43)

* Fix Button to use dynamic style/class props

- For the clear button, use secondary button type with border

* Remove username from Header.js

* Fix use of show references icons

- Add /img to /public
- Add chevron image to /src/resources

* Add capped badge if the results are capped

- Results cap at 10,000

* Add updated CSS for new search bar

* Seperate out SearchForm into different components

- Change props for button/textInput

* Add seperate search form for the home page

- Fix issue with TextInputInline not displaying the correct size

* Add fix for width of react-table (12 cols now)

* Fix column widths, fix issue with htmlFor in range input

* Fix more col widths, remove scroll in ResultsList

* Remove spacing from Home search inputs

* Fix spelling errors

- CN -> CRN
- Use 'Employment' instead of 'Employment Bands' in react table

* Add scroll to results feature

* Change scroll to go to Search header

public/css/components/login.css

@@ -23,3 +23,4 @@
     margin: 0;
     cursor: pointer;
     width: 200px;
+}

public/css/components/pagination.css

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+.pagination {
+    display: inline-block;
+}
+
+.pagination a {
+    color: #4263C2;
+    float: left;
+    padding: 0.6rem 1rem;
+    text-decoration: underline;
+
+}
+
+.pagination a.active {
+    background-color: #033e58;
+    color: white;
+}
+
+.pagination a:hover:not(.active) {
+  background-color: #e4e8eb;
+  outline: none;
+  color: #033e58;
+}

public/css/components/registers-grid.css

@@ -84,7 +84,7 @@
 	max-width: 1008px;
 }
 
-/* } */
+}
 
 @media only screen and (max-width: 767px) {
 

public/css/components/sbr-search.css

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+/* SBR Primary search page */
+
+.label__description {
+  padding-bottom: 0.5rem;
+}
+
+/* SBR search header */
+
+.search_bar {
+  background-color: #E4E8EB;
+  padding: 1rem 0 0 0;
+}
+
+.sbr-search-input {
+  width: 100%;
+}
+
+.three-col-button {
+  width: 100%;
+  padding: 0.5456rem 0.8889rem 0.5456rem 0.8889rem;
+  margin-top: 1.75rem;
+
+}

public/css/components/search.css

@@ -23,7 +23,7 @@
 .bi-sic-input {
     width: 12.57rem;
     float: left;
-    color: #999999;
+    color: #222222;
 }
 
 .second {
@@ -35,7 +35,16 @@
   height: 45px;
 }
 
-/* BI Edit search */
+.label__description {
+  padding-bottom: 4px;
+}
+
+#middle {
+    height:500px;
+    width:200px;
+    border:2px solid red;}
+
+/* BI Edit search right panel */
 
 .edit-search {
   background-color: #E4E8EB;
@@ -63,39 +72,77 @@
 }
 
 .edit {
-  width: 100% !important;
+    width: 100% !important;
 }
 
 .float {
-  display: inline-block;
+    display: inline-block;
 }
 
 .float-right {
-  float: right;
-  margin-top: 9px;
+    float: right;
+    margin-top: 9px;
 }
 
+/* BI Edit search right landscape top */
 
-/* SBR Primary search page */
+.landscape-search {
+    background-color: #E4E8EB;
+    height: auto;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
 
-.label__description {
-  padding-bottom: 0.5rem;
+.input-margin {
+    margin-bottom: 3px;
+    margin-top: 29px;
 }
 
-/* SBR search header */
+.input-margin-sml {
+    margin-bottom: 3px;
+    margin-top: 6px;
+}
 
-.search_bar {
-  background-color: #E4E8EB;
-  padding: 1rem 0 0 0;
+.input-margin-sic {
+    margin-bottom: 2px;
+}
+
+.bi-search-input-wide {
+    width: 100%;
+    min-height: 45px;
 }
 
-.sbr-search-input {
-  width: 100%;
+.sml {
+    margin-bottom: .25em;
 }
 
-.three-col-button {
-  width: 100%;
-  padding: 0.5456rem 0.8889rem 0.5456rem 0.8889rem;
-  margin-top: 1.75rem;
+.bi-sic-input-edit-landscape {
+    width: 48%;
+    float: left;
+    color: #222222;
+    min-height: 45px;
+}
+
+.input--checkbox {
+    background-color: #ffffff;
+}
+
+.btn--secondary.btn--border {
+    padding: .75rem 2.5rem;
+    margin-left: 12px;
+}
+
+.btn-wide {
+    width: 100%;
+}
+.minus-margin {
+  margin-bottom: -1rem;
+}
+
+@media only screen and (max-width: 1279px) {
+
+.bi-sic-input-edit-landscape {
+    width: 47.4%;
+}
 
 }

public/css/components/table.css

@@ -1,5 +1,7 @@
 @charset "UTF-8";
 
+/* BI search results table list */
+
 table {
     min-width: 100%;
     border-spacing: 0;
@@ -39,3 +41,33 @@ td {
   border-bottom: 1px solid #cfcfcf;
   padding: 0.75rem 0;
 }
+
+/* BI Table view */
+
+.business-name {
+  min-width: 228px;
+}
+
+.turnover {
+  min-width: 105px;
+}
+
+.postcode {
+  min-width: 90px;
+}
+
+.ubrn {
+  width: 123px;
+}
+
+.no-data {
+  color: #C1C1C1;
+}
+
+.table--cell {
+  font-size: 15px;
+}
+
+.download-results {
+  margin: 3.5rem 0 0 0;
+}

public/css/registers-main.css

@@ -17,6 +17,7 @@
 @import "components/breadcrumb.css";
 @import "components/enterprise-page.css";
 @import "components/style.css";
+@import "components/pagination.css";
 
 .panel--simple {
     padding: 27px 27px 9px 27px;

public/img/favicons/manifest.json

@@ -0,0 +1,18 @@
+{
+    "name": "",
+    "icons": [
+        {
+            "src": "/s/favicons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/s/favicons/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

public/index.html

@@ -29,4 +29,5 @@
     -->
   </body>
   <script src="https://cdn.ons.gov.uk/sdc/8f80aaa/scripts/bundle.min.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </html>