update icons and design

assets/scss/range-interval.scss

@@ -11,6 +11,7 @@
 
   @media screen and (min-width: $breakpoint) {
     padding: $app-padding / 2 1rem;
+    padding-left: 0.4rem;
     display: flex;
     align-items: center;
   }

components/Vis/IconDiscreteTime.vue

@@ -0,0 +1,50 @@
+<template>
+  <svg 
+    width="66" 
+    height="65" 
+    viewBox="0 0 66 65" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <rect 
+      width="66" 
+      height="65" 
+      :fill="fillColour"
+    />
+
+    <path 
+      d="M0 9L11.7534 10.8586L22.6027 18.2929L33.4521 14.1111L44.3014 18.2929L55.1507 10.8586L66 14.1111V55H0V9Z" 
+      :fill="areaColour"
+    />
+    <path 
+      d="M0 24.5385L11.3014 23L22.1507 32.3846L33 24.5385L44.3014 27.9231L55.1507 32.3846L66 23V55H0V24.5385Z" 
+      :fill="highlightColour"
+    />
+    <path 
+      d="M0 48.8173L11.3014 48L22.1507 52.9856L33 48.8173L44.3014 50.6154L55.1507 52.9856L66 48V65H0V48.8173Z" 
+      :fill="areaColour"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    fillColour() {
+      return this.selected ? '#C74523' : '#F8F8F8'
+    },
+    areaColour() {
+      return this.selected ? '#AF7C7C' : '#c3c3c3'
+    },
+    highlightColour() {
+      return this.selected ? '#8D2B11' : '#8D2B11'
+    }
+  }
+}
+</script>

pages/energy/_region/index.vue

@@ -1,7 +1,33 @@
 <template>
   <div class="energy-region">
 
-    <div style="display: flex; align-items: center;">
+    <div class="data-view-options">
+
+      <div class="dashboard-btns">
+
+        <button 
+          class="dashboard-view-btn"
+          style=""
+          v-tooltip="dashboardView === 'discrete-time' ? '' : 'Switch to discrete time view'"
+          :class="{ 'is-selected': dashboardView === 'discrete-time' }"
+          @click="() => handleViewChange('discrete-time')">
+          <span class="icon">
+            <IconDiscreteTime />
+          </span>
+        </button>
+
+        <button 
+          class="dashboard-view-btn"
+          style=""
+          v-tooltip="dashboardView === 'time-of-day' ? '' : 'Switch to time of day view'"
+          :class="{ 'is-selected': dashboardView === 'time-of-day' }"
+          @click="() => handleViewChange('time-of-day')">
+          <span class="icon">
+            <IconTimeOfDay />
+          </span>
+        </button>
+
+      </div>
 
       <data-options-bar
         v-if="dashboardView === 'discrete-time'"
@@ -29,20 +55,7 @@
         @intervalChange="handleIntervalChange"
       />
 
-      <div
-        class="field has-addons" 
-        style="margin-bottom: 0;">
-        <button 
-          class="button is-small"
-          style="border-radius: 20px;"
-          v-tooltip="dashboardView === 'time-of-day' ? 'Switch to discrete time view' : 'Switch to time of day view'"
-          :class="{ 'is-selected': dashboardView === 'time-of-day' }"
-          @click="handleViewChange">
-          <span class="icon is-small">
-            <IconTimeOfDay :selected="dashboardView === 'time-of-day'" />
-          </span>
-        </button>
-      </div>
+
 
     </div>
 
@@ -147,6 +160,7 @@ import SummarySection from '@/components/Energy/SummarySection.vue'
 import Divider from '@/components/Divider.vue'
 import TimeOfDaySection from '~/components/Charts/TimeOfDay/index.vue'
 import IconTimeOfDay from '~/components/Vis/IconTimeOfDay.vue'
+import IconDiscreteTime from '~/components/Vis/IconDiscreteTime.vue'
 
 const minTableWidth = 420
 
@@ -198,7 +212,8 @@ export default {
     SummarySection,
     Divider,
     TimeOfDaySection,
-    IconTimeOfDay
+    IconTimeOfDay,
+    IconDiscreteTime
   },
 
   data() {
@@ -546,21 +561,20 @@ export default {
     handleFilterPeriodChange(period) {
       this.setFilterPeriod(period)
     },
-    handleViewChange() {
-      if (this.dashboardView === 'time-of-day') {
-        this.dashboardView = 'discrete-time'
-        this.handleQueryChange(this.query || { range: '7d', interval: '30m' })
-      } else {
-        // if it's not 7D, switch to 7D and and then set view
-        this.dashboardView = 'time-of-day'
+    handleViewChange(view) {
+      this.dashboardView = view
 
+      if (view === 'time-of-day') {
+        // if it's not 7D, switch to 7D and and then set view
         if (this.range !== '7D') {
           this.setRange('7D')
           this.setInterval('30m')
           this.handleQueryChange({ range: '7d', interval: '30m' })
         }  else {
           this.handleQueryChange(this.query || { range: '7d', interval: '30m' })
         }
+      } else {
+        this.handleQueryChange(this.query || { range: '7d', interval: '30m' })
       }
     },
 
@@ -609,6 +623,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$breakpoint: 769px;
+
 .vis-table-container {
   user-select: none;
   transition: all 1s ease;
@@ -617,4 +633,64 @@ export default {
   pointer-events: none;
   user-select: none;
 }
+
+.data-view-options {
+  display: flex;
+  gap: 2px;
+  padding-left: 0.5rem;
+
+  & > * {
+    width: 100%;
+  }
+
+  @media screen and (min-width: $breakpoint) {
+    display: flex;
+    align-items: center;
+    margin-left: 1rem;
+    padding-left: 0;
+  }
+}
+
+.dashboard-btns {
+  width: auto;
+  margin-bottom: 0;
+  border-radius: 0px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  height: 55px;
+  padding: 2px;
+  background-color: rgba(255, 255, 255, 0.5);
+
+  @media screen and (min-width: $breakpoint) {
+    flex-direction: row;
+    height: 30px;
+    border-radius: 4px;
+  }
+}
+
+.dashboard-view-btn {
+  cursor: pointer;
+  border: none;
+  border-radius: 2px;
+  border: 1px solid transparent;
+
+  .icon {
+    padding: 2px;
+    width: 20px;
+    height: 20px;
+    align-items: center;
+    display: flex;
+    pointer-events: none;
+  }
+
+  &.is-selected {
+    border: 1px solid #bbb;
+    background-color: #ddd;
+  }
+
+  &:hover {
+    background-color: #ddd;
+  }
+}
 </style>