✏️ Changed styling to reflect the look changes requested by UVA

src/components/addButton/style.scss

@@ -20,6 +20,6 @@
   }
 
   img {
-    opacity: .6;
+    opacity: .8;
   }
 }

src/components/editLink/index.js

@@ -8,13 +8,12 @@ export default class EditLink extends Component {
   render() {
     return (
       <Link class={style.edit} href={this.props.to}>
-        Edit {this.props.type} <i class="material-icons">mode_edit</i>
+        Edit <i class="material-icons">mode_edit</i>
       </Link>
     );
   }
 }
 
 EditLink.propTypes = {
-  type: PropTypes.string.isRequired,
   to: PropTypes.string.isRequired,
 };

src/components/editLink/style.scss

@@ -1,11 +1,17 @@
 .edit {
   align-items: center;
-  color: var(--main-color);
+  background: var(--main-color);
+  border: 0;
+  color: var(--main-bg-color);
   display: flex;
   float: right;
+  font-size: 12px;
   font-weight: 700;
+  margin: 0 0 10px 5px;
+  padding: 2.5px 2px 2.5px 7px;
   text-align: right;
   text-decoration: none;
+  text-transform: uppercase;
 
   i {
     font-size: .98em;

src/components/footer/style.scss

@@ -24,6 +24,6 @@
   }
 
   .active {
-    color: var(--main-blue);
+    color: var(--main-purple);
   }
 }

src/components/formItem/style.scss

@@ -1,30 +1,91 @@
 .customFormfieldWrap {
-  border-bottom: .5px solid var(--main-color);
-  border-top: .5px solid var(--main-color);
+  background: var(--main-light-color);
+  // border-bottom: .5px solid var(--main-color);
+  // border-top: .5px solid var(--main-color);
+  border: 0;
   display: flex;
   flex-direction: column;
   margin: 10px 0;
   padding: 14px 16px;
 
   label {
-    color: var(--main-color);
+    color: var(--main-blue);
     font-size: 16px;
     font-weight: 700;
     margin: 5px 0 4px;
   }
-}
 
-.select {
-  background: var(--input-color);
-  border: 1px solid var(--main-color);
-  border-radius: 0;
-  font-size: 15px;
-  margin-bottom: 5px;
-  padding: 10px 5px;
+  select {
+    background: var(--input-color);
+    // border: 1px solid var(--main-color);
+    border: 0;
+    border-radius: 0;
+    display: inline-block;
+    font-size: 15px;
+    line-height: 1.5em;
+    padding: 0.5em 3.5em 0.5em 1em;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  .select {
+    background-image:
+      linear-gradient(45deg, transparent 50%, var(--main-color) 50%),
+      linear-gradient(135deg, var(--main-color) 50%, transparent 50%),
+      linear-gradient(to right, var(--main-color), var(--main-color));
+    background-position:
+      calc(100% - 20px) calc(1em + 2px),
+      calc(100% - 15px) calc(1em + 2px),
+      calc(100% - 2.5em) 0.5em;
+    background-size:
+      5px 5px,
+      5px 5px,
+      1px 1.5em;
+    background-repeat: no-repeat;
+  }
+
+  .select:focus {
+    background-image:
+      linear-gradient(45deg, var(--main-color) 50%, transparent 50%),
+      linear-gradient(135deg, transparent 50%, var(--main-color) 50%),
+      linear-gradient(to right, var(--main-color), var(--main-color));
+    background-position:
+      calc(100% - 15px) 1em,
+      calc(100% - 20px) 1em,
+      calc(100% - 2.5em) 0.5em;
+    background-size:
+      5px 5px,
+      5px 5px,
+      1px 1.5em;
+    background-repeat: no-repeat;
+    border-color: var(--main-color);
+    outline: 0;
+  }
+
+  select:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 var(--main-color);
+  }
 }
 
