Updated grid pattern; added basic dashboard widget styling (#118)

awslabs · Jun 8, 2022 · dc24657 · dc24657
1 parent 076f5c2
commit dc24657
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/packages/dashboard/src/components/iot-dashboard/cell.png b/packages/dashboard/src/components/iot-dashboard/cell.png
diff --git a/packages/dashboard/src/components/iot-dashboard/cell.svg b/packages/dashboard/src/components/iot-dashboard/cell.svg
diff --git a/...ages/dashboard/src/components/iot-dashboard/iot-dashboard-widget/iot-dashboard-widget.css b/...ages/dashboard/src/components/iot-dashboard/iot-dashboard-widget/iot-dashboard-widget.css
@@ -1,4 +1,12 @@
+:root {
+  --primary-blue: #0972D3;
+  --dark-gray: #9BA7B6;
+  --light-gray: #c2c2c2;
+}
+
 .widget {
+  border: 2px solid var(--dark-gray);
+  border-radius: 8px;
   background-color: white;
   font-weight: bold;
   height: 100%;
@@ -7,12 +15,13 @@
 }
 
 .widget:hover {
+  border-color: var(--primary-blue);
   cursor: all-scroll;
-  background-color: #ececec;
 }
 
 .widget-selected {
-  background-color: #a9bdcc !important;
+  background-color: #e7e6e6 !important;
+  border-color: var(--primary-blue);
   font-weight: bold;
 }
 
@@ -23,6 +32,5 @@
   align-items: center;
   width: 100%;
   height: 100%;
-  border: 2px solid black;
   box-sizing: border-box;
 }
diff --git a/packages/dashboard/src/components/iot-dashboard/iot-dashboard.css b/packages/dashboard/src/components/iot-dashboard/iot-dashboard.css
@@ -17,8 +17,10 @@
 .grid-image {
   z-index: -999999999;
   position: absolute;
+  right: 2px;
+  top: -2px;
   background-position: top left;
-  background-image: url('./cell.png');
+  background-image: url('./cell.svg');
   background-repeat: repeat;
   width: 100%;
   height: 100%;