Merge pull request #182 from hivecom/events-detail-visual-update

Update public events UI

Author: dolanske

app/assets/index.scss

@@ -13,6 +13,9 @@
   --dark-color-bg: #111;
   --dark-color-fg: #0a0a0a;
   --dark-color-accent: #a7fc2f;
+  --dark-color-bg-accent-raised: #69b103;
+  --dark-color-bg-accent-lowered: #4e8502;
+
   --dark-color-text: #fff;
   --dark-color-text-lighter: rgb(110, 110, 110);
   --dark-color-border-weak: rgb(24, 24, 24);
@@ -21,6 +24,8 @@
   --light-color-bg: #eee;
   --light-color-fg: #ddd;
   --light-color-accent: #69883e;
+  --light-color-bg-accent-raised: #7ea34a;
+  --light-color-bg-accent-lowered: #93be57;
   --light-color-text: #000;
 
   --navbar-offset: 64px;
@@ -41,6 +46,10 @@
 
 :root:not(.dark) {
   --banner-filter: invert(1);
+
+  .vui-progress {
+    background-color: var(--color-border) !important;
+  }
 }
 
 html,

app/components/Admin/Events/EventTable.vue

@@ -296,7 +296,7 @@ onBeforeMount(fetchEvents)
           <span class="text-color-lighter text-s" :class="{ 'text-center': isBelowMedium }">Total —</span>
 
           <Flex gap="xs" :wrap="isBelowMedium" :x-center="isBelowMedium" expand>
-            <CalendarButtons />
+            <CalendarButtons is-admin />
 
             <!-- Create event button -->
             <Button
@@ -347,7 +347,7 @@ onBeforeMount(fetchEvents)
         </span>
 
         <Flex :gap="isBelowMedium ? 's' : 'xs'" :wrap="isBelowMedium" :x-center="isBelowMedium" :expand="isBelowMedium">
-          <CalendarButtons />
+          <CalendarButtons is-admin />
 
           <!-- Create event button -->
           <Button

app/components/Events/CalendarButtons.vue

@@ -18,15 +18,20 @@ interface CalendarButtonsProps {
    * Show labels on buttons
    */
   showLabels?: boolean
+  /**
+   * Whether this UI is shown in the admin dashboard
+   */
+  isAdmin?: boolean
 }
 
-withDefaults(defineProps<CalendarButtonsProps>(), {
+const props = withDefaults(defineProps<CalendarButtonsProps>(), {
   size: 'm',
   variant: 'gray',
   showLabels: false,
 })
 
-const isBelowMedium = useBreakpoint('<m')
+const isBelowMediumBreakpoint = useBreakpoint('<m')
+const isBelowMedium = computed(() => isBelowMediumBreakpoint.value && !!props.isAdmin)
 </script>
 
 <template>
@@ -39,6 +44,7 @@ const isBelowMedium = useBreakpoint('<m')
       :size="size"
       :href="constants.EVENT_CALENDAR.GOOGLE"
       target="_blank"
+      :square="!showLabels && !isBelowMedium"
       rel="noreferrer"
       data-title-bottom="Add to your Google Calendar"
     >
@@ -55,6 +61,7 @@ const isBelowMedium = useBreakpoint('<m')
       :expand="isBelowMedium"
       :variant="variant"
       :size="size"
+      :square="!showLabels && !isBelowMedium"
       :href="constants.EVENT_CALENDAR.ICAL"
       rel="noreferrer"
       data-title-bottom="Export ICAL"