+// .select {
+//   background: var(--input-color);
+//   // border: 1px solid var(--main-color);
+//   border: 0;
+//   border-radius: 0;
+//   font-size: 15px;
+//   margin-bottom: 5px;
+//   padding: 10px 5px;
+// }
+
 .addedInputField {
-  border: 1px solid var(--main-color);
+  // border: 1px solid var(--main-color);
+  border: 0;
   border-radius: 0;
   font-size: 15px;
   margin-top: 0;

src/components/header/index.js

@@ -3,7 +3,7 @@ import { Link } from 'preact-router/match';
 import { PropTypes } from 'preact-compat';
 import style from './style';
 
-import arrow from '../../assets/black/arrow.svg';
+import arrow from '../../assets/white/arrow.svg';
 
 export default class Header extends Component {
   render() {

src/components/item/index.js

@@ -5,7 +5,7 @@ import { Link } from 'preact-router/match';
 import style from './style';
 
 // Import images
-import mediaIcon from '../../assets/black/media.png';
+import mediaIcon from '../../assets/black/media.svg';
 import measurementIcon from '../../assets/black/measurements.svg';
 
 function defineImgSrc(details) {

src/components/item/style.scss

@@ -1,7 +1,7 @@
 .itemLinkWrap {
   align-items: center;
-  background-color: var(--main-bg-color);
-  border: .5px solid var(--main-color);
+  background-color: var(--main-light-color);
+  border: 0;
   display: flex;
   height: 50px;
   margin: 2.5px 0;
@@ -12,12 +12,13 @@
 .icon {
   display: inline-block;
   opacity: .6;
-  padding: 0 15px 0 10px;
+  padding: 0 25px 0 10px;
 }
 
 .date {
   display: inline-block;
   font-size: 13px;
+  font-weight: 700;
   width: 30%;
 }
 
@@ -38,10 +39,12 @@
 }
 
 .uploadStatText {
+  color: var(--main-blue);
   font-size: 13px;
 }
 
 .uploadStat {
-  font-size: 13px;
+  color: var(--main-blue);
+  font-size: 15px;
   padding: 0 7.5px;
 }

src/components/license/index.js

@@ -0,0 +1,15 @@
+import { Component } from 'preact';
+import style from './style';
+
+export default class LicenseInfo extends Component {
+  render() {
+    return (
+      <div class={style.licenseWrapper}>
+        <p class={style.license}>
+          The code of this project is licensed under the terms of the GNU AGPLv3 license.
+          <a href="https://github.com/webgem-xyz/UVA-React#license-information">More info.</a>
+        </p>
+      </div>
+    );
+  }
+}

src/components/license/style.scss

@@ -0,0 +1,18 @@
+.licenseWrapper {
+  background: var(--input-color);
+  bottom: 0;
+  display: block;
+  left: 0;
+  position: absolute;
+}
+
+.license {
+  font-size: 13px;
+  text-align: center;
+
+  a {
+    color: var(--main-blue);
+    font-size: 13px;
+    text-decoration: none;
+  }
+}

src/components/linkRequestButton/style.scss

@@ -3,11 +3,11 @@
   justify-content: flex-end;
 }
 .linkRequest {
-  background: none;
-  border: 1px solid var(--main-color);
+  background: var(--main-color);
+  border: 0;
   border-radius: 0;
-  color: var(--main-color);
-  font-size: 16px;
+  color: var(--main-bg-color);
+  font-size: 14px;
   font-weight: 700;
   margin: 15px 0;
   outline: 0;

src/components/locationPopup/style.scss

@@ -36,15 +36,15 @@
   justify-content: space-between;
 
   input {
-    background: none;
+    background: var(--main-color);
     border: 0;
     border-radius: 0;
-    color: var(--main-color);
-    font-size: 15px;
+    color: var(--main-light-color);
+    font-size: 12px;
     font-weight: 700;
-    margin: 0;
+    margin: 10px 0 0;
     outline: 0;
-    padding: 15px 0 5px;
+    padding: 7px;
     text-transform: uppercase;
   }
 }

src/components/map/index.js

@@ -24,7 +24,7 @@ export default class MapComponent extends Component {
         <div class={style.map}>
           <Gmaps
             width="100%"
-            height="150px"
+            height="125px"
             zoom={4}
             lat={Number(latitude)}
             lng={Number(longitude)}

src/components/map/style.scss

@@ -1,15 +1,22 @@
 .location {
-  border: 1px solid var(--main-color);
+  // border: 1px solid var(--main-color);
+  border: 0;
   padding: 10px;
+
+  p {
+    color: var(--main-color);
+    font-weight: 700;
+  }
 }
 
 .map {
-  border: 1px solid var(--main-color);
+  // border: 1px solid var(--main-color);
+  border: 0;
   margin-bottom: 5px;
 }
 
 .label {
-  color: var(--main-color);
+  color: var(--main-blue);
   font-size: 16px;
   font-weight: 700;
   margin: 0 0 5px;

src/components/measurementRow/style.scss

@@ -1,7 +1,8 @@
 .row {
   align-items: baseline;
   background: var(--main-bg-color);
-  border: 1px solid var(--main-color);
+  // border: 1px solid var(--main-color);
+  border: 0;
   display: flex;
   flex: 1;
   flex-direction: row;
@@ -18,7 +19,7 @@
 }
 
 .label {
-  color: var(--main-color);
+  color: var(--main-blue);
   font-size: 16px;
   font-weight: 700;
 }

src/components/notification/style.scss

@@ -1,6 +1,8 @@
 .notificationWrapper {
   align-items: center;
-  border: 1px solid var(--main-color);
+  background: var(--main-light-color);
+  // border: 1px solid var(--main-color);
+  border: 0;
   color: var(--main-color);
   display: flex;
   justify-content: space-between;
@@ -9,13 +11,15 @@
   text-decoration: none;
 
   p {
+    color: var(--main-blue);
     display: inline-block;
     font-size: 14px;
     font-weight: 700;
     margin: 0;
   }
 
   p:nth-child(2) {
+    color: var(--main-color);
     font-weight: 400;
     white-space: nowrap;
   }

src/components/removeMeasurementButton/index.js

@@ -11,7 +11,8 @@ export default class RemoveMeasurementButton extends Component {
         }}
         class={style.removeButton}
       >
-        Delete {this.props.label}
+        Delete
+        <i class="material-icons">delete</i>
       </button>
     );
   }