white navigation buttons for swiper

Author: jthrilly

config.xml

@@ -65,7 +65,7 @@
     <plugin name="cordova-plugin-wkwebview-engine" spec="^1.1.4" />
     <plugin name="cordova-plugin-x-socialsharing" spec="^5.2.1" />
     <plugin name="cordova-plugin-zeroconf" spec="^1.3.3" />
+    <plugin name="cordova-plugin-device" spec="^2.0.2" />
     <engine name="android" spec="^7.1.0" />
     <engine name="ios" spec="^4.5.4" />
-    <plugin name="cordova-plugin-device" spec="^2.0.2" />
 </widget>

package.json

@@ -227,4 +227,4 @@
             "cordova-plugin-device": {}
         }
     }
-}
+}

src/components/Setup/ProtocolCard.js

@@ -19,7 +19,7 @@ const ProtocolCard = ({ protocol, selectProtocol, className, size }) => {
     <div className={`${sized('protocol-card')} ${className}`} onClick={() => selectProtocol(protocol)}>
       <Icon className="protocol-card__icon" name="add-a-screen" />
       <div className="protocol-card__labels">
-        <h3 className={sized('protocol-card__name')}>{protocol.name}</h3>
+        <h2 className={sized('protocol-card__name')}>{protocol.name}</h2>
         <p className="protocol-card__version">{protocol.version}</p>
       </div>
     </div>

src/containers/Setup/ProtocolList.js

@@ -46,8 +46,8 @@ class ProtocolList extends Component {
         clickable: true,
       },
       navigation: {
-        nextEl: '.swiper-button-next',
-        prevEl: '.swiper-button-prev',
+        nextEl: '.swiper-button-next.swiper-button-white',
+        prevEl: '.swiper-button-prev.swiper-button-white',
       },
       loop: true,
       shouldSwiperUpdate: true,

src/styles/components/_protocol-card.scss

@@ -23,6 +23,9 @@
     // TODO: does this deserve its own svg?
     margin: -6px -40px 0;
 
+    position: relative;
+    right: -15px;
+
     .cls-1,
     .cls-2 {
       display: none;

src/styles/containers/_session-list.scss

@@ -1,6 +1,10 @@
 .session-list {
   &--empty {
-    padding: spacing(huge) 0;
+    padding: spacing(huge);
+    border-radius: 15px;
+    background: palette('modal-main-panel');
+    width: 80%;
+    margin: 0 auto;
 
     .session-list__header {
       text-align: center;

src/styles/containers/_setupScreen.scss

@@ -1,7 +1,7 @@
 .setup {
   $active-border-color: rgba(255, 255, 255, .5);
   --active-border-color: $active-border-color;
-  --setup-header-height: 30vh;
+  --setup-header-height: 23vh;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -14,6 +14,7 @@
     height: var(--setup-header-height);
     justify-content: center;
     text-align: center;
+    margin-bottom: 20px;
   }
 
   .header-content {
@@ -46,6 +47,8 @@
     flex: 1 1 auto;
     height: calc(100vh - var(--setup-header-height));
     padding-bottom: 20vh;
+    display: flex;
+    align-items: center;
 
     .scrollable {
       height: 100%; // TODO: should this be on component?